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

Setup component testing with cypress #66

Closed
wants to merge 1 commit into from
Closed
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
3 changes: 3 additions & 0 deletions .changelog/66.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:enhancement
testing: Setup component testing
```
64 changes: 64 additions & 0 deletions .github/workflows/cypress_components.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
name: Cypress Component Tests
# https://github.com/actions/setup-node
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
cypress-component-tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
with:
fetch-depth: 1
- name: Install Node.js
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with:
node-version: 20
# node-version-file: ''
# check-latest: false
# architecture: ''
# token: ''
# cache: 'yarn'
# cache-dependency-path: ''
# registry-url: ''
# scope: ''
# always-auth: ''
- name: enable corepack
run: |
corepack enable
mkdir -p testdata/sk8l-certs/
touch testdata/sk8l-certs/ca-cert.pem
touch testdata/sk8l-certs/server-cert.pem
touch testdata/sk8l-certs/server-key.pem
# mkdir -p /etc/sk8l-certs
# touch /etc/sk8l-certs/ca-cert.pem
# touch /etc/sk8l-certs/server-cert.pem
# touch /etc/sk8l-certs/server-key.pem
- name: Get Yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn config get prefix)"
- uses: actions/cache@v3
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
run: yarn install --immutable # --immutable-cache
- name: Install Cypress
run: yarn add --dev cypress
# - name: Run lint
# run: yarn lint
# - name: Run tests
# run: yarn test
# - name: Run build
# run: yarn build
- name: Run Cypress Component Tests
uses: cypress-io/github-action@v6
with:
component: true
1 change: 1 addition & 0 deletions Dockerfile.test
Original file line number Diff line number Diff line change
@@ -11,3 +11,4 @@ LABEL org.opencontainers.image.licenses=MIT
# RUN chown -R 1001:1001 /var/cache
# COPY --chown=1001:1001 --from=release /usr/app ./e2e
COPY --from=release /usr/app ./e2e
RUN cd e2e && npx yarn add --dev cypress @cypress/vite-dev-server
21 changes: 18 additions & 3 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { defineConfig } from 'cypress'
// https://stackoverflow.com/questions/77092610/im-having-trouble-configuring-cypress-for-component-testing-on-my-vite-app
// https://github.com/cypress-io/cypress/discussions/28371
// https://www.npmjs.com/package/cypress-vite
// https://www.cypress.io/blog/2022/11/04/upcoming-changes-to-component-testing#vite-dev-server
// https://www.npmjs.com/package/@cypress/vite-dev-server

import { defineConfig, devServer } from 'cypress'

export default defineConfig({
clientCertificates: [
@@ -20,5 +26,14 @@ export default defineConfig({
specPattern: [
"cypress/**/*.spec.js"
]
}
})
},
component: {
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'vue',
viteConfig: require('./vite.config.js')
})
}
},
})
36 changes: 36 additions & 0 deletions cypress/components/WiderHeader.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import WiderHeader from '../../src/components/WiderHeader.vue'

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'home', component: { template: '<div>Home</div>' } },
{ path: '/:namespace/:name', name: 'cronDetails', component: { template: '<div>CronDetails</div>' } },
{ path: '/:namespace/:cronjobName/pods', name: 'jobPodList', component: { template: '<div>JobPodList</div>' } }
]
})

describe('WiderHeader', () => {
it('renders component', () => {
const cronjob = {
namespace: 'my-namespace',
name: 'my-cronjob',
jobs: [1, 2, 3]
}
const pods = [1, 2, 3, 4]

cy.mount(WiderHeader, {
props: {
cronjob,
pods
},
global: {
plugins: [router]
}
})

cy.get('.author').should('contain.text', 'my-namespace')
cy.get('strong').should('contain.text', 'my-cronjob')
cy.get('.js-profile-project-count').should('contain.text', '3')
cy.get('.js-profile-repository-count').should('contain.text', '4')
})
})
4 changes: 4 additions & 0 deletions cypress/support/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { mount } from 'cypress/vue'
import { createMemoryHistory, createRouter } from 'vue-router'

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