gitlab-org--gitlab-foss/spec/frontend/environments/environments_detail_header_spec.js

import { GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
import EnvironmentsDetailHeader from '~/environments/components/environments_detail_header.vue';
import StopEnvironmentModal from '~/environments/components/stop_environment_modal.vue';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import { createEnvironment } from './mock_data';

describe('Environments detail header component', () => {
  const cancelAutoStopPath = '/my-environment/cancel/path';
  const terminalPath = '/my-environment/terminal/path';
  const metricsPath = '/my-environment/metrics/path';
  const updatePath = '/my-environment/edit/path';

  let wrapper;

  const findHeader = () => wrapper.findByRole('heading');
  const findAutoStopsAt = () => wrapper.findByTestId('auto-stops-at');
  const findCancelAutoStopAtButton = () => wrapper.findByTestId('cancel-auto-stop-button');
  const findCancelAutoStopAtForm = () => wrapper.findByTestId('cancel-auto-stop-form');
  const findTerminalButton = () => wrapper.findByTestId('terminal-button');
  const findExternalUrlButton = () => wrapper.findByTestId('external-url-button');
  const findMetricsButton = () => wrapper.findByTestId('metrics-button');
  const findEditButton = () => wrapper.findByTestId('edit-button');
  const findStopButton = () => wrapper.findByTestId('stop-button');
  const findDestroyButton = () => wrapper.findByTestId('destroy-button');
  const findStopEnvironmentModal = () => wrapper.findComponent(StopEnvironmentModal);
  const findDeleteEnvironmentModal = () => wrapper.findComponent(DeleteEnvironmentModal);

  const buttons = [
    ['Cancel Auto Stop At', findCancelAutoStopAtButton],
    ['Terminal', findTerminalButton],
    ['External Url', findExternalUrlButton],
    ['Metrics', findMetricsButton],
    ['Edit', findEditButton],
    ['Stop', findStopButton],
    ['Destroy', findDestroyButton],
  ];

  const createWrapper = ({ props }) => {
    wrapper = shallowMountExtended(EnvironmentsDetailHeader, {
      stubs: {
        GlSprintf,
        TimeAgo,
      },
      directives: {
        GlTooltip: createMockDirective(),
      },
      propsData: {
        canAdminEnvironment: false,
        canUpdateEnvironment: false,
        canStopEnvironment: false,
        canDestroyEnvironment: false,
        ...props,
      },
    });
  };

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

  describe('default state with minimal access', () => {
    beforeEach(() => {
      createWrapper({ props: { environment: createEnvironment({ externalUrl: null }) } });
    });

    it('displays the environment name', () => {
      expect(findHeader().text()).toBe('My environment');
    });

    it('does not display an auto stops at text', () => {
      expect(findAutoStopsAt().exists()).toBe(false);
    });

    it.each(buttons)('does not display button: %s', (_, findSelector) => {
      expect(findSelector().exists()).toBe(false);
    });

    it('does not display stop environment modal', () => {
      expect(findStopEnvironmentModal().exists()).toBe(false);
    });

    it('does not display delete environment modal', () => {
      expect(findDeleteEnvironmentModal().exists()).toBe(false);
    });
  });

  describe('when auto stops at is enabled and environment is available', () => {
    beforeEach(() => {
      const now = new Date();
      const tomorrow = new Date();
      tomorrow.setDate(now.getDate() + 1);
      createWrapper({
        props: {
          environment: createEnvironment({ autoStopAt: tomorrow.toISOString() }),
          cancelAutoStopPath,
        },
      });
    });

    it('displays a text that describes when the environment is going to be stopped', () => {
      expect(findAutoStopsAt().text()).toBe('Auto stops in 1 day');
    });

    it('displays a cancel auto stops at button with a form to make a post request', () => {
      const button = findCancelAutoStopAtButton();
      const form = findCancelAutoStopAtForm();
      expect(form.attributes('action')).toBe(cancelAutoStopPath);
      expect(form.attributes('method')).toBe('POST');
      expect(button.props('icon')).toBe('thumbtack');
      expect(button.attributes('type')).toBe('submit');
    });

    it('includes a csrf token', () => {
      const input = findCancelAutoStopAtForm().find('input');
      expect(input.attributes('name')).toBe('authenticity_token');
    });
  });

  describe('when auto stops at is enabled and environment is unavailable (already stopped)', () => {
    beforeEach(() => {
      const now = new Date();
      const tomorrow = new Date();
      tomorrow.setDate(now.getDate() + 1);
      createWrapper({
        props: {
          environment: createEnvironment({
            autoStopAt: tomorrow.toISOString(),
            isAvailable: false,
          }),
          cancelAutoStopPath,
        },
      });
    });

    it('does not display a text that describes when the environment is going to be stopped', () => {
      expect(findAutoStopsAt().exists()).toBe(false);
    });

    it('displays a cancel auto stops at button with correct path', () => {
      expect(findCancelAutoStopAtButton().exists()).toBe(false);
    });
  });

  describe('when has a terminal', () => {
    beforeEach(() => {
      createWrapper({
        props: {
          environment: createEnvironment({ hasTerminals: true }),
          canAdminEnvironment: true,
          terminalPath,
        },
      });
    });

    it('displays the terminal button with correct path', () => {
      expect(findTerminalButton().attributes('href')).toBe(terminalPath);
    });
  });

  describe('when has an external url enabled', () => {
    const externalUrl = 'https://example.com/my-environment/external/url';

    beforeEach(() => {
      createWrapper({
        props: {
          environment: createEnvironment({ hasTerminals: true, externalUrl }),
        },
      });
    });

    it('displays the external url button with correct path', () => {
      expect(findExternalUrlButton().attributes('href')).toBe(externalUrl);
    });
  });

  describe('when metrics are enabled', () => {
    beforeEach(() => {
      createWrapper({
        props: {
          environment: createEnvironment({ metricsUrl: 'my metrics url' }),
          metricsPath,
        },
      });
    });

    it('displays the metrics button with correct path', () => {
      expect(findMetricsButton().attributes('href')).toBe(metricsPath);
    });

    it('uses a gl tooltip for the title', () => {
      const button = findMetricsButton();
      const tooltip = getBinding(button.element, 'gl-tooltip');

      expect(tooltip).toBeDefined();
      expect(button.attributes('title')).toBe('See metrics');
    });
  });

  describe('when has all admin rights', () => {
    beforeEach(() => {
      createWrapper({
        props: {
          environment: createEnvironment(),
          canAdminEnvironment: true,
          canStopEnvironment: true,
          canUpdateEnvironment: true,
          updatePath,
        },
      });
    });

    it('displays the edit button with correct path', () => {
      expect(findEditButton().attributes('href')).toBe(updatePath);
    });

    it('displays the stop button with correct icon', () => {
      expect(findStopButton().attributes('icon')).toBe('stop');
    });

    it('displays stop environment modal', () => {
      expect(findStopEnvironmentModal().exists()).toBe(true);
    });
  });

  describe('when the environment is unavailable and user has destroy permissions', () => {
    beforeEach(() => {
      createWrapper({
        props: {
          environment: createEnvironment({ isAvailable: false }),
          canDestroyEnvironment: true,
        },
      });
    });

    it('displays a delete button', () => {
      expect(findDestroyButton().exists()).toBe(true);
    });

    it('displays delete environment modal', () => {
      expect(findDeleteEnvironmentModal().exists()).toBe(true);
    });
  });
});