Setup component testing with cypress

.changelog/66.txt

@@ -0,0 +1,3 @@
+```release-note:enhancement
+testing: Setup component testing
+```

.github/workflows/cypress_components.yml

@@ -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

Dockerfile.test

@@ -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

cypress.config.ts

@@ -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')
+          })
+      }
+  },
+})

cypress/components/WiderHeader.spec.js

@@ -0,0 +1,37 @@
+import WiderHeader from '../../src/components/WiderHeader.vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+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')
+  })
+})

cypress/support/component.js

@@ -0,0 +1,4 @@
+import { mount } from 'cypress/vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+Cypress.Commands.add('mount', mount)

package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "name": "sk8l",
   "version": "0.1.0",
   "private": true,