Workflow

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "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",
+        "no-undef": "off"
+      }
+    },
+    {
+      "files": ["**/*.cy.js", "cypress.config.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/pages.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["master"]
+    branches: ["master", "workflow"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
-/dist
+/dist
+.DS_Store
+.eslintcache

.husky/.gitignore

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

.husky/pre-commit

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

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

.vscode/settings.json

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

README.md

@@ -0,0 +1,66 @@
+# Workflow Course Assignment
+
+[![Deploy static content to Pages](https://github.com/KariannNor/workflow-ca/actions/workflows/pages.yml/badge.svg?branch=workflow)](https://github.com/KariannNor/workflow-ca/actions/workflows/pages.yml)
+
+## Description
+
+This CA is focused on how to use the skills and knowledge from this course to improve the quality of a package by establishing helpful workflows that make the development process more efficient.
+
+## Built with:
+
+- HTML
+- CSS
+- SASS
+- Bootstrap
+- JavaScript
+
+## Packages used
+
+- NPM package manager
+- Prettier
+- ESLint
+- Husky
+- Jest
+- Babel
+- Cypress
+
+## Getting started
+
+### Installing
+
+1. Clone the repo
+
+```
+git clone https://github.com/KariannNor/workflow-ca
+```
+
+2. Install dependencies
+
+```
+npm i
+```
+
+3. Build production files
+
+```
+npm run build
+```
+
+4. Other useful commands and formatting:
+
+```
+// sass and live server:
+npm run start
+
+// testing with Cypress:
+npm run test-e2e
+
+// unit tests with jest:
+npm run test-unit
+
+// prettier:
+npm run format
+
+// eslint:
+npm run lint-fix
+```

babel.config.json

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

cypress.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  env: {
+    validEmail: "benny123@noroff.no",
+    validPassword: "11111111",
+    wrongEmail: "wrong@email.com",
+    wrongPassword: "wrongPassword",
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/testing/login.cy.js

@@ -0,0 +1,38 @@
+describe("login", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("Should deny an invalid user to log in and show error message", () => {
+    cy.wait(500);
+    cy.get("#registerForm .btn-close").click();
+    cy.get(`header button[data-bs-target="#loginModal"]`).click();
+    cy.wait(500);
+    cy.get("#loginForm").should("be.visible");
+    cy.get("#loginForm #loginEmail").type(Cypress.env("wrongEmail"));
+    cy.get("#loginForm #loginPassword").type(Cypress.env("wrongPassword"));
+    cy.get("button[type=submit]").contains("Login").click();
+    cy.wait(500);
+    cy.on("window:alert", (text) => {
+      expect(text).to.include(
+        "Either your username was not found or your password is incorrect",
+      );
+    });
+    cy.window()
+      .its("localStorage")
+      .invoke("getItem", "token")
+      .should("be.null");
+  });
+
+  it("should allow a valid user to log in", () => {
+    cy.wait(500);
+    cy.get("#registerForm .btn-close").click();
+    cy.get(`header button[data-bs-target="#loginModal"]`).click();
+    cy.wait(500);
+    cy.get("#loginForm").should("be.visible");
+    cy.get("#loginForm #loginEmail").type(Cypress.env("validEmail"));
+    cy.get("#loginForm #loginPassword").type(Cypress.env("validPassword"));
+    cy.get("button[type=submit]").contains("Login").click();
+    cy.get(`header button[data-auth="logout"]`).should("be.visible");
+  });
+});

cypress/e2e/testing/logout.cy.js

@@ -0,0 +1,29 @@
+describe("logout", () => {
+  it("should allow a valid user to log out", () => {
+    cy.visit("/");
+    cy.wait(500);
+
+    cy.get("#registerModal").contains("Login").click();
+    cy.wait(500);
+
+    cy.get("#loginForm").should("be.visible");
+    cy.get("#loginForm #loginEmail").type(Cypress.env("validEmail"));
+    cy.get("#loginForm #loginPassword").type(Cypress.env("validPassword"));
+    cy.get("button[type=submit]").contains("Login").click();
+    cy.wait(1000);
+
+    cy.window().then((window) => {
+      const token = window.localStorage.getItem("token");
+      expect(token).to.be.a("string");
+      cy.wait(500);
+
+      cy.get(`header button[data-auth="logout"]`).contains("Logout").click();
+      cy.wait(500);
+
+      cy.window().then((window) => {
+        const tokenAfterLogout = window.localStorage.getItem("token");
+        expect(tokenAfterLogout).to.be.null;
+      });
+    });
+  });
+});

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/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js 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) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js 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.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')