gitlab-org--gitlab-foss/spec/frontend/code_quality_walkthrough/components/step_spec.js

import { GlButton, GlPopover } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Cookies from 'js-cookie';
import Step from '~/code_quality_walkthrough/components/step.vue';
import { EXPERIMENT_NAME, STEPS } from '~/code_quality_walkthrough/constants';
import { TRACKING_CONTEXT_SCHEMA } from '~/experimentation/constants';
import { getParameterByName } from '~/lib/utils/url_utility';
import Tracking from '~/tracking';

jest.mock('~/lib/utils/url_utility', () => ({
  ...jest.requireActual('~/lib/utils/url_utility'),
  getParameterByName: jest.fn(),
}));

let wrapper;

function factory({ step, link }) {
  wrapper = shallowMount(Step, {
    propsData: { step, link },
  });
}

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

const dummyLink = '/group/project/-/jobs/:id?code_quality_walkthrough=true';
const dummyContext = 'experiment_context';

const findButton = () => wrapper.findComponent(GlButton);
const findPopover = () => wrapper.findComponent(GlPopover);

describe('When the code_quality_walkthrough URL parameter is missing', () => {
  beforeEach(() => {
    getParameterByName.mockReturnValue(false);
  });

  it('does not render the component', () => {
    factory({
      step: STEPS.commitCiFile,
    });

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

describe('When the code_quality_walkthrough URL parameter is present', () => {
  beforeEach(() => {
    getParameterByName.mockReturnValue(true);
    Cookies.set(EXPERIMENT_NAME, { data: dummyContext });
  });

  afterEach(() => {
    Cookies.remove(EXPERIMENT_NAME);
  });

  describe('When mounting the component', () => {
    beforeEach(() => {
      jest.spyOn(Tracking, 'event');

      factory({
        step: STEPS.commitCiFile,
      });
    });

    it('tracks an event', () => {
      expect(Tracking.event).toHaveBeenCalledWith(
        EXPERIMENT_NAME,
        `${STEPS.commitCiFile}_displayed`,
        {
          context: {
            schema: TRACKING_CONTEXT_SCHEMA,
            data: dummyContext,
          },
        },
      );
    });
  });

  describe('When updating the component', () => {
    beforeEach(() => {
      factory({
        step: STEPS.runningPipeline,
      });

      jest.spyOn(Tracking, 'event');

      wrapper.setProps({ step: STEPS.successPipeline });
    });

    it('tracks an event', () => {
      expect(Tracking.event).toHaveBeenCalledWith(
        EXPERIMENT_NAME,
        `${STEPS.successPipeline}_displayed`,
        {
          context: {
            schema: TRACKING_CONTEXT_SCHEMA,
            data: dummyContext,
          },
        },
      );
    });
  });

  describe('When dismissing a popover', () => {
    beforeEach(() => {
      factory({
        step: STEPS.commitCiFile,
      });

      jest.spyOn(Cookies, 'set');
      jest.spyOn(Tracking, 'event');

      findButton().vm.$emit('click');
    });

    it('sets a cookie', () => {
      expect(Cookies.set).toHaveBeenCalledWith(
        EXPERIMENT_NAME,
        { commit_ci_file: true, data: dummyContext },
        { expires: 365 },
      );
    });

    it('removes the popover', () => {
      expect(findPopover().exists()).toBe(false);
    });

    it('tracks an event', () => {
      expect(Tracking.event).toHaveBeenCalledWith(
        EXPERIMENT_NAME,
        `${STEPS.commitCiFile}_dismissed`,
        {
          context: {
            schema: TRACKING_CONTEXT_SCHEMA,
            data: dummyContext,
          },
        },
      );
    });
  });

  describe('Code Quality Walkthrough Step component', () => {
    describe.each(Object.values(STEPS))('%s step', (step) => {
      it(`renders ${step === STEPS.troubleshootJob ? 'an alert' : 'a popover'}`, () => {
        const options = { step };
        if ([STEPS.successPipeline, STEPS.failedPipeline].includes(step)) {
          options.link = dummyLink;
        }
        factory(options);

        expect(wrapper.element).toMatchSnapshot();
      });
    });
  });
});