1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
const TEST_HTML = 'Hello World! <strong>Foo</strong>';
describe('vue_shared/components/dismissible_alert', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(DismissibleAlert, {
propsData: {
html: TEST_HTML,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
const findAlert = () => wrapper.find(GlAlert);
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('shows alert', () => {
expect(findAlert().exists()).toBe(true);
});
it('shows given HTML', () => {
expect(findAlert().html()).toContain(TEST_HTML);
});
describe('when dismissed', () => {
beforeEach(() => {
findAlert().vm.$emit('dismiss');
});
it('hides the alert', () => {
expect(findAlert().exists()).toBe(false);
});
it('emmits alertDismissed', () => {
expect(wrapper.emitted('alertDismissed')).toBeTruthy();
});
});
});
describe('with additional props', () => {
const testAlertProps = {
dismissible: true,
title: 'Mock Title',
primaryButtonText: 'Lorem ipsum',
primaryButtonLink: '/lorem/ipsum',
variant: 'warning',
};
beforeEach(() => {
createComponent(testAlertProps);
});
it('passes other props', () => {
expect(findAlert().props()).toEqual(expect.objectContaining(testAlertProps));
});
});
describe('with unsafe HTML', () => {
beforeEach(() => {
createComponent({ html: '<a onclick="alert("XSS")">Link</a>' });
});
it('removes unsafe HTML', () => {
expect(findAlert().html()).toContain('<a>Link</a>');
});
});
});
|
