gitlab-org--gitlab-foss/spec/frontend/behaviors/markdown/render_metrics_spec.js

49 lines
1.9 KiB
JavaScript

import { TEST_HOST } from 'helpers/test_constants';
import renderMetrics from '~/behaviors/markdown/render_metrics';
const mockEmbedGroup = jest.fn();
jest.mock('vue', () => ({ extend: () => mockEmbedGroup }));
jest.mock('~/monitoring/components/embeds/embed_group.vue', () => jest.fn());
jest.mock('~/monitoring/stores/embed_group/', () => ({ createStore: jest.fn() }));
const getElements = () => Array.from(document.getElementsByClassName('js-render-metrics'));
describe('Render metrics for Gitlab Flavoured Markdown', () => {
it('does nothing when no elements are found', () => {
return renderMetrics([]).then(() => {
expect(mockEmbedGroup).not.toHaveBeenCalled();
});
});
it('renders a vue component when elements are found', () => {
document.body.innerHTML = `<div class="js-render-metrics" data-dashboard-url="${TEST_HOST}"></div>`;
return renderMetrics(getElements()).then(() => {
expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
expect(mockEmbedGroup).toHaveBeenCalledWith(
expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
);
});
});
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>
`;
return renderMetrics(getElements()).then(() => {
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`] } }),
);
});
});
});