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);
+  });
+});