Skip to content

Commit

Permalink
test: add cypress
Browse files Browse the repository at this point in the history
  • Loading branch information
davidlj95 committed Jul 1, 2024
1 parent acc4a82 commit c438afa
Show file tree
Hide file tree
Showing 17 changed files with 990 additions and 134 deletions.
70 changes: 35 additions & 35 deletions .github/workflows/pull-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,41 @@ on:
pull_request:

jobs:
build:
name: Build
uses: ./.github/workflows/reusable-build.yml
permissions:
contents: write
with:
artifact-name: build
build-run-script: 'build:pullRequest'
#build:
# name: Build
# uses: ./.github/workflows/reusable-build.yml
# permissions:
# contents: write
# with:
# artifact-name: build
# build-run-script: 'build:pullRequest'
test:
name: Test
uses: ./.github/workflows/reusable-test.yml
lint:
name: Lint
uses: ./.github/workflows/reusable-lint.yml
style:
name: Style
uses: ./.github/workflows/reusable-style.yml
performance:
name: Performance
needs: build
uses: ./.github/workflows/reusable-performance.yml
with:
build-artifact-name: build
secrets:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
deploy-preview:
name: Deploy preview
needs: [build]
uses: ./.github/workflows/reusable-deploy-cloudflare-pages.yml
with:
build-artifact-name: build
secrets:
cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
permissions:
contents: read
deployments: write
#lint:
# name: Lint
# uses: ./.github/workflows/reusable-lint.yml
#style:
# name: Style
# uses: ./.github/workflows/reusable-style.yml
#performance:
# name: Performance
# needs: build
# uses: ./.github/workflows/reusable-performance.yml
# with:
# build-artifact-name: build
# secrets:
# LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
# BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
#deploy-preview:
# name: Deploy preview
# needs: [build]
# uses: ./.github/workflows/reusable-deploy-cloudflare-pages.yml
# with:
# build-artifact-name: build
# secrets:
# cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
# cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
# permissions:
# contents: read
# deployments: write
95 changes: 66 additions & 29 deletions .github/workflows/reusable-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,49 @@ on:
# checks: write

jobs:
templates-have-been-rendered:
name: Templated files are rendered
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
with:
ref: ${{ inputs.ref }}
- name: Setup
uses: ./.github/actions/setup
- name: Render templates
run: 'pnpm run prebuild:render-templates'
- name: Ensure no pending changes
run: cd .ci && make ensure-no-pending-changes
test:
name: All tests
#templates-have-been-rendered:
# name: Templated files are rendered
# runs-on: ubuntu-latest
# steps:
# - name: Checkout
# uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
# with:
# ref: ${{ inputs.ref }}
# - name: Setup
# uses: ./.github/actions/setup
# - name: Render templates
# run: 'pnpm run prebuild:render-templates'
# - name: Ensure no pending changes
# run: cd .ci && make ensure-no-pending-changes
#test:
# name: All tests
# runs-on: ubuntu-latest
# timeout-minutes: 5
# steps:
# - name: Checkout
# uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
# with:
# ref: ${{ inputs.ref }}
# - name: Setup
# uses: ./.github/actions/setup
# - name: Run tests
# run: cd .ci && make test
# - name: Report test results (as status check)
# uses: dorny/test-reporter@31a54ee7ebcacc03a09ea97a7e5465a47b84aea5 # v1
# if: (success() || failure()) && github.ref == 'refs/heads/main'
# with:
# name: Test results
# path: '*.xml'
# reporter: java-junit
# - name: Report coverage
# # noinspection SpellCheckingInspection
# uses: livewing/lcov-job-summary@0a9952db27f98def2ba2de3189c6b24acc4c5501 # v1.1.0
# if: success() || failure()
# with:
# lcov: coverage/davidlj95/website/lcov.info

