Workflow

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "overrides": [
+    {
+      "files": ["**/*.test.js"],
+      "env": { "jest": true },
+      "plugins": ["jest"],
+      "extends": ["plugin:jest/recommended"],
+      "rules": { "jest/prefer-expect-assertions": "off" }
+    },
+    {
+      "files": ["**/*.cy.js"],
+      "env": { "cypress/globals": true },
+      "plugins": ["cypress"],
+      "extends": ["plugin:cypress/recommended"],
+      "rules": {
+        "cypress/no-unnecessary-waiting": "off",
+        "no-unused-vars": "off"
+      }
+    }
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
+}

.github/workflows/e2e-test.yml

@@ -0,0 +1,17 @@
+name: Automated E2E Testing
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  run-e2e-tests:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout under $GITHUB_WORKSPACE
+        uses: actions/checkout@main
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          start: npm run dev

.github/workflows/unit-test.yml

@@ -0,0 +1,24 @@
+name: Automated Unit Testing
+on:
+  - pull_request
+  - workflow_dispatch
+
+jobs:
+  run-unit-tests:
+    name: Run Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout under $GITHUB_WORKSPACE
+        uses: actions/checkout@main
+
+      - name: Set up NodeJS
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+
+      - name: Install all dependencies
+        run: npm install
+
+      - name: Run Tests
+        run: npm run test-unit

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/dist
+/dist
+.eslintcache

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript"]
+}

.vscode/settings.json.default

@@ -0,0 +1,8 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript"]
+}

6

@@ -0,0 +1,12 @@
+
+added 52 packages, and audited 371 packages in 2s
+
+54 packages are looking for funding
+  run `npm fund` for details
+
+3 high severity vulnerabilities
+
+To address all issues, run:
+  npm audit fix
+
+Run `npm audit` for details.

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+}

cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    video: false,
+    screenshotOnRunFailure: false,
+  },
+});

cypress/e2e/3-testing/login.cy.js

@@ -0,0 +1,59 @@
+describe("login test", () => {
+  it("can login and logout", () => {
+    // visit the page
+    cy.visit("/");
+    cy.wait(10000);
+
+    // check if the register modal exist
+    cy.get("#registerModal .btn").contains("Login").should("exist");
+    cy.wait(1000);
+
+    // move to the login modal
+    cy.get("#registerModal .btn").contains("Login").click();
+    cy.get("#loginForm .btn").contains("Login").should("exist");
+    cy.wait(1000);
+
+    // type email and password and submit
+    cy.get("#loginEmail").type("cor@stud.noroff.no");
+    cy.wait(1000);
+    cy.get("#loginPassword").type("loginpass");
+    cy.get("#loginForm").submit();
+    cy.wait(2000);
+
+    // check if it enter to che profile page
+    cy.url().should("include", "profile");
+
+    // check if the ures can logout
+    cy.get(".btn").contains("Logout").should("exist").click();
+    cy.wait(2000);
+    cy.url().should("not.include", "profile");
+  });
+
+  it("Should fail login with invalid credential and shown a message", () => {
+    // visit the login page
+    cy.visit("/"); // Replace 3000 with your port number
+    cy.wait(10000);
+
+    // check if the register modal exist
+    cy.get("#registerModal .btn").contains("Login").should("exist");
+    cy.wait(1000);
+
+    // move to the login modal
+    cy.get("#registerModal .btn").contains("Login").click();
+    cy.get("#loginForm .btn").contains("Login").should("exist");
+    cy.wait(1000);
+
+    // type fake email and fake password and submit
+    cy.get("#loginEmail").type("fakeemail@stud.noroff.no");
+    cy.wait(1000);
+    cy.get("#loginPassword").type("fakepass");
+    cy.get("#loginForm").submit();
+    cy.wait(2000);
+    // check if is stock on the index page
+    cy.url().should("not.include", "profile");
+    cy.wait(2000);
+
+    // check it the alert message exist
+    cy.window().get(".alert").should("exist");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/profile.json

@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "jane@example.com"
+}