Helper for testing Angular Material Select Menu changes in Unit Tests

example-test.spec.ts

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

select-menu-test.helper.ts

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

}