diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/gitlab_version_check_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/gitlab_version_check_spec.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/gitlab_version_check_spec.js b/spec/frontend/vue_shared/components/gitlab_version_check_spec.js new file mode 100644 index 00000000000..b673e5407d4 --- /dev/null +++ b/spec/frontend/vue_shared/components/gitlab_version_check_spec.js @@ -0,0 +1,77 @@ +import { GlBadge } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import flushPromises from 'helpers/flush_promises'; +import axios from '~/lib/utils/axios_utils'; +import GitlabVersionCheck from '~/vue_shared/components/gitlab_version_check.vue'; + +describe('GitlabVersionCheck', () => { + let wrapper; + let mock; + + 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); + + wrapper = shallowMount(GitlabVersionCheck); + }; + + afterEach(() => { + wrapper.destroy(); + mock.restore(); + }); + + const findGlBadge = () => wrapper.findComponent(GlBadge); + + 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); + await flushPromises(); // Ensure we wrap up the axios call + }); + + it(`does${renders ? '' : ' not'} render GlBadge`, () => { + 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}`, () => { + beforeEach(async () => { + createComponent(mockResponse); + await flushPromises(); // Ensure we wrap up the axios call + }); + + it(`title is ${expectedUI.title}`, () => { + expect(findGlBadge().text()).toBe(expectedUI.title); + }); + + it(`variant is ${expectedUI.variant}`, () => { + expect(findGlBadge().attributes('variant')).toBe(expectedUI.variant); + }); + }); + }); + }); +}); |