import Vue from 'vue';
import environmentTableComp from '~/environments/components/environments_table.vue';
import eventHub from '~/environments/event_hub';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { deployBoardMockData } from 'spec/environments/mock_data';

describe('Environment table', () => {
  let Component;
  let vm;

  beforeEach(() => {
    Component = Vue.extend(environmentTableComp);
  });

  afterEach(() => {
    vm.$destroy();
  });

  it('Should render a table', () => {
    const mockItem = {
      name: 'review',
      folderName: 'review',
      size: 3,
      isFolder: true,
      environment_path: 'url',
    };

    vm = mountComponent(Component, {
      environments: [mockItem],
      canReadEnvironment: true,
      // ee-only start
      canaryDeploymentFeatureId: 'canary_deployment',
      showCanaryDeploymentCallout: true,
      userCalloutsPath: '/callouts',
      lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
      helpCanaryDeploymentsPath: 'help/canary-deployments',
      // ee-only end
    });

    expect(vm.$el.getAttribute('class')).toContain('ci-table');
  });

  it('should render deploy board container when data is provided', () => {
    const mockItem = {
      name: 'review',
      size: 1,
      environment_path: 'url',
      id: 1,
      hasDeployBoard: true,
      deployBoardData: deployBoardMockData,
      isDeployBoardVisible: true,
      isLoadingDeployBoard: false,
      isEmptyDeployBoard: false,
    };

    vm = mountComponent(Component, {
      environments: [mockItem],
      canCreateDeployment: false,
      canReadEnvironment: true,
      // ee-only start
      canaryDeploymentFeatureId: 'canary_deployment',
      showCanaryDeploymentCallout: true,
      userCalloutsPath: '/callouts',
      lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
      helpCanaryDeploymentsPath: 'help/canary-deployments',
      // ee-only end
    });

    expect(vm.$el.querySelector('.js-deploy-board-row')).toBeDefined();
    expect(vm.$el.querySelector('.deploy-board-icon')).not.toBeNull();
  });

  it('should toggle deploy board visibility when arrow is clicked', done => {
    const mockItem = {
      name: 'review',
      size: 1,
      environment_path: 'url',
      id: 1,
      hasDeployBoard: true,
      deployBoardData: {
        instances: [{ status: 'ready', tooltip: 'foo' }],
        abort_url: 'url',
        rollback_url: 'url',
        completion: 100,
        is_completed: true,
      },
      isDeployBoardVisible: false,
    };

    eventHub.$on('toggleDeployBoard', env => {
      expect(env.id).toEqual(mockItem.id);
      done();
    });

    vm = mountComponent(Component, {
      environments: [mockItem],
      canReadEnvironment: true,
      // ee-only start
      canaryDeploymentFeatureId: 'canary_deployment',
      showCanaryDeploymentCallout: true,
      userCalloutsPath: '/callouts',
      lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
      helpCanaryDeploymentsPath: 'help/canary-deployments',
      // ee-only end
    });

    vm.$el.querySelector('.deploy-board-icon').click();
  });

  // ee-only start
  it('should render canary callout', () => {
    const mockItem = {
      name: 'review',
      folderName: 'review',
      size: 3,
      isFolder: true,
      environment_path: 'url',
      showCanaryCallout: true,
    };

    vm = mountComponent(Component, {
      environments: [mockItem],
      canCreateDeployment: false,
      canReadEnvironment: true,
      canaryDeploymentFeatureId: 'canary_deployment',
      showCanaryDeploymentCallout: true,
      userCalloutsPath: '/callouts',
      lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
      helpCanaryDeploymentsPath: 'help/canary-deployments',
    });

    expect(vm.$el.querySelector('.canary-deployment-callout')).not.toBeNull();
  });
  // ee-only end
});