🧪 test: add unit tests

.vscode/extensions.json

@@ -1,9 +1,9 @@
 {
-	/* prettier-ignore */
 	"recommendations": [
-      "csstools.postcss",
-      "esbenp.prettier-vscode",
-      "dbaeumer.vscode-eslint",
-      "astro-build.astro-vscode"
-  ]
+		"vitest.explorer",
+		"csstools.postcss",
+		"esbenp.prettier-vscode",
+		"dbaeumer.vscode-eslint",
+		"astro-build.astro-vscode"
+	]
 }

eslint.config.js

@@ -167,7 +167,6 @@ const vitestRules = {
 	'vitest/prefer-to-be-truthy': 'error',
 	'vitest/prefer-to-be-object': 'error',
 	'vitest/no-standalone-expect': 'error',
-	'vitest/no-conditional-expect': 'error',
 	'vitest/no-conditional-in-test': 'error',
 	'vitest/prefer-to-have-length': 'error',
 	'vitest/prefer-hooks-in-order': 'error',
@@ -299,7 +298,7 @@ export default eslintAntfuConfig(
 		rules: { ...jsRules, ...tsRules, ...stylisticRules },
 	},
 	{
-		files: ['src/tests/**'],
+		files: ['tests/unit/**/*.test.ts'],
 		plugins: { eslintPluginVitest },
 		settings: {
 			vitest: {
@@ -311,7 +310,12 @@ export default eslintAntfuConfig(
 				...eslintPluginVitest.environments.env.globals,
 			},
 		},
-		rules: { ...vitestRules },
+		rules: {
+			...vitestRules,
+			'ts/no-unsafe-call': 'off',
+			'no-magic-numbers': 'off',
+			'ts/no-unsafe-member-access': 'off',
+		},
 	},
 	{ rules: generalRules },
 	{ ignores: ['**/*.json', 'src/env.d.ts'] },

package.json

@@ -20,12 +20,13 @@
 	},
 	"scripts": {
 		"dev": "astro dev",
-		"format": "npx prettier '**/*.{json,css,astro}' --config prettier.config.js --write --cache",
-		"lint": "eslint --fix --config eslint.config.js --ignore-pattern '.vscode/*.json' --cache-location '/node_modules/.eslintcache/",
+		"format": "npx prettier --write '**/*.{json,css,astro}' --config=prettier.config.js --cache",
+		"lint": "eslint --fix --ignore-pattern='.vscode/*.json' --config=eslint.config.js --cache-location='/node_modules/.eslintcache/",
+		"test:unit": "vitest --config=vitest.config.ts",
 		"build": "astro build",
 		"removeEnvTypesFile": "node scripts/removeEnvTypesFile.js",
 		"preview": "astro preview",
-		"all": "pnpm format && pnpm lint && pnpm build && pnpm removeEnvTypesFile"
+		"all": "pnpm format && pnpm lint && pnpm test:unit --run && pnpm build && pnpm removeEnvTypesFile"
 	},
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.1",
@@ -42,6 +43,7 @@
 		"eslint-plugin-vitest": "^0.5.4",
 		"lightningcss": "^1.24.0",
 		"prettier": "^3.2.5",
-		"prettier-plugin-astro": "^0.14.0"
+		"prettier-plugin-astro": "^0.14.0",
+		"vitest": "^2.0.4"
 	}
 }

src/assets/ts/imgStore.ts

@@ -1,14 +1,14 @@
 import type { State, Filter, SpinMode, FilterName } from '@types';
 
+import { deepClone } from '@ts/utils/deepClone.ts';
+import { spinIsRotation } from '@ts/utils/spinIsRotation.ts';
+import { resetRotationDeg } from '@ts/utils/resetRotationDeg.ts';
 import { rotationDegs, splitFromLastDotRegExp } from '@ts/constants.ts';
 
 const { left: leftRotationDeg, right: rightRotationDeg, half: halfRotationDeg, full: fullRotationDeg } = rotationDegs;
 
-function deepCopy<TObj = object>(obj: TObj) {
-	return structuredClone(obj) || JSON.parse(JSON.stringify(obj)) as TObj;
-}
-
 class ImgStore {
+	/*** State ***/
 	state: State = {
 		name: null,
 		extension: null,
@@ -74,32 +74,47 @@ class ImgStore {
 				isActive: false,
 			},
 		],
-	};
+	}; /* “satisfies” vs. type annotation: “satisfies” fixes “verticalFlip” and “horizontalFlip” to 1, causing problem in createImgCanvas. */
 
