Setup Cypress #1845

hasparus · 2021-06-25T11:09:09Z

This should help test SSR on our docs and examples.

📦 Published PR as canary version: 0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/color@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/components@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/core@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/css@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/custom-properties@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/editor@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install gatsby-plugin-theme-ui@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install gatsby-theme-style-guide@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install gatsby-theme-ui-layout@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/match-media@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/mdx@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/parse-props@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-base@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-bootstrap@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-bulma@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-dark@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-deep@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-funk@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-future@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-polaris@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-roboto@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-sketchy@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-swiss@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-system@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-tailwind@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/preset-tosh@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/presets@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/prism@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/sidenav@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/style-guide@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/tachyons@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/tailwind@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/theme-provider@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install theme-ui@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
npm install @theme-ui/typography@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
# or 
yarn add @theme-ui/color-modes@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/color@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/components@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/core@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/css@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/custom-properties@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/editor@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add gatsby-plugin-theme-ui@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add gatsby-theme-style-guide@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add gatsby-theme-ui-layout@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/match-media@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/mdx@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/parse-props@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-base@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-bootstrap@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-bulma@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-dark@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-deep@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-funk@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-future@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-polaris@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-roboto@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-sketchy@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-swiss@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-system@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-tailwind@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/preset-tosh@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/presets@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/prism@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/sidenav@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/style-guide@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/tachyons@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/tailwind@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/theme-provider@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add theme-ui@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0
yarn add @theme-ui/typography@0.10.1-canary.1845.ed74e01f156bfe1c735f5e9a33c64ba4d4faeaf7.0

…laky

vercel · 2021-06-25T11:09:12Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/ExGi8hrJgHBZnuMgCQaXJY8xNhky
✅ Preview: https://theme-ui-git-ci-cypress-systemui.vercel.app

…nt, and update them to match readme

hasparus · 2021-06-28T22:06:02Z

Hey @fcisio, @flo-sch, would you have a second to take a look at this? The CI currently being red is just canary release running into 503, so I think it's more or less ready to merge.

The gist of the change here is that

we can now run end-to-end tests in Cypress
- publicly visible at https://dashboard.cypress.io/projects/fmfid1/runs
which upload screenshots to Percy
- publicly visible at https://percy.io/95212972/theme-ui
- screenshot diffs need to be approved by a human

Percy is free until 5k screenshots per month with unlimited users (check Discord DMs), and 100 bucks for month after that. I doubt we'll reach the quota soon, as I mostly wanted it to test SSR / localStorage interactions to avoid bugs on color modes.

flo-sch · 2021-07-02T21:36:26Z

.github/workflows/ci.yml

+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v1


we could consider v2 for that one perhaps?
https://github.com/actions/setup-node/releases/tag/v2.2.0

flo-sch · 2021-07-02T22:29:20Z

Looks good on the Percy admin, however I am unable to run those locally
I cannot get the docs server to start it seems, not sure if I am missing something?
--> Then obviously the e2e tests are not passing

$ yarn workspace docs serve

$ gatsby serve
⠀
You can now view docs in the browser.
⠀
http://localhost:9000/

ERROR

Error: ENOENT: no such file or directory, stat '/[...]/theme-ui/packages/docs/public/404.html'

When I try to build it:

$ yarn workspace docs build

// ...
success Building production JavaScript and CSS bundles - 15.747s
ERROR #98123 WEBPACK
Generating SSR bundle failed
Unexpected token (7:9)
File: ../editor/src/index.ts:7:9
not finished Building HTML renderer - 7.512s
error Command failed with exit code 1.

If possible, perhaps add a small README file with instructions how to run those (if at all possible and what token is potentially needed?)

Also perhaps worth adding a gitignore with:

packages/e2e/screenshots
packages/e2e/videos

(Looks like when the tests fail such folders are versioned)

flo-sch

LGTM per say (the diff) but cannot run the tests locally, added a comment on the conversation

flo-sch · 2021-07-02T21:54:05Z

packages/docs/src/components/readme-badges.js

+      </a>
+      <a href="https://discord.gg/theme-ui">
+        <img
+          src="https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord"


Not sure if it would really help with the tests, but badgen has an alernative showing the number of members (not just online) that potentially change less often?
https://badgen.net/discord/members/theme-ui

I removed all of these badges in Cypress test anyway — version numbers change, CI status changes — all the badges are effectively dynamic.

lachlanjc · 2021-07-09T17:01:31Z

I don't have strong opinions here, but since color mode regression bugs are easy to cause & hard to detect, this seems great

hasparus · 2021-07-11T05:37:22Z

Looks good on the Percy admin, however I am unable to run those locally
I cannot get the docs server to start it seems, not sure if I am missing something?
--> Then obviously the e2e tests are not passing
$ yarn workspace docs serve
$ gatsby serve
⠀
You can now view docs in the browser.
⠀
http://localhost:9000/
ERROR
Error: ENOENT: no such file or directory, stat '/[...]/theme-ui/packages/docs/public/404.html'

When I try to build it:
$ yarn workspace docs build
// ...
success Building production JavaScript and CSS bundles - 15.747s
ERROR #98123 WEBPACK
Generating SSR bundle failed
Unexpected token (7:9)
File: ../editor/src/index.ts:7:9
not finished Building HTML renderer - 7.512s
error Command failed with exit code 1.

That unexpected token seems to be * in export *.
Have you tried running yarn workspace docs clean, @flo-sch?

