PR Group 4 - Liban & Kaalid

.env.test

@@ -0,0 +1,6 @@
+DB_USER=pixel_user
+DB_PASSWORD=pixel_pass
+DB_HOST=127.0.0.1
+DB_DATABASE=PixelToPattern
+DB_PORT=3366   
+SERVER_PORT=3000

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-.env
+.env
+coverage

README.md

@@ -116,6 +116,61 @@ These steps apply only if you wish to run **Pixel to Pattern** manually without
 
 ---
 
+## Testing
+
+### Backend
+
+- All backend unit tests live in `server/__tests__` and use Jest with mocked Sequelize models, so no database connection is required.
+- Execute the suite from the `server` directory: `npm test`. Add `npm run test:coverage` to generate coverage reports under `server/coverage`.
+
+### Frontend
+
+- Frontend component tests live in `client/__tests__` and rely on React Testing Library plus `jest-dom` assertions.
+- Run the suite from the `client` directory: `npm test`. Use `npm run test:coverage` to output coverage data under `client/coverage`.
+
+### Running Cypress 
+
+- First make sure you have downloaded Cypress
+- run npx cypress open - This will start cypress.
+- Select E2E testing.
+- Choose a browser.
+- Then choose a file to test - You should see the tests by now.
+
+### Cypress Tests
+
+- Tests if the home page works.
+- Creates a new pattern and makes sure it exists.
+- Checks if a pattern exists.
+- Creates and deletes a pattern, and also makes sure the pattern is deleted.
+
+### Backend Integration Test
+
+- These tests hit real Express endpoints and use a real MySQL database in Docker.
+- Tools: Jest + Supertest + Sequelize + MySQL
+
+### What the Integration Tests
+
+- POST /patterns to create a pattern
+
+- GET /patterns and GET /patterns/:id to verify it was stored
+
+- DELETE /patterns/:id to remove it and verify it no longer appears
+
+### Step by Step running the backend Integration Test
+
+- # backend
+- cd server
+- npm install cors
+- npm install --save-dev jest supertest cross-env
+- docker compose -f docker-compose.test.yml up --build --abort-on-container-exit
+
+### To run Full stack
+
+- docker compose up --build
+- cd server
+- npm test
+---
+
 ## Deployment Process
 
 ### Steps

client/__tests__/NavBar.test.jsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import NavBar from '../src/components/NavBar.jsx';
+
+test('NavBar renders site title and navigation links', () => {
+  render(<NavBar />);
+
+  expect(screen.getByRole('heading', { name: /pixel2pattern/i })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /home/i })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /faq/i })).toBeInTheDocument();
+});

client/__tests__/PatternGenerator.test.jsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import PatternGenerator from '../src/components/PatternGenerator.jsx';
+
+const patternInfo = {
+  width: 2,
+  height: 2,
+  colorConfig: ['#111111', '#111111', '#222222', '#222222'],
+};
+
+test('PatternGenerator lists rows derived from pattern colors', async () => {
+  render(<PatternGenerator patternInfo={patternInfo} />);
+
+  const rows = await screen.findAllByRole('listitem');
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent('Row 1');
+  expect(rows[0]).toHaveTextContent('#111111');
+  expect(rows[1]).toHaveTextContent('Row 2');
+  expect(rows[1]).toHaveTextContent('#222222');
+});

client/__tests__/PixelDisplay.test.jsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import PixelDisplay from '../src/components/PixelDisplay.jsx';
+
+const patternInfo = {
+  width: 2,
+  height: 2,
+  colorConfig: ['#000000', '#ffffff', '#ff0000', '#00ff00'],
+};
+
+beforeAll(() => {
+  jest.spyOn(global.HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    getImageData: () => ({ data: new Uint8ClampedArray(16) }),
+    putImageData: jest.fn(),
+  });
+});
+
+test('PixelDisplay renders a canvas with pixelated style', () => {
+  const { container } = render(
+    <PixelDisplay patternInfo={patternInfo} displayWidth={100} displayHeight={100} />
+  );
+
+  const canvas = container.querySelector('canvas');
+  expect(canvas).toBeInTheDocument();
+  expect(canvas.style.imageRendering).toBe('pixelated');
+  expect(canvas.style.width).toBe('100px');
+  expect(canvas.style.height).toBe('100px');
+});

client/__tests__/PixelPost.test.jsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import PixelPost from '../src/components/PixelPost.jsx';
+
+jest.mock('../src/components/PixelDisplay.jsx', () => () => <div data-testid="pixel-display" />);
+
+const samplePost = {
+  pattern_ID: 1,
+  pattern_name: 'Test Pattern',
+  pattern_info: { width: 5, height: 5, colorConfig: ['#000'] },
+  description: 'Sample description',
+  date: '2024-10-15T12:34:56.000Z',
+  author: 'Alice',
+};
+
+test('PixelPost shows basic post info', () => {
+  render(<PixelPost post={samplePost} />);
+
+  expect(screen.getByText('Test Pattern')).toBeInTheDocument();
+  expect(screen.getByText('Sample description')).toBeInTheDocument();
+  expect(screen.getByText(/Alice/)).toBeInTheDocument();
+  expect(screen.getByText('2024-10-15')).toBeInTheDocument();
+  expect(screen.getByTestId('pixel-display')).toBeInTheDocument();
+});

client/jest.config.mjs

@@ -0,0 +1,10 @@
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({ dir: './' });
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jsdom',
+};
+
+export default createJestConfig(customJestConfig);

client/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';