debian-mirror-gitlab/spec/frontend/observability/observability_app_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

201 lines
6.7 KiB
JavaScript
Raw Normal View History

2023-01-13 00:05:48 +05:30
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ObservabilityApp from '~/observability/components/observability_app.vue';
2023-03-04 22:38:38 +05:30
import ObservabilitySkeleton from '~/observability/components/skeleton/index.vue';
2023-03-17 16:20:25 +05:30
import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '~/observability/constants';
2023-03-04 22:38:38 +05:30
import { darkModeEnabled } from '~/lib/utils/color_utils';
jest.mock('~/lib/utils/color_utils');
2023-01-13 00:05:48 +05:30
describe('Observability root app', () => {
let wrapper;
const replace = jest.fn();
const $router = {
replace,
};
const $route = {
pathname: 'https://gitlab.com/gitlab-org/',
2023-03-17 16:20:25 +05:30
path: 'https://gitlab.com/gitlab-org/-/observability/dashboards',
2023-01-13 00:05:48 +05:30
query: { otherQuery: 100 },
};
2023-03-04 22:38:38 +05:30
const mockHandleSkeleton = jest.fn();
2023-01-13 00:05:48 +05:30
const findIframe = () => wrapper.findByTestId('observability-ui-iframe');
const TEST_IFRAME_SRC = 'https://observe.gitlab.com/9970/?groupId=14485840';
2023-03-17 16:20:25 +05:30
const OBSERVABILITY_ROUTES = Object.keys(SKELETON_VARIANTS_BY_ROUTE);
const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
2023-01-13 00:05:48 +05:30
const mountComponent = (route = $route) => {
wrapper = shallowMountExtended(ObservabilityApp, {
propsData: {
observabilityIframeSrc: TEST_IFRAME_SRC,
},
2023-03-04 22:38:38 +05:30
stubs: {
'observability-skeleton': ObservabilitySkeleton,
},
2023-01-13 00:05:48 +05:30
mocks: {
$router,
$route: route,
},
});
};
2023-03-04 22:38:38 +05:30
const dispatchMessageEvent = (message) =>
window.dispatchEvent(new MessageEvent('message', message));
2023-01-13 00:05:48 +05:30
afterEach(() => {
wrapper.destroy();
});
2023-03-04 22:38:38 +05:30
describe('iframe src', () => {
const TEST_USERNAME = 'test-user';
beforeAll(() => {
gon.current_username = TEST_USERNAME;
});
it('should render an iframe with observabilityIframeSrc, decorated with light theme and username', () => {
darkModeEnabled.mockReturnValueOnce(false);
mountComponent();
const iframe = findIframe();
expect(iframe.exists()).toBe(true);
expect(iframe.attributes('src')).toBe(
`${TEST_IFRAME_SRC}&theme=light&username=${TEST_USERNAME}`,
);
});
it('should render an iframe with observabilityIframeSrc decorated with dark theme and username', () => {
darkModeEnabled.mockReturnValueOnce(true);
mountComponent();
const iframe = findIframe();
expect(iframe.exists()).toBe(true);
expect(iframe.attributes('src')).toBe(
`${TEST_IFRAME_SRC}&theme=dark&username=${TEST_USERNAME}`,
);
});
2023-01-13 00:05:48 +05:30
});
2023-03-04 22:38:38 +05:30
describe('iframe sandbox', () => {
it('should render an iframe with sandbox attributes', () => {
mountComponent();
const iframe = findIframe();
expect(iframe.exists()).toBe(true);
expect(iframe.attributes('sandbox')).toBe('allow-same-origin allow-forms allow-scripts');
});
2023-01-13 00:05:48 +05:30
});
2023-03-04 22:38:38 +05:30
describe('on GOUI_ROUTE_UPDATE', () => {
it('should not call replace method from vue router if message event does not have url', () => {
mountComponent();
dispatchMessageEvent({
type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE,
payload: { data: 'some other data' },
});
2023-01-13 00:05:48 +05:30
expect(replace).not.toHaveBeenCalled();
2023-03-04 22:38:38 +05:30
});
it.each`
condition | origin | observability_path | url
${'message origin is different from iframe source origin'} | ${'https://example.com'} | ${'/'} | ${'/explore'}
${'path is same as before (observability_path)'} | ${'https://observe.gitlab.com'} | ${'/foo?bar=test'} | ${'/foo?bar=test'}
`(
'should not call replace method from vue router if $condition',
async ({ origin, observability_path, url }) => {
mountComponent({ ...$route, query: { observability_path } });
dispatchMessageEvent({
data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url } },
origin,
});
expect(replace).not.toHaveBeenCalled();
2023-01-13 00:05:48 +05:30
},
2023-03-04 22:38:38 +05:30
);
it('should call replace method from vue router on message event callback', () => {
mountComponent();
dispatchMessageEvent({
data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
origin: 'https://observe.gitlab.com',
});
expect(replace).toHaveBeenCalled();
expect(replace).toHaveBeenCalledWith({
name: 'https://gitlab.com/gitlab-org/',
query: {
otherQuery: 100,
observability_path: '/explore',
},
});
});
});
describe('on GOUI_LOADED', () => {
beforeEach(() => {
mountComponent();
2023-03-17 16:20:25 +05:30
wrapper.vm.$refs.observabilitySkeleton.onContentLoaded = mockHandleSkeleton;
2023-03-04 22:38:38 +05:30
});
2023-03-17 16:20:25 +05:30
it('should call onContentLoaded method', () => {
2023-03-04 22:38:38 +05:30
dispatchMessageEvent({
data: { type: MESSAGE_EVENT_TYPE.GOUI_LOADED },
origin: 'https://observe.gitlab.com',
});
expect(mockHandleSkeleton).toHaveBeenCalled();
});
2023-03-17 16:20:25 +05:30
it('should not call onContentLoaded method if origin is different', () => {
2023-03-04 22:38:38 +05:30
dispatchMessageEvent({
data: { type: MESSAGE_EVENT_TYPE.GOUI_LOADED },
origin: 'https://example.com',
});
expect(mockHandleSkeleton).not.toHaveBeenCalled();
});
2023-03-17 16:20:25 +05:30
it('should not call onContentLoaded method if event type is different', () => {
2023-03-04 22:38:38 +05:30
dispatchMessageEvent({
data: { type: 'UNKNOWN_EVENT' },
origin: 'https://observe.gitlab.com',
});
expect(mockHandleSkeleton).not.toHaveBeenCalled();
});
});
describe('skeleton variant', () => {
it.each`
2023-03-17 16:20:25 +05:30
pathDescription | path | variant
${'dashboards'} | ${OBSERVABILITY_ROUTES[0]} | ${SKELETON_VARIANTS[0]}
${'explore'} | ${OBSERVABILITY_ROUTES[1]} | ${SKELETON_VARIANTS[1]}
${'manage dashboards'} | ${OBSERVABILITY_ROUTES[2]} | ${SKELETON_VARIANTS[2]}
${'any other'} | ${'unknown/route'} | ${SKELETON_VARIANTS[0]}
2023-03-04 22:38:38 +05:30
`('renders the $variant skeleton variant for $pathDescription path', ({ path, variant }) => {
mountComponent({ ...$route, path });
const props = wrapper.findComponent(ObservabilitySkeleton).props();
expect(props.variant).toBe(variant);
});
});
describe('on observability ui unmount', () => {
it('should remove message event and should not call replace method from vue router', () => {
mountComponent();
wrapper.destroy();
// testing event cleanup logic, should not call on messege event after component is destroyed
dispatchMessageEvent({
data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
origin: 'https://observe.gitlab.com',
});
expect(replace).not.toHaveBeenCalled();
2023-01-13 00:05:48 +05:30
});
});
});