From 6300b668916a34f8ec595789fcd4fa84f337ae6f Mon Sep 17 00:00:00 2001 From: "M.Palerme" Date: Tue, 23 Jul 2024 16:34:15 +0200 Subject: [PATCH] #48 test confirmBox --- test/component/ConfirmBox.test.ts | 196 ++++++++++++++++++++++++++++++ test/extra/selectByText.ts | 22 ++++ test/extra/vuetify4Test.ts | 15 +++ 3 files changed, 233 insertions(+) create mode 100644 test/component/ConfirmBox.test.ts create mode 100644 test/extra/selectByText.ts create mode 100644 test/extra/vuetify4Test.ts diff --git a/test/component/ConfirmBox.test.ts b/test/component/ConfirmBox.test.ts new file mode 100644 index 0000000..005bd87 --- /dev/null +++ b/test/component/ConfirmBox.test.ts @@ -0,0 +1,196 @@ +import { mount, config } from '@vue/test-utils'; +import { expect, test, describe } from 'vitest'; +import { vuetify4Test } from '../extra/vuetify4Test'; +import { selectByText } from '../extra/selectByText'; +import ConfirmBox from '@/components/ConfirmBox.vue'; + +const vuetify = vuetify4Test(); +// Token to dysplay confirm box +const openConfirmBox = useState("openConfirmBox",); +// Token to store message to display in confirm box +const msgConfirmBox = useState("msgConfirmBox"); +// token to save the answer of the dialog box +const answerConfirmBox = useState("answerConfirmBox"); + +/** + * Mount the ConfirmBox component + * @returns wrapper of ConfirmBox component + */ +function mountConfirmBox(){ + return mount(ConfirmBox, { + props: {}, + global: { + plugins: [vuetify], + stubs: { + // Default layout is unactive + NuxtLayout: true, + }, + mocks:{ + // thx https://stackoverflow.com/a/73630072 + // Get key of translate + t: (tKey:string) => tKey + } + } + }); +} + +/** + * Open the confirm box and return the v-card in dialog + * @param wrapper wrapper of ConfirmBox component + * @returns HTMLElement of v-card in dialog + */ +async function openConfirmBoxTest(wrapper: any){ + openConfirmBox.value = true; + await wrapper.vm.$nextTick(); + return wrapper.getComponent({name: 'v-card'}); +} + +/** + * Validate the base elements of confirm box + * @param wrapper wrapper of ConfirmBox component + */ +function validateBaseConfirmBox(wrapper: any){ + expect(openConfirmBox.value).toBe(true); + expect(wrapper.text()).toContain('title.confirmBox'); + expect(wrapper.text()).toContain('button.cancel'); + expect(wrapper.text()).toContain('button.yes'); +} + + +describe('ConfirmBox', () => { + beforeEach(async () => { + // abort a tag without delete inside + config.global.renderStubDefaultSlot = true + // Reset token + openConfirmBox.value = false; + msgConfirmBox.value = ""; + answerConfirmBox.value = false; + }) + + afterEach(() => { + config.global.renderStubDefaultSlot = false; + }) + + test('nothing when we not open the confirmBox', () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Get vcard in dialog + const wrapperDialog = wrapper.getComponent({name: 'v-dialog'}); + + // ConfirmBox should not be visible + expect(wrapperDialog.text()).not.toBe('title.confirmBox'); + expect(openConfirmBox.value).toBe(false); + }); + + test('Open the confirmBox empty', async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + }); + + test('Open the confirmBox with message', async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Set message to display in confirm box + msgConfirmBox.value = "test message"; + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // console.log(dialog.html()); + + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + // ConfirmBox should display message + expect(dialog.text()).toContain('test message'); + }); + + test('Close the confirmBox with cancel, without message', + async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + + // Select button cancel + const lButton = dialog.findAll('button'); + const button = selectByText(lButton, 'button.cancel'); + // Click on cancel button + await button.trigger('click'); + // ConfirmBox should be closed + expect(openConfirmBox.value).toBe(false); + // ConfirmBox should be closed with false answer + expect(answerConfirmBox.value).toBe(false); + // ConfirmBox should not display message + expect(dialog.text()).not.toContain('test message'); + }); + + test('Close the confirmBox with cancel, with message', + async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Set message to display in confirm box + msgConfirmBox.value = "test cancel message"; + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + + // Select button cancel + const lButton = dialog.findAll('button'); + const button = selectByText(lButton, 'button.cancel'); + // Click on cancel button + await button.trigger('click'); + // ConfirmBox should be closed + expect(openConfirmBox.value).toBe(false); + // ConfirmBox should be closed with false answer + expect(answerConfirmBox.value).toBe(false); + }); + + test('Close the confirmBox with ok, without message', + async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + + // Select button ok + const lButton = dialog.findAll('button'); + const button = selectByText(lButton, 'button.yes'); + // Click on ok button + await button.trigger('click'); + // ConfirmBox should be closed + expect(openConfirmBox.value).toBe(false); + // ConfirmBox should be closed with true answer + expect(answerConfirmBox.value).toBe(true); + // ConfirmBox should not display message + expect(dialog.text()).not.toContain('test message'); + }); + + test('Close the confirmBox with ok, with message', + async () => { + // Render the ConfirmBox component + const wrapper = mountConfirmBox(); + // Set message to display in confirm box + msgConfirmBox.value = "test cancel message"; + // Open and Get vcard in dialog + const dialog = await openConfirmBoxTest(wrapper); + // ConfirmBox should be visible + validateBaseConfirmBox(dialog); + + // Select button cancel + const lButton = dialog.findAll('button'); + const button = selectByText(lButton, 'button.yes'); + // Click on ok button + await button.trigger('click'); + // ConfirmBox should be closed + expect(openConfirmBox.value).toBe(false); + // ConfirmBox should be closed with true answer + expect(answerConfirmBox.value).toBe(true); + }); +}); \ No newline at end of file diff --git a/test/extra/selectByText.ts b/test/extra/selectByText.ts new file mode 100644 index 0000000..5bff8f2 --- /dev/null +++ b/test/extra/selectByText.ts @@ -0,0 +1,22 @@ +/** SPDX-FileCopyrightText: 2024 Marcellino Palerme + * + * SPDX-License-Identifier: MIT +*/ + + +/** + * Select a wrapper by its text + * @param lWrapper html wrapper list + * @param text required text in wrapper + * @returns HTML wrapper or null + */ +export function selectByText(lWrapper:any[], text:string){ + // loop on wrapper list + for(const wrapper of lWrapper){ + // check if wrapper contains text + if(wrapper.text().includes(text)){ + return wrapper; + } + } + return null; +} \ No newline at end of file diff --git a/test/extra/vuetify4Test.ts b/test/extra/vuetify4Test.ts new file mode 100644 index 0000000..b319c4f --- /dev/null +++ b/test/extra/vuetify4Test.ts @@ -0,0 +1,15 @@ +import { createVuetify } from 'vuetify'; +import * as components from 'vuetify/components'; +import * as directives from 'vuetify/directives'; + + +export function vuetify4Test() { + const vuetify = createVuetify({ + components, + directives, + }); + + global.ResizeObserver = require('resize-observer-polyfill'); + + return vuetify; +} \ No newline at end of file