Workflow - Peer Review

.eslintrc.json

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

.github/workflows/master.yml

@@ -0,0 +1,32 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [master, workflow]
+  pull_request:
+    branches: [master, workflow]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      - name: Run build
+        run: npm run build
+      - name: Start server
+        run: npm start & sleep 15
+      - name: Run tests
+        env:
+          CYPRESS_BASE_URL: http://localhost:3000
+        run: npm test

.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']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -17,7 +17,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
@@ -30,7 +30,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Install Dependencies  
+      - name: Install Dependencies
         run: npm i
       - name: Build SASS
         run: npm run build

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
-/dist
+/dist
+/cypress/e2e/1-getting-started/
+/cypress/e2e/2-advanced-examples/

.husky/.gitignore

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

.husky/pre-commit

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

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

6

@@ -0,0 +1,12 @@
+
+added 56 packages, and audited 385 packages in 4s
+
+60 packages are looking for funding
+  run `npm fund` for details
+
+3 high severity vulnerabilities
+
+To address all issues (including breaking changes), run:
+  npm audit fix --force
+
+Run `npm audit` for details.

READEME.md

@@ -0,0 +1,65 @@
+# CSS Frameworks CA
+
+This project utlizies a pre-developed application by Noroff, as part of the course "workflow". The web application features a front-end utilizing CSS frameworks. Key features include a login form connected to an API JWT endpoint, a logout mechanism, CRUD functionality, and a user profile page.
+
+## Technologies Used
+
+- HTML/CSS
+- JavaScript
+- SASS
+- Jest for unit testing
+- Cypress for end-to-end testing
+- GitHub Actions for CI/CD
+
+## Configuration
+
+- **ESLint**: Linting utility for JavaScript.
+- **Prettier**: Code formatter to ensure code style consistency.
+- **Husky**: Used for setting up Git hooks to enforce linting and testing before commits.
+- **Jest**: For unit testing JavaScript code.
+- **Cypress**: For conducting end-to-end testing.
+
+## Build Status
+
+[![Node.js CI](https://github.com/ArneBHuset/social-media-client/actions/workflows/master.yml/badge.svg)](https://github.com/ArneBHuset/social-media-client/actions/workflows/master.yml)
+
+## Installation and Setup
+
+Clone the repository and install dependencies:
+
+git clone https://github.com/ArneBHuset/social-media-client.git
+cd css-frameworks-ca
+npm install
+
+npm start
+
+## Running Tests
+
+To run unit tests with Jest:
+
+```bash
+npm run test-unit
+```
+
+To run end-to-end tests with Cypress:
+
+```bash
+npm run test-e2e
+npm run test-e2e-cli
+```
+
+To run eslint and to fix potential errors
+
+```bash
+npx eslint
+npx eslint . --fix
+```
+
+Test commit hooks by
+
+```bash
+git add .
+git commit -m "You commit message"
+```
+
+Github action workflow will run a final test, initalize in the master.yml file.

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    // setupNodeEvents(on, config) {},
+  },
+});

cypress.env.json

@@ -0,0 +1,7 @@
+{
+  "TEST_EMAIL": "workflowtesty@noroff.no",
+  "TEST_PASSWORD": "workflowtestypsw",
+  "REGISTRATION_USER_NAME": "workflowtestyuser",
+  "REGISTRATION_IMG": "https://shorturl.at/dzQR8",
+  "TESTCOMMENT": "Cypress automated commenting test"
+}

cypress/e2e/3-testing/README.md

@@ -0,0 +1,3 @@
+Notes about Cypress testing:
+
+When testing login and registration. Remember to fill variable details in cypress.env.json file.

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

@@ -0,0 +1,46 @@
+describe('Login Test', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.wait(500); // waiting for the modal to fully initialize
+    cy.get('#modalLoginBtn').click();
+  });
+
+  it('fails to log in with invalid email', () => {
+    cy.get('#loginEmail').should('be.visible').clear();
+    cy.get('#loginEmail').type('test@test{enter}');
+
+    // invalid email
+    cy.get('#loginEmail').clear();
+    cy.get('#loginEmail').type('error@test{enter}');
+    cy.wait(600);
+
+    //  valid email
+    cy.get('#loginEmail').clear();
+    const loginEmail = Cypress.env('TEST_EMAIL');
+    cy.get('#loginEmail').type(`${loginEmail}{enter}`);
+    cy.log('Email input ok!');
+    // invalid password
+    cy.get('#loginPassword').should('be.visible').clear();
+    cy.get('#loginPassword').type('errortest{enter}');
+    cy.wait(600);
+
+    //valid password
+    cy.get('#loginPassword').clear();
+    const loginPsw = Cypress.env('TEST_PASSWORD');
+    cy.get('#loginPassword').type(`${loginPsw}{enter}`);
+    cy.log('Password input ok!');
+    // Checking that local storage has a profile- and token value
+    cy.wait(500);
+    cy.window().then(window => {
+      const profile = window.localStorage.getItem('profile');
+      const token = window.localStorage.getItem('token');
+      expect(profile).to.not.be.null;
+      expect(token).to.not.be.null;
+    });
+    cy.log('Token and profile data ok!');
+    // Clicking the logout button
+    cy.get('button[data-auth="logout"]').click();
+    cy.log('Logout ok!');
+    cy.log('FINISHED');
+  });
+});

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

@@ -0,0 +1,62 @@
+describe('Post Interaction Test', () => {
+  before(() => {
+    cy.visit('/');
+    cy.wait(500);
+
+    // Log in with valid credentials
+    cy.get('#modalLoginBtn').click();
+    cy.get('#loginEmail').clear();
+    const loginEmail = Cypress.env('TEST_EMAIL');
+    cy.wait(300);
+    cy.get('#loginEmail').type(`${loginEmail}{enter}`);
+
+    cy.get('#loginPassword').clear();
+    const loginPsw = Cypress.env('TEST_PASSWORD');
+    cy.get('#loginPassword').type(`${loginPsw}{enter}`);
+
+    cy.wait(500);
+    cy.get('a[href="./"]').click();
+
+    cy.wait(500);
+    cy.window().then(window => {
+      const profile = window.localStorage.getItem('profile');
+      const token = window.localStorage.getItem('token');
+      expect(profile).to.not.be.null;
+      expect(token).to.not.be.null;
+    });
+    cy.log('Token KEY and profile information in good order');
+  });
+
+  it('reacts to the first post successfully and verifies page reload', () => {
+    // Openng the reaction menu for the first post
+    cy.get('.post .dropdown-toggle').first().click();
+
+    // Getting the post ID of the first post
+    cy.get('.post')
+      .first()
+      .find('button[data-post-id]')
+      .invoke('attr', 'data-post-id')
+      .then(postId => {
+        cy.get(`button[data-symbol="😀"][data-post-id="${postId}"]`).click();
+        cy.wait(2000);
+        cy.log('Reaction test successful');
+        cy.get(`a[href="./?view=post&postId=${postId}"]`).click();
+
+        cy.wait(2000);
+
+        const testComment = Cypress.env(`TESTCOMMENT`);
+        cy.get('textarea#commentBody').type(testComment);
+        cy.get('form.comment-form button[type="submit"]').click();
+
+        cy.wait(2000);
+
+        // Verifying that the comment is present
+        cy.get('.comment').should(
+          'contain.text',
+          'Cypress automated commenting test'
+        );
+        cy.log('Comment test successful');
+      });
+    cy.log('FINISHED');
+  });
+});