Skip to content

Instantly share code, notes, and snippets.

@markau
Forked from glendaviesnz/example-test.spec.ts
Created June 10, 2019 04:14
Show Gist options
  • Save markau/04993a443d4b35ed3c6f0e0e7f325893 to your computer and use it in GitHub Desktop.
Save markau/04993a443d4b35ed3c6f0e0e7f325893 to your computer and use it in GitHub Desktop.
Helper for testing Angular Material Select Menu changes in Unit Tests
import { ComponentFixture, TestBed, async, inject, fakeAsync, flush } from '@angular/core/testing';
import {
MatCheckboxModule,
MatSelectModule
} from '@angular/material';
import { By } from '@angular/platform-browser';
import { SelectMenuTestHelper } from './select-menu-test.helper';
describe('SelectOptionComponent', () => {
let component: SelectOptionComponent;
let fixture: ComponentFixture<SelectOptionComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
SelectOptionComponent
],
imports: [
MatCheckboxModule,
MatSelectModule,
BrowserAnimationsModule
]
}).compileComponents();
});
beforeEach(async(() => {
fixture = TestBed.createComponent(SelectOptionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should be created', () => {
expect(component).toBeTruthy();
});
describe('Select Menu changes', () => {
let options: HTMLElement[];
let selectMenu: SelectMenuTestHelper;
beforeEach(() => {
selectMenu = new SelectMenuTestHelper(fixture);
component.users = [
{ id: randomId(), displayName: 'User1' }
];
});
beforeEach(fakeAsync(() => {
selectMenu.triggerMenu();
options = selectMenu.getOptions();
}));
afterEach(() => {
selectMenu.cleanup();
});
it('should disable user check boxes if user security option inherit is selected', fakeAsync(() => {
options.forEach((option: HTMLElement) => {
selectMenu.selectOption(option);
const checked = fixture.debugElement.query(By.css('.mat-checkbox-input')).nativeElement;
if (option.innerText.trim() === 'security.inherit') {
expect(checked.disabled).toEqual(true);
} else {
expect(checked.disabled).toEqual(false);
}
});
}));
});
});
import { OverlayContainer } from '@angular/cdk/overlay';
import { inject, ComponentFixture, flush } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
export class SelectMenuTestHelper {
private _container: OverlayContainer;
private _containerElement: HTMLElement;
private _trigger: HTMLElement;
public constructor(private _fixture: ComponentFixture<any>) {
inject([OverlayContainer], (oc: OverlayContainer) => {
this._container = oc;
this._containerElement = oc.getContainerElement();
})();
}
public triggerMenu() {
this._fixture.detectChanges();
this._trigger = this._fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
this._trigger.click();
this._fixture.detectChanges();
}
public getOptions(): HTMLElement[] {
return Array.from(this._containerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>);
}
public selectOption(option: HTMLElement) {
option.click();
this._fixture.detectChanges();
this._trigger.click();
this._fixture.detectChanges();
flush();
}
public selectOptionByKey(options: HTMLElement[], key: string) {
options.forEach((option: HTMLElement) => {
if (option.innerText.trim() === key) {
this.selectOption(option);
}
});
}
public cleanup() {
this._container.ngOnDestroy();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment