diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-17 06:08:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-17 06:08:51 +0300 |
commit | bb6a3bf05eca11bede23c89a4b2a80a946707307 (patch) | |
tree | 18086fbc00d3c13112c4e64dcfe0ef5462fd1fd3 /spec/frontend/behaviors | |
parent | f52c68bbac191605f793686c472425b000a0879a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/behaviors')
-rw-r--r-- | spec/frontend/behaviors/markdown/render_observability_spec.js | 57 |
1 files changed, 30 insertions, 27 deletions
diff --git a/spec/frontend/behaviors/markdown/render_observability_spec.js b/spec/frontend/behaviors/markdown/render_observability_spec.js index 7ca426d8cd6..f464c01ac15 100644 --- a/spec/frontend/behaviors/markdown/render_observability_spec.js +++ b/spec/frontend/behaviors/markdown/render_observability_spec.js @@ -1,40 +1,43 @@ +import Vue from 'vue'; +import { createWrapper } from '@vue/test-utils'; import renderObservability from '~/behaviors/markdown/render_observability'; -import * as ColorUtils from '~/lib/utils/color_utils'; +import { INLINE_EMBED_DIMENSIONS, SKELETON_VARIANT_EMBED } from '~/observability/constants'; +import ObservabilityApp from '~/observability/components/observability_app.vue'; -describe('Observability iframe renderer', () => { - const findObservabilityIframes = (theme = 'light') => - document.querySelectorAll( - `iframe[src="https://observe.gitlab.com/?theme=${theme}&kiosk=inline-embed"]`, - ); - - const renderEmbeddedObservability = () => { - renderObservability([...document.querySelectorAll('.js-render-observability')]); - jest.runAllTimers(); - }; +describe('renderObservability', () => { + let subject; beforeEach(() => { - document.body.dataset.page = ''; - document.body.innerHTML = ''; + subject = document.createElement('div'); + subject.classList.add('js-render-observability'); + subject.dataset.frameUrl = 'https://observe.gitlab.com/'; + document.body.appendChild(subject); }); - it('renders an observability iframe', () => { - document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`; - - expect(findObservabilityIframes()).toHaveLength(0); - - renderEmbeddedObservability(); - - expect(findObservabilityIframes()).toHaveLength(1); + afterEach(() => { + subject.remove(); }); - it('renders iframe with dark param when GL has dark theme', () => { - document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`; - jest.spyOn(ColorUtils, 'darkModeEnabled').mockImplementation(() => true); + it('should return an array of Vue instances', () => { + const vueInstances = renderObservability([ + ...document.querySelectorAll('.js-render-observability'), + ]); + expect(vueInstances).toEqual([expect.any(Vue)]); + }); - expect(findObservabilityIframes('dark')).toHaveLength(0); + it('should correctly pass props to the ObservabilityApp component', () => { + const vueInstances = renderObservability([ + ...document.querySelectorAll('.js-render-observability'), + ]); - renderEmbeddedObservability(); + const wrapper = createWrapper(vueInstances[0]); - expect(findObservabilityIframes('dark')).toHaveLength(1); + expect(wrapper.findComponent(ObservabilityApp).props()).toMatchObject({ + observabilityIframeSrc: 'https://observe.gitlab.com/', + skeletonVariant: SKELETON_VARIANT_EMBED, + inlineEmbed: true, + height: INLINE_EMBED_DIMENSIONS.HEIGHT, + width: INLINE_EMBED_DIMENSIONS.WIDTH, + }); }); }); |