352 lines
14 KiB
TypeScript
352 lines
14 KiB
TypeScript
|
import {ComponentHarness, HarnessLoader, parallel} from '@angular/cdk/testing';
|
||
|
|
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
|
||
|
|
import {Component} from '@angular/core';
|
||
|
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||
|
|
import {MatAccordionTogglePosition, MatExpansionModule} from '@angular/material/expansion';
|
||
|
|
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
|
||
|
|
import {MatAccordionHarness} from './accordion-harness';
|
||
|
|
import {MatExpansionPanelHarness} from './expansion-harness';
|
||
|
|
|
||
|
|
describe('MatExpansionHarness', () => {
|
||
|
|
let fixture: ComponentFixture<ExpansionHarnessTestComponent>;
|
||
|
|
let loader: HarnessLoader;
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
TestBed.configureTestingModule({
|
||
|
|
imports: [MatExpansionModule, NoopAnimationsModule, ExpansionHarnessTestComponent],
|
||
|
|
});
|
||
|
|
|
||
|
|
fixture = TestBed.createComponent(ExpansionHarnessTestComponent);
|
||
|
|
fixture.detectChanges();
|
||
|
|
loader = TestbedHarnessEnvironment.loader(fixture);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load accordion', async () => {
|
||
|
|
const accordions = await loader.getAllHarnesses(MatAccordionHarness);
|
||
|
|
expect(accordions.length).toBe(2);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load an accordion by selector', async () => {
|
||
|
|
const accordions = await loader.getAllHarnesses(
|
||
|
|
MatAccordionHarness.with({selector: '#accordion2'}),
|
||
|
|
);
|
||
|
|
expect(accordions.length).toBe(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panels', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness);
|
||
|
|
expect(panels.length).toBe(5);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by title matching regex', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({title: /Panel#2/}));
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Title of Panel#2');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by title matching exact text', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(
|
||
|
|
MatExpansionPanelHarness.with({title: 'Standalone Panel Title'}),
|
||
|
|
);
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Standalone Panel Title');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel without title', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({title: null}));
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by description matching regex', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(
|
||
|
|
MatExpansionPanelHarness.with({description: /Panel#2/}),
|
||
|
|
);
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getDescription()).toBe('Description of Panel#2');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by description matching exact text', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(
|
||
|
|
MatExpansionPanelHarness.with({description: 'Description of Panel#1'}),
|
||
|
|
);
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getDescription()).toBe('Description of Panel#1');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel without description', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({description: null}));
|
||
|
|
expect(panels.length).toBe(3);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expanded panels', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({expanded: true}));
|
||
|
|
expect(panels.length).toBe(2);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Title of Panel#2');
|
||
|
|
expect(await panels[1].getTitle()).toBe('Standalone Panel Title');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load collapsed panels', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({expanded: false}));
|
||
|
|
expect(panels.length).toBe(3);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Title of Panel#1');
|
||
|
|
expect(await panels[1].getTextContent()).toBe('Accordion #2 - Content');
|
||
|
|
expect(await panels[2].getTitle()).toBe('Disabled Panel Title');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by content matching regex', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(
|
||
|
|
MatExpansionPanelHarness.with({content: /Accordion #2/}),
|
||
|
|
);
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTextContent()).toBe('Accordion #2 - Content');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panel by content matching exact string', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(
|
||
|
|
MatExpansionPanelHarness.with({content: 'Content of Panel#2'}),
|
||
|
|
);
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTextContent()).toBe('Content of Panel#2');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to load expansion panels based on disabled state', async () => {
|
||
|
|
const panels = await loader.getAllHarnesses(MatExpansionPanelHarness.with({disabled: true}));
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Disabled Panel Title');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get expansion state of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness.with({title: /Panel#1/}));
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
fixture.componentInstance.panel1Expanded = true;
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await panel.isExpanded()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get title of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness.with({content: /Panel#1/}));
|
||
|
|
expect(await panel.getTitle()).toBe('Title of Panel#1');
|
||
|
|
fixture.componentInstance.panel1Title = 'new title';
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await panel.getTitle()).toBe('new title');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get description of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness.with({content: /Panel#1/}));
|
||
|
|
expect(await panel.getDescription()).toBe('Description of Panel#1');
|
||
|
|
fixture.componentInstance.panel1Description = 'new description';
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await panel.getDescription()).toBe('new description');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get disabled state of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(
|
||
|
|
MatExpansionPanelHarness.with({selector: '#disabledPanel'}),
|
||
|
|
);
|
||
|
|
expect(await panel.isDisabled()).toBe(true);
|
||
|
|
fixture.componentInstance.isDisabled = false;
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await panel.isDisabled()).toBe(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to toggle expansion state of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
await panel.toggle();
|
||
|
|
expect(await panel.isExpanded()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to expand a panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
await panel.expand();
|
||
|
|
expect(await panel.isExpanded()).toBe(true);
|
||
|
|
// checking a second time to ensure it does not modify
|
||
|
|
// the state if already expanded.
|
||
|
|
await panel.expand();
|
||
|
|
expect(await panel.isExpanded()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to collapse a panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
await panel.expand();
|
||
|
|
expect(await panel.isExpanded()).toBe(true);
|
||
|
|
await panel.collapse();
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
// checking a second time to ensure it does not modify
|
||
|
|
// the state if already collapsed.
|
||
|
|
await panel.collapse();
|
||
|
|
expect(await panel.isExpanded()).toBe(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get text content of expansion panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
expect(await panel.getTextContent()).toBe('Content of Panel#1');
|
||
|
|
fixture.componentInstance.panel1Content = 'new content';
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await panel.getTextContent()).toBe('new content');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get harness loader for content of panel', async () => {
|
||
|
|
const panel = await loader.getHarness(
|
||
|
|
MatExpansionPanelHarness.with({selector: '#standalonePanel'}),
|
||
|
|
);
|
||
|
|
const matchedHarnesses = await panel.getAllHarnesses(TestContentHarness);
|
||
|
|
expect(matchedHarnesses.length).toBe(1);
|
||
|
|
expect(await matchedHarnesses[0].getText()).toBe('Part of expansion panel');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to focus expansion panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
expect(getActiveElementTag()).not.toBe('mat-expansion-panel-header');
|
||
|
|
await panel.focus();
|
||
|
|
expect(getActiveElementTag()).toBe('mat-expansion-panel-header');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to blur expansion panel', async () => {
|
||
|
|
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||
|
|
await panel.focus();
|
||
|
|
expect(getActiveElementTag()).toBe('mat-expansion-panel-header');
|
||
|
|
await panel.blur();
|
||
|
|
expect(getActiveElementTag()).not.toBe('mat-expansion-panel-header');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to check if expansion panel has toggle indicator', async () => {
|
||
|
|
const accordion = await loader.getHarness(MatAccordionHarness);
|
||
|
|
const standalonePanel = await loader.getHarness(
|
||
|
|
MatExpansionPanelHarness.with({selector: '#standalonePanel'}),
|
||
|
|
);
|
||
|
|
const expansionPanels = [standalonePanel, ...(await accordion.getExpansionPanels())];
|
||
|
|
let toggleIndicatorChecks = await parallel(() => {
|
||
|
|
return expansionPanels.map(p => p.hasToggleIndicator());
|
||
|
|
});
|
||
|
|
expect(toggleIndicatorChecks.every(s => s)).toBe(true);
|
||
|
|
fixture.componentInstance.hideToggleIndicators = true;
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
toggleIndicatorChecks = await parallel(() => expansionPanels.map(p => p.hasToggleIndicator()));
|
||
|
|
expect(toggleIndicatorChecks.every(s => !s)).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get toggle indicator position of panels', async () => {
|
||
|
|
const accordion = await loader.getHarness(MatAccordionHarness);
|
||
|
|
const standalonePanel = await loader.getHarness(
|
||
|
|
MatExpansionPanelHarness.with({selector: '#standalonePanel'}),
|
||
|
|
);
|
||
|
|
const expansionPanels = [standalonePanel, ...(await accordion.getExpansionPanels())];
|
||
|
|
let togglePositions = await parallel(() =>
|
||
|
|
expansionPanels.map(p => p.getToggleIndicatorPosition()),
|
||
|
|
);
|
||
|
|
expect(togglePositions.every(p => p === 'after')).toBe(true);
|
||
|
|
fixture.componentInstance.toggleIndicatorsPosition = 'before';
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
togglePositions = await parallel(() => {
|
||
|
|
return expansionPanels.map(p => p.getToggleIndicatorPosition());
|
||
|
|
});
|
||
|
|
expect(togglePositions.every(p => p === 'before')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get expansion panels of accordion', async () => {
|
||
|
|
const accordion = await loader.getHarness(MatAccordionHarness);
|
||
|
|
const panels = await accordion.getExpansionPanels();
|
||
|
|
expect(panels.length).toBe(2);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Title of Panel#1');
|
||
|
|
expect(await panels[1].getTitle()).toBe('Title of Panel#2');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to get expansion panels of accordion with filter', async () => {
|
||
|
|
const accordion = await loader.getHarness(MatAccordionHarness);
|
||
|
|
const panels = await accordion.getExpansionPanels({title: /Panel#1/});
|
||
|
|
expect(panels.length).toBe(1);
|
||
|
|
expect(await panels[0].getTitle()).toBe('Title of Panel#1');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should be able to check if accordion has multi panel support enabled', async () => {
|
||
|
|
const accordion = await loader.getHarness(MatAccordionHarness);
|
||
|
|
expect(await accordion.isMulti()).toBe(false);
|
||
|
|
fixture.componentInstance.multiMode = true;
|
||
|
|
fixture.changeDetectorRef.markForCheck();
|
||
|
|
expect(await accordion.isMulti()).toBe(true);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function getActiveElementTag() {
|
||
|
|
return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
template: `
|
||
|
|
<mat-accordion id="accordion1" [hideToggle]="hideToggleIndicators"
|
||
|
|
[togglePosition]="toggleIndicatorsPosition"
|
||
|
|
[multi]="multiMode">
|
||
|
|
<mat-expansion-panel [expanded]="panel1Expanded" id="panel1">
|
||
|
|
<mat-expansion-panel-header>
|
||
|
|
<mat-panel-title>{{panel1Title}}</mat-panel-title>
|
||
|
|
<mat-panel-description>{{panel1Description}}</mat-panel-description>
|
||
|
|
</mat-expansion-panel-header>
|
||
|
|
{{panel1Content}}
|
||
|
|
</mat-expansion-panel>
|
||
|
|
<mat-expansion-panel expanded>
|
||
|
|
<mat-expansion-panel-header>
|
||
|
|
<mat-panel-title>
|
||
|
|
Title of Panel#2
|
||
|
|
</mat-panel-title>
|
||
|
|
<mat-panel-description>
|
||
|
|
Description of Panel#2
|
||
|
|
</mat-panel-description>
|
||
|
|
</mat-expansion-panel-header>
|
||
|
|
Content of Panel#2
|
||
|
|
</mat-expansion-panel>
|
||
|
|
</mat-accordion>
|
||
|
|
|
||
|
|
<mat-accordion id="accordion2">
|
||
|
|
<mat-expansion-panel>
|
||
|
|
<mat-expansion-panel-header>
|
||
|
|
Accordion #2 - Header
|
||
|
|
</mat-expansion-panel-header>
|
||
|
|
<p>Accordion #2 - Content</p>
|
||
|
|
</mat-expansion-panel>
|
||
|
|
</mat-accordion>
|
||
|
|
|
||
|
|
<mat-expansion-panel id="standalonePanel" expanded
|
||
|
|
[hideToggle]="hideToggleIndicators"
|
||
|
|
[togglePosition]="toggleIndicatorsPosition">
|
||
|
|
<mat-expansion-panel-header>
|
||
|
|
<mat-panel-title>Standalone Panel Title</mat-panel-title>
|
||
|
|
</mat-expansion-panel-header>
|
||
|
|
<div>
|
||
|
|
<span>Standalone Panel Body</span>
|
||
|
|
<div class="test-content-harness">Part of expansion panel</div>
|
||
|
|
</div>
|
||
|
|
</mat-expansion-panel>
|
||
|
|
|
||
|
|
<mat-expansion-panel id="disabledPanel" [disabled]="isDisabled">
|
||
|
|
<mat-expansion-panel-header>
|
||
|
|
<mat-panel-title>Disabled Panel Title</mat-panel-title>
|
||
|
|
</mat-expansion-panel-header>
|
||
|
|
</mat-expansion-panel>
|
||
|
|
|
||
|
|
<div class="test-content-harness">Outside of expansion panel</div>
|
||
|
|
`,
|
||
|
|
standalone: true,
|
||
|
|
imports: [MatExpansionModule],
|
||
|
|
})
|
||
|
|
class ExpansionHarnessTestComponent {
|
||
|
|
panel1Expanded = false;
|
||
|
|
panel1Title = 'Title of Panel#1';
|
||
|
|
panel1Description = 'Description of Panel#1';
|
||
|
|
panel1Content = 'Content of Panel#1';
|
||
|
|
hideToggleIndicators = false;
|
||
|
|
toggleIndicatorsPosition: MatAccordionTogglePosition;
|
||
|
|
isDisabled = true;
|
||
|
|
multiMode = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
class TestContentHarness extends ComponentHarness {
|
||
|
|
static hostSelector = '.test-content-harness';
|
||
|
|
|
||
|
|
async getText() {
|
||
|
|
return (await this.host()).text();
|
||
|
|
}
|
||
|
|
}
|