feat: adding some tests

.gitignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+__snapshots__
 node_modules
 dist
 dist-ssr

TODO.md

@@ -31,7 +31,8 @@
   - [ ] Implement game recommendations based on user activity
   - [ ] Create a personalized dashboard for logged-in users
 - [ ] Testing & QA
-  - [ ] Write unit tests for all components
+  - [x] Write unit tests for all components
+  - [ ] Write unit tests for all pages
   - [ ] Set up end-to-end testing with Cypress or Playwright
   - [ ] Perform accessibility testing
 - [ ] Deployment

cypress.config.mjs

@@ -0,0 +1,27 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'j2456e',
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.ts',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    experimentalFetchPolyfill: true,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+  },
+  env: {
+    API_URL: 'http://localhost:8000',
+  },
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+  },
+  nodeOptions: ['--loader', 'ts-node/esm'],
+})

cypress/e2e/login.cy.tsx

@@ -0,0 +1,24 @@
+// TODO: Change when implemented.
+
+describe('Login Page', () => {
+  it('should load the login page and submit form', () => {
+    cy.visit('/login')
+
+    cy.get('input[placeholder="Type your nickname or email..."]').type(
+      'test@example.com',
+    )
+    cy.get('input[placeholder="Type your password..."]').type('password')
+
+    cy.get('button').contains('Login').click()
+
+    cy.log('Form submitted')
+  })
+
+  it('should trigger social logins', () => {
+    cy.visit('/login')
+
+    cy.get('button').contains('Google').click()
+    cy.get('button').contains('Facebook').click()
+    cy.get('button').contains('Twitter').click()
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,9 @@
+const apiUrl = Cypress.env('API_URL')
+
+Cypress.Commands.add('login', (email: string, password: string) => {
+  cy.request({
+    method: 'POST',
+    url: `${apiUrl}/auth/login`,
+    body: { email, password },
+  }).then((resp) => resp.body.data.message)
+})

cypress/support/e2e.ts

@@ -0,0 +1,31 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and loaded automatically
+// before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the 'supportFile'
+// configuration option.
+//
+// More info: https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// Set global configurations or behaviors here
+
+// Example: Ignore uncaught exceptions that aren't relevant to the test
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // Prevent Cypress from failing the test on uncaught exceptions
+  // Example: Ignore errors caused by third-party libraries or ads
+  console.log('Caught exception: ', err)
+
+  // return false to prevent the test from failing
+  return false
+})

cypress/support/index.d.ts

@@ -0,0 +1,11 @@
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to log in a user.
+     *
+     * @param email - The email of the user
+     * @param password - The password of the user
+     */
+    login(email: string, password: string): Chainable<void>
+  }
+}