diff options
Diffstat (limited to 'spec/frontend/observability/observability_container_spec.js')
| -rw-r--r-- | spec/frontend/observability/observability_container_spec.js | 128 |
1 files changed, 79 insertions, 49 deletions
diff --git a/spec/frontend/observability/observability_container_spec.js b/spec/frontend/observability/observability_container_spec.js index 5d838756308..41906b2f45d 100644 --- a/spec/frontend/observability/observability_container_spec.js +++ b/spec/frontend/observability/observability_container_spec.js @@ -1,41 +1,43 @@ import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { stubComponent } from 'helpers/stub_component'; import ObservabilityContainer from '~/observability/components/observability_container.vue'; -import ObservabilitySkeleton from '~/observability/components/skeleton/index.vue'; +import ObservabilityLoader from '~/observability/components/loader/index.vue'; +import { CONTENT_STATE } from '~/observability/components/loader/constants'; import { buildClient } from '~/observability/client'; +import * as Sentry from '~/sentry/sentry_browser_wrapper'; +import { logError } from '~/lib/logger'; jest.mock('~/observability/client'); +jest.mock('~/sentry/sentry_browser_wrapper'); +jest.mock('~/lib/logger'); describe('ObservabilityContainer', () => { let wrapper; - const mockSkeletonOnContentLoaded = jest.fn(); - const mockSkeletonOnError = jest.fn(); - const OAUTH_URL = 'https://example.com/oauth'; const TRACING_URL = 'https://example.com/tracing'; const PROVISIONING_URL = 'https://example.com/provisioning'; const SERVICES_URL = 'https://example.com/services'; const OPERATIONS_URL = 'https://example.com/operations'; + const METRICS_URL = 'https://example.com/metrics'; + + const mockClient = { mock: 'client' }; beforeEach(() => { jest.spyOn(console, 'error').mockImplementation(); - buildClient.mockReturnValue({}); + buildClient.mockReturnValue(mockClient); wrapper = shallowMountExtended(ObservabilityContainer, { propsData: { - oauthUrl: OAUTH_URL, - tracingUrl: TRACING_URL, - provisioningUrl: PROVISIONING_URL, - servicesUrl: SERVICES_URL, - operationsUrl: OPERATIONS_URL, - }, - stubs: { - ObservabilitySkeleton: stubComponent(ObservabilitySkeleton, { - methods: { onContentLoaded: mockSkeletonOnContentLoaded, onError: mockSkeletonOnError }, - }), + apiConfig: { + oauthUrl: OAUTH_URL, + tracingUrl: TRACING_URL, + provisioningUrl: PROVISIONING_URL, + servicesUrl: SERVICES_URL, + operationsUrl: OPERATIONS_URL, + metricssUrl: METRICS_URL, + }, }, slots: { default: { @@ -43,12 +45,6 @@ describe('ObservabilityContainer', () => { h(`<div>mockedComponent</div>`); }, name: 'MockComponent', - props: { - observabilityClient: { - type: Object, - required: true, - }, - }, }, }, }); @@ -60,6 +56,8 @@ describe('ObservabilityContainer', () => { data: { type: 'AUTH_COMPLETION', status, + message: 'test-message', + statusCode: 'test-code', }, origin: origin ?? new URL(OAUTH_URL).origin, }), @@ -67,6 +65,7 @@ describe('ObservabilityContainer', () => { const findIframe = () => wrapper.findByTestId('observability-oauth-iframe'); const findSlotComponent = () => wrapper.findComponent({ name: 'MockComponent' }); + const findLoader = () => wrapper.findComponent(ObservabilityLoader); it('should render the oauth iframe', () => { const iframe = findIframe(); @@ -76,56 +75,87 @@ describe('ObservabilityContainer', () => { expect(iframe.attributes('sandbox')).toBe('allow-same-origin allow-forms allow-scripts'); }); - it('should render the ObservabilitySkeleton', () => { - const skeleton = wrapper.findComponent(ObservabilitySkeleton); - expect(skeleton.exists()).toBe(true); + it('should render the ObservabilityLoader', () => { + expect(findLoader().exists()).toBe(true); }); it('should not render the default slot', () => { expect(findSlotComponent().exists()).toBe(false); }); - it('renders the slot content and removes the iframe on oauth success message', async () => { - dispatchMessageEvent('success'); + it('should not emit observability-client-ready', () => { + expect(wrapper.emitted('observability-client-ready')).toBeUndefined(); + }); - await nextTick(); + describe('on oauth success message', () => { + beforeEach(async () => { + dispatchMessageEvent('success'); - expect(mockSkeletonOnContentLoaded).toHaveBeenCalledTimes(1); + await nextTick(); + }); + + it('sets the loader contentState to LOADED', () => { + expect(findLoader().props('contentState')).toBe(CONTENT_STATE.LOADED); + }); + + it('renders the slot content', () => { + const slotComponent = findSlotComponent(); + expect(slotComponent.exists()).toBe(true); + }); + + it('build the observability client', () => { + expect(buildClient).toHaveBeenCalledWith(wrapper.props('apiConfig')); + }); - const slotComponent = findSlotComponent(); - expect(slotComponent.exists()).toBe(true); - expect(buildClient).toHaveBeenCalledWith({ - provisioningUrl: PROVISIONING_URL, - tracingUrl: TRACING_URL, - servicesUrl: SERVICES_URL, - operationsUrl: OPERATIONS_URL, + it('emits observability-client-ready', () => { + expect(wrapper.emitted('observability-client-ready')).toEqual([[mockClient]]); }); - expect(findIframe().exists()).toBe(false); }); - it('does not render the slot content and removes the iframe on oauth error message', async () => { - dispatchMessageEvent('error'); + describe('on oauth error message', () => { + beforeEach(async () => { + dispatchMessageEvent('error'); - await nextTick(); + await nextTick(); + }); - expect(mockSkeletonOnError).toHaveBeenCalledTimes(1); + it('set the loader contentState to ERROR', () => { + expect(findLoader().props('contentState')).toBe(CONTENT_STATE.ERROR); + }); - expect(findSlotComponent().exists()).toBe(false); - expect(findIframe().exists()).toBe(false); - expect(buildClient).not.toHaveBeenCalled(); + it('does not renders the slot content', () => { + expect(findSlotComponent().exists()).toBe(false); + }); + + it('does not build the observability client', () => { + expect(buildClient).not.toHaveBeenCalled(); + }); + + it('does not emit observability-client-ready', () => { + expect(wrapper.emitted('observability-client-ready')).toBeUndefined(); + }); + + it('reports the error', () => { + const e = new Error('GOB auth failed with error: test-message - status: test-code'); + expect(Sentry.captureException).toHaveBeenCalledWith(e); + expect(logError).toHaveBeenCalledWith(e); + }); }); - it('handles oauth message only once', () => { - dispatchMessageEvent('success'); + it('handles oauth message only once', async () => { dispatchMessageEvent('success'); + dispatchMessageEvent('error'); + + await nextTick(); - expect(mockSkeletonOnContentLoaded).toHaveBeenCalledTimes(1); + expect(buildClient).toHaveBeenCalledTimes(1); + expect(findLoader().props('contentState')).toBe(CONTENT_STATE.LOADED); }); it('only handles messages from the oauth url', () => { dispatchMessageEvent('success', 'www.fake-url.com'); - expect(mockSkeletonOnContentLoaded).toHaveBeenCalledTimes(0); + expect(findLoader().props('contentState')).toBe(null); expect(findSlotComponent().exists()).toBe(false); expect(findIframe().exists()).toBe(true); }); @@ -135,6 +165,6 @@ describe('ObservabilityContainer', () => { dispatchMessageEvent('success'); - expect(mockSkeletonOnContentLoaded).toHaveBeenCalledTimes(0); + expect(findLoader().props('contentState')).toBe(null); }); }); |