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);
+        });
+      });
+    });
+  });
+});