inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6140] reduce access to internal material classes (#9053)

Browse Source 
* cleanup login (demo shell)

* cleanup e2e from useless calls

* [ci:force] cleanup e2e from useless calls

* [ci:force] cleanup e2e from useless calls

* [ci:force] improved uploader selectors

* [ci:force] remove useless selectors when automation id provided

* [ci:force] improved tests and selectors

* [ci:force] improved tests and selectors

* [ci:force] improved tests and selectors

* [ci:force] improved tests and selectors

* [ci:force] improved tests and selectors

* [ci:force] improved tests and selectors

* [ci:force] switch edit task filter to angular harness

* [ci:force] switch edit process filter to angular harness

* [ci:force] switch search chip list to angular harness

* [ci:force] switch search panel to angular harness

* [ci:force] switch search radio to angular harness

* [ci:force] switch search text to angular harness

* [ci:force] search logical filter

* [ci:force] search form component

* [ci:force] search filter container

* [ci:force] fix viewer test

* [ci:force] search facet chip harness

* [ci:force] search facet chip harness

* [ci:force] dropdown breadcrumb

* [ci:force] search check list

* [ci:force] folder dialog

* [ci:force] search filter component

* [ci:force] json cell

* [ci:force] amount widget

* [ci:force] checkbox widget

* [ci:force] multiline-text widget

* [ci:force] number widget

* [ci:force] text widget

* [ci:force] card view array item

* add permission dialog

* permission container component

* permission list component

* card view components

* search widget chip

* search facet chip

* edit service task filter

* card view components

* sites dropdown

* share dialog

* header component

* datetime widget

* remove comments
This commit is contained in:
Denys Vuika
2023-11-03 10:05:34 +00:00
committed by GitHub
parent 9278d9296f
commit 93fd0bec6c
62 changed files with 2335 additions and 2660 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
View File

@@ -23,8 +23,14 @@ import { CardViewArrayItemModel, CardViewArrayItem } from '../../models/card-vie
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MatIconHarness } from '@angular/material/icon/testing';
describe('CardViewArrayItemComponent', () => {
let loader: HarnessLoader;
let component: CardViewArrayItemComponent;
let fixture: ComponentFixture<CardViewArrayItemComponent>;
let service: CardViewUpdateService;
@@ -52,6 +58,7 @@ describe('CardViewArrayItemComponent', () => {
service = TestBed.inject(CardViewUpdateService);
component = fixture.componentInstance;
component.property = new CardViewArrayItemModel(mockDefaultProps);
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -69,23 +76,25 @@ describe('CardViewArrayItemComponent', () => {
fixture.detectChanges();
});
it('should call service on chip click', () => {
const chip: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"]');
chip.dispatchEvent(new Event('click'));
it('should call service on chip click', async () => {
const chip = await loader.getHarness(MatChipHarness);
await (await chip.host()).click();
expect(serviceSpy).toHaveBeenCalled();
});
it('should call service on edit icon click', () => {
const editIcon: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-array-item-clickable-icon-array"]');
editIcon.dispatchEvent(new Event('click'));
it('should call service on edit icon click', async () => {
const button = await loader.getHarness(
MatButtonHarness.with({ selector: `[data-automation-id="card-array-item-clickable-icon-array"]` })
);
await button.click();
expect(serviceSpy).toHaveBeenCalled();
});
it('should NOT call service on chip list container click', () => {
const chipListContainer: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-list-container"]');
chipListContainer.dispatchEvent(new Event('click'));
it('should NOT call service on chip list container click', async () => {
const chipList = await loader.getHarness(MatChipListHarness);
await (await chipList.host()).click();
expect(serviceSpy).not.toHaveBeenCalled();
});
@@ -116,7 +125,7 @@ describe('CardViewArrayItemComponent', () => {
expect(chip2.innerText).toEqual('Lionel Messi');
});
it('should render chip with defined icon', () => {
it('should render chip with defined icon', async () => {
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
editable: true
@@ -125,15 +134,16 @@ describe('CardViewArrayItemComponent', () => {
const chipListContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const chip1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] span');
const chip1Icon = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] mat-icon');
const chip1Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Zlatan"]` }));
const chip2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] span');
const chip2Icon = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] mat-icon');
const chip2Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Lionel Messi"]` }));
expect(chipListContainer).not.toBeNull();
expect(chip1.innerText).toEqual('Zlatan');
expect(chip1Icon.innerText).toEqual('person');
expect(await chip1Icon.getName()).toBe('person');
expect(chip2.innerText).toEqual('Lionel Messi');
expect(chip2Icon.innerText).toEqual('group');
expect(await chip2Icon.getName()).toBe('group');
});
it('should render defined icon if clickable set to true', () => {
@@ -147,41 +157,41 @@ describe('CardViewArrayItemComponent', () => {
expect(editIcon.innerText).toBe('edit');
});
it('should not render defined icon if clickable set to false', () => {
it('should not render defined icon if clickable set to false', async () => {
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
clickable: false
});
fixture.detectChanges();
const editIcon = fixture.nativeElement.querySelector('[data-automation-id="card-array-item-clickable-icon-array"]');
expect(editIcon).toBeNull();
const editExists = await loader.hasHarness(
MatButtonHarness.with({ selector: `[data-automation-id="card-array-item-clickable-icon-array"]` })
);
expect(editExists).toBe(false);
});
it('should render all values if noOfItemsToDisplay is not defined', () => {
it('should render all values if noOfItemsToDisplay is not defined', async () => {
fixture.detectChanges();
const chipListContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
const chip = fixture.nativeElement.querySelectorAll('mat-chip');
const chipList = await loader.getHarness(MatChipListHarness);
const chips = await chipList.getChips();
expect(chipListContainer).not.toBeNull();
const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
expect(moreElement).toBeNull();
expect(chip.length).toBe(4);
expect(chips.length).toBe(4);
});
it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', () => {
it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', async () => {
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
noOfItemsToDisplay: 2
});
fixture.detectChanges();
const chipListContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const chip = fixture.debugElement.queryAll(By.css('mat-chip'));
const chipList = await loader.getHarness(MatChipListHarness);
const chips = await chipList.getChips();
expect(chipListContainer).not.toBeNull();
expect(chip.length).toBe(3);
expect(chip[2].nativeElement.innerText).toBe('2 CORE.CARDVIEW.MORE');
expect(chips.length).toBe(3);
expect(await chips[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
});
});
});

48
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -26,19 +26,19 @@ import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.m
import { TranslateModule } from '@ngx-translate/core';
import { AppConfigService } from '@alfresco/adf-core';
import { MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness } from '@angular/material/chips/testing';
describe('CardViewDateItemComponent', () => {
let loader: HarnessLoader;
let fixture: ComponentFixture<CardViewDateItemComponent>;
let component: CardViewDateItemComponent;
let appConfigService: AppConfigService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule]
});
appConfigService = TestBed.inject(AppConfigService);
appConfigService.config.dateValues = {
@@ -57,6 +57,8 @@ describe('CardViewDateItemComponent', () => {
format: '',
editable: false
});
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => fixture.destroy());
@@ -235,7 +237,9 @@ describe('CardViewDateItemComponent', () => {
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
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');
});
@@ -245,7 +249,9 @@ describe('CardViewDateItemComponent', () => {
component.property.value = null;
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
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');
});
@@ -256,7 +262,9 @@ describe('CardViewDateItemComponent', () => {
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
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');
});
@@ -341,12 +349,12 @@ describe('CardViewDateItemComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
expect(valueChips).not.toBeNull();
expect(valueChips.length).toBe(3);
expect(valueChips[0].nativeElement.innerText.trim()).toBe('Jul 10, 2017');
expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017');
expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017');
const chips = await loader.getAllHarnesses(MatChipHarness);
expect(chips.length).toBe(3);
expect(await chips[0].getText()).toBe('Jul 10, 2017');
expect(await chips[1].getText()).toBe('Jul 11, 2017');
expect(await chips[2].getText()).toBe('Jul 12, 2017');
});
it('should render chips for multivalue datetimes when chips are enabled', async () => {
@@ -360,11 +368,11 @@ describe('CardViewDateItemComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
expect(valueChips).not.toBeNull();
expect(valueChips.length).toBe(3);
expect(valueChips[0].nativeElement.innerText.trim()).toBe('Jul 10, 2017, 0:01');
expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017, 0:01');
expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017, 0:01');
const chips = await loader.getAllHarnesses(MatChipHarness);
expect(chips.length).toBe(3);
expect(await chips[0].getText()).toBe('Jul 10, 2017, 0:01');
expect(await chips[1].getText()).toBe('Jul 11, 2017, 0:01');
expect(await chips[2].getText()).toBe('Jul 12, 2017, 0:01');
});
});

109
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
View File

@@ -16,7 +16,6 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OverlayContainer } from '@angular/cdk/overlay';
import { By } from '@angular/platform-browser';
import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
import { CardViewSelectItemComponent } from './card-view-selectitem.component';
@@ -24,14 +23,25 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
import { of } from 'rxjs';
import { TranslateModule } from '@ngx-translate/core';
import { AppConfigService } from '../../../app-config/app-config.service';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
describe('CardViewSelectItemComponent', () => {
let loader: HarnessLoader;
let fixture: ComponentFixture<CardViewSelectItemComponent>;
let component: CardViewSelectItemComponent;
let overlayContainer: OverlayContainer;
let appConfig: AppConfigService;
const mockData = [{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }, { key: 'three', label: 'Three' }];
const mockDataNumber = [{ key: 1, label: 'One' }, { key: 2, label: 'Two' }, { key: 3, label: 'Three' }];
const mockData = [
{ key: 'one', label: 'One' },
{ key: 'two', label: 'Two' },
{ key: 'three', label: 'Three' }
];
const mockDataNumber = [
{ key: 1, label: 'One' },
{ key: 2, label: 'Two' },
{ key: 3, label: 'Three' }
];
const mockDefaultProps = {
label: 'Select box label',
value: 'two',
@@ -49,16 +59,13 @@ describe('CardViewSelectItemComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule]
});
fixture = TestBed.createComponent(CardViewSelectItemComponent);
component = fixture.componentInstance;
overlayContainer = TestBed.inject(OverlayContainer);
appConfig = TestBed.inject(AppConfigService);
component.property = new CardViewSelectItemModel(mockDefaultProps);
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -90,7 +97,7 @@ describe('CardViewSelectItemComponent', () => {
expect(selectBox).toBeNull();
});
it('should be possible edit selectBox item', () => {
it('should be possible edit selectBox item', async () => {
component.property = new CardViewSelectItemModel({
...mockDefaultProps,
editable: true
@@ -102,19 +109,18 @@ describe('CardViewSelectItemComponent', () => {
expect(component.value).toEqual('two');
expect(component.isEditable()).toBe(true);
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
fixture.detectChanges();
const optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
expect(optionsElement.length).toEqual(4);
optionsElement[1].dispatchEvent(new Event('click'));
fixture.detectChanges();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const options = await select.getOptions();
expect(options.length).toEqual(4);
await options[1].click();
expect(component.value).toEqual('one');
});
it('should be possible edit selectBox item with numbers', () => {
it('should be possible edit selectBox item with numbers', async () => {
component.property = new CardViewSelectItemModel({
...mockDefaultNumbersProps,
editable: true
@@ -126,19 +132,19 @@ describe('CardViewSelectItemComponent', () => {
expect(component.value).toEqual(2);
expect(component.isEditable()).toBe(true);
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
fixture.detectChanges();
const optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
expect(optionsElement.length).toEqual(4);
optionsElement[1].dispatchEvent(new Event('click'));
fixture.detectChanges();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const options = await select.getOptions();
expect(options.length).toEqual(4);
await options[1].click();
expect(component.value).toEqual(1);
});
it('should be able to enable None option', () => {
it('should be able to enable None option', async () => {
component.property = new CardViewSelectItemModel({
...mockDefaultProps,
editable: true
@@ -149,25 +155,23 @@ describe('CardViewSelectItemComponent', () => {
fixture.detectChanges();
expect(component.isEditable()).toBe(true);
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
fixture.detectChanges();
const noneElement: HTMLElement = overlayContainer.getContainerElement().querySelector('mat-option');
expect(noneElement).toBeDefined();
expect(noneElement.innerText).toEqual('CORE.CARDVIEW.NONE');
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const options = await select.getOptions();
expect(await options[0].getText()).toBe('CORE.CARDVIEW.NONE');
});
it('should render select box if editable property is TRUE', () => {
it('should render select box if editable property is TRUE', async () => {
component.ngOnChanges();
component.editable = true;
fixture.detectChanges();
const selectBox = fixture.debugElement.query(By.css('[data-automation-class="select-box"]'));
expect(selectBox).not.toBeNull();
expect(await loader.hasHarness(MatSelectHarness)).toBe(true);
});
it('should not have label twice', () => {
it('should not have label twice', async () => {
component.ngOnChanges();
component.editable = true;
fixture.detectChanges();
@@ -178,11 +182,10 @@ describe('CardViewSelectItemComponent', () => {
});
describe('Filter', () => {
it('should render a list of filtered options', () => {
it('should render a list of filtered options', async () => {
appConfig.config['content-metadata'] = {
selectFilterLimit: 0
};
let optionsElement: any[];
component.property = new CardViewSelectItemModel({
...mockDefaultProps,
editable: true
@@ -192,24 +195,22 @@ describe('CardViewSelectItemComponent', () => {
component.ngOnChanges();
fixture.detectChanges();
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
const select = await loader.getHarness(MatSelectHarness);
await select.open();
fixture.detectChanges();
optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
expect(optionsElement.length).toBe(3);
let options = await select.getOptions();
expect(options.length).toBe(3);
const filterInput = fixture.debugElement.query(By.css('.adf-select-filter-input input'));
filterInput.nativeElement.value = mockData[0].label;
filterInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
expect(optionsElement.length).toBe(1);
expect(optionsElement[0].innerText).toEqual(mockData[0].label);
options = await select.getOptions();
expect(options.length).toBe(1);
expect(await options[0].getText()).toEqual(mockData[0].label);
});
it('should hide filter if options are less then limit', () => {
it('should hide filter if options are less then limit', async () => {
appConfig.config['content-metadata'] = {
selectFilterLimit: mockData.length + 1
};
@@ -222,15 +223,14 @@ describe('CardViewSelectItemComponent', () => {
component.ngOnChanges();
fixture.detectChanges();
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
fixture.detectChanges();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const filterInput = fixture.debugElement.query(By.css('.adf-select-filter-input'));
expect(filterInput).toBe(null);
});
it('should show filter if options are greater then limit', () => {
it('should show filter if options are greater then limit', async () => {
appConfig.config['content-metadata'] = {
selectFilterLimit: mockData.length - 1
};
@@ -243,9 +243,8 @@ describe('CardViewSelectItemComponent', () => {
component.ngOnChanges();
fixture.detectChanges();
const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
selectBox.triggerEventHandler('click', {});
fixture.detectChanges();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const filterInput = fixture.debugElement.query(By.css('.adf-select-filter-input'));
expect(filterInput).not.toBe(null);

60
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -30,9 +30,12 @@ import { ClipboardService } from '../../../clipboard/clipboard.service';
import { SimpleChange } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing';
describe('CardViewTextItemComponent', () => {
let loader: HarnessLoader;
let fixture: ComponentFixture<CardViewTextItemComponent>;
let component: CardViewTextItemComponent;
@@ -63,7 +66,7 @@ describe('CardViewTextItemComponent', () => {
ctrlKey: ctrlKeyValue,
code: codeValue,
metaKey: metaKeyValue
} as KeyboardEventInit );
} as KeyboardEventInit);
component.undoText(event);
if (flag) {
expect(component.textInput.value).toBe('');
@@ -72,32 +75,35 @@ describe('CardViewTextItemComponent', () => {
}
};
const renderChipsForMultiValuedProperties = async (cardViewTextItemObject, flag: boolean, length: number,
param1: string, param2: string, param3: string) => {
const renderChipsForMultiValuedProperties = async (
cardViewTextItemObject,
flag: boolean,
length: number,
param1: string,
param2: string,
param3: string
) => {
component.property = new CardViewTextItemModel(cardViewTextItemObject);
component.useChipsForMultiValueProperty = flag;
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
fixture.detectChanges();
await fixture.whenStable();
const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
expect(valueChips).not.toBeNull();
const valueChips = await loader.getAllHarnesses(MatChipHarness);
expect(valueChips.length).toBe(length);
expect(valueChips[0].nativeElement.innerText.trim()).toBe(param1);
expect(valueChips[1].nativeElement.innerText.trim()).toBe(param2);
expect(valueChips[2].nativeElement.innerText.trim()).toBe(param3);
expect(await valueChips[0].getText()).toBe(param1);
expect(await valueChips[1].getText()).toBe(param2);
expect(await valueChips[2].getText()).toBe(param3);
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
MatChipsModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, MatChipsModule]
});
fixture = TestBed.createComponent(CardViewTextItemComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -105,7 +111,6 @@ describe('CardViewTextItemComponent', () => {
});
describe('Rendering', () => {
beforeEach(() => {
component.property = new CardViewTextItemModel({
label: 'Text label',
@@ -182,7 +187,6 @@ describe('CardViewTextItemComponent', () => {
await fixture.whenStable();
const value = getTextFieldValue(component.property.key);
expect(value).toBe('Lorem ipsum');
});
it('should render the edit icon in case of editable:true', () => {
@@ -211,7 +215,6 @@ describe('CardViewTextItemComponent', () => {
await fixture.whenStable();
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
expect(editIcon).toBeNull('Edit icon should NOT be shown');
});
it('should render chips for multivalue properties when chips are enabled', async () => {
@@ -224,7 +227,6 @@ describe('CardViewTextItemComponent', () => {
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
});
it('should render chips for multivalue integers when chips are enabled', async () => {
@@ -236,7 +238,6 @@ describe('CardViewTextItemComponent', () => {
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
});
it('should render chips for multivalue decimal numbers when chips are enabled', async () => {
@@ -248,7 +249,6 @@ describe('CardViewTextItemComponent', () => {
multivalued: true
};
renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
});
it('should render string for multivalue properties when chips are disabled', async () => {
@@ -266,10 +266,9 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const valueChips = fixture.debugElement.query(By.css(`mat-chip-list`));
const value = getTextFieldValue(component.property.key);
expect(value).toBe('item1,item2,item3');
expect(valueChips).toBeNull();
expect(await loader.hasHarness(MatChipListHarness)).toBe(false);
});
it('should display the label for multi-valued chips if displayLabelForChips is true', async () => {
@@ -358,7 +357,6 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const value = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
expect(value).toBeNull();
});
it('should not render the clickable icon in case editable set to false', async () => {
@@ -372,7 +370,6 @@ describe('CardViewTextItemComponent', () => {
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
expect(value).toBeNull('icon should NOT be shown');
});
it('should render the defined clickable icon in case of clickable true and editable input set to true', async () => {
@@ -388,7 +385,6 @@ describe('CardViewTextItemComponent', () => {
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText).toBe('FAKE_ICON');
});
it('should not render clickable icon in case of clickable true and icon undefined', async () => {
@@ -413,7 +409,6 @@ describe('CardViewTextItemComponent', () => {
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
expect(value).toBeNull('Edit icon should NOT be shown');
});
it('should call back function when clickable property enabled', async () => {
@@ -490,7 +485,10 @@ describe('CardViewTextItemComponent', () => {
doubleClickEl.triggerEventHandler('dblclick', new MouseEvent('dblclick'));
fixture.detectChanges();
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith(
'myValueToCopy',
'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE'
);
});
it('should clear value when clear value icon is clicked', async () => {
@@ -516,7 +514,6 @@ describe('CardViewTextItemComponent', () => {
});
describe('Update', () => {
beforeEach(() => {
component.property = new CardViewTextItemModel({
label: 'Text label',
@@ -655,7 +652,6 @@ describe('CardViewTextItemComponent', () => {
value = getTextFieldValue(component.property.key);
expect(value).toEqual(expectedText);
expect(component.property.value).toBe(expectedText);
});
it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', () => {
@@ -885,26 +881,20 @@ describe('CardViewTextItemComponent', () => {
});
describe('events', () => {
it('should perform undo action by clearing the text that we enter in the text field using undo keyboard shortcut', async () => {
checkCtrlZActions(true, 'KeyZ', false, 'UNDO TEST', true);
});
it('should not perform undo action when we hit any other shortcut instead of using undo keyboard shortcut', async () => {
checkCtrlZActions(true, 'KeyH', false, 'DO NOT DO UNDO', false);
});
it('should not perform undo action when control key is not pressed even if the keycode is correct', async () => {
checkCtrlZActions(false, 'KeyZ', false, 'DO NOT DO UNDO', false);
});
it('should perform undo action in MacOS by clearing the text that we enter in the text field using undo keyboard shortcut', async () => {
checkCtrlZActions(false, 'KeyZ', true, 'UNDO TEST FOR MACOS', true);
});
});
});

186
lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
View File

@@ -27,9 +27,12 @@ import { of } from 'rxjs';
import { CardViewSelectItemOption } from '../../interfaces/card-view-selectitem-properties.interface';
import { CardViewItem } from '../../interfaces/card-view-item.interface';
import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
describe('CardViewComponent', () => {
let loader: HarnessLoader;
let fixture: ComponentFixture<CardViewComponent>;
let component: CardViewComponent;
@@ -40,6 +43,7 @@ describe('CardViewComponent', () => {
fixture = TestBed.createComponent(CardViewComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -63,12 +67,14 @@ describe('CardViewComponent', () => {
it('should pass through editable property to the items', () => {
component.editable = true;
component.properties = [new CardViewDateItemModel({
label: 'My date label',
value: '2017-06-14',
key: 'some-key',
editable: true
})];
component.properties = [
new CardViewDateItemModel({
label: 'My date label',
value: '2017-06-14',
key: 'some-key',
editable: true
})
];
fixture.detectChanges();
@@ -77,12 +83,14 @@ describe('CardViewComponent', () => {
});
it('should render the date in the correct format', async () => {
component.properties = [new CardViewDateItemModel({
label: 'My date label',
value: '2017-06-14',
key: 'some key',
format: 'short'
})];
component.properties = [
new CardViewDateItemModel({
label: 'My date label',
value: '2017-06-14',
key: 'some key',
format: 'short'
})
];
fixture.detectChanges();
await fixture.whenStable();
@@ -97,13 +105,15 @@ describe('CardViewComponent', () => {
});
it('should render the default value if the value is empty, not editable and displayEmpty is true', async () => {
component.properties = [new CardViewTextItemModel({
label: 'My default label',
value: null,
default: 'default value',
key: 'some-key',
editable: false
})];
component.properties = [
new CardViewTextItemModel({
label: 'My default label',
value: null,
default: 'default value',
key: 'some-key',
editable: false
})
];
component.editable = true;
component.displayEmpty = true;
@@ -120,13 +130,15 @@ describe('CardViewComponent', () => {
});
it('should render the default value if the value is empty and is editable', async () => {
component.properties = [new CardViewTextItemModel({
label: 'My default label',
value: null,
default: 'default value',
key: 'some-key',
editable: true
})];
component.properties = [
new CardViewTextItemModel({
label: 'My default label',
value: null,
default: 'default value',
key: 'some-key',
editable: true
})
];
component.editable = true;
component.displayEmpty = false;
@@ -143,95 +155,104 @@ describe('CardViewComponent', () => {
});
it('should render the select element with the None option when not set in the properties', async () => {
const options: CardViewSelectItemOption<string>[] = [{label : 'Option 1', key: '1'}, {label : 'Option 2', key: '2'}];
component.properties = [new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
options$: of(options)
})];
const options: CardViewSelectItemOption<string>[] = [
{ label: 'Option 1', key: '1' },
{ label: 'Option 2', key: '2' }
];
component.properties = [
new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
options$: of(options)
})
];
component.editable = true;
component.displayEmpty = false;
fixture.detectChanges();
await fixture.whenStable();
const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
labelValue.triggerEventHandler('click', null);
fixture.detectChanges();
await fixture.whenStable();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const currentOptions = document.querySelectorAll('mat-option');
const currentOptions = await select.getOptions();
expect(currentOptions.length).toBe(3);
expect(currentOptions[0].innerHTML).toContain('CORE.CARDVIEW.NONE');
expect(currentOptions[1].innerHTML).toContain(options[0].label);
expect(currentOptions[2].innerHTML).toContain(options[1].label);
expect(await currentOptions[0].getText()).toContain('CORE.CARDVIEW.NONE');
expect(await currentOptions[1].getText()).toContain(options[0].label);
expect(await currentOptions[2].getText()).toContain(options[1].label);
});
it('should render the select element with the None option when set true in the properties', async () => {
const options: CardViewSelectItemOption<string>[] = [{label : 'Option 1', key: '1'}, {label : 'Option 2', key: '2'}];
component.properties = [new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
displayNoneOption: true,
options$: of(options)
})];
const options: CardViewSelectItemOption<string>[] = [
{ label: 'Option 1', key: '1' },
{ label: 'Option 2', key: '2' }
];
component.properties = [
new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
displayNoneOption: true,
options$: of(options)
})
];
component.editable = true;
component.displayEmpty = false;
fixture.detectChanges();
await fixture.whenStable();
const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
labelValue.triggerEventHandler('click', null);
fixture.detectChanges();
await fixture.whenStable();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const currentOptions = document.querySelectorAll('mat-option');
const currentOptions = await select.getOptions();
expect(currentOptions.length).toBe(3);
expect(currentOptions[0].innerHTML).toContain('CORE.CARDVIEW.NONE');
expect(currentOptions[1].innerHTML).toContain(options[0].label);
expect(currentOptions[2].innerHTML).toContain(options[1].label);
expect(await currentOptions[0].getText()).toContain('CORE.CARDVIEW.NONE');
expect(await currentOptions[1].getText()).toContain(options[0].label);
expect(await currentOptions[2].getText()).toContain(options[1].label);
});
it('should not render the select element with the None option when set false in the properties', async () => {
const options: CardViewSelectItemOption<string>[] = [{label : 'Option 1', key: '1'}, {label : 'Option 2', key: '2'}];
component.properties = [new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
displayNoneOption: false,
options$: of(options)
})];
const options: CardViewSelectItemOption<string>[] = [
{ label: 'Option 1', key: '1' },
{ label: 'Option 2', key: '2' }
];
component.properties = [
new CardViewSelectItemModel({
label: 'My default label',
value: '1',
default: 'default value',
key: 'some-key',
editable: true,
displayNoneOption: false,
options$: of(options)
})
];
component.editable = true;
component.displayEmpty = false;
fixture.detectChanges();
await fixture.whenStable();
const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
labelValue.triggerEventHandler('click', null);
fixture.detectChanges();
await fixture.whenStable();
const select = await loader.getHarness(MatSelectHarness);
await select.open();
const currentOptions = document.querySelectorAll('mat-option');
const currentOptions = await select.getOptions();
expect(currentOptions.length).toBe(2);
expect(currentOptions[0].innerHTML).toContain(options[0].label);
expect(currentOptions[1].innerHTML).toContain(options[1].label);
expect(await currentOptions[0].getText()).toContain(options[0].label);
expect(await currentOptions[1].getText()).toContain(options[1].label);
});
it('should show/hide the label for multivalued chip property based on displayLabelForChips input', () => {
const multiValueProperty: CardViewItem = new CardViewTextItemModel({
label: 'My Multivalue Label',
value: ['Value 1', 'Value 2', 'Value 3'],
key: 'multi-key'
label: 'My Multivalue Label',
value: ['Value 1', 'Value 2', 'Value 3'],
key: 'multi-key'
});
component.properties = [multiValueProperty];
@@ -256,5 +277,4 @@ describe('CardViewComponent', () => {
const cardViewItemDispatcherDebugElement = fixture.debugElement.query(By.directive(CardViewItemDispatcherComponent));
return cardViewItemDispatcherDebugElement.componentInstance as CardViewItemDispatcherComponent;
}
});

28
lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts
View File

@@ -21,8 +21,12 @@ import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { JsonCellComponent } from './json-cell.component';
import { TranslateModule } from '@ngx-translate/core';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
describe('JsonCellComponent', () => {
let loader: HarnessLoader;
let component: JsonCellComponent;
let fixture: ComponentFixture<JsonCellComponent>;
let dataTableAdapter: ObjectDataTableAdapter;
@@ -31,13 +35,11 @@ describe('JsonCellComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule]
});
fixture = TestBed.createComponent(JsonCellComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});
beforeEach(() => {
@@ -50,12 +52,9 @@ describe('JsonCellComponent', () => {
}
};
columnData = { format: '/somewhere', type: 'json', key: 'entity'};
columnData = { format: '/somewhere', type: 'json', key: 'entity' };
dataTableAdapter = new ObjectDataTableAdapter(
[rowData],
[new ObjectDataColumn(columnData)]
);
dataTableAdapter = new ObjectDataTableAdapter([rowData], [new ObjectDataColumn(columnData)]);
component.column = dataTableAdapter.getColumns()[0];
component.data = dataTableAdapter;
@@ -68,21 +67,22 @@ describe('JsonCellComponent', () => {
it('should set value', () => {
fixture.detectChanges();
component.value$.subscribe( (result) => {
component.value$.subscribe((result) => {
expect(result).toBe(rowData.entity);
});
});
it('should render json button inside cell', () => {
it('should render json button inside cell', async () => {
fixture.detectChanges();
const button: HTMLElement = fixture.debugElement.nativeElement.querySelector('.mat-button');
expect(button).toBeDefined();
const buttonExists = await loader.hasHarness(MatButtonHarness);
expect(buttonExists).toBe(true);
});
it('should not setup cell when has no data', () => {
rowData.entity = {};
fixture.detectChanges();
component.value$.subscribe( (result) => {
component.value$.subscribe((result) => {
expect(result).toEqual({});
});
});

167
lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
View File

@@ -23,25 +23,26 @@ import { FormFieldTypes } from '../core/form-field-types';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { FormModel } from '../core/form.model';
import { By } from '@angular/platform-browser';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
describe('AmountWidgetComponent', () => {
let loader: HarnessLoader;
let widget: AmountWidgetComponent;
let fixture: ComponentFixture<AmountWidgetComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
FormBaseModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, FormBaseModule]
});
fixture = TestBed.createComponent(AmountWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
it('should setup currency from field', () => {
@@ -81,7 +82,6 @@ describe('AmountWidgetComponent', () => {
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.AMOUNT,
@@ -91,57 +91,45 @@ describe('AmountWidgetComponent', () => {
});
it('should show tooltip', async () => {
const amountInput = fixture.nativeElement.querySelector('input');
amountInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const amountInput = fixture.nativeElement.querySelector('input');
amountInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
amountInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.AMOUNT,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const amount = fixture.nativeElement.querySelector('input');
const input = await loader.getHarness(MatInputHarness);
const host = await input.host();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
amount.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
await host.blur();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
@@ -150,25 +138,22 @@ describe('AmountWidgetComponent', () => {
});
describe('AmountWidgetComponent - rendering', () => {
let loader: HarnessLoader;
let widget: AmountWidgetComponent;
let fixture: ComponentFixture<AmountWidgetComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
FormBaseModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, FormBaseModule]
});
fixture = TestBed.createComponent(AmountWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
it('[C289915] - Should be able to display different currency icons', () => {
it('[C289915] - Should be able to display different currency icons', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',
name: 'Test Amount',
@@ -177,22 +162,20 @@ describe('AmountWidgetComponent - rendering', () => {
});
fixture.detectChanges();
let widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('$');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getPrefixText()).toBe('$');
widget.field.currency = '£';
widget.ngOnInit();
fixture.detectChanges();
widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('£');
expect(await field.getPrefixText()).toBe('£');
widget.field.currency = '€';
widget.ngOnInit();
fixture.detectChanges();
widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('€');
expect(await field.getPrefixText()).toBe('€');
});
it('[C309692] - Should be possible to set the General Properties for Amount Widget', async () => {
@@ -216,28 +199,21 @@ describe('AmountWidgetComponent - rendering', () => {
fixture.detectChanges();
await fixture.whenStable();
const widgetPlaceholder = fixture.nativeElement.querySelector('label.mat-form-field-label');
expect(widgetPlaceholder.textContent).toBe('Check Placeholder Text');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('Check Placeholder Text');
expect(await field.getPrefixText()).toBe('$');
const widgetLabel = fixture.nativeElement.querySelector('label.adf-label');
expect(widgetLabel.textContent).toBe('Test Amount*');
const widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('$');
expect(widget.field.isValid).toBe(false);
const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1');
expect(widgetById).toBeDefined();
expect(widgetById).not.toBeNull();
widgetById.value = '90';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(true, 'amount widget with a valid field');
const input = await loader.getHarness(MatInputHarness);
await input.setValue('90');
expect(widget.field.isValid).toBe(true);
await input.setValue('gdfgdf');
expect(widget.field.isValid).toBe(false);
widgetById.value = 'gdfgdf';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget with an invalid field');
const errorWidget = fixture.nativeElement.querySelector('error-widget .adf-error-text');
expect(errorWidget.textContent).toBe('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
});
@@ -265,52 +241,37 @@ describe('AmountWidgetComponent - rendering', () => {
const widgetLabel = fixture.nativeElement.querySelector('label.adf-label');
expect(widgetLabel.textContent).toBe('Test Amount*');
const widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('£');
expect(widget.field.isValid).toBe(false);
const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1');
expect(widgetById).toBeDefined();
expect(widgetById).not.toBeNull();
widgetById.value = '8';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
let errorMessage: HTMLElement = fixture.nativeElement.querySelector('.adf-error-text');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getPrefixText()).toBe('£');
expect(widget.field.isValid).toBe(false);
const input = await loader.getHarness(MatInputHarness);
await input.setValue('8');
expect(widget.field.isValid).toBe(false);
let errorMessage = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.NOT_LESS_THAN');
widgetById.value = '99';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
await input.setValue('99');
expect(widget.field.isValid).toBe(false);
errorMessage = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN');
widgetById.value = '80';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(true, 'amount widget field is invalid');
await input.setValue('80');
expect(widget.field.isValid).toBe(true);
widgetById.value = '80.67';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(true, 'amount widget field is invalid');
await input.setValue('80.67');
expect(widget.field.isValid).toBe(true);
widgetById.value = 'incorrect format';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
await input.setValue('incorrect format');
expect(widget.field.isValid).toBe(false);
errorMessage = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
});
describe('when form model has left labels', () => {
it('should have left labels classes on leftLabels true', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
id: 'amount-id',
@@ -379,11 +340,7 @@ describe('AmountWidgetComponent settings', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
FormBaseModule
],
imports: [TranslateModule.forRoot(), CoreTestingModule, FormBaseModule],
providers: [
{
provide: ADF_AMOUNT_SETTINGS,

75
lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.spec.ts
View File

@@ -26,37 +26,33 @@ import { TranslateLoaderService } from '../../../../translation/translate-loader
import { MatCheckboxModule } from '@angular/material/checkbox';
import { CoreTestingModule } from '../../../../testing';
import { MatTooltipModule } from '@angular/material/tooltip';
import { By } from '@angular/platform-browser';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('CheckboxWidgetComponent', () => {
let loader: HarnessLoader;
let widget: CheckboxWidgetComponent;
let fixture: ComponentFixture<CheckboxWidgetComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
FormBaseModule,
MatCheckboxModule,
MatTooltipModule
],
providers: [
{ provide: TranslateLoader, useClass: TranslateLoaderService }
]
imports: [TranslateModule.forRoot(), CoreTestingModule, FormBaseModule, MatCheckboxModule, MatTooltipModule],
providers: [{ provide: TranslateLoader, useClass: TranslateLoaderService }]
});
fixture = TestBed.createComponent(CheckboxWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => fixture.destroy());
describe('when template is ready', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'check-id',
@@ -69,14 +65,11 @@ describe('CheckboxWidgetComponent', () => {
});
it('should be marked as invalid when required after interaction', async () => {
const checkbox = element.querySelector('mat-checkbox');
const checkbox = await loader.getHarness(MatCheckboxHarness);
expect(element.querySelector('.adf-invalid')).toBeFalsy();
checkbox.dispatchEvent(new Event('click'));
checkbox.dispatchEvent(new Event('click'));
fixture.detectChanges();
await fixture.whenStable();
await checkbox.check();
await checkbox.uncheck();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
@@ -85,7 +78,7 @@ describe('CheckboxWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
@@ -94,24 +87,20 @@ describe('CheckboxWidgetComponent', () => {
it('should be checked if boolean true is passed', async () => {
widget.field.value = true;
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('true');
const checkbox = await loader.getHarness(MatCheckboxHarness);
expect(await checkbox.isChecked()).toBe(true);
});
it('should not be checked if false is passed', async () => {
widget.field.value = false;
fixture.detectChanges();
await fixture.whenStable();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
const checkbox = await loader.getHarness(MatCheckboxHarness);
expect(await checkbox.isChecked()).toBe(false);
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.BOOLEAN,
@@ -121,28 +110,20 @@ describe('CheckboxWidgetComponent', () => {
});
it('should show tooltip', async () => {
const checkboxInput = fixture.nativeElement.querySelector('mat-checkbox');
checkboxInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const checkbox = await loader.getHarness(MatCheckboxHarness);
await (await checkbox.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const checkboxInput = fixture.nativeElement.querySelector('mat-checkbox');
checkboxInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const checkbox = await loader.getHarness(MatCheckboxHarness);
await (await checkbox.host()).hover();
await (await checkbox.host()).mouseAway();
checkboxInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
});

67
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@@ -23,11 +23,14 @@ import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FormFieldTypes } from '../core/form-field-types';
import { By } from '@angular/platform-browser';
import { DateFieldValidator, DateTimeFieldValidator } from '../core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatInputHarness } from '@angular/material/input/testing';
describe('DateTimeWidgetComponent', () => {
let loader: HarnessLoader;
let widget: DateTimeWidgetComponent;
let fixture: ComponentFixture<DateTimeWidgetComponent>;
let element: HTMLElement;
@@ -35,11 +38,7 @@ describe('DateTimeWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
MatTooltipModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, MatTooltipModule]
});
fixture = TestBed.createComponent(DateTimeWidgetComponent);
@@ -47,7 +46,8 @@ describe('DateTimeWidgetComponent', () => {
widget = fixture.componentInstance;
form = new FormModel();
form.fieldValidators = [new DateFieldValidator(), new DateTimeFieldValidator() ];
form.fieldValidators = [new DateFieldValidator(), new DateTimeFieldValidator()];
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -238,7 +238,6 @@ describe('DateTimeWidgetComponent', () => {
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DATETIME,
@@ -248,35 +247,26 @@ describe('DateTimeWidgetComponent', () => {
});
it('should show tooltip', async () => {
const dateTimeInput = fixture.nativeElement.querySelector('input');
dateTimeInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const dateTimeInput = fixture.nativeElement.querySelector('input');
dateTimeInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
dateTimeInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DATETIME,
required: true
});
@@ -304,7 +294,6 @@ describe('DateTimeWidgetComponent', () => {
});
describe('template check', () => {
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
@@ -316,9 +305,8 @@ describe('DateTimeWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toBe('30-11-9999 10:30 AM');
const input = await loader.getHarness(MatInputHarness);
expect(await input.getValue()).toBe('30-11-9999 10:30 AM');
});
it('should show the correct format type', async () => {
@@ -333,9 +321,8 @@ describe('DateTimeWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toContain('12-30-9999 10:30 AM');
const input = await loader.getHarness(MatInputHarness);
expect(await input.getValue()).toBe('12-30-9999 10:30 AM');
});
it('should disable date button when is readonly', () => {
@@ -374,9 +361,8 @@ describe('DateTimeWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toContain('12-30-9999 10:30 AM');
const input = await loader.getHarness(MatInputHarness);
expect(await input.getValue()).toBe('12-30-9999 10:30 AM');
widget.field.value = '2020-03-02T00:00:00.000Z';
@@ -384,11 +370,10 @@ describe('DateTimeWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(dateElement?.value).toContain('03-02-2020 00:00 AM');
expect(await input.getValue()).toBe('03-02-2020 00:00 AM');
});
describe('when form model has left labels', () => {
it('should have left labels classes on leftLabels true', () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
id: 'datetime-id',

63
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.spec.ts
View File

@@ -22,32 +22,28 @@ import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { FormFieldTypes } from '../core/form-field-types';
import { By } from '@angular/platform-browser';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('MultilineTextWidgetComponentComponent', () => {
let loader: HarnessLoader;
let widget: MultilineTextWidgetComponentComponent;
let fixture: ComponentFixture<MultilineTextWidgetComponentComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule]
});
fixture = TestBed.createComponent(MultilineTextWidgetComponentComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should exist', () => {
expect(widget).toBeDefined();
loader = TestbedHarnessEnvironment.loader(fixture);
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.MULTILINE_TEXT,
@@ -57,57 +53,42 @@ describe('MultilineTextWidgetComponentComponent', () => {
});
it('should show tooltip', async () => {
const multilineTextarea = fixture.nativeElement.querySelector('textarea');
multilineTextarea.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const multilineTextarea = fixture.nativeElement.querySelector('textarea');
multilineTextarea.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
multilineTextarea.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.MULTILINE_TEXT,
required: true
});
fixture.detectChanges();
});
it('should be marked as invalid after interaction', async () => {
const multilineTextarea = fixture.nativeElement.querySelector('textarea');
const input = await loader.getHarness(MatInputHarness);
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
multilineTextarea.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
await (await input.host()).blur();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');

66
lib/core/src/lib/form/components/widgets/number/number.widget.spec.ts
View File

@@ -19,39 +19,32 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { CoreTestingModule } from '../../../../testing';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { NumberWidgetComponent } from './number.widget';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('NumberWidgetComponent', () => {
let loader: HarnessLoader;
let widget: NumberWidgetComponent;
let fixture: ComponentFixture<NumberWidgetComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
MatInputModule,
FormsModule,
MatIconModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, MatInputModule, FormsModule, MatIconModule]
});
fixture = TestBed.createComponent(NumberWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should exist', () => {
expect(widget).toBeDefined();
loader = TestbedHarnessEnvironment.loader(fixture);
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.NUMBER,
@@ -61,57 +54,43 @@ describe('NumberWidgetComponent', () => {
});
it('should show tooltip', async () => {
const numberInput = fixture.nativeElement.querySelector('input');
numberInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const numberInput = fixture.nativeElement.querySelector('input');
numberInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
numberInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.NUMBER,
required: true
});
fixture.detectChanges();
});
it('should be marked as invalid after interaction', async () => {
const numberInput = fixture.nativeElement.querySelector('input');
const input = await loader.getHarness(MatInputHarness);
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
numberInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
await (await input.host()).blur();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
@@ -119,7 +98,6 @@ describe('NumberWidgetComponent', () => {
});
describe('when form model has left labels', () => {
it('should have left labels classes on leftLabels true', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
id: 'number-id',

184
lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts
View File

@@ -25,15 +25,16 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { CoreTestingModule } from '../../../../testing';
import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
const enterValueInTextField = (element: HTMLInputElement, value: string) => {
element.value = value;
element.dispatchEvent(new Event('input'));
};
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('TextWidgetComponent', () => {
const form = new FormModel({ taskId: 'fake-task-id' });
let loader: HarnessLoader;
let widget: TextWidgetComponent;
let fixture: ComponentFixture<TextWidgetComponent>;
let element: HTMLElement;
@@ -41,25 +42,18 @@ describe('TextWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
MatInputModule,
FormsModule,
MatIconModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule, MatInputModule, FormsModule, MatIconModule]
});
fixture = TestBed.createComponent(TextWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
describe('when template is ready', () => {
describe('and no mask is configured on text element', () => {
it('should raise ngModelChange event', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -70,16 +64,14 @@ describe('TextWidgetComponent', () => {
fixture.detectChanges();
expect(widget.field.value).toBe('');
enterValueInTextField(element.querySelector('#text-id'), 'TEXT');
await fixture.whenStable();
fixture.detectChanges();
expect(widget.field).not.toBeNull();
expect(widget.field.value).not.toBeNull();
const input = await loader.getHarness(MatInputHarness);
await input.setValue('TEXT');
expect(widget.field.value).toBe('TEXT');
});
it('should be able to set label property', () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -93,7 +85,7 @@ describe('TextWidgetComponent', () => {
});
it('should be able to set a placeholder for Text widget', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -104,12 +96,12 @@ describe('TextWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const label = element.querySelector<HTMLElement>('label.mat-form-field-label[for="text-id"]');
expect(label.innerText).toBe('Your name here');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('Your name here');
});
it('should be able to set min/max length properties for Text widget', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -119,30 +111,20 @@ describe('TextWidgetComponent', () => {
maxLength: 10
});
fixture.detectChanges();
enterValueInTextField(element.querySelector('#text-id'), 'TEXT');
fixture.detectChanges();
await fixture.whenStable();
const input = await loader.getHarness(MatInputHarness);
await input.setValue('TEXT');
errorWidget = element.querySelector('.adf-error-text');
expect(errorWidget).toBeDefined();
expect(errorWidget.innerHTML).toBe('FORM.FIELD.VALIDATOR.AT_LEAST_LONG');
expect(widget.field.isValid).toBe(false);
enterValueInTextField(element.querySelector('#text-id'), 'TEXT VALUE');
await fixture.whenStable();
fixture.detectChanges();
await input.setValue('TEXT VALUE');
errorWidget = element.querySelector('.adf-error-text');
expect(widget.field.isValid).toBe(true);
enterValueInTextField(element.querySelector('#text-id'), 'TEXT VALUE TOO LONG');
fixture.detectChanges();
await fixture.whenStable();
await input.setValue('TEXT VALUE TOO LONG');
expect(widget.field.isValid).toBe(false);
errorWidget = element.querySelector('.adf-error-text');
@@ -150,7 +132,7 @@ describe('TextWidgetComponent', () => {
});
it('should be able to set regex pattern property for Text widget', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -159,25 +141,20 @@ describe('TextWidgetComponent', () => {
regexPattern: '[0-9]'
});
fixture.detectChanges();
enterValueInTextField(element.querySelector('#text-id'), 'TEXT');
await fixture.whenStable();
const input = await loader.getHarness(MatInputHarness);
await input.setValue('TEXT');
expect(widget.field.isValid).toBe(false);
enterValueInTextField(element.querySelector('#text-id'), '8');
await fixture.whenStable();
await input.setValue('8');
expect(widget.field.isValid).toBe(true);
enterValueInTextField(element.querySelector('#text-id'), '8XYZ');
await fixture.whenStable();
await input.setValue('8XYZ');
expect(widget.field.isValid).toBe(false);
});
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.TEXT,
@@ -187,35 +164,26 @@ describe('TextWidgetComponent', () => {
});
it('should show tooltip', async () => {
const textInput = fixture.nativeElement.querySelector('input');
textInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
});
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const textInput = fixture.nativeElement.querySelector('input');
textInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
textInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -226,13 +194,10 @@ describe('TextWidgetComponent', () => {
});
it('should be marked as invalid after interaction', async () => {
const textInput = fixture.nativeElement.querySelector('input');
const input = await loader.getHarness(MatInputHarness);
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
textInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
await (await input.host()).blur();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
@@ -241,7 +206,7 @@ describe('TextWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
@@ -249,11 +214,8 @@ describe('TextWidgetComponent', () => {
});
describe('and no mask is configured on text element', () => {
let inputElement: HTMLInputElement;
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -262,26 +224,19 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
inputElement = element.querySelector<HTMLInputElement>('#text-id');
});
it('should be disabled on readonly forms', async () => {
await fixture.whenStable();
fixture.detectChanges();
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.disabled).toBeTruthy();
const input = await loader.getHarness(MatInputHarness);
expect(await input.isDisabled()).toBe(true);
});
});
describe('and mask is configured on text element', () => {
let inputElement: HTMLInputElement;
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -295,23 +250,21 @@ describe('TextWidgetComponent', () => {
inputElement = element.querySelector<HTMLInputElement>('#text-id');
});
it('should show text widget', () => {
expect(element.querySelector('#text-id')).toBeDefined();
expect(element.querySelector('#text-id')).not.toBeNull();
it('should show text widget', async () => {
expect(await loader.hasHarness(MatInputHarness)).toBe(true);
});
it('should show the field placeholder', () => {
const label = element.querySelector<HTMLElement>('label.mat-form-field-label[for="text-id"]');
expect(label.innerText).toBe('simple placeholder');
it('should show the field placeholder', async () => {
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('simple placeholder');
});
it('should show the field placeholder when clicked', async () => {
inputElement.click();
fixture.detectChanges();
await fixture.whenStable();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).click();
const label = element.querySelector<HTMLElement>('label.mat-form-field-label[for="text-id"]');
expect(label.innerText).toBe('simple placeholder');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('simple placeholder');
});
it('should prevent text to be written if is not allowed by the mask on keyUp event', async () => {
@@ -384,11 +337,10 @@ describe('TextWidgetComponent', () => {
});
describe('when the mask is reversed ', () => {
let inputElement: HTMLInputElement;
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -427,11 +379,8 @@ describe('TextWidgetComponent', () => {
});
describe('and a mask placeholder is configured', () => {
let inputElement: HTMLInputElement;
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',
@@ -442,26 +391,23 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
inputElement = element.querySelector<HTMLInputElement>('#text-id');
});
it('should show the input mask placeholder', () => {
const label = element.querySelector<HTMLElement>('label.mat-form-field-label[for="text-id"]');
expect(label.innerText).toBe('Phone : (__) ___-___');
it('should show the input mask placeholder', async () => {
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('Phone : (__) ___-___');
});
it('should show the input mask placeholder when clicked', async () => {
inputElement.click();
fixture.detectChanges();
await fixture.whenStable();
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).click();
const label = element.querySelector<HTMLElement>('label.mat-form-field-label[for="text-id"]');
expect(label.innerText).toBe('Phone : (__) ___-___');
const field = await loader.getHarness(MatFormFieldHarness);
expect(await field.getLabel()).toBe('Phone : (__) ___-___');
});
});
describe('when form model has left labels', () => {
it('should have left labels classes on leftLabels true', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
id: 'text-id',
@@ -503,7 +449,7 @@ describe('TextWidgetComponent', () => {
});
it('should not have left labels classes on leftLabels not present', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
widget.field = new FormFieldModel(form, {
id: 'text-id',
name: 'text-name',
value: '',

38
lib/core/src/lib/layout/components/header/header.component.spec.ts
View File

@@ -23,21 +23,23 @@ import { SidenavLayoutModule } from '../../layout.module';
import { Component } from '@angular/core';
import { MaterialModule } from '../../../material.module';
import { TranslateModule } from '@ngx-translate/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatToolbarHarness } from '@angular/material/toolbar/testing';
describe('HeaderLayoutComponent', () => {
let loader: HarnessLoader;
let fixture: ComponentFixture<HeaderLayoutComponent>;
let component: HeaderLayoutComponent;
describe('Input parameters', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
imports: [TranslateModule.forRoot(), CoreTestingModule]
});
fixture = TestBed.createComponent(HeaderLayoutComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -57,13 +59,14 @@ describe('HeaderLayoutComponent', () => {
expect(titleElement.innerText).toEqual('TEST TITLE');
});
it('color attribute should be present on mat-toolbar', () => {
it('color attribute should be present on toolbar', async () => {
component.color = 'primary';
fixture.detectChanges();
const toolbar = fixture.nativeElement.querySelector('mat-toolbar');
expect(toolbar.getAttribute('ng-reflect-color') === null).toBeFalsy();
expect(toolbar.getAttribute('ng-reflect-color')).toEqual('primary');
const toolbar = await loader.getHarness(MatToolbarHarness);
const host = await toolbar.host();
expect(await host.getAttribute('ng-reflect-color')).toBe('primary');
});
it('should display the img element with the expected src if a logo path is set', () => {
@@ -79,7 +82,7 @@ describe('HeaderLayoutComponent', () => {
component.redirectUrl = '/customHomePage';
fixture.detectChanges();
const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a');
const logoAnchor = fixture.nativeElement.querySelector('a');
expect(/\/customHomePage$/.test(logoAnchor.href)).toEqual(true);
});
@@ -87,7 +90,7 @@ describe('HeaderLayoutComponent', () => {
component.tooltip = 'logo title';
fixture.detectChanges();
const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a');
const logoAnchor = fixture.nativeElement.querySelector('a');
expect(logoAnchor.title).toEqual('logo title');
});
@@ -213,21 +216,18 @@ describe('HeaderLayoutComponent', () => {
});
describe('Template transclusion', () => {
@Component({
selector: 'adf-test-layout-header',
template: `<adf-layout-header title="test" color="primary"><p>Test text<p></adf-layout-header>`
template: `<adf-layout-header title="test" color="primary"
><p>Test text</p>
<p></p
></adf-layout-header>`
})
class HeaderLayoutTesterComponent {}
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
SidenavLayoutModule,
MaterialModule
],
imports: [TranslateModule.forRoot(), CoreTestingModule, SidenavLayoutModule, MaterialModule],
declarations: [HeaderLayoutTesterComponent]
});
});
@@ -235,7 +235,7 @@ describe('HeaderLayoutComponent', () => {
it('should project the provided nodes into the component', () => {
const hostFixture = TestBed.createComponent(HeaderLayoutTesterComponent);
hostFixture.detectChanges();
const innerText = hostFixture.nativeElement.querySelector('mat-toolbar>p').innerText;
const innerText = hostFixture.nativeElement.querySelector('p').innerText;
expect(innerText).toEqual('Test text');
});
});