Testing an accordion component

Last updated 6 months ago
accrdion-group.component.spec.ts
import {createHostComponentFactory, SpectatorWithHost} from '@netbasal/spectator';
describe('AccordionGroupComponent', () => {
let host: SpectatorWithHost<AccordionGroupComponent>;
const createHost = createHostComponentFactory({
component: AccordionGroupComponent,
declarations: [AccordionContentComponent, AccordionHeaderComponent]
});
it('should be created in collapsed state, and expanded when isExpanded of its content element is set to true.', () => {
host = createHost(`
<dato-accordion-group>
<dato-accordion-header>
<div class="header">Header Test</div>
</dato-accordion-header>
<dato-accordion-content>
<div class="content">Content Test</div>
</dato-accordion-content>
</dato-accordion-group>`
);
expect(host.query('.header')).toHaveText(testHeaderText);
expect(host.component.content.isExpanded).toBeFalsy();
expect(host.query('.content')).toBeNull();
host.component.content.isExpanded = true;
host.detectChanges();
expect(host.query('.content')).toHaveText(testContentText);
});
});
accrdion-content.component.spec.ts
import {createHostComponentFactory, SpectatorWithHost} from '@netbasal/spectator';
describe('AccordionContentComponent', () => {
let host: SpectatorWithHost<AccordionContentComponent>;
const createHost = createHostComponentFactory(AccordionContentComponent);
it('should not be expanded initially.', function () {
host = createHost(`
<dato-accordion-content>
<div class="content">Content Test</div>
</dato-accordion-content>`
);
expect(host.component.isExpanded).toBeFalsy();
expect(host.query('.content')).toBeNull();
host.setInput('isExpanded', true);
expect(host.query('.content')).toHaveText(testText);
});
});
accrdion-header.component.spec.ts
import {createHostComponentFactory, SpectatorWithHost} from '@netbasal/spectator';
describe('AccordionHeaderComponent', () => {
let host: SpectatorWithHost<AccordionHeaderComponent>;
const createHost = createHostComponentFactory(AccordionHeaderComponent);
it('should be created', function () {
const testText = 'Header Test';
host = createHost(`
<dato-accordion-header>
<div class="header">Header Test</div>
</dato-accordion-header>`
);
expect(host.query('.header')).toHaveText(testText);
});
it('should add the expanded class when isExpanded is set to true.', function () {
const testText = 'Header Test';
host = createHost(`
<dato-accordion-header>
<div class="header">Header Test</div>
</dato-accordion-header>`
);
expect(host.element).not.toHaveClass('expanded');
host.setInput('isExpanded', true);
expect(host.element).toHaveClass('expanded');
});
});