path: root/spec/frontend/environments/new_environment_item_spec.js

import VueApollo from 'vue-apollo';
import Vue from 'vue';
import { GlCollapse, GlIcon } from '@gitlab/ui';
import createMockApollo from 'helpers/mock_apollo_helper';
import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
import { stubTransition } from 'helpers/stub_transition';
import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
import { __, s__, sprintf } from '~/locale';
import EnvironmentItem from '~/environments/components/new_environment_item.vue';
import Deployment from '~/environments/components/deployment.vue';
import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';

Vue.use(VueApollo);

describe('~/environments/components/new_environment_item.vue', () => {
  let wrapper;

  const createApolloProvider = () => {
    return createMockApollo();
  };

  const createWrapper = ({ propsData = {}, apolloProvider } = {}) =>
    mountExtended(EnvironmentItem, {
      apolloProvider,
      propsData: { environment: resolvedEnvironment, ...propsData },
      provide: { helpPagePath: '/help', projectId: '1' },
      stubs: { transition: stubTransition() },
    });

  const findDeployment = () => wrapper.findComponent(Deployment);

  const expandCollapsedSection = async () => {
    const button = wrapper.findByRole('button', { name: __('Expand') });
    await button.trigger('click');

    return button;
  };

  afterEach(() => {
    wrapper?.destroy();
  });

  it('displays the name when not in a folder', () => {
    wrapper = createWrapper({ apolloProvider: createApolloProvider() });

    const name = wrapper.findByRole('link', { name: resolvedEnvironment.name });
    expect(name.exists()).toBe(true);
  });

  it('displays the name minus the folder prefix when in a folder', () => {
    wrapper = createWrapper({
      propsData: { inFolder: true },
      apolloProvider: createApolloProvider(),
    });

    const name = wrapper.findByRole('link', { name: resolvedEnvironment.nameWithoutType });
    expect(name.exists()).toBe(true);
  });

  it('truncates the name if it is very long', () => {
    const environment = {
      ...resolvedEnvironment,
      name:
        'this is a really long name that should be truncated because otherwise it would look strange in the UI',
    };
    wrapper = createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });

    const name = wrapper.findByRole('link', {
      name: (text) => environment.name.startsWith(text.slice(0, -1)),
    });
    expect(name.exists()).toBe(true);
    expect(name.text()).toHaveLength(80);
  });

  describe('tier', () => {
    it('displays the tier of the environment when defined in yaml', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));

      expect(tier.text()).toBe(resolvedEnvironment.lastDeployment.tierInYaml);
    });

    it('does not display the tier if not defined in yaml', () => {
      const environment = {
        ...resolvedEnvironment,
        lastDeployment: {
          ...resolvedEnvironment.lastDeployment,
          tierInYaml: null,
        },
      };
      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));

      expect(tier.exists()).toBe(false);
    });
  });

  describe('url', () => {
    it('shows a link for the url if one is present', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const url = wrapper.findByRole('link', { name: s__('Environments|Open live environment') });

      expect(url.attributes('href')).toEqual(resolvedEnvironment.externalUrl);
    });

    it('does not show a link for the url if one is missing', () => {
      wrapper = createWrapper({
        propsData: { environment: { ...resolvedEnvironment, externalUrl: '' } },
        apolloProvider: createApolloProvider(),
      });

      const url = wrapper.findByRole('link', { name: s__('Environments|Open live environment') });

      expect(url.exists()).toBe(false);
    });
  });

  describe('actions', () => {
    it('shows a dropdown if there are actions to perform', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const actions = wrapper.findByRole('button', { name: __('Deploy to...') });

      expect(actions.exists()).toBe(true);
    });

    it('does not show a dropdown if there are no actions to perform', () => {
      wrapper = createWrapper({
        propsData: {
          environment: {
            ...resolvedEnvironment,
            lastDeployment: null,
          },
          apolloProvider: createApolloProvider(),
        },
      });

      const actions = wrapper.findByRole('button', { name: __('Deploy to...') });

      expect(actions.exists()).toBe(false);
    });

    it('passes all the actions down to the action component', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const action = wrapper.findByRole('menuitem', { name: 'deploy-staging' });

      expect(action.exists()).toBe(true);
    });
  });

  describe('stop', () => {
    it('shows a buton to stop the environment if the environment is available', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const stop = wrapper.findByRole('button', { name: s__('Environments|Stop environment') });

      expect(stop.exists()).toBe(true);
    });

    it('does not show a buton to stop the environment if the environment is stopped', () => {
      wrapper = createWrapper({
        propsData: { environment: { ...resolvedEnvironment, canStop: false } },
        apolloProvider: createApolloProvider(),
      });

      const stop = wrapper.findByRole('button', { name: s__('Environments|Stop environment') });

      expect(stop.exists()).toBe(false);
    });
  });

  describe('rollback', () => {
    it('shows the option to rollback/re-deploy if available', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const rollback = wrapper.findByRole('menuitem', {
        name: s__('Environments|Re-deploy to environment'),
      });

      expect(rollback.exists()).toBe(true);
    });

    it('does not show the option to rollback/re-deploy if not available', () => {
      wrapper = createWrapper({
        propsData: { environment: { ...resolvedEnvironment, lastDeployment: null } },
        apolloProvider: createApolloProvider(),
      });

      const rollback = wrapper.findByRole('menuitem', {
        name: s__('Environments|Re-deploy to environment'),
      });

      expect(rollback.exists()).toBe(false);
    });
  });

  describe('pin', () => {
    describe('with autostop', () => {
      let environment;

      beforeEach(() => {
        environment = {
          ...resolvedEnvironment,
          autoStopAt: new Date(Date.now() + 100000).toString(),
        };
        wrapper = createWrapper({
          propsData: {
            environment,
          },
          apolloProvider: createApolloProvider(),
        });
      });

      it('shows the option to pin the environment if there is an autostop date', () => {
        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });

        expect(pin.exists()).toBe(true);
      });

      it('shows when the environment auto stops', () => {
        const autoStop = wrapper.findByTitle(formatDate(environment.autoStopAt));

        expect(autoStop.text()).toBe('in 1 minute');
      });
    });

    describe('without autostop', () => {
      beforeEach(() => {
        wrapper = createWrapper({ apolloProvider: createApolloProvider() });
      });

      it('does not show the option to pin the environment if there is no autostop date', () => {
        wrapper = createWrapper({ apolloProvider: createApolloProvider() });

        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });

        expect(pin.exists()).toBe(false);
      });

      it('does not show when the environment auto stops', () => {
        const autoStop = wrapper.findByText(
          sprintf(s__('Environment|Auto stop %{time}'), {
            time: getTimeago().format(resolvedEnvironment.autoStopAt),
          }),
        );

        expect(autoStop.exists()).toBe(false);
      });
    });

    describe('with past autostop', () => {
      let environment;

      beforeEach(() => {
        environment = {
          ...resolvedEnvironment,
          autoStopAt: new Date(Date.now() - 100000).toString(),
        };
        wrapper = createWrapper({
          propsData: {
            environment,
          },
          apolloProvider: createApolloProvider(),
        });
      });

      it('does not show the option to pin the environment if there is no autostop date', () => {
        wrapper = createWrapper({ apolloProvider: createApolloProvider() });

        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });

        expect(pin.exists()).toBe(false);
      });

      it('does not show when the environment auto stops', () => {
        const autoStop = wrapper.findByText(
          sprintf(s__('Environment|Auto stop %{time}'), {
            time: getTimeago().format(environment.autoStopAt),
          }),
        );

        expect(autoStop.exists()).toBe(false);
      });
    });
  });

  describe('monitoring', () => {
    it('shows the link to monitoring if metrics are set up', () => {
      wrapper = createWrapper({
        propsData: { environment: { ...resolvedEnvironment, metricsPath: '/metrics' } },
        apolloProvider: createApolloProvider(),
      });

      const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });

      expect(rollback.exists()).toBe(true);
    });

    it('does not show the link to monitoring if metrics are not set up', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });

      expect(rollback.exists()).toBe(false);
    });
  });
  describe('terminal', () => {
    it('shows the link to the terminal if set up', () => {
      wrapper = createWrapper({
        propsData: { environment: { ...resolvedEnvironment, terminalPath: '/terminal' } },
        apolloProvider: createApolloProvider(),
      });

      const rollback = wrapper.findByRole('menuitem', { name: __('Terminal') });

      expect(rollback.exists()).toBe(true);
    });

    it('does not show the link to the terminal if not set up', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const rollback = wrapper.findByRole('menuitem', { name: __('Terminal') });

      expect(rollback.exists()).toBe(false);
    });
  });

  describe('delete', () => {
    it('shows the button to delete the environment if possible', () => {
      wrapper = createWrapper({
        propsData: {
          environment: { ...resolvedEnvironment, canDelete: true, deletePath: '/terminal' },
        },
        apolloProvider: createApolloProvider(),
      });

      const rollback = wrapper.findByRole('menuitem', {
        name: s__('Environments|Delete environment'),
      });

      expect(rollback.exists()).toBe(true);
    });

    it('does not show the button to delete the environment if not possible', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const rollback = wrapper.findByRole('menuitem', {
        name: s__('Environments|Delete environment'),
      });

      expect(rollback.exists()).toBe(false);
    });
  });

  describe('collapse', () => {
    let icon;
    let collapse;
    let environmentName;

    beforeEach(() => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });
      collapse = wrapper.findComponent(GlCollapse);
      icon = wrapper.findComponent(GlIcon);
      environmentName = wrapper.findByText(resolvedEnvironment.name);
    });

    it('is collapsed by default', () => {
      expect(collapse.attributes('visible')).toBeUndefined();
      expect(icon.props('name')).toEqual('angle-right');
      expect(environmentName.classes('gl-font-weight-bold')).toBe(false);
    });

    it('opens on click', async () => {
      expect(findDeployment().isVisible()).toBe(false);

      const button = await expandCollapsedSection();

      expect(button.attributes('aria-label')).toBe(__('Collapse'));
      expect(collapse.attributes('visible')).toBe('visible');
      expect(icon.props('name')).toEqual('angle-down');
      expect(environmentName.classes('gl-font-weight-bold')).toBe(true);
      expect(findDeployment().isVisible()).toBe(true);
    });
  });
  describe('last deployment', () => {
    it('should pass the last deployment to the deployment component when it exists', () => {
      wrapper = createWrapper({ apolloProvider: createApolloProvider() });

      const deployment = findDeployment();
      expect(deployment.props('deployment')).toEqual(resolvedEnvironment.lastDeployment);
    });
    it('should not show the last deployment when it is missing', () => {
      const environment = {
        ...resolvedEnvironment,
        lastDeployment: null,
      };

      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      const deployment = findDeployment();
      expect(deployment.exists()).toBe(false);
    });
  });

  describe('upcoming deployment', () => {
    it('should pass the upcoming deployment to the deployment component when it exists', () => {
      const upcomingDeployment = resolvedEnvironment.lastDeployment;
      const environment = { ...resolvedEnvironment, lastDeployment: null, upcomingDeployment };
      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      const deployment = findDeployment();
      expect(deployment.props('deployment')).toEqual(upcomingDeployment);
    });
    it('should not show the upcoming deployment when it is missing', () => {
      const environment = {
        ...resolvedEnvironment,
        lastDeployment: null,
        upcomingDeployment: null,
      };

      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      const deployment = findDeployment();
      expect(deployment.exists()).toBe(false);
    });
  });

  describe('empty state', () => {
    it('should link to documentation', async () => {
      const environment = {
        ...resolvedEnvironment,
        lastDeployment: null,
        upcomingDeployment: null,
      };

      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      await expandCollapsedSection();

      const text = s__(
        'Environments|There are no deployments for this environment yet. Learn more about setting up deployments.',
      );

      const emptyState = wrapper.findByText((_content, element) => element.textContent === text);

      const link = extendedWrapper(emptyState).findByRole('link');

      expect(link.attributes('href')).toBe('/help');
    });

    it('should not link to the documentation when there are deployments', async () => {
      wrapper = createWrapper({
        apolloProvider: createApolloProvider(),
      });

      await expandCollapsedSection();

      const text = s__(
        'Environments|There are no deployments for this environment yet. Learn more about setting up deployments.',
      );

      const emptyState = wrapper.findByText((_content, element) => element.textContent === text);

      expect(emptyState.exists()).toBe(false);
    });
  });

  describe('deploy boards', () => {
    it('should show a deploy board if the environment has a rollout status', async () => {
      const environment = {
        ...resolvedEnvironment,
        rolloutStatus,
      };

      wrapper = createWrapper({
        propsData: { environment },
        apolloProvider: createApolloProvider(),
      });

      await expandCollapsedSection();

      const deployBoard = wrapper.findComponent(DeployBoardWrapper);
      expect(deployBoard.exists()).toBe(true);
      expect(deployBoard.props('rolloutStatus')).toBe(rolloutStatus);
    });

    it('should not show a deploy board if the environment has no rollout status', async () => {
      wrapper = createWrapper({
        apolloProvider: createApolloProvider(),
      });

      await expandCollapsedSection();

      const deployBoard = wrapper.findComponent(DeployBoardWrapper);
      expect(deployBoard.exists()).toBe(false);
    });
  });
});