diff options
Diffstat (limited to 'spec/frontend/behaviors')
-rw-r--r-- | spec/frontend/behaviors/markdown/render_metrics_spec.js | 54 |
1 files changed, 33 insertions, 21 deletions
diff --git a/spec/frontend/behaviors/markdown/render_metrics_spec.js b/spec/frontend/behaviors/markdown/render_metrics_spec.js index 9157d2a8448..3f7beeb817b 100644 --- a/spec/frontend/behaviors/markdown/render_metrics_spec.js +++ b/spec/frontend/behaviors/markdown/render_metrics_spec.js @@ -1,37 +1,49 @@ -import Vue from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; import renderMetrics from '~/behaviors/markdown/render_metrics'; -const originalExtend = Vue.extend; +const mockEmbedGroup = jest.fn(); -describe('Render metrics for Gitlab Flavoured Markdown', () => { - const container = { - Metrics() {}, - }; - - let spyExtend; - - beforeEach(() => { - Vue.extend = () => container.Metrics; - spyExtend = jest.spyOn(Vue, 'extend'); - }); +jest.mock('vue', () => ({ extend: () => mockEmbedGroup })); +jest.mock('~/monitoring/components/embeds/embed_group.vue', () => jest.fn()); +jest.mock('~/monitoring/stores/embed_group/', () => ({ createStore: jest.fn() })); - afterEach(() => { - Vue.extend = originalExtend; - }); +const getElements = () => Array.from(document.getElementsByClassName('js-render-metrics')); +describe('Render metrics for Gitlab Flavoured Markdown', () => { it('does nothing when no elements are found', () => { renderMetrics([]); - expect(spyExtend).not.toHaveBeenCalled(); + expect(mockEmbedGroup).not.toHaveBeenCalled(); }); it('renders a vue component when elements are found', () => { - const element = document.createElement('div'); - element.setAttribute('data-dashboard-url', TEST_HOST); + document.body.innerHTML = `<div class="js-render-metrics" data-dashboard-url="${TEST_HOST}"></div>`; - renderMetrics([element]); + renderMetrics(getElements()); + + expect(mockEmbedGroup).toHaveBeenCalledTimes(1); + expect(mockEmbedGroup).toHaveBeenCalledWith( + expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }), + ); + }); - expect(spyExtend).toHaveBeenCalled(); + it('takes sibling metrics and groups them under a shared parent', () => { + document.body.innerHTML = ` + <p><span>Hello</span></p> + <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/1"></div> + <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/2"></div> + <p><span>Hello</span></p> + <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/3"></div> + `; + + renderMetrics(getElements()); + + expect(mockEmbedGroup).toHaveBeenCalledTimes(2); + expect(mockEmbedGroup).toHaveBeenCalledWith( + expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }), + ); + expect(mockEmbedGroup).toHaveBeenCalledWith( + expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }), + ); }); }); |