import commonModule from '../';

describe('wsStepper component', () => {
  let outerScope;
  let element;
  let compiledElement;

  beforeEach(angular.mock.module(commonModule));

  function injectElement(elementHtml) {
    beforeEach(angular.mock.inject(($rootScope, $compile) => {
      outerScope = $rootScope.$new();
      element = angular.element(elementHtml);
      compiledElement = $compile(element)(outerScope);
      outerScope.$digest();
    }));
  }

  describe('steps display', () => {
    injectElement('<ws-stepper steps="[{ id: 1, title: \'First\' }, { id: 2, title: \'Second\' }, { id: 3, title: \'Third\' }]" active-step="2"/>');

    it('renders all step titles', () => {
      const stepTitles = compiledElement.find('.ws-stepper__step-title');
      expect(stepTitles.length).toBe(3);
      expect(stepTitles[0].innerText.trim()).toEqual('First');
      expect(stepTitles[1].innerText.trim()).toEqual('Second');
      expect(stepTitles[2].innerText.trim()).toEqual('Third');
    });

    it('renders all step indicators', () => {
      const stepIndicators = compiledElement.find('.ws-stepper__step-indicator');
      expect(stepIndicators.length).toBe(3);
    });
  });

  describe('active step', () => {
    injectElement('<ws-stepper steps="[{ id: 1, title: \'First\' }, { id: 2, title: \'Second\' }, { id: 3, title: \'Third\' }]" active-step="2"/>');

    it('highlights the active step indicator', () => {
      expect(compiledElement.find('.ws-stepper__step-indicator--active').length).toBe(1);
    });

    it('applies correct styles to active step', () => {
      expect(compiledElement.find('.ws-stepper__step-title--active')[0].innerText.trim()).toEqual('Second');
    });
  });
});
