2022-01-07 18:16:06 +00:00
|
|
|
import { GlBadge } from '@gitlab/ui';
|
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2022-10-18 12:09:21 +00:00
|
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
2022-05-11 15:07:26 +00:00
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
2022-10-13 00:08:53 +00:00
|
|
|
import { mockTracking } from 'helpers/tracking_helper';
|
2022-09-22 13:39:34 +00:00
|
|
|
import { helpPagePath } from '~/helpers/help_page_helper';
|
2022-01-07 18:16:06 +00:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
import GitlabVersionCheck from '~/vue_shared/components/gitlab_version_check.vue';
|
|
|
|
|
|
|
|
describe('GitlabVersionCheck', () => {
|
|
|
|
let wrapper;
|
|
|
|
let mock;
|
|
|
|
|
2022-09-22 13:39:34 +00:00
|
|
|
const UPGRADE_DOCS_URL = helpPagePath('update/index');
|
|
|
|
|
2022-01-07 18:16:06 +00:00
|
|
|
const defaultResponse = {
|
|
|
|
code: 200,
|
|
|
|
res: { severity: 'success' },
|
|
|
|
};
|
|
|
|
|
|
|
|
const createComponent = (mockResponse) => {
|
|
|
|
const response = {
|
|
|
|
...defaultResponse,
|
|
|
|
...mockResponse,
|
|
|
|
};
|
|
|
|
|
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
mock.onGet().replyOnce(response.code, response.res);
|
|
|
|
|
2022-10-18 12:09:21 +00:00
|
|
|
wrapper = shallowMountExtended(GitlabVersionCheck);
|
2022-01-07 18:16:06 +00:00
|
|
|
};
|
|
|
|
|
2022-08-10 03:11:16 +00:00
|
|
|
const dummyGon = {
|
|
|
|
relative_url_root: '/',
|
|
|
|
};
|
|
|
|
|
|
|
|
let originalGon;
|
|
|
|
|
2022-01-07 18:16:06 +00:00
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
mock.restore();
|
2022-08-10 03:11:16 +00:00
|
|
|
window.gon = originalGon;
|
2022-01-07 18:16:06 +00:00
|
|
|
});
|
|
|
|
|
2022-10-18 12:09:21 +00:00
|
|
|
const findGlBadgeClickWrapper = () => wrapper.findByTestId('badge-click-wrapper');
|
2022-01-07 18:16:06 +00:00
|
|
|
const findGlBadge = () => wrapper.findComponent(GlBadge);
|
|
|
|
|
2022-08-10 03:11:16 +00:00
|
|
|
describe.each`
|
|
|
|
root | description
|
|
|
|
${'/'} | ${'not used (uses its own (sub)domain)'}
|
|
|
|
${'/gitlab'} | ${'custom path'}
|
|
|
|
${'/service/gitlab'} | ${'custom path with 2 depth'}
|
|
|
|
`('path for version_check.json', ({ root, description }) => {
|
|
|
|
describe(`when relative url is ${description}: ${root}`, () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
originalGon = window.gon;
|
|
|
|
window.gon = { ...dummyGon };
|
|
|
|
window.gon.relative_url_root = root;
|
|
|
|
createComponent(defaultResponse);
|
|
|
|
await waitForPromises(); // Ensure we wrap up the axios call
|
|
|
|
});
|
|
|
|
|
|
|
|
it('reflects the relative url setting', () => {
|
|
|
|
expect(mock.history.get.length).toBe(1);
|
|
|
|
|
|
|
|
const pathRegex = new RegExp(`^${root}`);
|
|
|
|
expect(mock.history.get[0].url).toMatch(pathRegex);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-01-07 18:16:06 +00:00
|
|
|
describe('template', () => {
|
|
|
|
describe.each`
|
|
|
|
description | mockResponse | renders
|
|
|
|
${'successful but null'} | ${{ code: 200, res: null }} | ${false}
|
|
|
|
${'successful and valid'} | ${{ code: 200, res: { severity: 'success' } }} | ${true}
|
|
|
|
${'an error'} | ${{ code: 500, res: null }} | ${false}
|
|
|
|
`('version_check.json response', ({ description, mockResponse, renders }) => {
|
|
|
|
describe(`is ${description}`, () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponent(mockResponse);
|
2022-05-11 15:07:26 +00:00
|
|
|
await waitForPromises(); // Ensure we wrap up the axios call
|
2022-01-07 18:16:06 +00:00
|
|
|
});
|
|
|
|
|
2022-10-18 12:09:21 +00:00
|
|
|
it(`does${renders ? '' : ' not'} render Badge Click Wrapper and GlBadge`, () => {
|
|
|
|
expect(findGlBadgeClickWrapper().exists()).toBe(renders);
|
2022-01-07 18:16:06 +00:00
|
|
|
expect(findGlBadge().exists()).toBe(renders);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
|
|
|
mockResponse | expectedUI
|
|
|
|
${{ code: 200, res: { severity: 'success' } }} | ${{ title: 'Up to date', variant: 'success' }}
|
|
|
|
${{ code: 200, res: { severity: 'warning' } }} | ${{ title: 'Update available', variant: 'warning' }}
|
|
|
|
${{ code: 200, res: { severity: 'danger' } }} | ${{ title: 'Update ASAP', variant: 'danger' }}
|
|
|
|
`('badge ui', ({ mockResponse, expectedUI }) => {
|
|
|
|
describe(`when response is ${mockResponse.res.severity}`, () => {
|
2022-10-13 00:08:53 +00:00
|
|
|
let trackingSpy;
|
|
|
|
|
2022-01-07 18:16:06 +00:00
|
|
|
beforeEach(async () => {
|
|
|
|
createComponent(mockResponse);
|
2022-10-13 00:08:53 +00:00
|
|
|
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
|
2022-05-11 15:07:26 +00:00
|
|
|
await waitForPromises(); // Ensure we wrap up the axios call
|
2022-01-07 18:16:06 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it(`title is ${expectedUI.title}`, () => {
|
|
|
|
expect(findGlBadge().text()).toBe(expectedUI.title);
|
|
|
|
});
|
|
|
|
|
|
|
|
it(`variant is ${expectedUI.variant}`, () => {
|
|
|
|
expect(findGlBadge().attributes('variant')).toBe(expectedUI.variant);
|
|
|
|
});
|
2022-09-22 13:39:34 +00:00
|
|
|
|
2022-10-18 12:09:21 +00:00
|
|
|
it(`tracks rendered_version_badge with label ${expectedUI.title}`, () => {
|
2022-10-13 00:08:53 +00:00
|
|
|
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'rendered_version_badge', {
|
2022-10-18 12:09:21 +00:00
|
|
|
label: expectedUI.title,
|
2022-10-13 00:08:53 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-09-22 13:39:34 +00:00
|
|
|
it(`link is ${UPGRADE_DOCS_URL}`, () => {
|
|
|
|
expect(findGlBadge().attributes('href')).toBe(UPGRADE_DOCS_URL);
|
|
|
|
});
|
2022-10-13 00:08:53 +00:00
|
|
|
|
2022-10-18 12:09:21 +00:00
|
|
|
it(`tracks click_version_badge with label ${expectedUI.title} when badge is clicked`, async () => {
|
|
|
|
await findGlBadgeClickWrapper().trigger('click');
|
2022-10-13 00:08:53 +00:00
|
|
|
|
|
|
|
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_version_badge', {
|
2022-10-18 12:09:21 +00:00
|
|
|
label: expectedUI.title,
|
2022-10-13 00:08:53 +00:00
|
|
|
});
|
|
|
|
});
|
2022-01-07 18:16:06 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|