mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-6140] reduce access to internal material classes (#9053)
* 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:
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -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');
|
||||
});
|
||||
});
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
});
|
||||
|
@@ -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({});
|
||||
});
|
||||
});
|
||||
|
@@ -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,
|
||||
|
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -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',
|
||||
|
@@ -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('*');
|
||||
|
@@ -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',
|
||||
|
@@ -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: '',
|
||||
|
@@ -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');
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user