gitlab-org--gitlab-foss/spec/frontend/jira_connect/subscriptions/components/app_spec.js

import { GlLink } from '@gitlab/ui';
import { nextTick } from 'vue';
import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';

import JiraConnectApp from '~/jira_connect/subscriptions/components/app.vue';
import SignInPage from '~/jira_connect/subscriptions/pages/sign_in/sign_in_page.vue';
import SubscriptionsPage from '~/jira_connect/subscriptions/pages/subscriptions_page.vue';
import UserLink from '~/jira_connect/subscriptions/components/user_link.vue';
import BrowserSupportAlert from '~/jira_connect/subscriptions/components/browser_support_alert.vue';
import createStore from '~/jira_connect/subscriptions/store';
import { SET_ALERT } from '~/jira_connect/subscriptions/store/mutation_types';
import { I18N_DEFAULT_SIGN_IN_ERROR_MESSAGE } from '~/jira_connect/subscriptions/constants';
import { __ } from '~/locale';
import AccessorUtilities from '~/lib/utils/accessor';
import * as api from '~/jira_connect/subscriptions/api';
import { mockSubscription } from '../mock_data';

jest.mock('~/jira_connect/subscriptions/utils', () => ({
  retrieveAlert: jest.fn().mockReturnValue({ message: 'error message' }),
  getGitlabSignInURL: jest.fn(),
}));

