Accordion Components

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