Skip to content

Commit

Permalink
Merge pull request #1845 from system-ui/ci/cypress
Browse files Browse the repository at this point in the history
Setup Cypress
  • Loading branch information
hasparus authored Jul 11, 2021
2 parents 62dfd74 + 7fc4f97 commit 074ff25
Show file tree
Hide file tree
Showing 20 changed files with 1,141 additions and 94 deletions.
8 changes: 0 additions & 8 deletions .circleci/config.yml

This file was deleted.

3 changes: 3 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@ module.exports = {
'no-use-before-define': 'off',
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/no-redeclare': 'off',

// TypeScript checks this
'no-undef': 'off',
},
}
12 changes: 8 additions & 4 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@ on:
branches:
- develop
- stable
- ci/*
# - ci/* # uncomment this when workin on CI without PR

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2

- uses: actions/setup-node@v1
- uses: actions/setup-node@v2
with:
node-version: 14.x

- uses: bahmutov/npm-install@v1
with:
# By default, bahmutov/npm-install uses --frozen-lockfile
install-command: yarn
install-command:
yarn --ignore-optional --pure-lockfile --non-interactive

- name: Run tests and collect coverage
run: yarn test --coverage
Expand Down Expand Up @@ -70,11 +71,14 @@ jobs:
- name: Prepare repository
run: git fetch --unshallow --tags

- uses: actions/setup-node@v1
- uses: actions/setup-node@v2
with:
node-version: 14.x

- uses: bahmutov/npm-install@v1
with:
install-command:
yarn --ignore-optional --pure-lockfile --non-interactive

- name: Queue in release turnstile
id: turnstyle
Expand Down
50 changes: 50 additions & 0 deletions .github/workflows/e2e.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
name: 'End-to-End Tests'
on:
pull_request:
types: [opened, synchronize]
push:
branches:
- develop
- stable
jobs:
run-cypress:
runs-on: ubuntu-latest
# container: cypress/browsers:node12.13.0-chrome78-ff70
strategy:
# when one test fails, DO NOT cancel the other
# containers, because this will kill Cypress processes
# leaving the Dashboard hanging ...
# https://github.com/cypress-io/github-action/issues/48
fail-fast: false
matrix:
containers: [1] # todo: change to [1, 2] - there's only 1 test file now
steps:
- uses: actions/checkout@v2

- uses: actions/setup-node@v2
with:
node-version: 14.x

- uses: bahmutov/npm-install@v1
with:
install-command: yarn --pure-lockfile --non-interactive

- run: yarn build:docs

- uses: cypress-io/github-action@v2
with:
record: true
parallel: true
working-directory: packages/e2e
command: yarn record
start: yarn serve-docs
wait-on: 'http://localhost:9000'
tag: ${{ github.event_name }}
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
COMMIT_INFO_MESSAGE:
${{ github.event.pull_request.title && format('PR {0} - {1}',
github.event.pull_request.number, github.event.pull_request.title)
}}
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ coverage
.idea
.vscode
.envrc
.envrc.ps1
.publish-log.txt
.yarn-error.log


.vercel

.vercel
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"scripts": {
"build": "preconstruct build",
"build:docs": "yarn build && yarn workspace docs build",
"serve:docs": "yarn build:docs && yarn workspace docs serve",
"dev:docs": "yarn workspace docs start",
"clean": "lerna run clean && rimraf packages/*/{dist,rts2_cache*}",
"format": "prettier --write \"**/*.{ts,js,json}\" \"**/*.md\" \"**/*.mdx\"",
Expand Down Expand Up @@ -66,6 +67,7 @@
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"ts-jest": "^26.5.5",
"ts-toolbelt": "^9.6.0",
"typecov": "^0.2.3",
"typescript": "^4"
},
Expand All @@ -77,7 +79,8 @@
"preconstruct": {
"packages": [
"packages/*",
"!packages/docs"
"!packages/docs",
"!packages/e2e"
]
},
"name": "@theme-ui/monorepo"
Expand Down
10 changes: 4 additions & 6 deletions packages/docs/src/components/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,8 @@ export default function DocsLayout(props) {

const showNav = !props.pageContext?.frontmatter?.hidenav

const cycleMode = (e) => {
const i = modes.indexOf(mode)
const next = modes[(i + 1) % modes.length]
setMode(next)
}
const nextColorMode = modes[(modes.indexOf(mode) + 1) % modes.length]

return (
<Themed.root>
<Head {...props} />
Expand Down Expand Up @@ -95,11 +92,12 @@ export default function DocsLayout(props) {
GitHub
</NavLink>
<Button
aria-label={`Change color mode to ${nextColorMode}`}
sx={{
ml: 2,
whiteSpace: 'pre',
}}
onClick={cycleMode}>
onClick={() => setMode(nextColorMode)}>
{getModeName(mode)}
</Button>
</Flex>
Expand Down
93 changes: 93 additions & 0 deletions packages/docs/src/components/readme-badges.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/** @jsx jsx */
import { jsx } from 'theme-ui'

// Straight-up copied from README.md
// We may extract it from that Markdown file in a fancy way some day. Maybe...
export default function ReadmeBadges() {
return (
<div
data-testid="readme-badges"
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: '2px',
'> a': { height: '20px' },
}}>
<a href="https://github.com/system-ui/theme-ui">
<img
src="https://badgen.net/badge/-/github?icon=github&label"
alt="GitHub"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/stargazers">
<img
src="https://badgen.net/github/stars/system-ui/theme-ui"
alt="GitHub Stars"
/>
</a>
<a>
<img
alt="npm (latest)"
src="https://img.shields.io/npm/v/theme-ui/latest"
/>
</a>
<a>
<img
alt="npm (develop)"
src="https://img.shields.io/npm/v/theme-ui/develop?color=%23e044aa"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/graphs/contributors">
<img
src="https://img.shields.io/github/contributors/system-ui/theme-ui"
alt="Contributors"
/>
</a>
<a href="https://github.com/badges/shields/pulse">
<img
src="https://img.shields.io/github/commit-activity/m/system-ui/theme-ui"
alt="Activity"
/>
</a>
<a href="https://badgen.net/bundlephobia/minzip/theme-ui">
<img src="https://badgen.net/bundlephobia/minzip/theme-ui" alt="Size" />
</a>
<a href="https://bundlephobia.com/result?p=theme-ui">
<img
src="https://badgen.net/bundlephobia/tree-shaking/theme-ui"
alt="Tree Shaking"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md">
<img
src="https://badgen.net/badge/license/MIT/blue"
alt="MIT license"
/>
</a>
<a href="https://discord.gg/theme-ui">
<img
src="https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord"
alt="Join our Discord community"
/>
</a>
<a href="https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI">
<img
src="https://github.com/system-ui/theme-ui/workflows/CI/badge.svg?branch=stable"
alt="Build Status"
/>
</a>
<a href="https://dashboard.cypress.io/projects/fmfid1/runs">
<img
src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/fmfid1/stable&logo=cypress"
alt="This project is using Cypress for end-to-end tests."
/>
</a>
<a href="https://percy.io/95212972/theme-ui">
<img
src="https://percy.io/static/images/percy-badge.svg"
alt="This project is using Percy.io for visual regression testing."
/>
</a>
</div>
)
}
36 changes: 15 additions & 21 deletions packages/docs/src/pages/index.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import { Container, Box, Button } from 'theme-ui'

import { Banner, Tiles } from '..'
import Testimonials from './testimonials'
import Graph from '../components/graph'
import ReadmeBadges from '../components/readme-badges'

import Testimonials from './testimonials'

<Banner>

<Graph />

# Theme UI: The Design Graph Framework

Theme UI is a library for creating themeable user interfaces based on constraint-based design principles.
Build custom component libraries, design systems, web applications, Gatsby themes, and more
with a flexible API for best-in-class developer ergonomics.
Theme UI is a library for creating themeable user interfaces based on
constraint-based design principles. Build custom component libraries, design
systems, web applications, Gatsby themes, and more with a flexible API for
best-in-class developer ergonomics.

[Documentation](/getting-started)
[GitHub](https://github.com/system-ui/theme-ui)
Expand All @@ -20,16 +24,7 @@ with a flexible API for best-in-class developer ergonomics.

<Container>

[![GitHub Stars](https://badgen.net/github/stars/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/stargazers)
![npm (latest)](https://img.shields.io/npm/v/theme-ui/latest)
![npm (next)](https://img.shields.io/npm/v/theme-ui/next?color=%23e044aa)
[![Build Status](https://github.com/system-ui/theme-ui/workflows/CI/badge.svg)](https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI)
[![Contributors](https://img.shields.io/github/contributors/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/graphs/contributors)
[![Activity](https://img.shields.io/github/commit-activity/m/system-ui/theme-ui)](https://github.com/badges/shields/pulse) <br/>
[![Size](https://badgen.net/bundlephobia/minzip/theme-ui)](https://badgen.net/bundlephobia/minzip/theme-ui)
[![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/theme-ui)](https://bundlephobia.com/result?p=theme-ui)
[![MIT license](https://badgen.net/badge/license/MIT/blue)](https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md)
[![Join our Discord community](https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord)](https://discord.gg/theme-ui)
<ReadmeBadges />

<Tiles columns={2}>

Expand Down Expand Up @@ -70,15 +65,14 @@ export default (props) => (
<Tiles>

- ## Ergonomic
Best-in-class developer ergonomics let you style
your application quickly and consistently
based on your theme
Best-in-class developer ergonomics let you style your application quickly and
consistently based on your theme
- ## Themeable
Quickly and easily reference values from your theme
throughout your entire application, on any component
Quickly and easily reference values from your theme throughout your entire
application, on any component
- ## Constraint-based
Use color, typography, and layout scales
rooted in constraint-based design principles
Use color, typography, and layout scales rooted in constraint-based design
principles

</Tiles>

Expand Down
2 changes: 2 additions & 0 deletions packages/e2e/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
screenshots/*
videos/*
16 changes: 16 additions & 0 deletions packages/e2e/cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"baseUrl": "http://localhost:9000",
"pluginsFile": "plugins.js",
"supportFile": "support.ts",
"screenshotsFolder": "screenshots",
"videosFolder": "videos",
"downloadsFolder": "downloads",
"fixturesFolder": "fixtures",
"integrationFolder": "integration",
"testFiles": "**/*.*",
"retries": {
"runMode": 1,
"openMode": 3
},
"projectId": "fmfid1"
}
Loading

0 comments on commit 074ff25

Please sign in to comment.