From 2545658d9f186e87a081fd5479b25d9f8ee1b359 Mon Sep 17 00:00:00 2001 From: Fabien Winkler <fabien.winkler@outlook.fr> Date: Fri, 29 Sep 2023 22:44:48 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20adding=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + tests/{drawer.test.ts => basic.test.ts} | 2 +- tests/settings.test.ts | 88 +++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 1 deletion(-) rename tests/{drawer.test.ts => basic.test.ts} (98%) create mode 100644 tests/settings.test.ts diff --git a/package.json b/package.json index f4e6648..8969128 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "test": "npm run test:unit && npm run test:e2e", "test:e2e": "playwright test", "test:unit": "vitest run", + "test:unit:watch": "vitest dev", "format": "prettier src/**/*.ts --write", "lint": "npx eslint src/**" }, diff --git a/tests/drawer.test.ts b/tests/basic.test.ts similarity index 98% rename from tests/drawer.test.ts rename to tests/basic.test.ts index af374be..ff6dbba 100644 --- a/tests/drawer.test.ts +++ b/tests/basic.test.ts @@ -12,7 +12,7 @@ beforeAll(() => { window.Blob = Blob; // use Node.js Blob instead of Jsdom's Blob }); -describe('Drawer', () => { +describe('Basic', () => { document.body.innerHTML = `<div id="test"></div>`; it('Init single basic drawer', () => { diff --git a/tests/settings.test.ts b/tests/settings.test.ts new file mode 100644 index 0000000..c3f0a65 --- /dev/null +++ b/tests/settings.test.ts @@ -0,0 +1,88 @@ +import { describe, expect, it, beforeAll } from 'vitest'; +import { Drawer } from '../src/Drawer'; +import { Blob } from 'node:buffer'; +import { defaultOptionsDrawer } from '../src/utils/constantes'; + +declare global { + interface Window { + Blob: any; + } +} + +beforeAll(() => { + window.Blob = Blob; // use Node.js Blob instead of Jsdom's Blob +}); + +describe('Settings', () => { + document.body.innerHTML = `<div id="test"></div>`; + + it('Open settings modal', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.isVisible()).toBe(true); + }); + + it('change globalAlpha (opacity)', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.$opacitySettingInput).toBeInstanceOf(HTMLInputElement); + // Default value + expect(drawer.settingModal.$opacitySettingInput.value).eq(defaultOptionsDrawer.opacity.toString()); + drawer.settingModal.$opacitySettingInput.value = '0.5'; + drawer.settingModal.$opacitySettingInput.dispatchEvent(new Event('change')) + expect(drawer.options.opacity).eq(0.5); + expect(drawer.ctx.globalAlpha).eq(0.5); + }); + + it('change fill option', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.$fillSettingInput).toBeInstanceOf(HTMLInputElement); + expect(drawer.settingModal.$fillSettingInput.checked).eq(defaultOptionsDrawer.fill); + drawer.settingModal.$fillSettingInput.checked = !defaultOptionsDrawer.fill; + drawer.settingModal.$fillSettingInput.dispatchEvent(new Event('change')) + expect(drawer.options.fill).eq(!defaultOptionsDrawer.fill); + }); + + it('change grid option', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.$gridSettingInput).toBeInstanceOf(HTMLInputElement); + expect(drawer.settingModal.$gridSettingInput.checked).eq(defaultOptionsDrawer.grid); + drawer.settingModal.$gridSettingInput.checked = !defaultOptionsDrawer.grid; + drawer.settingModal.$gridSettingInput.dispatchEvent(new Event('change')) + expect(drawer.options.grid).eq(drawer.settingModal.$gridSettingInput.checked); + }); + + it('change guides option', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.$guidesSettingInput).toBeInstanceOf(HTMLInputElement); + expect(drawer.settingModal.$guidesSettingInput.checked).eq(defaultOptionsDrawer.guides); + drawer.settingModal.$guidesSettingInput.checked = !defaultOptionsDrawer.guides; + drawer.settingModal.$guidesSettingInput.dispatchEvent(new Event('change')) + expect(drawer.options.guides).eq(!defaultOptionsDrawer.guides); + }); + + it('change xor option', () => { + const drawer = new Drawer(document.body.querySelector('#test') as HTMLDivElement); + + drawer.$settingBtn?.dispatchEvent(new Event('click')); + + expect(drawer.settingModal.$xorSettingInput).toBeInstanceOf(HTMLInputElement); + expect(drawer.settingModal.$xorSettingInput.checked).eq(defaultOptionsDrawer.xor); + drawer.settingModal.$xorSettingInput.checked = !defaultOptionsDrawer.xor; + drawer.settingModal.$xorSettingInput.dispatchEvent(new Event('change')) + expect(drawer.options.xor).eq(!defaultOptionsDrawer.xor); + }); +});