import { Spectator, createComponentFactory } from '@ngneat/spectator';
import { ShellSectionToggleComponent } from './section-toggle.component';

describe('ShellSectionToggleComponent', () => {
  let spectator: Spectator<ShellSectionToggleComponent>;
  const createComponent = createComponentFactory(ShellSectionToggleComponent);

  beforeEach(() => {
    spectator = createComponent();
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  describe('setSection()', () => {
    it('should set the section', () => {
      spectator.component.setSection('test');
      expect(spectator.component.section).toEqual('test');
    });

    it('should emit sectionChange', () => {
      const sectionChange = spectator.component.sectionChange;
      spyOn(sectionChange, 'emit');
      spectator.component.setSection('test');
      expect(sectionChange.emit).toHaveBeenCalledWith('test');
    });

    it('should not call emit if section is the same', () => {
      const sectionChange = spectator.component.sectionChange;
      spyOn(sectionChange, 'emit');
      spectator.component.setSection('test');
      spectator.component.setSection('test');
      expect(sectionChange.emit).toHaveBeenCalledTimes(1);
    });

    it('should call updateSwitchPositionAndSize()', () => {
      spyOn(spectator.component, 'updateSwitchPositionAndSize');
      spectator.component.setSection('test');
      expect(spectator.component.updateSwitchPositionAndSize).toHaveBeenCalled();
    });
  });

  describe('updateSwitchPositionAndSize()', () => {
    it('should call setStyle 2 times', () => {
      spyOn(spectator.component['_renderer'], 'setStyle');
      spectator.component.updateSwitchPositionAndSize();
      expect(spectator.component['_renderer'].setStyle).toHaveBeenCalledTimes(2);
    });
  });

  describe('button element', () => {
    it('should have an attribute section', () => {
      spectator.setInput('sections', [
        {
          label: 'test 1',
          key: 'test1',
        },
        {
          label: 'test 2',
          key: 'test2',
        },
      ]);

      expect(spectator.query('button[section="test1"]')).toExist();
      expect(spectator.query('button[section="test2"]')).toExist();
    });

    it('should have the class active when section is selected', () => {
      spectator.setInput({
        sections: [
          {
            label: 'test 1',
            key: 'test1',
          },
          {
            label: 'test 2',
            key: 'test2',
          },
        ],
        section: 'test1',
      });

      expect(spectator.query('button[section="test1"]')).toHaveClass('active');
      expect(spectator.query('button[section="test2"]')).not.toHaveClass('active');
    });

    it('should have the label as content', () => {
      spectator.setInput({
        sections: [
          {
            label: 'test 1',
            key: 'test1',
          },
          {
            label: 'test 2',
            key: 'test2',
          },
        ],
        section: 'test1',
      });

      expect(spectator.query('button[section="test1"]')).toHaveText('test 1');
      expect(spectator.query('button[section="test2"]')).toHaveText('test 2');
    });
  });

  describe('sectionChange', () => {
    it('should emit sectionChange', () => {
      spectator.output('sectionChange').subscribe((section) => {
        expect(section).toEqual('test');
      });
      spectator.component.setSection('test');
    });
  });
});