describe('JiraConnectApp', () => {
  let wrapper;
  let store;

  const findAlert = () => wrapper.findByTestId('jira-connect-persisted-alert');
  const findAlertLink = () => findAlert().findComponent(GlLink);
  const findSignInPage = () => wrapper.findComponent(SignInPage);
  const findSubscriptionsPage = () => wrapper.findComponent(SubscriptionsPage);
  const findUserLink = () => wrapper.findComponent(UserLink);
  const findBrowserSupportAlert = () => wrapper.findComponent(BrowserSupportAlert);

  const createComponent = ({ provide, mountFn = shallowMountExtended } = {}) => {
    store = createStore({ subscriptions: [mockSubscription] });
    jest.spyOn(store, 'dispatch').mockImplementation();

    wrapper = mountFn(JiraConnectApp, {
      store,
      provide,
    });
  };

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

  describe('template', () => {
    describe.each`
      scenario                   | usersPath    | shouldRenderSignInPage | shouldRenderSubscriptionsPage
      ${'user is not signed in'} | ${'/users'}  | ${true}                | ${false}
      ${'user is signed in'}     | ${undefined} | ${false}               | ${true}
    `('when $scenario', ({ usersPath, shouldRenderSignInPage, shouldRenderSubscriptionsPage }) => {
      beforeEach(() => {
        createComponent({
          provide: {
            usersPath,
          },
        });
      });

      it(`${shouldRenderSignInPage ? 'renders' : 'does not render'} sign in page`, () => {
        expect(findSignInPage().exists()).toBe(shouldRenderSignInPage);
        if (shouldRenderSignInPage) {
          expect(findSignInPage().props('hasSubscriptions')).toBe(true);
        }
      });

      it(`${
        shouldRenderSubscriptionsPage ? 'renders' : 'does not render'
      } subscriptions page`, () => {
        expect(findSubscriptionsPage().exists()).toBe(shouldRenderSubscriptionsPage);
        if (shouldRenderSubscriptionsPage) {
          expect(findSubscriptionsPage().props('hasSubscriptions')).toBe(true);
        }
      });
    });

    it('renders UserLink component', () => {
      createComponent({
        provide: {
          usersPath: '/user',
        },
      });

      const userLink = findUserLink();
      expect(userLink.exists()).toBe(true);
      expect(userLink.props()).toEqual({
        hasSubscriptions: true,
        user: null,
        userSignedIn: false,
      });
    });
  });

  describe('alert', () => {
    it.each`
      message          | variant      | alertShouldRender
      ${'Test error'}  | ${'danger'}  | ${true}
      ${'Test notice'} | ${'info'}    | ${true}
      ${''}            | ${undefined} | ${false}
      ${undefined}     | ${undefined} | ${false}
    `(
      'renders correct alert when message is `$message` and variant is `$variant`',
      async ({ message, alertShouldRender, variant }) => {
        createComponent();

        store.commit(SET_ALERT, { message, variant });
        await nextTick();

        const alert = findAlert();

        expect(alert.exists()).toBe(alertShouldRender);
        if (alertShouldRender) {
          expect(alert.isVisible()).toBe(alertShouldRender);
          expect(alert.html()).toContain(message);
          expect(alert.props('variant')).toBe(variant);
          expect(findAlertLink().exists()).toBe(false);
        }
      },
    );

    it('hides alert on @dismiss event', async () => {
      createComponent();

      store.commit(SET_ALERT, { message: 'test message' });
      await nextTick();

      findAlert().vm.$emit('dismiss');
      await nextTick();

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

    it('renders link when `linkUrl` is set', async () => {
      createComponent({ mountFn: mountExtended });

      store.commit(SET_ALERT, {
        message: __('test message %{linkStart}test link%{linkEnd}'),
        linkUrl: 'https://gitlab.com',
      });
      await nextTick();

      const alertLink = findAlertLink();

      expect(alertLink.exists()).toBe(true);
      expect(alertLink.text()).toContain('test link');
      expect(alertLink.attributes('href')).toBe('https://gitlab.com');
    });

    describe('when alert is set in localStoage', () => {
      it('renders alert on mount', () => {
        createComponent();

        const alert = findAlert();

        expect(alert.exists()).toBe(true);
        expect(alert.html()).toContain('error message');
      });
    });
  });

  describe('when user signed out', () => {
    describe('when sign in page emits `sign-in-oauth` event', () => {
      const mockUser = { name: 'test' };
      beforeEach(async () => {
        createComponent({
          provide: {
            usersPath: '/mock',
          },
        });
        findSignInPage().vm.$emit('sign-in-oauth', mockUser);

        await nextTick();
      });

      it('hides sign in page and renders subscriptions page', () => {
        expect(findSignInPage().exists()).toBe(false);
        expect(findSubscriptionsPage().exists()).toBe(true);
      });

      it('sets correct UserLink props', () => {
        expect(findUserLink().props()).toMatchObject({
          user: mockUser,
          userSignedIn: true,
        });
      });
    });

    describe('when sign in page emits `error` event', () => {
      beforeEach(async () => {
        createComponent({
          provide: {
            usersPath: '/mock',
          },
        });
        findSignInPage().vm.$emit('error');

        await nextTick();
      });

      it('displays alert', () => {
        const alert = findAlert();

        expect(alert.exists()).toBe(true);
        expect(alert.html()).toContain(I18N_DEFAULT_SIGN_IN_ERROR_MESSAGE);
        expect(alert.props('variant')).toBe('danger');
      });
    });
  });

  describe.each`
    jiraConnectOauthEnabled | canUseCrypto | shouldShowAlert
    ${false}                | ${false}     | ${false}
    ${false}                | ${true}      | ${false}
    ${true}                 | ${false}     | ${true}
    ${true}                 | ${true}      | ${false}
  `(
    'when `jiraConnectOauth` feature flag is $jiraConnectOauthEnabled and `AccessorUtilities.canUseCrypto` returns $canUseCrypto',
    ({ jiraConnectOauthEnabled, canUseCrypto, shouldShowAlert }) => {
      beforeEach(() => {
        jest.spyOn(AccessorUtilities, 'canUseCrypto').mockReturnValue(canUseCrypto);

        createComponent({ provide: { glFeatures: { jiraConnectOauth: jiraConnectOauthEnabled } } });
      });

      it(`does ${shouldShowAlert ? '' : 'not'} render BrowserSupportAlert component`, () => {
        expect(findBrowserSupportAlert().exists()).toBe(shouldShowAlert);
      });

      it(`does ${!shouldShowAlert ? '' : 'not'} render the main Jira Connect app template`, () => {
        expect(wrapper.findByTestId('jira-connect-app').exists()).toBe(!shouldShowAlert);
      });
    },
  );

  describe('when `jiraConnectOauth` feature flag is enabled', () => {
    const mockSubscriptionsPath = '/mockSubscriptionsPath';

    beforeEach(() => {
      jest.spyOn(api, 'fetchSubscriptions').mockResolvedValue({ data: { subscriptions: [] } });

      createComponent({
        provide: {
          glFeatures: { jiraConnectOauth: true },
          subscriptionsPath: mockSubscriptionsPath,
        },
      });
    });

    describe('when component mounts', () => {
      it('dispatches `fetchSubscriptions` action', async () => {
        expect(store.dispatch).toHaveBeenCalledWith('fetchSubscriptions', mockSubscriptionsPath);
      });
    });

    describe('when oauth button emits `sign-in-oauth` event', () => {
      it('dispatches `fetchSubscriptions` action', () => {
        expect(store.dispatch).toHaveBeenCalledWith('fetchSubscriptions', mockSubscriptionsPath);
      });
    });
  });
});