component-test:
name: Component tests
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
Expand All @@ -39,18 +66,28 @@ jobs:
ref: ${{ inputs.ref }}
- name: Setup
uses: ./.github/actions/setup
- name: Run tests
run: cd .ci && make test
- name: Report test results (as status check)
uses: dorny/test-reporter@31a54ee7ebcacc03a09ea97a7e5465a47b84aea5 # v1
if: (success() || failure()) && github.ref == 'refs/heads/main'
- name: Get Cypress cache info
run: |
echo "cypress_version=$(jq -r '.devDependencies.cypress' package.json)" >> $GITHUB_ENV
echo "cypress_cache_dir=$HOME/.cache/Cypress" >> $GITHUB_ENV
- name: Cypress cache
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
env:
cache-name: cypress
with:
name: Test results
path: '*.xml'
reporter: java-junit
- name: Report coverage
# noinspection SpellCheckingInspection
uses: livewing/lcov-job-summary@0a9952db27f98def2ba2de3189c6b24acc4c5501 # v1.1.0
if: success() || failure()
path: ${{ env.cypress_cache_dir }}
key: ${{ env.cache-name }}-${{ env.cypress_version }}
- name: Cypress install
run: pnpm cypress install
- name: Cypress run
uses: cypress-io/github-action@v6
env:
CYPRESS_CACHE_FOLDER: ${{ env.cypress_cache_dir }}
with:
lcov: coverage/davidlj95/website/lcov.info
browser: chrome
# 👇 Action doesn't support pnpm caching right now
# https://github.com/cypress-io/github-action/tree/v6.6.1?tab=readme-ov-file#pnpm
# Given we're doing caching manually, installing apart to leverage cache
install: false
component: true
working-directory: .
15 changes: 12 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Created by https://www.toptal.com/developers/gitignore/api/macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci
# Created by https://www.toptal.com/developers/gitignore/api/macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci,cypressio
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci,cypressio

### Angular ###
## Angular ##
Expand Down Expand Up @@ -33,6 +33,15 @@ e2e/*.map
# System Files
.DS_Store/

### CypressIO ###
# gitignore template for the CypressIO, browser test framework
# website: https://www.cypress.io/

cypress/results/*
cypress/reports/*
cypress/screenshots/*
cypress/videos/*

### LighthouseCI ###
# Lighthouse reports
.lighthouseci/
Expand Down Expand Up @@ -237,7 +246,7 @@ $RECYCLE.BIN/
# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci
# End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,vim,visualstudiocode,webstorm+iml,angular,lighthouseci,cypressio
## Manual files
/junit-test.xml
/junit-lint.xml
Expand Down
12 changes: 12 additions & 0 deletions .idea/runConfigurations/Cypress__all_component_tests.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,9 @@
"path": ".angular/cache"
},
"packageManager": "pnpm",
"schematicCollections": ["@angular-eslint/schematics"]
"schematicCollections": [
"@angular-eslint/schematics",
"@schematics/angular"
]
}
}
35 changes: 35 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { defineConfig } from 'cypress'

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
},

component: {
devServer: {
framework: 'angular',
bundler: 'webpack',
options: {
projectConfig: {
//👇 To be in sync with angular.json build target
// Cypress isn't ready for ESBuild yet
// https://github.com/cypress-io/cypress/issues/28997
// The configuration is the minimal one in order to make it work
root: '',
sourceRoot: 'src',
buildOptions: {
styles: ['src/styles.scss', 'src/sass/themes/devtools.scss'],
stylePreprocessorOptions: {
includePaths: ['src/sass'],
},
//👇 If not adding types.d.ts here, it isn't included and `isDevMode` isn't defined
// Maybe because Cypress tries to build only what the component imports. But that type is global
// The value is then actually set to `true` by the `esbuild-defines.ts` as done with unit tests
polyfills: ['src/types.d.ts', 'src/test/esbuild-defines.ts'],
},
},
},
},
specPattern: '**/*.cy.ts',
},
})
6 changes: 6 additions & 0 deletions cypress/e2e/spec.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
describe('My First Test', () => {
it('Visits the initial project page', () => {
cy.visit('/')
cy.contains('app is running')
})
})
4 changes: 4 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]"
}
43 changes: 43 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
// declare namespace Cypress {
// interface Chainable<Subject = any> {
// customCommand(param: any): typeof customCommand;
// }
// }
//
// function customCommand(param: any): void {
// console.warn(param);
// }
//
// NOTE: You can use it like so:
// Cypress.Commands.add('customCommand', customCommand);
//
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
12 changes: 12 additions & 0 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
39 changes: 39 additions & 0 deletions cypress/support/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

import { mount } from 'cypress/angular'

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}

Cypress.Commands.add('mount', mount)

// Example use:
// cy.mount(MyComponent)
Loading

0 comments on commit c438afa

Please sign in to comment.