Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Workflow #389

Open
wants to merge 34 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
d340db1
installing prettier
EF-Pami Jan 17, 2024
58f672a
adding formatting script
EF-Pami Jan 17, 2024
1cc6104
1.0.1
EF-Pami Jan 17, 2024
2fd2e70
changing type to module
EF-Pami Jan 17, 2024
2a6330d
installing eslint
EF-Pami Jan 17, 2024
d1e870b
installing eslint
EF-Pami Jan 17, 2024
bcc18b8
configuring eslint
EF-Pami Jan 17, 2024
10fc626
adding lint to script
EF-Pami Jan 17, 2024
1ddda9a
adding lint-fix to script
EF-Pami Jan 17, 2024
d109aee
adding gitHub link to package.json
EF-Pami Jan 18, 2024
bfa910a
just testing format in prettier
EF-Pami Jan 18, 2024
b530979
installing husky
EF-Pami Jan 22, 2024
bc80767
installing jest
EF-Pami Jan 22, 2024
4591bf8
adding test and test-unit to script
EF-Pami Jan 22, 2024
f5aeb40
adding overrides to eslintrc
EF-Pami Jan 22, 2024
d4d3f44
adding app.test.js file
EF-Pami Jan 22, 2024
58d6f0a
adding eslintcache
EF-Pami Jan 22, 2024
d9df945
installing and configuring babel
EF-Pami Jan 22, 2024
e7850e5
trying the test function on apple.js
EF-Pami Jan 22, 2024
b68ebbe
update on eslintcache
EF-Pami Jan 22, 2024
7c496f2
installing and configuring cypress
EF-Pami Jan 22, 2024
2cc2539
adding overrides for cypress into eslintrc.json
EF-Pami Jan 22, 2024
b310281
cypress configuration js file
EF-Pami Jan 24, 2024
9f33e9d
adding to gitignore
EF-Pami Jan 24, 2024
cd6e2af
update on cypress support files
EF-Pami Jan 24, 2024
45ca825
update on eslintcache
EF-Pami Jan 24, 2024
3893fcd
added localstorage.mock.js
EF-Pami Jan 26, 2024
21cb4b0
update husky
EF-Pami Jan 26, 2024
a87fe0a
added ReadME File
EF-Pami Jan 26, 2024
ee4d74c
Update apple.js
EF-Pami Jan 26, 2024
35b2a5c
Update .eslintcache
EF-Pami Jan 26, 2024
a288c8e
added logout.cy.js
EF-Pami Jan 27, 2024
40e8951
update .eslintcache
EF-Pami Jan 27, 2024
5ec440c
update package.json for automated testing
EF-Pami Jan 27, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintcache
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\app.test.js":"1","C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\apple.js":"2","C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\apple.test.js":"3","C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress.config.js":"4","C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress\\support\\commands.js":"5","C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress\\support\\e2e.js":"6"},{"size":92,"mtime":1705949183269,"results":"7","hashOfConfig":"8"},{"size":95,"mtime":1706304834391,"results":"9","hashOfConfig":"10"},{"size":372,"mtime":1705950990633,"results":"11","hashOfConfig":"8"},{"size":184,"mtime":1706104417274,"results":"12","hashOfConfig":"10"},{"size":861,"mtime":1706104417291,"results":"13","hashOfConfig":"10"},{"size":686,"mtime":1706104417291,"results":"14","hashOfConfig":"10"},{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1owb8p1",{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1nhz40n",{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","suppressedMessages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","suppressedMessages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\app.test.js",[],[],"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\apple.js",[],[],"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\src\\js\\apple.test.js",[],[],"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress.config.js",[],[],"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress\\support\\commands.js",[],[],"C:\\Users\\pamij\\OneDrive\\Documents\\GitHub\\social-media-client\\cypress\\support\\e2e.js",[],[]]
32 changes: 32 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"env": {
"browser": true,
"es2021": 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", "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": {
}
}
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
/node_modules
/dist
/dist

cypress/e2e/1-getting-started
cypress/e2e/2-advanced-examples
1 change: 1 addition & 0 deletions .husky/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
_
5 changes: 5 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
npx lint-staged
Comment on lines +1 to +5

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

There seems to be a redundancy in your pre-commit hook. The npx lint-staged command is repeated twice, which could lead to unnecessary execution and slow down the commit process.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
-5: npx lint-staged

12 changes: 12 additions & 0 deletions 6
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

added 54 packages, and audited 368 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.
Comment on lines +1 to +12

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The changes made in this hunk are related to the package management and audit. It seems like there are 3 high severity vulnerabilities found during the audit. While npm audit fix --force can be used to automatically install any updates that break the current code, it's not always the best solution as it might introduce breaking changes into your application.

Instead of using npm audit fix --force, I would recommend manually reviewing and addressing each vulnerability. This way, you can ensure that the fixes don't unintentionally break other parts of your application. You can use npm audit for more details about each vulnerability.

- To address all issues (including breaking changes), run:
-   npm audit fix --force
+ To address all issues individually, review the output of:
+   npm audit

This change will encourage developers to take a more careful approach when dealing with security vulnerabilities.

22 changes: 22 additions & 0 deletions ReadME.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Workflow CA

In this CA we are tasked with applying workflow skills in installing code formatting tools, configuration and code testing.

# GitHub repository

I fork the gitHub repository from the gitHub provided in the CA brief and clone it to my gitHub desktop. Created the workflow branch in which i did all the workflow tasks and committed into the workflow branch.
Open the github repo on vscode and use the vscode terminal to install and configure the different extensions for the workflow CA.

# Installed dependencies
- npm init
- installing Prettier
- Installing eslint
- npm run lint-fix (to fix errors notice by eslint)
- Installing hooks (npx mrm@2 lint-staged)

