diff options
Diffstat (limited to 'spec/frontend/gitlab_version_check/index_spec.js')
| -rw-r--r-- | spec/frontend/gitlab_version_check/index_spec.js | 138 |
1 files changed, 37 insertions, 101 deletions
diff --git a/spec/frontend/gitlab_version_check/index_spec.js b/spec/frontend/gitlab_version_check/index_spec.js index 8a11ff48bf2..92bc103cede 100644 --- a/spec/frontend/gitlab_version_check/index_spec.js +++ b/spec/frontend/gitlab_version_check/index_spec.js @@ -1,116 +1,52 @@ -import Vue from 'vue'; -import * as Sentry from '@sentry/browser'; -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; +import { createWrapper } from '@vue/test-utils'; import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initGitlabVersionCheck from '~/gitlab_version_check'; +import { + VERSION_CHECK_BADGE_NO_PROP_FIXTURE, + VERSION_CHECK_BADGE_NO_SEVERITY_FIXTURE, + VERSION_CHECK_BADGE_FIXTURE, + VERSION_CHECK_BADGE_FINDER, + VERSION_BADGE_TEXT, + SECURITY_PATCH_FIXTURE, + SECURITY_PATCH_FINDER, + SECURITY_PATCH_TEXT, + SECURITY_MODAL_FIXTURE, + SECURITY_MODAL_FINDER, + SECURITY_MODAL_TEXT, +} from './mock_data'; describe('initGitlabVersionCheck', () => { - let originalGon; - let mock; - let vueApps; + let wrapper; - const defaultResponse = { - code: 200, - res: { severity: 'success' }, - }; - - const dummyGon = { - relative_url_root: '/', - }; - - const createApp = async (mockResponse, htmlClass) => { - originalGon = window.gon; - - const response = { - ...defaultResponse, - ...mockResponse, - }; - - mock = new MockAdapter(axios); - mock.onGet().replyOnce(response.code, response.res); - - setHTMLFixture(`<div class="${htmlClass}"></div>`); - - vueApps = await initGitlabVersionCheck(); + const createApp = (fixture) => { + setHTMLFixture(fixture); + initGitlabVersionCheck(); + wrapper = createWrapper(document.body); }; afterEach(() => { - mock.restore(); - window.gon = originalGon; resetHTMLFixture(); }); - describe('with no .js-gitlab-version-check-badge elements', () => { - beforeEach(async () => { - await createApp(); - }); - - it('does not make axios GET request', () => { - expect(mock.history.get.length).toBe(0); - }); - - it('does not render the Version Check Badge', () => { - expect(vueApps).toBeNull(); - }); - }); - - describe('with .js-gitlab-version-check-badge element but API errors', () => { - beforeEach(async () => { - jest.spyOn(Sentry, 'captureException'); - await createApp({ code: 500, res: null }, 'js-gitlab-version-check-badge'); - }); - - it('does make axios GET request', () => { - expect(mock.history.get.length).toBe(1); - expect(mock.history.get[0].url).toContain('/admin/version_check.json'); - }); - - it('logs error to Sentry', () => { - expect(Sentry.captureException).toHaveBeenCalled(); - }); - - it('does not render the Version Check Badge', () => { - expect(vueApps).toBeNull(); - }); - }); - - describe('with .js-gitlab-version-check-badge element and successful API call', () => { - beforeEach(async () => { - await createApp({}, 'js-gitlab-version-check-badge'); - }); - - it('does make axios GET request', () => { - expect(mock.history.get.length).toBe(1); - expect(mock.history.get[0].url).toContain('/admin/version_check.json'); - }); - - it('does render the Version Check Badge', () => { - expect(vueApps).toHaveLength(1); - expect(vueApps[0]).toBeInstanceOf(Vue); - }); - }); - 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; - await createApp({}, 'js-gitlab-version-check-badge'); - }); - - 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); - }); + description | fixture | finders | componentTexts + ${'with no version check elements'} | ${'<div></div>'} | ${[]} | ${[]} + ${'with version check badge el but no prop data'} | ${VERSION_CHECK_BADGE_NO_PROP_FIXTURE} | ${[VERSION_CHECK_BADGE_FINDER]} | ${[undefined]} + ${'with version check badge el but no severity data'} | ${VERSION_CHECK_BADGE_NO_SEVERITY_FIXTURE} | ${[VERSION_CHECK_BADGE_FINDER]} | ${[undefined]} + ${'with version check badge el and version data'} | ${VERSION_CHECK_BADGE_FIXTURE} | ${[VERSION_CHECK_BADGE_FINDER]} | ${[VERSION_BADGE_TEXT]} + ${'with security patch el'} | ${SECURITY_PATCH_FIXTURE} | ${[SECURITY_PATCH_FINDER]} | ${[SECURITY_PATCH_TEXT]} + ${'with security patch and version badge els'} | ${`${SECURITY_PATCH_FIXTURE}${VERSION_CHECK_BADGE_FIXTURE}`} | ${[SECURITY_PATCH_FINDER, VERSION_CHECK_BADGE_FINDER]} | ${[SECURITY_PATCH_TEXT, VERSION_BADGE_TEXT]} + ${'with security modal el'} | ${SECURITY_MODAL_FIXTURE} | ${[SECURITY_MODAL_FINDER]} | ${[SECURITY_MODAL_TEXT]} + ${'with security modal, security patch, and version badge els'} | ${`${SECURITY_PATCH_FIXTURE}${SECURITY_MODAL_FIXTURE}${VERSION_CHECK_BADGE_FIXTURE}`} | ${[SECURITY_PATCH_FINDER, SECURITY_MODAL_FINDER, VERSION_CHECK_BADGE_FINDER]} | ${[SECURITY_PATCH_TEXT, SECURITY_MODAL_TEXT, VERSION_BADGE_TEXT]} + `('$description', ({ fixture, finders, componentTexts }) => { + beforeEach(() => { + createApp(fixture); + }); + + it(`correctly renders the Version Check Components`, () => { + const renderedComponentTexts = finders.map((f) => wrapper.find(f)?.element?.innerText.trim()); + + expect(renderedComponentTexts).toStrictEqual(componentTexts); }); }); }); |