import commonModule from '../';

describe('wsCardLoadingIndicatorComponent', () => {
  let outerScope;
  let element;

  beforeEach(angular.mock.module(commonModule));
  beforeEach(angular.mock.module(($provide) => {
    // Stub $timeout with a synchronous implementation for testing.
    const mockTimeout = fn => Promise.resolve(fn());
    $provide.service('$timeout', () => mockTimeout);
  }));

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

  describe('initial, not ready, state', () => {
    injectElement(`
      <div>
        <ws-card-loading-indicator ready="false" error-message="Failed to load." min-height="150">
          <h3>Hello, world!</h3>
        </ws-card-loading-indicator>
      </div>
    `);

    it('card loading indicator should be present', () => {
      const cardLoadingIndicators = element[0].querySelectorAll('.card-loading-indicator');
      expect(cardLoadingIndicators.length).toBe(1);
    });
    it('card content should not be present', () => {
      const cardLoadingContents = element[0].querySelectorAll('.card-loading-content');
      expect(cardLoadingContents.length).toBe(0);
    });
    it('card error should not be present', () => {
      const cardLoadingErrors = element[0].querySelectorAll('.alert');
      expect(cardLoadingErrors.length).toBe(0);
    });
  });

  describe('ready state', () => {
    injectElement(`
      <div>
        <ws-card-loading-indicator ready="true" error-message="Failed to load." min-height="150">
          <h3>Hello, world!</h3>
        </ws-card-loading-indicator>
      </div>
    `);

    it('card loading indicator should not be present', () => {
      const cardLoadingIndicators = element[0].querySelectorAll('.card-loading-indicator');
      expect(cardLoadingIndicators.length).toBe(0);
    });
    it('card content should be present', () => {
      const cardLoadingContents = element[0].querySelectorAll('.card-loading-content');
      expect(cardLoadingContents.length).toBe(1);
    });
    it('card error should not be present', () => {
      const cardLoadingErrors = element[0].querySelectorAll('.alert');
      expect(cardLoadingErrors.length).toBe(0);
    });
  });

  describe('error state', () => {
    injectElement(`
      <div>
        <ws-card-loading-indicator ready="'error'" error-message="Failed to load." min-height="150">
          <h3>Hello, world!</h3>
        </ws-card-loading-indicator>
      </div>
    `);

    it('card loading indicator should not be present', () => {
      const cardLoadingIndicators = element[0].querySelectorAll('.card-loading-indicator');
      expect(cardLoadingIndicators.length).toBe(0);
    });
    it('card content should be present', () => {
      const cardLoadingContents = element[0].querySelectorAll('.card-loading-content');
      expect(cardLoadingContents.length).toBe(1);
    });
    it('card error should be present', () => {
      const cardLoadingErrors = element[0].querySelectorAll('.alert');
      expect(cardLoadingErrors.length).toBe(1);
    });
  });
});