# Tests installed and configured for the project

- Installed jest (npm i -D jest@29.2.0) for our unit testings
- npm i -D eslint-plugin-jest (this to setup the environment for the jest configuration)
- Installed babel for jest
- Installed cypress ( for end-to-end testings)
Comment on lines +1 to +22

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The changes to the README file look good overall, but there's a minor issue. It's a best practice to end a file with a newline character. This is a POSIX standard that ensures easier concatenation of files and better compatibility across different tools and systems.

- Installed cypress ( for end-to-end testings)
+22: - Installed cypress ( for end-to-end testings)
+23: 

3 changes: 3 additions & 0 deletions babel.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}
9 changes: 9 additions & 0 deletions cypress.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { defineConfig } from "cypress";

export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
Comment on lines +1 to +9

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The new hunk introduces a configuration for Cypress using defineConfig. However, the setupNodeEvents function is empty. If there are no node events to set up, consider removing this function to avoid confusion. If you plan to add event listeners in the future, please add a comment indicating this.

-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },

If you plan to add event listeners in the future, it would be better to leave a more descriptive comment:

+    setupNodeEvents(on, config) {
+      // TODO: Implement node event listeners as required by the tests
+    },

21 changes: 21 additions & 0 deletions cypress/e2e/login.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
describe('Login Form', () => {
it('can login with valid credentials', () => {
cy.visit('./');
cy.get('input[name=email]').first().type('valid-name@example.com');
cy.get('input[name=password]').first().type('valid-password');
cy.get('#loginForm').submit();
cy.wait(3500);
});
Comment on lines +1 to +8

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The test case for logging in with valid credentials does not include any assertions. It's important to verify the outcome of the login attempt, such as checking if the user is redirected to the correct page or if a specific element appears on the page after successful login.

    cy.get('#loginForm').submit();
    cy.wait(3500);
+    // Add an assertion here to check the result of the login attempt
+    // For example, if successful login redirects to a dashboard page:
+    // cy.url().should('include', '/dashboard');
  });


it('brings out an alert box with invalid credentials', () => {
cy.visit('./');
cy.get('input[name=email]').first().type('invalid-name@example.com');
cy.get('input[name=password]').first().type('invalid-password');
cy.get('#loginForm').submit();
cy.on('window:alert', (alertText) => {
expect(alertText).to.equal(
'Login failed, please check your email or password and try again.'
);
});
});
Comment on lines +10 to +20

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

This test case relies on a window:alert event to handle login failures. This is not a recommended practice because it disrupts the user experience and makes automated testing more difficult. Instead, consider displaying error messages within the application UI. If this alert-based approach is necessary for some reason, the test case is fine as it is.

});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

There should be a newline at the end of the file. This is a common convention that helps prevent issues with certain tools that might not handle files without a trailing newline correctly.

});
\ No newline at end of file
+ 

Comment on lines +1 to +21

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The test cases look good, but there are a few improvements that can be made:

  1. Avoid hardcoding wait times (line 7). It's better to use cy.intercept() to stub network requests or wait for specific network calls to complete.

  2. The second test case assumes that an invalid login will trigger a window alert. This is not a common practice in modern web applications and might not be the best way to handle errors. Consider checking for an error message displayed on the page instead.

Here's how you could improve these tests:

describe('Login Form', () => {
  it('can login with valid credentials', () => {
    cy.visit('./');
    cy.get('input[name=email]').first().type('valid-name@example.com');
    cy.get('input[name=password]').first().type('valid-password');
    cy.get('#loginForm').submit();
-    cy.wait(3500);
+    cy.intercept('POST', '/api/login').as('login');
+    cy.wait('@login');
  });

  it('brings out an alert box with invalid credentials', () => {
    cy.visit('./');
    cy.get('input[name=email]').first().type('invalid-name@example.com');
    cy.get('input[name=password]').first().type('invalid-password');
    cy.get('#loginForm').submit();
-    cy.on('window:alert', (alertText) => {
-      expect(alertText).to.equal(
-        'Login failed, please check your email or password and try again.'
-      );
-    });
+    cy.get('.error-message').should('contain', 'Login failed, please check your email or password and try again.');
  });
});

In the above changes, I've replaced cy.wait(3500) with cy.intercept() and cy.wait(), which will wait for the login API call to complete. In the second test case, I've replaced the window alert check with a check for an error message on the page. Please replace '.error-message' with the actual selector of your error message element.

13 changes: 13 additions & 0 deletions cypress/e2e/logout.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
describe('Logout Button', () => {
it('logs out a user', () => {
cy.visit('./');
cy.get('input[name=email]').first().type('mane@suiteTeardown.noroff.no');
cy.get('input[name=password]').first().type('mane12345');
cy.get('#loginForm').submit();

cy.get('[data-auth="logout"]').click();

cy.get('#loginForm').should('be.visible');
cy.url().should('equal', 'http://localhost:55499/');
});
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The test case for the logout functionality seems fine. However, it's not a good practice to hardcode user credentials in your test cases. Consider using environment variables or a configuration file that is not committed to the repository to store these sensitive data.

-        cy.get('input[name=email]').first().type('mane@suiteTeardown.noroff.no');
-        cy.get('input[name=password]').first().type('mane12345');
+        cy.get('input[name=email]').first().type(Cypress.env('TEST_USER_EMAIL'));
+        cy.get('input[name=password]').first().type(Cypress.env('TEST_USER_PASSWORD'));

Also, please add a newline at the end of the file to follow best practices and avoid potential parsing issues.

});
\ No newline at end of file
+13: });
+ 

5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -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"
}
25 changes: 25 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -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) => { ... })
20 changes: 20 additions & 0 deletions cypress/support/e2e.js
Original file line number Diff line number Diff line change
@@ -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')
Loading
Loading