Merge pull request #67 from wizelineacademy/I005-Testing

I005 testing / refactoring

knowx/.eslintrc.json

@@ -3,9 +3,10 @@
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier"
+    "prettier",
+    "plugin:testing-library/react"
   ],
-  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier", "testing-library"],
   "rules": {
     "@next/next/no-css-tags": 1,
     "prettier/prettier": ["error"],

knowx/.gitignore

@@ -42,3 +42,6 @@ next-env.d.ts
 
 # local files
 secretCreate.txt
+
+coverage
+html

knowx/cypress.config.ts

@@ -1,4 +1,7 @@
 import { defineConfig } from "cypress"
+import { config } from "dotenv"
+config({ path: ".env" })
+const { GitHubSocialLogin } = require("cypress-social-logins").plugins
 
 export default defineConfig({
   component: {
@@ -10,7 +13,18 @@ export default defineConfig({
 
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      on("task", {
+        generateOTP: require("cypress-otp"),
+        GitHubSocialLogin: GitHubSocialLogin,
+      })
     },
   },
+
+  env: {
+    GITHUB_USERNAME: process.env.EMAIL_FROM,
+    GITHUB_PASSWORD: process.env.EMAIL_SERVER_PASSWORD,
+    COOKIE_NAME: "next-auth.session-token",
+    SITE_NAME: process.env.NEXTAUTH_URL,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+  },
 })

knowx/cypress/e2e/login/login.cy.ts

@@ -0,0 +1,29 @@
+// E2E login/sign up tests (Diego Gutiérrez A01284841)
+
+describe("Auth Redirect", () => {
+  it("passes", () => {
+    // Check if the user is redirected to the auth page when trying to access other pages
+    cy.visit("http://localhost:3000").wait(1000)
+    cy.url().should("eq", "http://localhost:3000/auth")
+
+    // Check if all routes redirect to the auth page
+    cy.visit("http://localhost:3000/dashboard").wait(1000)
+    cy.url().should("eq", "http://localhost:3000/auth")
+
+    // cy.visit("http://localhost:3000/history").wait(1000)
+    // cy.url().should("eq", "http://localhost:3000/auth")
+  })
+})
+
+describe("Authorization Check", () => {
+  // beforeEach(() => {
+  //   cy.rewriteHeaders()
+  // })
+
+  it("passes", () => {
+    cy.visit("http://localhost:3000/auth")
+    cy.login()
+    cy.visit("http://localhost:3000/auth")
+    cy.url().should("eq", "http://localhost:3000/dashboard")
+  })
+})

knowx/cypress/mocks/mock.ts

@@ -1,4 +1,4 @@
-import { SimpleHistoryType } from "@/app/interfaces"
+import { SimpleHistoryType } from "@/interfaces"
 
 export const mockHistory: SimpleHistoryType[] = [
   {

knowx/cypress/support/commands.ts

@@ -1,37 +1,78 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+// / <reference types="cypress" />
+
+import hkdf from "@panva/hkdf"
+import { EncryptJWT, JWTPayload } from "jose"
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      rewriteHeaders(): void
+      login(): void
+    }
+  }
+}
+
+// Origin: https://www.tomoliver.net/posts/cypress-samesite-problem
+Cypress.Commands.add("rewriteHeaders", () => {
+  cy.intercept("*", (req) =>
+    req.on("response", (res) => {
+      const setCookies = res.headers["set-cookie"]
+      res.headers["set-cookie"] = (
+        Array.isArray(setCookies) ? setCookies : [setCookies]
+      )
+        .filter((x) => x)
+        .map((headerContent) =>
+          headerContent.replace(
+            /samesite=(lax|strict)/gi,
+            "secure; samesite=none",
+          ),
+        )
+    }),
+  )
+})
+
+async function getDerivedEncryptionKey(secret: string) {
+  return await hkdf(
+    "sha256",
+    secret,
+    "",
+    "NextAuth.js Generated Encryption Key",
+    32,
+  )
+}
+
+export async function encode(
+  token: JWTPayload,
+  secret: string,
+): Promise<string> {
+  const maxAge = 30 * 24 * 60 * 60
+  const encryptionSecret = await getDerivedEncryptionKey(secret)
+  return await new EncryptJWT(token)
+    .setProtectedHeader({ alg: "dir", enc: "A256GCM" })
+    .setIssuedAt()
+    .setExpirationTime(Math.round(Date.now() / 1000 + maxAge))
+    .setJti("test")
+    .encrypt(encryptionSecret)
+}
+
+Cypress.Commands.add("login", () => {
+  const payload = {
+    name: "Testing",
+    email: "[email protected]",
+    picture: "https://avatars.githubusercontent.com/u/65473367?v=",
+    iat: new Date().getTime(),
+    exp: new Date().getTime() + 30 * 24 * 60 * 60 * 1000,
+  }
+
+  cy.wrap(null)
+    .then(() => {
+      return encode(payload, Cypress.env("NEXTAUTH_SECRET"))
+    })
+    .then((encryptedToken) =>
+      cy.setCookie("next-auth.session-token", encryptedToken, {
+        expiry: new Date().setDate(new Date().getDate() + 2),
+        path: "/",
+        sameSite: "lax",
+      }),
+    )
+})

knowx/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')