Skip to content

G
gitlab-ce
Commit 4d0bc7aa authored by Mark Florian's avatar Mark Florian
Browse files
Options

Merge branch... 

Merge branch '241931-remove-v-html-from-app-assets-javascripts-monitoring-components-group_empty_state-vue' into 'master'

Remove v-html from app/assets/javascripts/monitoring/components/group_empty_state.vue

Closes #241931

See merge request gitlab-org/gitlab!41503
parents ec30dcea 99ec3768
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 67 deletions
app/assets/javascripts/monitoring/components/group_empty_state.vue
View file @ 4d0bc7aa
<script>
/* eslint-disable vue/no-v-html */
import { GlEmptyState } from '@gitlab/ui';
import { GlEmptyState, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { metricStates } from '../constants';
......@@ -8,6 +7,9 @@ export default {
components: {
GlEmptyState,
},
directives: {
SafeHtml,
},
props: {
documentationPath: {
type: String,
......@@ -100,7 +102,7 @@ export default {
:compact="true"
>
<template v-if="currentState.slottedDescription" #description>
<div v-html="currentState.slottedDescription"></div>
<div v-safe-html="currentState.slottedDescription"></div>
</template>
</gl-empty-state>
</template>
spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
View file @ 4d0bc7aa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
<gl-empty-state-stub
compact="true"
primarybuttonlink="/path/to/settings"
primarybuttontext="Verify configuration"
svgpath="/path/to/empty-group-illustration.svg"
title="Query cannot be processed"
/>
exports[`GroupEmptyState given state BAD_QUERY passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": null,
"primaryButtonLink": "/path/to/settings",
"primaryButtonText": "Verify configuration",
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "Query cannot be processed",
}
`;
exports[`GroupEmptyState Renders an empty state for BAD_QUERY 2`] = `"The Prometheus server responded with \\"bad request\\". Please check your queries are correct and are supported in your Prometheus version. <a href=\\"/path/to/docs\\">More information</a>"`;
exports[`GroupEmptyState given state BAD_QUERY renders the slotted content 1`] = `
<div>
<div>
The Prometheus server responded with "bad request". Please check your queries are correct and are supported in your Prometheus version.
<a
href="/path/to/docs"
>
More information
</a>
</div>
</div>
`;
exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
<gl-empty-state-stub
compact="true"
description="We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating."
primarybuttonlink="/path/to/settings"
primarybuttontext="Verify configuration"
svgpath="/path/to/empty-group-illustration.svg"
title="Connection failed"
/>
exports[`GroupEmptyState given state CONNECTION_FAILED passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": "We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating.",
"primaryButtonLink": "/path/to/settings",
"primaryButtonText": "Verify configuration",
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "Connection failed",
}
`;
exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 2`] = `undefined`;
exports[`GroupEmptyState given state CONNECTION_FAILED renders the slotted content 1`] = `<div />`;
exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
<gl-empty-state-stub
compact="true"
description="An error occurred while loading the data. Please try again."
svgpath="/path/to/empty-group-illustration.svg"
title="An error has occurred"
/>
exports[`GroupEmptyState given state FOO STATE passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": "An error occurred while loading the data. Please try again.",
"primaryButtonLink": null,
"primaryButtonText": null,
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "An error has occurred",
}
`;
exports[`GroupEmptyState Renders an empty state for FOO STATE 2`] = `undefined`;
exports[`GroupEmptyState given state FOO STATE renders the slotted content 1`] = `<div />`;
exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
<gl-empty-state-stub
compact="true"
description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
svgpath="/path/to/empty-group-illustration.svg"
title="Waiting for performance data"
/>
exports[`GroupEmptyState given state LOADING passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": "Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.",
"primaryButtonLink": null,
"primaryButtonText": null,
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "Waiting for performance data",
}
`;
exports[`GroupEmptyState Renders an empty state for LOADING 2`] = `undefined`;
exports[`GroupEmptyState given state LOADING renders the slotted content 1`] = `<div />`;
exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
<gl-empty-state-stub
compact="true"
svgpath="/path/to/empty-group-illustration.svg"
title="No data to display"
/>
exports[`GroupEmptyState given state NO_DATA passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": null,
"primaryButtonLink": null,
"primaryButtonText": null,
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "No data to display",
}
`;
exports[`GroupEmptyState Renders an empty state for NO_DATA 2`] = `"The data source is connected, but there is no data to display. <a href=\\"/path/to/docs\\">More information</a>"`;
exports[`GroupEmptyState given state NO_DATA renders the slotted content 1`] = `
<div>
<div>
The data source is connected, but there is no data to display.
<a
href="/path/to/docs"
>
More information
</a>
</div>
</div>
`;
exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
<gl-empty-state-stub
compact="true"
svgpath="/path/to/empty-group-illustration.svg"
title="Connection timed out"
/>
exports[`GroupEmptyState given state TIMEOUT passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": null,
"primaryButtonLink": null,
"primaryButtonText": null,
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "Connection timed out",
}
`;
exports[`GroupEmptyState Renders an empty state for TIMEOUT 2`] = `"Charts can't be displayed as the request for data has timed out. <a href=\\"/path/to/docs\\">More information</a>"`;
exports[`GroupEmptyState given state TIMEOUT renders the slotted content 1`] = `
<div>
<div>
Charts can't be displayed as the request for data has timed out.
<a
href="/path/to/docs"
>
More information
</a>
</div>
</div>
`;
exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 1`] = `
<gl-empty-state-stub
compact="true"
description="An error occurred while loading the data. Please try again."
svgpath="/path/to/empty-group-illustration.svg"
title="An error has occurred"
/>
exports[`GroupEmptyState given state UNKNOWN_ERROR passes the expected props to GlEmptyState 1`] = `
Object {
"compact": true,
"description": "An error occurred while loading the data. Please try again.",
"primaryButtonLink": null,
"primaryButtonText": null,
"secondaryButtonLink": null,
"secondaryButtonText": null,
"svgPath": "/path/to/empty-group-illustration.svg",
"title": "An error has occurred",
}
`;
exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 2`] = `undefined`;
exports[`GroupEmptyState given state UNKNOWN_ERROR renders the slotted content 1`] = `<div />`;
spec/frontend/monitoring/components/group_empty_state_spec.js
View file @ 4d0bc7aa
import { GlEmptyState } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
import { metricStates } from '~/monitoring/constants';
const MockGlEmptyState = {
props: GlEmptyState.props,
template: '<div><slot name="description"></slot></div>',
};
function createComponent(props) {
return shallowMount(GroupEmptyState, {
propsData: {
......@@ -10,11 +16,20 @@ function createComponent(props) {
settingsPath: '/path/to/settings',
svgPath: '/path/to/empty-group-illustration.svg',
},
stubs: {
GlEmptyState: MockGlEmptyState,
},
});
}
describe('GroupEmptyState', () => {
const supportedStates = [
let wrapper;
afterEach(() => {
wrapper.destroy();
});
describe.each([
metricStates.NO_DATA,
metricStates.TIMEOUT,
metricStates.CONNECTION_FAILED,
......@@ -22,13 +37,17 @@ describe('GroupEmptyState', () => {
metricStates.LOADING,
metricStates.UNKNOWN_ERROR,
'FOO STATE', // does not fail with unknown states
];
])('given state %s', selectedState => {
beforeEach(() => {
wrapper = createComponent({ selectedState });
});
it.each(supportedStates)('Renders an empty state for %s', selectedState => {
const wrapper = createComponent({ selectedState });
it('renders the slotted content', () => {
expect(wrapper.element).toMatchSnapshot();
});
expect(wrapper.element).toMatchSnapshot();
// slot is not rendered by the stub, test it separately
expect(wrapper.vm.currentState.slottedDescription).toMatchSnapshot();
it('passes the expected props to GlEmptyState', () => {
expect(wrapper.find(MockGlEmptyState).props()).toMatchSnapshot();
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7