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

AAE-20142 Replaced Material selectors with harness in core unit tests (#9491)

Browse Source
This commit is contained in:
Ehsan Rezaei
2024-04-02 16:18:05 +02:00
committed by GitHub
parent ec02c76e43
commit bcf8d3525b
4 changed files with 60 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
@@ -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();
});
});

35
lib/core/src/lib/context-menu/context-menu.spec.ts
View File

@@ -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',
@@ -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');
@@ -110,7 +113,7 @@ 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', () => {
@@ -118,7 +121,7 @@ describe('ContextMenuDirective', () => {
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);
});
@@ -126,43 +129,49 @@ describe('ContextMenuDirective', () => {
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
lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts
View File

@@ -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: `
@@ -47,6 +50,7 @@ class TestComponent {
describe('InfiniteSelectScrollDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let component: TestComponent;
let loader: HarnessLoader;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -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
lib/core/src/lib/info-drawer/info-drawer.component.spec.ts
View File

@@ -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;
@@ -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]'));
@@ -125,6 +130,7 @@ describe('Custom InfoDrawer', () => {
fixture = TestBed.createComponent(CustomInfoDrawerComponent);
fixture.detectChanges();
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -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', () => {