Skip to content

Commit

Permalink
AAE-20142 Replaced Material selectors with harness in core unit tests (…
Browse files Browse the repository at this point in the history 
…#9491)
  • Loading branch information
@ehsan-2019
ehsan-2019 committed Apr 2, 2024
1 parent ec02c76 commit bcf8d35
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 33 deletions.
6 changes: 4 additions & 2 deletions .../src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ 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';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';

describe('CardViewSelectItemComponent', () => {
let loader: HarnessLoader;
Expand Down Expand Up @@ -179,8 +180,9 @@ describe('CardViewSelectItemComponent', () => {
component.editable = true;
fixture.detectChanges();

const label = fixture.debugElement.query(By.css('[data-automation-class="select-box"] .mat-form-field-label'));
expect(label).toBeNull();
const field = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-property-value' }));

expect(await field.hasLabel()).toBeFalse();
});
});

Expand Down
35 changes: 22 additions & 13 deletions lib/core/src/lib/context-menu/context-menu.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
import { ContextMenuModule } from './context-menu.module';
import { CoreTestingModule } from '../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatIconHarness } from '@angular/material/icon/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';

@Component({
selector: 'adf-test-component',
Expand Down Expand Up @@ -96,7 +99,7 @@ describe('ContextMenuDirective', () => {

describe('Events', () => {
let targetElement: HTMLElement;
let contextMenu: HTMLElement;
let contextMenu: HTMLElement | null;

beforeEach(() => {
targetElement = fixture.debugElement.nativeElement.querySelector('#target');
Expand All @@ -110,59 +113,65 @@ describe('ContextMenuDirective', () => {
});

it('should set DOM element reference on menu open event', () => {
expect(contextMenu.className).toContain('adf-context-menu');
expect(contextMenu?.className).toContain('adf-context-menu');
});

it('should reset DOM element reference on Escape event', () => {
const event = new KeyboardEvent('keydown', {
bubbles : true, cancelable : true, key : 'Escape'
});

document.querySelector('.cdk-overlay-backdrop').dispatchEvent(event);
document.querySelector('.cdk-overlay-backdrop')?.dispatchEvent(event);
fixture.detectChanges();
expect(document.querySelector('.adf-context-menu')).toBe(null);
});
});

describe('Contextmenu list', () => {
let targetElement: HTMLElement;
let contextMenu: HTMLElement;
let contextMenu: HTMLElement | null;
let loader: HarnessLoader;

beforeEach(() => {
targetElement = fixture.debugElement.nativeElement.querySelector('#target');
targetElement.dispatchEvent(new CustomEvent('contextmenu'));
fixture.detectChanges();
contextMenu = document.querySelector('.adf-context-menu');
loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
});

it('should not render item with visibility property set to false', () => {
expect(contextMenu.querySelectorAll('button').length).toBe(3);
expect(contextMenu?.querySelectorAll('button').length).toBe(3);
});

it('should render item as disabled when `disabled` property is set to true', () => {
expect(contextMenu.querySelectorAll('button')[0].disabled).toBe(true);
it('should render item as disabled when `disabled` property is set to true', async () => {
expect(contextMenu?.querySelectorAll('button')[0].disabled).toBe(true);
});

it('should set first not disabled item as active', () => {
expect(document.activeElement.querySelector('mat-icon').innerHTML).toContain('action-icon-3');
it('should set first not disabled item as active', async () => {
const icon = await loader.getHarness(MatIconHarness.with({ ancestor: 'adf-context-menu' }));

expect(await icon.getName()).toEqual('action-icon-3');
});

it('should not allow action event when item is disabled', () => {
contextMenu.querySelectorAll('button')[0].click();
contextMenu?.querySelectorAll('button')[0].click();
fixture.detectChanges();

expect(fixture.componentInstance.actions[1].subject.next).not.toHaveBeenCalled();
});

it('should perform action when item is not disabled', () => {
contextMenu.querySelectorAll('button')[1].click();
contextMenu?.querySelectorAll('button')[1].click();
fixture.detectChanges();

expect(fixture.componentInstance.actions[2].subject.next).toHaveBeenCalled();
});

it('should not render item icon if not set', () => {
expect(contextMenu.querySelectorAll('button')[0].querySelector('mat-icon')).toBe(null);
it('should not render item icon if not set', async () => {
expect((await loader.getAllHarnesses(MatIconHarness.with({
ancestor: 'adf-context-menu', name: 'Action 1'
}))).length).toBe(0);
});
});
});
18 changes: 12 additions & 6 deletions lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testi
import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
import { MatSelect, MatSelectModule } from '@angular/material/select';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';

@Component({
template: `
Expand Down Expand Up @@ -47,6 +50,7 @@ class TestComponent {
describe('InfiniteSelectScrollDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let component: TestComponent;
let loader: HarnessLoader;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -67,14 +71,16 @@ describe('InfiniteSelectScrollDirective', () => {
fixture.detectChanges();
component.open();
fixture.detectChanges();
loader = TestbedHarnessEnvironment.loader(fixture);
flush();
}));

it('should call an action on scrollEnd event', fakeAsync(() => {
const panel = document.querySelector('.mat-select-panel') as HTMLElement;
panel.scrollTop = panel.scrollHeight;
panel.dispatchEvent(new Event('scroll'));
fixture.detectChanges();
it('should call an action on scrollEnd event', async () => {
const select = await loader.getHarness(MatSelectHarness);
const panel = (await select.host());

await panel.dispatchEvent('scrollEnd');

expect(component.options.length).toBe(60);
}));
});
});
34 changes: 22 additions & 12 deletions lib/core/src/lib/info-drawer/info-drawer.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import { of } from 'rxjs';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { CoreTestingModule } from '../testing/core.testing.module';
import { ESCAPE } from '@angular/cdk/keycodes';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTabGroupHarness } from '@angular/material/tabs/testing';

describe('InfoDrawerComponent', () => {
let element: HTMLElement;
Expand Down Expand Up @@ -106,6 +109,8 @@ describe('Custom InfoDrawer', () => {
let fixture: ComponentFixture<CustomInfoDrawerComponent>;
let component: CustomInfoDrawerComponent;
let translateService: TranslateService;
let loader: HarnessLoader;

const getNodeIcon = () =>
fixture.debugElement.queryAll(By.css('[info-drawer-node-icon]'));

Expand All @@ -125,6 +130,7 @@ describe('Custom InfoDrawer', () => {
fixture = TestBed.createComponent(CustomInfoDrawerComponent);
fixture.detectChanges();
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});

afterEach(() => {
Expand All @@ -138,27 +144,31 @@ describe('Custom InfoDrawer', () => {
expect(title[0].nativeElement.innerText).toBe('Fake Title Custom');
});

it('should select the tab 1 (index 0) as default', () => {
it('should select the tab 1 (index 0) as default', async () => {
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab.length).toBe(1);
expect(tab[0].nativeElement.innerText).toContain('Tab1');
const tabs = await loader.getHarness(MatTabGroupHarness);
const selectedTab = await tabs.getSelectedTab();

expect(await selectedTab.getLabel()).toEqual('Tab1');
});

it('should select the tab 2 (index 1)', () => {
it('should select the tab 2 (index 1)', async () => {
component.tabIndex = 1;
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab.length).toBe(1);
expect(tab[0].nativeElement.innerText).toContain('Tab2');
const tabs = await loader.getHarness(MatTabGroupHarness);
const selectedTab = await tabs.getSelectedTab();

expect(await selectedTab.getLabel()).toEqual('Tab2');
});

it('should render a tab with icon', () => {
it('should render a tab with icon', async () => {
component.tabIndex = 2;
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab[0].nativeElement.innerText).not.toBe('TAB3');
expect(tab[0].nativeElement.innerText).toContain('tab-icon');
const tabs = await loader.getHarness(MatTabGroupHarness);
const selectedTab = await tabs.getSelectedTab();

expect(await selectedTab.getLabel()).toContain('Tab3');
expect(await selectedTab.getLabel()).toContain('tab-icon');
});

it('should render a icon with title', () => {
Expand Down

0 comments on commit bcf8d35

Please sign in to comment.