Finish feature/116

Author: dlcastillop

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+name: Run Tests
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18, 20, 22]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+

package.json

@@ -6,9 +6,13 @@
   "scripts": {
     "dev": "vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "prettier": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest --watch"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/jsdom": "^21.1.7",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",
     "@typescript-eslint/eslint-plugin": "8.17.0",
@@ -17,10 +21,12 @@
     "eslint": "9.16.0",
     "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-react-refresh": "0.4.16",
+    "jsdom": "^26.1.0",
     "prettier": "3.4.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript": "5.7.2",
-    "vite": "6.0.3"
+    "vite": "6.0.3",
+    "vitest": "^3.1.2"
   }
 }

src/hooks/js/__tests__/useLang.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useLang } from '../useLang';
+
+describe('useLang Hook', () => {
+  const originalNavigatorLanguage = navigator.language;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, 'language', {
+      writable: true,
+      value: 'en-US'
+    });
+  });
+
+  afterEach(() => {
+    // Restore the original language value
+    Object.defineProperty(navigator, 'language', {
+      writable: true,
+      value: originalNavigatorLanguage
+    });
+  });
+
+  it('should return the initial language', () => {
+    const { result } = renderHook(() => useLang());
+    expect(result.current).toBe('en-US');
+  });
+
+  it('should update language on "languagechange" event', () => {
+    const { result } = renderHook(() => useLang());
+
+    act(() => {
+      // Trigger the languagechange event
+      Object.defineProperty(navigator, 'language', {
+        writable: true,
+        value: 'es-ES'
+      });
+      window.dispatchEvent(new Event('languagechange'));
+    });
+
+    // Verify that the hook updates the value
+    expect(result.current).toBe('es-ES');
+  });
+});

src/hooks/ts/__tests__/useArray.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react';
+import useArray from '../useArray';
+
+describe('useArray', () => {
+  it('should initialize with the given array', () => {
+    const { result } = renderHook(() => useArray([1, 2, 3]));
+    expect(result.current.array).toEqual([1, 2, 3]);
+  });
+
+  it('should push an element', () => {
+    const { result } = renderHook(() => useArray([1, 2]));
+    act(() => {
+      result.current.push(3);
+    });
+    expect(result.current.array).toEqual([1, 2, 3]);
+  });
+
+  it('should filter elements', () => {
+    const { result } = renderHook(() => useArray([1, 2, 3, 4]));
+    act(() => {
+      result.current.filter((n: number) => n % 2 === 0);
+    });
+    expect(result.current.array).toEqual([2, 4]);
+  });
+
+  it('should update an element at a given index', () => {
+    const { result } = renderHook(() => useArray(['a', 'b', 'c']));
+    act(() => {
+      result.current.update(1, 'z');
+    });
+    expect(result.current.array).toEqual(['a', 'z', 'c']);
+  });
+
+  it('should remove an element at a given index', () => {
+    const { result } = renderHook(() => useArray([10, 20, 30]));
+    act(() => {
+      result.current.remove(1);
+    });
+    expect(result.current.array).toEqual([10, 30]);
+  });
+
+  it('should clear the array', () => {
+    const { result } = renderHook(() => useArray([1, 2, 3]));
+    act(() => {
+      result.current.clear();
+    });
+    expect(result.current.array).toEqual([]);
+  });
+
+  it('should set the array directly', () => {
+    const { result } = renderHook(() => useArray([1, 2, 3]));
+    act(() => {
+      result.current.set([7, 8, 9]);
+    });
+    expect(result.current.array).toEqual([7, 8, 9]);
+  });
+});
+

src/hooks/ts/__tests__/useLang.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react';
+import { useLang } from '../useLang';
+
+describe('useLang Hook', () => {
+  const originalNavigatorLanguage = navigator.language;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, 'language', {
+      writable: true,
+      value: 'en-US',
+    });
+  });
+
+  afterEach(() => {
+    // Restore the original language value
+    Object.defineProperty(navigator, 'language', {
+      writable: true,
+      value: originalNavigatorLanguage,
+    });
+  });
+
+  it('should return the initial language', () => {
+    const { result } = renderHook(() => useLang());
+    expect(result.current).toBe('en-US');
+  });
+
+  it('should update language on "languagechange" event', () => {
+    const { result } = renderHook(() => useLang());
+
+    act(() => {
+      // Trigger the languagechange event
+      Object.defineProperty(navigator, 'language', { writable: true, value: 'es-ES' });
+      window.dispatchEvent(new Event('languagechange'));
+    });
+
+    // Verify that the hook updates the value
+    expect(result.current).toBe('es-ES');
+  });
+});

vite.config.ts

@@ -1,7 +1,12 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true, // Enables global test APIs like `describe`, `it`, etc.
+    environment: 'jsdom', // Simulates the DOM for React components
+  },
 })