-	#defaultState = deepCopy(this.state);
+	#defaultState = deepClone(this.state);
 
 	/*** Methods ***/
+	updateSpinValue(spinMode: SpinMode) {
+		if (spinIsRotation(spinMode)) {
+			const rotationDeg = spinMode === 'Rotate Right' ? rightRotationDeg : leftRotationDeg;
+			this.state.rotationDeg += rotationDeg;
+		} else {
+			const flipMode = spinMode === 'Vertical Flip' ? 'verticalFlip' : 'horizontalFlip';
+			this.state[flipMode] *= -1;
+		}
+	}
+
 	updateCSSFilters() {
 		const BLUR_REDUCTION_FACTOR = 2.5;
 
-		this.state.CSSFilters = this.state.filters.reduce((acc, { name, value, unit }) => {
+		const filtersString = this.state.filters.reduce((acc, { name, value, unit }) => {
 			if (name === 'blur') {
 				value /= BLUR_REDUCTION_FACTOR; // Visually reduce blur effect
 			}
 
-			return `${acc}${name}(${value}${unit}) `;
+			return `${acc}${name}(${value}${unit})`;
 		}, '');
+
+		this.state.CSSFilters = filtersString;
+
+		return filtersString;
 	}
 
 	reset() {
+		const initialState = deepClone(this.#defaultState);
 		const { name, extension, rotationDeg } = this.state;
-		const normalizedRotationDeg = this.#isRotated ? Math.round(rotationDeg / fullRotationDeg) * fullRotationDeg : rotationDeg;
+		const adjustedRotationDeg = this.#isRotated ? resetRotationDeg(rotationDeg) : rotationDeg;
 
 		this.state = {
-			...deepCopy(this.#defaultState),
+			...initialState,
 			name,
 			extension,
-			rotationDeg: normalizedRotationDeg,
+			rotationDeg: adjustedRotationDeg,
 		};
 	}
 
@@ -144,27 +159,17 @@ class ImgStore {
 	}
 
 	/*** Setters ***/
-	/* Type “any” is required when getter and setter don't share the same type. */
-	set activeFilter(newFilterName: any | FilterName) {
-		this.activeFilter.isActive = false;
-		const newFilter = this.state.filters.find((filter: Filter) => filter.name === newFilterName) as Filter;
-		newFilter.isActive = true;
-	}
-
 	set title(imgFileName: string) {
 		const [imgName, imgExtension] = imgFileName.split(splitFromLastDotRegExp);
+
 		Object.assign(this.state, { name: imgName, extension: imgExtension?.toLowerCase() });
 	}
 
-	// eslint-disable-next-line accessor-pairs -- “rotationDeg” and “verticalFlip”/“horizontalFlip” are accessed separately.
-	set spin(spinMode: SpinMode) {
-		if (spinMode.startsWith('Rotate')) {
-			const rotationDeg = spinMode === 'Rotate Right' ? rightRotationDeg : leftRotationDeg;
-			this.state.rotationDeg += rotationDeg;
-		} else {
-			const flipMode = spinMode === 'Vertical Flip' ? 'verticalFlip' : 'horizontalFlip';
-			this.state[flipMode] *= -1;
-		}
+	/* Type “any” is required when getter and setter don't share the same type. */
+	set activeFilter(newFilterName: any | FilterName) {
+		this.activeFilter.isActive = false;
+		const newFilter = this.state.filters.find((filter: Filter) => filter.name === newFilterName) as Filter;
+		newFilter.isActive = true;
 	}
 }
 

src/assets/ts/modules/resetFilters.ts

@@ -8,6 +8,7 @@ export function resetFilters() {
 	const { filtersContainer } = DOMElements;
 	const activeFilterBtn = getActiveFilterBtn();
 	const firstFilterBtn = filtersContainer.children[0] as HTMLButtonElement;
+
 	activeFilterBtn.classList.remove(activeFilterClass);
 	firstFilterBtn.classList.add(activeFilterClass);
 	filtersContainer.scrollTo({ left: 0, behavior: 'smooth' });

src/assets/ts/modules/spinImg.ts

@@ -1,20 +1,12 @@
-import type { SpinMode } from '@types';
-
 import { imgStore } from '@ts/imgStore.ts';
 import { DOMElements, getImgElement } from '@ts/domElements.ts';
 
 const { width: imgContainerWidth, height: imgContainerHeight } = DOMElements.imgDropZone.getBoundingClientRect();
 
-export function spinImg(event?: Event) {
-	if (event && event.target !== event.currentTarget) {
-		const target = event.target as HTMLElement;
-		const spinBtn = target.closest('button') as HTMLButtonElement;
-		const spinMode = spinBtn.title.trim() as SpinMode;
-		imgStore.spin = spinMode;
-	}
-
+export function spinImg() {
 	const imgElement = getImgElement();
 	const { verticalFlip, horizontalFlip, rotationDeg } = imgStore.state;
+
 	imgElement.style.width = imgStore.isLandscape ? `${imgContainerHeight}px` : '100%';
 	imgElement.style.height = imgStore.isLandscape ? `${imgContainerWidth}px` : '100%';
 	imgElement.style.transform = `scale(${verticalFlip}, ${horizontalFlip}) rotate(${rotationDeg}deg)`;

src/assets/ts/utils/deepClone.ts

@@ -0,0 +1,5 @@
+export function deepClone<T = object>(obj: T) {
+	const clone = structuredClone(obj) || JSON.parse(JSON.stringify(obj)) as T;
+
+	return clone;
+}

src/assets/ts/utils/resetRotationDeg.ts

@@ -0,0 +1,9 @@
+import { rotationDegs } from '@ts/constants.ts';
+
+const fullRotationDeg = rotationDegs.full;
+
+export function resetRotationDeg(rotationDeg: number) {
+	const rotationQuotient = Math.round(rotationDeg / fullRotationDeg);
+
+	return Math.abs(rotationQuotient * fullRotationDeg);
+}

src/assets/ts/utils/spinIsRotation.ts

@@ -0,0 +1,5 @@
+import type { SpinMode } from '@types';
+
+export function spinIsRotation(spinMode: SpinMode) {
+	return spinMode.toLowerCase().includes('rotate');
+}

src/components/SpinButton.astro

@@ -6,12 +6,12 @@ type Props = {
 };
 
 const { spinMode } = Astro.props as Props;
-const icon = spinMode.replace(' ', '_').toLowerCase();
+const spinIcon = spinMode.replaceAll(' ', '_').toLowerCase();
 ---
 
 <button type="button" title={spinMode} class="btn">
 	<svg>
-		<use href={`${import.meta.env.BASE_URL}/icons.svg#${icon}`}></use>
+		<use href={`${import.meta.env.BASE_URL}/icons.svg#${spinIcon}`}></use>
 	</svg>
 </button>
 

src/components/TheSpins.astro

@@ -40,8 +40,20 @@ import { spinModes } from '@ts/constants.ts';
 </style>
 
 <script>
+	import type { SpinMode } from '@types';
+
+	import { imgStore } from '@ts/imgStore.ts';
 	import { spinImg } from '@ts/modules/spinImg.ts';
 	import { DOMElements } from '@ts/domElements.ts';
 
-	DOMElements.spinsContainer.addEventListener('click', spinImg);
+	DOMElements.spinsContainer.addEventListener('click', ({ target, currentTarget }) => {
+		if (target === currentTarget) return;
+
+		const targetElement = target as HTMLElement;
+		const spinBtn = targetElement.closest('button') as HTMLButtonElement;
+		const spinMode = spinBtn.title.trim() as SpinMode;
+		imgStore.updateSpinValue(spinMode);
+
+		spinImg();
+	});
 </script>

tests/unit/imgStore/activeFilter.test.ts

@@ -0,0 +1,11 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+
+describe('imgStore.activeFilter', () => {
+	it('should update the active filter based on the given name, and allow access to its properties', () => {
+		const activeFilterName = 'grayscale';
+		imgStore.activeFilter = activeFilterName;
+
+		expect(imgStore.activeFilter.name).toBe(activeFilterName);
+	});
+});

tests/unit/imgStore/isEdited.test.ts

@@ -0,0 +1,14 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+
+describe('imgStore.isEdited', () => {
+	it('should return “true” if the image has been rotated', () => {
+		const rotationDegs = [-450, -270, -180, -90, 90, 180, 270, 450] as const;
+
+		rotationDegs.forEach((rotationDeg) => {
+			imgStore.state.rotationDeg = rotationDeg;
+
+			expect(imgStore.isEdited).toBeTruthy();
+		});
+	});
+});

tests/unit/imgStore/isLandscape.test.ts

@@ -0,0 +1,14 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+
+describe('imgStore.isLandscape', () => {
+	it('should return “true” if the image has been rotated only by multiples of 90 degrees and not 180 degrees', () => {
+		const rotationDegs = [-450, -270, -90, 90, 270, 450] as const;
+
+		rotationDegs.forEach((rotationDeg) => {
+			imgStore.state.rotationDeg = rotationDeg;
+
+			expect(imgStore.isLandscape).toBeTruthy();
+		});
+	});
+});

tests/unit/imgStore/reset.test.ts

@@ -0,0 +1,17 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+import { deepClone } from '@ts/utils/deepClone.ts';
+import { resetRotationDeg } from '@ts/utils/resetRotationDeg.ts';
+
+describe('imgStore.reset', () => {
+	it('should correctly reset the state', () => {
+		const initialState = deepClone(imgStore.state);
+		const [name, extension, rotationDeg] = ['New Image', 'png', 180];
+		const adjustedRotationDeg = resetRotationDeg(rotationDeg);
+
+		Object.assign(imgStore.state, { name, extension, rotationDeg, verticalFlip: -1 });
+		imgStore.reset();
+
+		expect(imgStore.state).toStrictEqual({ ...initialState, name, extension, rotationDeg: adjustedRotationDeg });
+	});
+});

tests/unit/imgStore/title.test.ts

@@ -0,0 +1,10 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+
+describe('imgStore.title', () => {
+	it('should set the name and extension of the image file, and return its full name (name.extension)', () => {
+		Object.assign(imgStore.state, { name: 'New Image', extension: 'png' });
+
+		expect(imgStore.title).toMatchInlineSnapshot(`"New Image.png"`);
+	});
+});

tests/unit/imgStore/updateCSSFilters.test.ts

@@ -0,0 +1,12 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { it, expect, describe } from 'vitest';
+
+describe('imgStore.updateCSSFilters', () => {
+	it('should create and/or update the CSS filters string corresponding with filter values', () => {
+		imgStore.state.filters.find(({ name }) => name === 'grayscale')!.value = 50;
+		imgStore.updateCSSFilters();
+		const { CSSFilters } = imgStore.state;
+
+		expect(CSSFilters).toMatchInlineSnapshot(`"brightness(100%)grayscale(50%)blur(0px)hue-rotate(0deg)opacity(100%)contrast(100%)saturate(100%)sepia(0%)"`);
+	});
+});

tests/unit/imgStore/updateSpinValue.test.ts

@@ -0,0 +1,21 @@
+import { imgStore } from '@ts/imgStore.ts';
+import { spinModes } from '@ts/constants.ts';
+import { it, expect, describe } from 'vitest';
+import { spinIsRotation } from '@ts/utils/spinIsRotation.ts';
+
+describe('imgStore.updateSpinValue', () => {
+	it('should update the rotation degree and vertical/horizontal flip values', () => {
+		spinModes.forEach((spinMode) => {
+			imgStore.updateSpinValue(spinMode);
+
+			const { rotationDeg, verticalFlip, horizontalFlip } = imgStore.state;
+
+			if (spinIsRotation(spinMode)) {
+				expect(rotationDeg === 0 || rotationDeg % 90 === 0).toBeTruthy();
+			} else {
+				expect([1, -1]).toContain(verticalFlip);
+				expect([1, -1]).toContain(horizontalFlip);
+			}
+		});
+	});
+});

tests/unit/utils/deepClone.test.ts

@@ -0,0 +1,18 @@
+import { it, expect, describe } from 'vitest';
+import { deepClone } from '@ts/utils/deepClone.ts';
+
+describe('deepClone', () => {
+	it('should create a deep clone of the given object', () => {
+		const obj = {
+			a: 1,
+			b: true,
+			c: 'value',
+			d: { e: 'f' },
+			g: [1, '2', { h: '3' }],
+		};
+		const clone = deepClone(obj);
+
+		expect(clone).not.toBe(obj);
+		expect(clone).toStrictEqual(obj);
+	});
+});