Skip to content

test: initialize e2e testing framework based on cypress#95

Merged
stefcameron merged 3 commits intofocus-trap:masterfrom
liunate:cypress-testing
Aug 29, 2020
Merged

test: initialize e2e testing framework based on cypress#95
stefcameron merged 3 commits intofocus-trap:masterfrom
liunate:cypress-testing

Conversation

@liunate
Copy link
Copy Markdown
Contributor

@liunate liunate commented Aug 23, 2020

What does this PR do

  1. Initialize e2e testing framework using cypress.
    There are already some unit tests using jest which defaults its testing environment on jsdom. However jsdom could have some focus issues(or other glitches) that does not always work consistently with real browsers such as chrome and firefox.
  2. Add a cypress test case based on the defaults demo.

TODOs

  1. Firefox should be working as well though the cypress v5 image does not work well on ci, complaining firefox is not supported 🤷‍♀️. The same docker image works perfectly with firefox at local. I may need to check that out at cypress docker image repo.
  2. More cypress test cases based on demo.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Aug 23, 2020

💥 No Changeset

Latest commit: 3e0cece

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Copy Markdown
Contributor Author

@liunate liunate left a comment

Choose a reason for hiding this comment

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

@stefcameron This PR is in response to the discussion #87 comment

As #87 only updates the prop type, I am not so sure if we should add test case for that simple change. Instead I think we can start the e2e test from current demo page as it proves the react wrapper works perfectly.

I also imagine there could be more demos in this repo, or maybe exactly same ones as focus-trap being wrapped. So e2e tests give confidence that our react wrapper does not screw things up at each focus-trap features.

container: cypress/included:5.0.0
strategy:
matrix:
browser: [chrome] # cypress executable says 'Browser: 'firefox' was not found on your system or is not supported by Cypress.' seems to be defect
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

firefox will be added if the unsupported problem at the image is solved.

@stefcameron
Copy link
Copy Markdown
Member

@liunate This is exciting! Thanks for doing this. 🎉 I will try to have a look over the next few days as time permits.

"release": "yarn build && changeset publish",
"test-types": "tsc index.d.ts",
"test-unit": "jest",
"test-cypress": "start-server-and-test start 9966 'cypress open'",
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Developer can run e2e locally with cypress interactive UI.

"@babel/preset-react": "^7.10.1",
"@changesets/cli": "^2.9.1",
"@testing-library/cypress": "^6.0.1",
"@types/jquery": "^3.5.1",
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Fix the missing jquery type info error while using @testing-library/cypress

Copy link
Copy Markdown
Member

@stefcameron stefcameron left a comment

Choose a reason for hiding this comment

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

Nice work! I'm excited we have this type of test now, thank you! 🎉

@stefcameron
Copy link
Copy Markdown
Member

@liunate

Firefox should be working as well though the cypress v5 image does not work well on ci, complaining firefox is not supported 🤷‍♀️. The same docker image works perfectly with firefox at local. I may need to check that out at cypress docker image repo.

Were you able to track this down to a bug in the image? If so, I'm thinking we should open an issue to track adding FireFox as a browser to test on our end here once the image is fixed.

@stefcameron stefcameron merged commit c29aa2e into focus-trap:master Aug 29, 2020
@liunate
Copy link
Copy Markdown
Contributor Author

liunate commented Aug 31, 2020

@liunate

Firefox should be working as well though the cypress v5 image does not work well on ci, complaining firefox is not supported 🤷‍♀️. The same docker image works perfectly with firefox at local. I may need to check that out at cypress docker image repo.

Were you able to track this down to a bug in the image? If so, I'm thinking we should open an issue to track adding FireFox as a browser to test on our end here once the image is fixed.

That sounds a good idea. Maybe edge could be also part of the TODO items in that issue as these three(Chrome, Firefox and Edge) are the three major players in the market. p.s. Safari could be counted one major but unfortunately cypress does not support it at this moment

If you see this is okay, then I can create the issue along with the open issue I submitted to cypress for tracking purpose 💪

@stefcameron
Copy link
Copy Markdown
Member

If you see this is okay, then I can create the issue along with the open issue I submitted to cypress for tracking purpose 💪

Fantastic, please do! 🎉

@liunate liunate deleted the cypress-testing branch September 1, 2020 12:47
@liunate
Copy link
Copy Markdown
Contributor Author

liunate commented Sep 1, 2020

If you see this is okay, then I can create the issue along with the open issue I submitted to cypress for tracking purpose 💪

Fantastic, please do! 🎉

FYI issue created for tracking #104

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants