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

feat: adding Cypress Component Tests #832

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 11 additions & 0 deletions cypress.component.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"projectId": "7s5okt2",
"componentFolder": "src/components",
"pluginsFile": "src/components/__tests__/plugins.js",
"supportFile": false,
"testFiles": "**/*.test.*",
"viewportHeight": 500,
"viewportWidth": 500,
"experimentalStudio": true,
"experimentalComponentTesting": true
}
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
"dependencies": {
"@auth0/auth0-react": "1.3.0",
"@aws-amplify/ui-react": "0.2.38",
"@cypress/react": "^5.2.0",
"@cypress/webpack-dev-server": "^1.0.4",
Copy link
Contributor

Choose a reason for hiding this comment

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

@JessicaSachs @dmtrKovalenko Should these be moved to devDependencies?

Choose a reason for hiding this comment

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

This doesn't really matter for apps right? Or you are using yarn install --production for server?

But I don't care we can move it :)

Copy link
Contributor

Choose a reason for hiding this comment

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

@dmtrKovalenko It does for vite tooling, which we will be merging soon as an option during development (#741). Please move these to devDependencies.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

For Vite tooling, we'll be swapping this to the @cypress/vite-dev-server package. Trying out the webpack version first 😻 . We have an esm build as well, but yes, these should be devDeps.

"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "4.0.0-alpha.57",
Expand Down Expand Up @@ -137,6 +139,7 @@
"list:dev:users": "cat data/database.json | json -a users | json -a id username",
"types": "tsc --noEmit",
"precypress:open": "yarn predev:cognito:ci",
"cypress:open:ct": "cross-env NODE_ENV=development cypress open-ct --config-file=./cypress.component.json",
"cypress:open": "cypress open",
"cypress:open:mobile": "cypress open --config viewportWidth=375,viewportHeight=667",
"cypress:run": "cypress run",
Expand Down
18 changes: 18 additions & 0 deletions src/components/__tests__/AlertBar.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/// <reference types="cypress"/>

import React from "react";
import ReactDom from "react-dom";
import { mount } from "@cypress/react";
import { snackbarMachine } from "../../machines/snackbarMachine";
import { useMachine } from "@xstate/react";

import AlertBar from "../AlertBar";

describe("smoke", () => {
it("works", () => {
const [, , snackbarService] = useMachine(snackbarMachine);

Choose a reason for hiding this comment

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

BTW @JessicaSachs that is not the ReactDom issue. You can not just call the react hook inside the test

mount(<AlertBar snackbarService={snackbarService} />, { ReactDom });
// This works fine! :-(
// mount(<button>Hello world!</button>);
});
});
5 changes: 5 additions & 0 deletions src/components/__tests__/plugins.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = (on, config) => {
process.env.NODE_ENV = 'development'
require('@cypress/react/plugins/react-scripts')(on, config)
return config
}
115 changes: 111 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4625,6 +4625,16 @@
date-fns "^1.27.2"
figures "^1.7.0"

"@cypress/react@^5.2.0":
version "5.2.0"
resolved "https://registry.yarnpkg.com/@cypress/react/-/react-5.2.0.tgz#b86218052676979f13a6e2e4b4457293eb29182f"
integrity sha512-wEcJtRpyZPsG5xCMH3ZPDXv7rLcFOWLlxkPsVNDdGAe3Mog/GcbDiqxexzkBTsAEz502H5cgP+HTHCVQNah9pg==
dependencies:
"@cypress/webpack-preprocessor" "5.6.0"
debug "4.3.2"
find-webpack "2.2.1"
find-yarn-workspace-root "2.0.0"

"@cypress/request@^2.88.5":
version "2.88.5"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
Expand All @@ -4651,6 +4661,25 @@
tunnel-agent "^0.6.0"
uuid "^3.3.2"

"@cypress/webpack-dev-server@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@cypress/webpack-dev-server/-/webpack-dev-server-1.0.4.tgz#587b7fb443a246446f585bd5ae8462f7903ec8ce"
integrity sha512-2sUGu6rO1k1zvFDEAVJYWahcNtp0Cd+pWNSyy6qVHCnKAwrCj/oml7A84Z5rSajobxoi6eQU7gnZn2+hEel6UA==
dependencies:
debug "4.3.2"
lazy-compile-webpack-plugin "0.1.11"
semver "^7.3.4"
webpack-merge "^5.4.0"

"@cypress/webpack-preprocessor@5.6.0":
version "5.6.0"
resolved "https://registry.yarnpkg.com/@cypress/webpack-preprocessor/-/webpack-preprocessor-5.6.0.tgz#9648ae22d2e52f17a604e2a493af27a9c96568bd"
integrity sha512-kSelTDe6gs3Skp4vPP2vfTvAl+Ua+9rR/AMTir7bgJihDvzFESqnjWtF6N1TrPo+vCFVGx0VUA6JUvDkhvpwhA==
dependencies:
bluebird "^3.7.1"
debug "4.3.2"
lodash "^4.17.20"

"@cypress/xvfb@^1.2.4":
version "1.2.4"
resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
Expand Down Expand Up @@ -7163,7 +7192,7 @@ bluebird@3.5.3:
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==

bluebird@3.7.2, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5, bluebird@^3.7.2:
bluebird@3.7.2, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5, bluebird@^3.7.1, bluebird@^3.7.2:
version "3.7.2"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
Expand Down Expand Up @@ -8085,6 +8114,15 @@ cliui@^7.0.2:
strip-ansi "^6.0.0"
wrap-ansi "^7.0.0"

clone-deep@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
dependencies:
is-plain-object "^2.0.4"
kind-of "^6.0.2"
shallow-clone "^3.0.0"

clone-response@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
Expand Down Expand Up @@ -9165,7 +9203,7 @@ detect-node@^2.0.4:
resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==

detect-port-alt@1.1.6:
detect-port-alt@1.1.6, detect-port-alt@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
Expand Down Expand Up @@ -10539,7 +10577,24 @@ find-up@^3.0.0:
dependencies:
locate-path "^3.0.0"

find-yarn-workspace-root@^2.0.0:
find-webpack@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/find-webpack/-/find-webpack-2.2.1.tgz#96e7b701a2d37c3500cae30d4dc59e14923ba460"
integrity sha512-OdDtn2AzQvu3l9U1TS5ALc7uTVcLK/yv3fhjo+Pz7yuv4hG3ANKnbkKnPIPZ5ofd9mpYe6wRf5g5H4X9Lx48vQ==
dependencies:
debug "4.1.1"
find-yarn-workspace-root "1.2.1"
mocked-env "1.3.2"

find-yarn-workspace-root@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz#40eb8e6e7c2502ddfaa2577c176f221422f860db"
integrity sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q==
dependencies:
fs-extra "^4.0.3"
micromatch "^3.1.4"

find-yarn-workspace-root@2.0.0, find-yarn-workspace-root@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
Expand Down Expand Up @@ -10702,6 +10757,15 @@ fs-extra@9.0.0:
jsonfile "^6.0.1"
universalify "^1.0.0"

fs-extra@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
dependencies:
graceful-fs "^4.1.2"
jsonfile "^4.0.0"
universalify "^0.1.0"

fs-extra@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
Expand Down Expand Up @@ -13050,6 +13114,14 @@ lazy-ass@1.6.0, lazy-ass@^1.6.0:
resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
integrity sha1-eZllXoZGwX8In90YfRUNMyTVRRM=

lazy-compile-webpack-plugin@0.1.11:
version "0.1.11"
resolved "https://registry.yarnpkg.com/lazy-compile-webpack-plugin/-/lazy-compile-webpack-plugin-0.1.11.tgz#be3b9487ccc731a606dc55bcfcd80000c72e4237"
integrity sha512-d2D72x0XqFSj83SRmgx1dvgRvmyIoXpC2lMj+XVS+xzt0FxXDPzF/2FbxOVmW9gzp6d8U29Ne4RGF4x+MTYwow==
dependencies:
detect-port-alt "^1.1.6"
loader-utils "^1.2.3"

leven@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
Expand Down Expand Up @@ -13758,6 +13830,16 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

mocked-env@1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/mocked-env/-/mocked-env-1.3.2.tgz#548eb2fde141d083de70dc6b231cd9f3210d8731"
integrity sha512-jwm3ziowCjpbLNhUNYwn2G0tawV/ZGRuWeEGt6PItrkQT74Nk3pDldL2pmwm9sQZw6a/x+ZBGeBVYq54acTauQ==
dependencies:
check-more-types "2.24.0"
debug "4.1.1"
lazy-ass "1.6.0"
ramda "0.26.1"

module-deps@^6.0.0:
version "6.2.2"
resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.2.tgz#d8a15c2265dfc119153c29bb47386987d0ee423b"
Expand Down Expand Up @@ -15929,6 +16011,11 @@ raf@^3.4.1:
dependencies:
performance-now "^2.1.0"

ramda@0.26.1:
version "0.26.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==

ramda@~0.27.1:
version "0.27.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
Expand Down Expand Up @@ -16977,7 +17064,7 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==

semver@^7.2.1:
semver@^7.2.1, semver@^7.3.4:
version "7.3.4"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
Expand Down Expand Up @@ -17085,6 +17172,13 @@ sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
inherits "^2.0.1"
safe-buffer "^5.0.1"

shallow-clone@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
dependencies:
kind-of "^6.0.2"

shasum-object@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/shasum-object/-/shasum-object-1.0.0.tgz#0b7b74ff5b66ecf9035475522fa05090ac47e29e"
Expand Down Expand Up @@ -18882,6 +18976,14 @@ webpack-manifest-plugin@2.2.0:
object.entries "^1.1.0"
tapable "^1.0.0"

webpack-merge@^5.4.0:
version "5.7.3"
resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.7.3.tgz#2a0754e1877a25a8bbab3d2475ca70a052708213"
integrity sha512-6/JUQv0ELQ1igjGDzHkXbVDRxkfA57Zw7PfiupdLFJYrgFqY5ZP8xxbpp2lU3EPwYx89ht5Z/aDkD40hFCm5AA==
dependencies:
clone-deep "^4.0.1"
wildcard "^2.0.0"

webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
Expand Down Expand Up @@ -19004,6 +19106,11 @@ widest-line@^3.1.0:
dependencies:
string-width "^4.0.0"

wildcard@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==

winston-transport@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.4.0.tgz#17af518daa690d5b2ecccaa7acf7b20ca7925e59"
Expand Down