summaryrefslogtreecommitdiffstats
path: root/web_src/js/components/ContextPopup.test.js
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/js/components/ContextPopup.test.js')
-rw-r--r--web_src/js/components/ContextPopup.test.js163
1 files changed, 163 insertions, 0 deletions
diff --git a/web_src/js/components/ContextPopup.test.js b/web_src/js/components/ContextPopup.test.js
new file mode 100644
index 0000000..2726567
--- /dev/null
+++ b/web_src/js/components/ContextPopup.test.js
@@ -0,0 +1,163 @@
+import {flushPromises, mount} from '@vue/test-utils';
+import ContextPopup from './ContextPopup.vue';
+
+async function assertPopup(popupData, expectedIconColor, expectedIcon) {
+ const date = new Date('2024-07-13T22:00:00Z');
+
+ vi.spyOn(global, 'fetch').mockResolvedValue({
+ json: vi.fn().mockResolvedValue({
+ ok: true,
+ created_at: date.toISOString(),
+ repository: {full_name: 'user2/repo1'},
+ ...popupData,
+ }),
+ ok: true,
+ });
+
+ const popup = mount(ContextPopup);
+ popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', {
+ detail: {owner: 'user2', repo: 'repo1', index: popupData.number},
+ }));
+ await flushPromises();
+
+ expect(popup.get('p:nth-of-type(1)').text()).toEqual(`user2/repo1 on ${date.toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'})}`);
+ expect(popup.get('p:nth-of-type(2)').text()).toEqual(`${popupData.title} #${popupData.number}`);
+ expect(popup.get('p:nth-of-type(3)').text()).toEqual(popupData.body);
+
+ expect(popup.get('svg').classes()).toContain(expectedIcon);
+ expect(popup.get('svg').classes()).toContain(expectedIconColor);
+
+ for (const l of popupData.labels) {
+ expect(popup.findAll('.ui.label').map((x) => x.text())).toContain(l.name);
+ }
+}
+
+test('renders an open issue popup', async () => {
+ await assertPopup({
+ title: 'Open Issue',
+ body: 'Open Issue Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'open',
+ pull_request: null,
+ }, 'green', 'octicon-issue-opened');
+});
+
+test('renders a closed issue popup', async () => {
+ await assertPopup({
+ title: 'Closed Issue',
+ body: 'Closed Issue Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'closed',
+ pull_request: null,
+ }, 'red', 'octicon-issue-closed');
+});
+
+test('renders an open PR popup', async () => {
+ await assertPopup({
+ title: 'Open PR',
+ body: 'Open PR Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'open',
+ pull_request: {merged: false, draft: false},
+ }, 'green', 'octicon-git-pull-request');
+});
+
+test('renders an open WIP PR popup', async () => {
+ await assertPopup({
+ title: 'WIP: Open PR',
+ body: 'WIP Open PR Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'open',
+ pull_request: {merged: false, draft: true},
+ }, 'grey', 'octicon-git-pull-request-draft');
+});
+
+test('renders a closed PR popup', async () => {
+ await assertPopup({
+ title: 'Closed PR',
+ body: 'Closed PR Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'closed',
+ pull_request: {merged: false, draft: false},
+ }, 'red', 'octicon-git-pull-request-closed');
+});
+
+test('renders a closed WIP PR popup', async () => {
+ await assertPopup({
+ title: 'WIP: Closed PR',
+ body: 'WIP Closed PR Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'closed',
+ pull_request: {merged: false, draft: true},
+ }, 'red', 'octicon-git-pull-request-closed');
+});
+
+test('renders a merged PR popup', async () => {
+ await assertPopup({
+ title: 'Merged PR',
+ body: 'Merged PR Body',
+ number: 1,
+ labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}],
+ state: 'closed',
+ pull_request: {merged: true, draft: false},
+ }, 'purple', 'octicon-git-merge');
+});
+
+test('renders an issue popup with escaped HTML', async () => {
+ const evil = '<script class="evil">alert("evil message");</script>';
+
+ vi.spyOn(global, 'fetch').mockResolvedValue({
+ json: vi.fn().mockResolvedValue({
+ ok: true,
+ created_at: '2024-07-13T22:00:00Z',
+ repository: {full_name: evil},
+ title: evil,
+ body: evil,
+ labels: [{color: '000666', name: evil}],
+ state: 'open',
+ pull_request: null,
+ }),
+ ok: true,
+ });
+
+ const popup = mount(ContextPopup);
+ popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', {
+ detail: {owner: evil, repo: evil, index: 1},
+ }));
+ await flushPromises();
+
+ expect(() => popup.get('.evil')).toThrowError();
+ expect(popup.get('p:nth-of-type(1)').text()).toContain(evil);
+ expect(popup.get('p:nth-of-type(2)').text()).toContain(evil);
+ expect(popup.get('p:nth-of-type(3)').text()).toContain(evil);
+});
+
+test('renders an issue popup with emojis', async () => {
+ vi.spyOn(global, 'fetch').mockResolvedValue({
+ json: vi.fn().mockResolvedValue({
+ ok: true,
+ created_at: '2024-07-13T22:00:00Z',
+ repository: {full_name: 'user2/repo1'},
+ title: 'Title',
+ body: 'Body',
+ labels: [{color: '000666', name: 'Tag :+1:'}],
+ state: 'open',
+ pull_request: null,
+ }),
+ ok: true,
+ });
+
+ const popup = mount(ContextPopup);
+ popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', {
+ detail: {owner: 'user2', repo: 'repo1', index: 1},
+ }));
+ await flushPromises();
+
+ expect(popup.get('.ui.label').text()).toEqual('Tag 👍');
+});