[AAE-2107] Move e2e to Unit test (#5535)

* [AAE-2107] Move e2e to Unit test

* * fixed namings

* * more unit test added

* * minor changes
This commit is contained in:
Eugenio Romano
2020-03-05 16:47:59 +00:00
committed by GitHub
parent 0217f0c788
commit a70883378a
19 changed files with 809 additions and 772 deletions

View File

@@ -23,17 +23,26 @@ import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { CardViewDateItemComponent } from './card-view-dateitem.component';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { AppConfigService } from '@alfresco/adf-core';
describe('CardViewDateItemComponent', () => {
let fixture: ComponentFixture<CardViewDateItemComponent>;
let component: CardViewDateItemComponent;
let appConfigService: AppConfigService;
setupTestBed({
imports: [CoreTestingModule]
});
beforeEach(() => {
appConfigService = TestBed.get(AppConfigService);
appConfigService.config.dateValues = {
defaultDateFormat: 'shortDate',
defaultDateTimeFormat: 'M/d/yy, h:mm a',
defaultLocale: 'uk'
};
fixture = TestBed.createComponent(CardViewDateItemComponent);
component = fixture.componentInstance;
component.property = new CardViewDateItemModel({
@@ -46,8 +55,10 @@ describe('CardViewDateItemComponent', () => {
});
});
afterEach(() => {
fixture.destroy();
afterEach(() => fixture.destroy());
it('should pick date format from appConfigService', () => {
expect(component.dateFormat).toEqual('shortDate');
});
it('should render the label and value', () => {
@@ -153,6 +164,7 @@ describe('CardViewDateItemComponent', () => {
component.property.editable = true;
fixture.detectChanges();
expect(component.isEditable()).toBe(false);
const datePicker = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-${component.property.key}"]`));
const datePickerToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-${component.property.key}"]`));
expect(datePicker).toBeNull('Datepicker should NOT be in DOM');
@@ -206,101 +218,111 @@ describe('CardViewDateItemComponent', () => {
);
}));
it('should render the clear icon in case of displayClearAction:true', () => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
});
it('should not render the clear icon in case of property value empty', () => {
component.editable = true;
component.property.editable = true;
component.property.value = null;
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should not render the clear icon in case of displayClearAction:false', () => {
component.editable = true;
component.property.editable = true;
component.displayClearAction = false;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should remove the property value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
() => {
expect(component.property.value).toBeNull();
}
);
}));
it('should remove the property default value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
() => {
expect(component.property.default).toBeNull();
}
);
}));
it('should remove actual and default value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
() => {
expect(component.property.value).toBeNull();
expect(component.property.default).toBeNull();
}
);
}));
it('should be possible update a date/date-time', async(() => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
component.property.key = 'fake-key';
component.property.value = 'Jul 10 2017';
const expectedDate = moment('Jul 10 2018', 'MMM DD YY');
fixture.detectChanges();
fixture.whenStable().then(() => {
describe('clear icon', () => {
it('should render the clear icon in case of displayClearAction:true', () => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
expect(element).toBeDefined();
expect(element.innerText).toEqual('Jul 10, 2017');
component.onDateChanged({ value: expectedDate });
fixture.detectChanges();
fixture.whenStable().then(() => expect(component.property.value).toEqual(expectedDate.toDate()));
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
});
}));
it('should not render the clear icon in case of property value empty', () => {
component.editable = true;
component.property.editable = true;
component.property.value = null;
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should not render the clear icon in case of displayClearAction:false', () => {
component.editable = true;
component.property.editable = true;
component.displayClearAction = false;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should remove the property value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
() => {
expect(component.property.value).toBeNull();
}
);
}));
it('should remove the property default value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
() => {
expect(component.property.default).toBeNull();
}
);
}));
it('should remove actual and default value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.changed).toEqual({ dateKey: null });
disposableUpdate.unsubscribe();
}
);
component.onDateClear();
fixture.whenStable().then(() => {
expect(component.property.value).toBeNull();
expect(component.property.default).toBeNull();
});
}));
});
it('should be possible update a date-time', async () => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017 00:01:00';
component.property.key = 'fake-key';
component.dateFormat = 'M/d/yy, h:mm a';
component.property.value = 'Jul 10 2017 00:01:00';
const expectedDate = moment('Jul 10 2018', 'MMM DD YY h:m:s');
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
expect(element).toBeDefined();
expect(element.innerText).toEqual('Jul 10, 2017');
component.onDateChanged({ value: expectedDate });
fixture.detectChanges();
expect(component.property.value).toEqual(expectedDate.toDate());
});
});