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.

Sign up for GitHub

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

Solution #172

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Solution #172

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6584056
Solution
vStryhun Oct 9, 2024
6c0fe0f
Solution 2.0
vStryhun Oct 9, 2024
aa0cb2e
Solution 2.0 re
vStryhun Oct 9, 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
2 changes: 1 addition & 1 deletion cypress.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ const { defineConfig } = require('cypress');

module.exports = defineConfig({
e2e: {
baseUrl: 'https://react-redux.realworld.io',
setupNodeEvents(on, config) {
// implement node event listeners here
}
}
});
23 changes: 23 additions & 0 deletions cypress/e2e/signUp.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
import { generateUser } from '../support/generate';

Cypress.on('uncaught:exception', () => {
Copy link

Choose a reason for hiding this comment

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

It's recommended to handle uncaught exceptions in a global configuration file (like commands.js or index.js in the support folder) instead of in individual test files. This improves code maintainability and readability.

return false;
});

describe('Sign Up page', () => {
it('should provide an ability to register new account', () => {
const { email, username, password } = generateUser();

cy.visit('/#/register?_k=spysa9');
Copy link

Choose a reason for hiding this comment

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

It's better to move the base URL ('/#/register?_k=spysa9') to a global configuration file or environment variable. This will make it easier to change the base URL when the test environment changes.


cy.get('[placeholder=Username]')
.type(username);

cy.get('[placeholder=Email]')
.type(email);

cy.get('[placeholder=Password]')
.type(password);

cy.get('button[type=submit]').click();

cy.url().should('contain', '/#/?_k=c1q9kl');
Copy link

Choose a reason for hiding this comment

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

It's better to avoid hardcoding URLs in your tests. If the URL structure changes, your tests will break. Consider using a relative URL or a URL from the application's state.


cy.get('a.nav-link').contains(username).should('exist');
Copy link

Choose a reason for hiding this comment

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

Although checking for the existence of a username in the navigation bar is a good way to confirm successful registration, it might be more robust to check something more specific to the user's account, like a welcome message or user settings. This would make your test more resistant to changes in the UI.

Copy link

Choose a reason for hiding this comment

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

It's better to use more specific selectors than 'a.nav-link'. This will make your tests more resilient to changes in the HTML structure. Consider adding a data-test attribute to the element you want to select.

Copy link

Choose a reason for hiding this comment

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

It's good that you are checking if the username appears on the navigation bar after registration, but you should also add some assertions to check if the registration was successful. For example, you could check if a success message appears on the screen or if the user is redirected to the correct page. This will make your tests more robust and reliable.

});
});
13 changes: 13 additions & 0 deletions cypress/support/generate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { faker } from '@faker-js/faker';

function generateUser() {
const randomNumber = Math.random().toString().slice(2, 6);
Copy link

Choose a reason for hiding this comment

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

Consider adding a comment here explaining the purpose of the randomNumber and why it's used in the username. This will improve the readability of your code.

/* randomNumer is variable for generation more reliable value */
const username = faker.internet.userName() + '_' + randomNumber;
const email = `${username}@mail.com`;
const password = faker.internet.password();

return { email, password, username };
}

module.exports = { generateUser };