ci: unit & ui testing (#6)

romcal · May 6, 2024 · 065e7df · 065e7df
1 parent a7f87b5
commit 065e7df
Show file tree

Hide file tree

Showing 75 changed files with 19,406 additions and 16,652 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,111 @@
+name: CI
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches-ignore:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+   name: Lint
+   defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+   strategy:
+     matrix:
+       project:
+        - 'react-app'
+        - 'rest-api-with-express'
+        - 'rest-api-with-fastify'
+   runs-on: ubuntu-latest
+   steps:
+     - uses: actions/checkout@v4
+     - name: Use Node.js
+       uses: actions/setup-node@v4
+       with:
+         node-version-file: '.nvmrc'
+         cache: 'npm'
+         cache-dependency-path: ${{ matrix.project }}/package-lock.json
+     - name: Install Dependencies
+       run: npm ci
+     - name: Run linters
+       run: npm run lint
+  test-ui:
+    name: Test (UI)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+    strategy:
+      matrix:
+        browser:
+          - 'chrome'
+        project:
+          - 'react-app'
+          - 'rest-api-with-express'
+          - 'rest-api-with-fastify'
+          - 'html-web-page'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: ${{ matrix.project }}/package-lock.json
+      - name: Build for Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ${{ matrix.project }}
+          build: npm run build -- --logLevel error
+          runTests: false
+      - name: Run Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ${{ matrix.project }}
+          start: npm start
+          browser: ${{ matrix.browser }}
+          install: false
+      - uses: actions/upload-artifact@master
+        if: failure()
+        with:
+          name: screenshots
+          path: ${{ matrix.project }}/cypress/screenshots
+      - uses: actions/upload-artifact@master
+        if: failure()
+        with:
+          name: videos
+          path: ${{ matrix.project }}/cypress/videos
+  test-unit:
+    name: Test (Unit)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+    strategy:
+      matrix:
+        project:
+          - 'rest-api-with-express'
+          - 'rest-api-with-fastify'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: ${{ matrix.project }}/package-lock.json
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run Unit Tests
+        run: npm test -- --reporter=xunit --reporter-options output=unit-tests.xml
+      - name: Report Results
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          files: |
+            ${{ matrix.project }}/unit-tests.xml
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,143 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    name: Lint
+    defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+    strategy:
+      matrix:
+        project:
+          - 'react-app'
+          - 'rest-api-with-express'
+          - 'rest-api-with-fastify'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: ${{ matrix.project }}/package-lock.json
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run linters
+        run: npm run lint
+  test-ui:
+    name: Test (UI)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+    strategy:
+      matrix:
+        browser:
+          - 'chrome'
+        project:
+          - 'react-app'
+          - 'rest-api-with-express'
+          - 'rest-api-with-fastify'
+          - 'html-web-page'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: ${{ matrix.project }}/package-lock.json
+      - name: Build for Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ${{ matrix.project }}
+          build: npm run build -- --logLevel error
+          runTests: false
+      - name: Run Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ${{ matrix.project }}
+          start: npm run start:built
+          browser: ${{ matrix.browser }}
+          install: false
+      - uses: actions/upload-artifact@master
+        if: failure()
+        with:
+          name: screenshots
+          path: ${{ matrix.project }}/cypress/screenshots
+      - uses: actions/upload-artifact@master
+        if: failure()
+        with:
+          name: videos
+          path: ${{ matrix.project }}/cypress/videos
+  test-unit:
+    name: Test (Unit)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ${{ matrix.project }}
+    strategy:
+      matrix:
+        project:
+          - 'rest-api-with-express'
+          - 'rest-api-with-fastify'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: ${{ matrix.project }}/package-lock.json
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run Unit Tests
+        run: npm test -- --reporter=xunit --reporter-options output=unit-tests.xml
+      - name: Report Results
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          files: |
+            ${{ matrix.project }}/unit-tests.xml
+
+  verify:
+    name: Verify
+    runs-on: ubuntu-latest
+    needs:
+      - lint
+      - test-unit
+      - test-ui
+    steps:
+      - name: All Tests Pass
+        if: ${{ !(contains(needs.*.result, 'failure')) && !(contains(needs.*.conclusion, 'cancelled')) && !(contains(needs.*.conclusion, 'skipped')) }}
+        run: exit 0
+      - name: Some Tests Don't Pass
+        if: ${{ (contains(needs.*.result, 'failure')) && (contains(needs.*.conclusion, 'cancelled')) && (contains(needs.*.conclusion, 'skipped')) }}
+        run: exit 1
+  # TODO: test publishing to another repo first
+  #publish:
+  #  name: Publish
+  #  runs-on: ubuntu-latest
+  #  if: github.repository == 'romcal/romcal-examples' && !contains(github.event.head_commit.message, '[skip ci]')
+  #  needs:
+  #    - verify
+  #  steps:
+  #    - name: Build React App
+  #      working-directory: react-app
+  #      run: VITE_DAY_VARIANT=developer npm run build
+  #    - name: Deploy
+  #      uses: peaceiris/actions-gh-pages@v4
+  #      with:
+  #        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+  #        external_repository: romcal/romcal.github.io
+  #        publish_branch: gh-pages
+  #        publish_dir: ./build
+  #        cname: romcal.js.org
+  #        commit_message: ${{ github.event.head_commit.message }}
+  #        force_orphan: true
+  #        user_name: 'romcalproject'
+  #        user_email: '[email protected]'
+
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -0,0 +1,7 @@
+singleQuote: true
+quoteProps: as-needed
+trailingComma: es5
+bracketSpacing: true
+arrowParens: always
+printWidth: 120
+semi: true
diff --git a/html-web-page/.gitignore b/html-web-page/.gitignore
@@ -0,0 +1 @@
+public/romcal/*.js
diff --git a/html-web-page/README.md b/html-web-page/README.md
@@ -10,3 +10,7 @@ npm start
 ```
 
 And open the URL provided by the terminal.
+
+## Customize
+
+You can specify the port this is deployed on by setting `ROMCAL_APP_PORT` in your environment, such as `ROMCAL_APP_PORT=8080 npm start`.
diff --git a/html-web-page/cypress.config.mjs b/html-web-page/cypress.config.mjs
@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+
+const port = Number.parseInt(process.env.ROMCAL_APP_PORT ?? '3000', 10);
+
+export default defineConfig({
+  e2e: {
+    baseUrl: `http://localhost:${port}`,
+    supportFile: false,
+  },
+  env: {
+    ROMCAL_APP_PORT: port,
+  }
+});
diff --git a/html-web-page/cypress/e2e/load.cy.js b/html-web-page/cypress/e2e/load.cy.js
@@ -0,0 +1,15 @@
+describe('Load', () => {
+  it('should load the page', () => {
+    cy.visit(`http://localhost:${Cypress.env('ROMCAL_APP_PORT')}`);
+    cy.get('h1').should('have.text', 'romcal');
+    cy.get('p').should('have.text', 'Open the developer tools and check the console.');
+
+    cy.get('#calendar').find('div').should('have.length', 2).as('messages');
+    cy.get('@messages').eq(0).should('have.text', 'All definitions, which are all possible liturgical days of a specific calendar, that can occur during a whole year:');
+    cy.get('@messages').eq(1).should('have.text', 'A calendar that contains all liturgical days occurring during 2024:');
+
+    cy.get('#calendar').find('pre').should('have.length', 2).as('codes');
+    cy.get('@codes').eq(0).should('include.text', 'mary_mother_of_god');
+    cy.get('@codes').eq(1).should('include.text', 'mary_mother_of_god');
+  });
+});