hasparus · 2021-08-25T14:57:39Z

🚀 PR was released in v0.11.0 🚀

hasparus added 9 commits June 23, 2021 17:00

chore: remove Circle CI config

55a6ed7

ci: add contine-on-error to release CI step, becauseprereleases are f…

1681b0b

…laky

chore(theme-ui): remove unused build scripts

403f4fb

test(cypress): add e2e tests for color modes on docs index page

11a7679

chore: gitignore .envrc.ps1

bd5fe4f

ci(e2e): add PERCY_TOKEN

a67216f

chore: exclude packages/e2e from default tsconfig

fef3229

ci(e2e): set working-directory

f8d572b

ci(e2e): fix start script

4b0316a

hasparus requested a review from lachlanjc as a code owner June 25, 2021 11:09

ci(e2e): enable Cypress recording

f6854fa

vercel bot deployed to Preview June 25, 2021 11:11 View deployment

ci(e2e): use only one container

e38d064

vercel bot deployed to Preview June 25, 2021 11:20 View deployment

vercel bot deployed to Preview June 25, 2021 11:43 View deployment

hasparus force-pushed the ci/cypress branch from c5b7a0b to 845eb79 Compare June 25, 2021 12:42

vercel bot deployed to Preview June 25, 2021 12:42 View deployment

hasparus force-pushed the ci/cypress branch from 845eb79 to b6bc4da Compare June 25, 2021 13:36

vercel bot deployed to Preview June 25, 2021 13:36 View deployment

hasparus force-pushed the ci/cypress branch from b6bc4da to 55b6433 Compare June 25, 2021 14:16

vercel bot deployed to Preview June 25, 2021 14:16 View deployment

hasparus force-pushed the ci/cypress branch from 55b6433 to 03565a8 Compare June 25, 2021 14:27

vercel bot deployed to Preview June 25, 2021 14:27 View deployment

hasparus force-pushed the ci/cypress branch from 03565a8 to 5943060 Compare June 25, 2021 14:33

vercel bot deployed to Preview June 25, 2021 14:33 View deployment

hasparus force-pushed the ci/cypress branch from 5943060 to 84b0151 Compare June 25, 2021 14:39

vercel bot deployed to Preview June 25, 2021 14:39 View deployment

hasparus force-pushed the ci/cypress branch from 84b0151 to d6ffddd Compare June 25, 2021 15:23

vercel bot deployed to Preview June 25, 2021 15:23 View deployment

vercel bot deployed to Preview June 28, 2021 21:27 View deployment

docs(index): move readme badges *on index page* to a seperate compone…

8c17fdc

…nt, and update them to match readme

hasparus force-pushed the ci/cypress branch from 79ad51e to 8c17fdc Compare June 28, 2021 21:34

vercel bot deployed to Preview June 28, 2021 21:34 View deployment

hasparus requested review from fcisio and flo-sch June 28, 2021 21:57

flo-sch reviewed Jul 2, 2021

View reviewed changes

chore(e2e): gitignore screenshots and videos

02c5638

vercel bot deployed to Preview July 11, 2021 05:40 View deployment

chore(ci): bump actions/setup-node to v2

701caa2

vercel bot deployed to Preview July 11, 2021 05:44 View deployment

hasparus added 2 commits July 11, 2021 07:51

chore(ci): fix line endings

fadff0f

Merge branch 'develop' into ci/cypress

7fc4f97

vercel bot deployed to Preview July 11, 2021 05:51 View deployment

hasparus merged commit 074ff25 into develop Jul 11, 2021

hasparus deleted the ci/cypress branch July 11, 2021 06:03

hasparus added internal Changes only affect the internal API skip-release Preserve the current version when merged labels Jul 11, 2021

hasparus added the prerelease This change is available in a prerelease. label Jul 19, 2021

hasparus mentioned this pull request Jul 19, 2021

fix(color-modes): combine colors in nested providers #1838

Merged

This was referenced Jul 27, 2021

add types for css prop back #1866

Merged

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

Merged

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Aug 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup Cypress #1845

Setup Cypress #1845

hasparus commented Jun 25, 2021 •

edited

Loading

vercel bot commented Jun 25, 2021 •

edited

Loading

hasparus commented Jun 28, 2021

flo-sch Jul 2, 2021

flo-sch commented Jul 2, 2021

flo-sch left a comment

flo-sch Jul 2, 2021

hasparus Jul 3, 2021

lachlanjc commented Jul 9, 2021

hasparus commented Jul 11, 2021 •

edited

Loading

hasparus commented Aug 25, 2021

Setup Cypress #1845

Setup Cypress #1845

Conversation

hasparus commented Jun 25, 2021 • edited Loading

vercel bot commented Jun 25, 2021 • edited Loading

hasparus commented Jun 28, 2021

flo-sch Jul 2, 2021

Choose a reason for hiding this comment

flo-sch commented Jul 2, 2021

flo-sch left a comment

Choose a reason for hiding this comment

flo-sch Jul 2, 2021

Choose a reason for hiding this comment

hasparus Jul 3, 2021

Choose a reason for hiding this comment

lachlanjc commented Jul 9, 2021

hasparus commented Jul 11, 2021 • edited Loading

hasparus commented Aug 25, 2021

hasparus commented Jun 25, 2021 •

edited

Loading

vercel bot commented Jun 25, 2021 •

edited

Loading

hasparus commented Jul 11, 2021 •

edited

Loading