Cypress e2e test for `Stepper` component #308

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

Jump to bottom

Merged

obulat merged 20 commits into creativecommons:master from Cronus1007:Stepper

Jan 21, 2021

Member

Cronus1007 commented Jan 19, 2021

Fixes

Fixes #302 by @obulat

Description

Technical details

Tests

Screenshots

Checklist

My pull request has a descriptive title (not a vague title like Update index.md).
My pull request targets the default branch of the repository (main or master).
My commit messages follow best practices.
My code follows the established code style of the repository.
I added tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no
visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

Cronus1007 added 10 commits

January 15, 2021 18:00


          created Cypress e2e test for Stepper

444cf4c


          created Cypress e2e test for Stepper


          created Cypress e2e test for Stepper

2e1887e


          created Cypress e2e test for Stepper

317eac4


          created Cypress e2e test for Stepper

820ca36


          created Cypress e2e test for Stepper

3dd9811


          created Cypress e2e test for Stepper

754afa0


          created Cypress e2e test for Stepper

3bce303


          created Cypress e2e test for Stepper

c61b239


          created Cypress e2e test for Stepper

41af34c

Cronus1007 requested a review from a team as a code owner

January 19, 2021 14:17

Cronus1007 requested review from akmadian and removed request for a team

January 19, 2021 14:17

Cronus1007 changed the title ~~Stepper~~ created Cypress e2e test for Stepper

TimidRobot assigned zackkrida

obulat requested changes

View reviewed changes

Contributor

obulat left a comment

Getting there!
I have left comments inline. Another thing : could you change the step selectors from step-0 etc to 'FS'/'BY' etc ? This will make the tests easier to read, as we will see what kind of step we are interacting with.

cypress/integration/Stepper._spec.js Outdated

+                      cy.get('select').select('CC0 1.0')
+                      cy.get('.recommended-card').should('be.visible').contains('CC0 1.0 Universal')
+                      cy.get('.next-button').click()
+                      cy.get('.v-checkbox:nth-child(1) > input').check()

Contributor

obulat Jan 20, 2021

Can you add a check for and the total number of steps should be 4.

Member Author

Cronus1007 Jan 20, 2021

@obulat I have a question that whether total number of steps are required for the test which you have mentioned or for each and every test in the test file.

Contributor

obulat Jan 20, 2021

It's for this test only.

cypress/integration/Stepper._spec.js Outdated Show resolved Hide resolved

cypress/integration/Stepper._spec.js Outdated

+                          .check()
+                          cy.get('.next-button').click()
+                          cy.get('.step-1')
+                          .find('[value="yes"]')

Contributor

obulat Jan 20, 2021

Move the recommended-card check from line 83 here.

cypress/integration/Stepper._spec.js Outdated

+                          cy.get('.step-1')
+                          .find('[value="yes"]')
+                          .check()
+                          cy.get('.next-button').click()

Contributor

obulat Jan 20, 2021

Move the .recommended-card check from line 107 here.

cypress/integration/Stepper._spec.js Outdated

+                              cy.get('.next-button').click()
+                              cy.get('.step-1')
+                              .find('[value="yes"]')
+                              .check()

Contributor

obulat Jan 20, 2021

Can you add the check for .recommended-card value here?
Don't remove the check from line 186.

cypress/integration/Stepper._spec.js Outdated

+                      describe('Checks whether the user can click on Start Again Button and application gets a hot reload', () => {
+                          it('Clicks on Start Again Buttton', () => {
+                              cy.get('.restart-button').click()
+                              cy.get('.step-1').should('have.class','inactive')

Contributor

obulat Jan 20, 2021

Please, add the check for .recommended-card and .license-use-card. They shouldn't be visible.

cypress/integration/Stepper._spec.js Outdated

+                              cy.get('.recommended-card').should('be.visible').contains('CC BY-ND 4.0')
+                              cy.get('.license-use-card').should('be.visible').contains('CC BY-ND 4.0')
+                              cy.get('.next-button').click()
+                              cy.get('.license-use-card').scrollIntoView()

Contributor

obulat Jan 20, 2021

You do not need to scroll an element into view. In fact, when you click the 'Done' button, it should scroll automatically, and we need to check if it does.
Actually, it is better to test it on a mobile viewport. Could you set up this test with the mobile viewport?

Member Author

Cronus1007 Jan 20, 2021

@obulat You want me to convert viewport or this particular test or for the complete test file.

Contributor

obulat Jan 20, 2021

Yes, I would like this particular test to have a different viewport.

Member Author

Cronus1007 Jan 20, 2021

Shall I give iphone 10 viewport. Will that be okay or any other .

Contributor

obulat Jan 20, 2021

Any viewport width of under 768px will do, as that's the breakpoint when the two-column layout becomes a one-column layout.


          created e2e tests for Stepper

7922ba8

Cronus1007 requested a review from obulat

January 20, 2021 13:21

Member Author

Cronus1007 commented Jan 20, 2021 •

edited

Loading

@obulat Plzzzz have a look at this comment.At the end the repeated repeated scroll-behaviour may be due to it since cypress doesn't handle smooth scroll behaviour own its own.
cypress-io/cypress#8675 (comment)

zackkrida changed the title ~~created Cypress e2e test for Stepper~~ Cypress e2e test for Stepper component

zackkrida previously requested changes

View reviewed changes

Member

zackkrida left a comment

This looks pretty good! However, I see a lot of spelling mistakes. Please run through with a spell checker.

Also, it might be useful to write some custom cypress commands for the really common actions, like cy.get(".next-button").click();, which could become something like:

// https://docs.cypress.io/api/cypress-api/custom-commands.html#Parent-Commands
Cypress.Commands.add('clickNext', () => {
	cy.get('.next-button').click()
})

Member Author

Cronus1007 commented Jan 20, 2021

Also, it might be useful to write some custom cypress commands for the really common actions, like cy.get(".next-button").click();, which could become something like:

@zackkrida Okk let me do the required refactoring then.

Member

zackkrida commented Jan 20, 2021

Also, it might be useful to write some custom cypress commands for the really common actions, like cy.get(".next-button").click();, which could become something like:

@zackkrida Okk let me do the required refactoring then.

You don't have to do this, just the typos before merging. Up to you!

Member Author

Cronus1007 commented Jan 20, 2021

@zackkrida Actually I was referring the typos as refactoring process.My bad .


          Cypress e2e test for component

6ee693f

Cronus1007 requested a review from zackkrida

January 21, 2021 03:47

obulat added 4 commits

January 21, 2021 18:13


          Update cypress to version 6.3.0

3aee683


          Create frequently-used commands for cypress tests

79e58d7


          Refactor Stepper integration tests

d32045a


          Fix incorrectly showing that 'SA' was disabled due to 'CC0'

78f29fb


          Fix auto-scrolling Stepper when going forward after selecting no on 'BY'

e6b14bd

obulat approved these changes

View reviewed changes

Contributor

obulat left a comment

Thank you for your contribution, @Cronus1007 !
I've added some refactoring to the tests.

obulat added 2 commits

January 21, 2021 18:19


          Merge branch 'master' into Stepper

6d97d13


          Build the site

3d24485

obulat dismissed zackkrida’s stale review

January 21, 2021 15:23

I've done some refactoring, Zack.


          Fix incorrect test

1db1f9a

obulat merged commit 0b0fe69 into creativecommons:master

Cronus1007 deleted the Stepper branch

February 4, 2021 09:48

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet