feat(github): Add GitHub action to test/build (#11)

* test(storybook): wire up for CI/CD

Create node.js.yml

Also fix broken interactions

* build(github): use postgresql service containers

https://docs.github.com/en/actions/using-containerized-services/creating-postgresql-service-containers

* build(github): expose port to host

https://docs.github.com/en/actions/using-containerized-services/about-service-containers#running-jobs-on-the-runner-machine

* build(github): fix artifact name clobber

* build: switch order to make sure storybook is built

Author: virtuoushub

.github/workflows/node.js.yml

@@ -0,0 +1,61 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  build:
+
+    runs-on: ubuntu-20.04
+    env:
+      TEST_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/postgres
+
+    services:
+      # Label used to access the service container
+      postgres:
+        # Docker Hub image
+        image: postgres@sha256:1cb07b811f2ec7b7bf3c42fc3dc19c1b5e87775eee88c2b1a8793420c4de0781
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: postgres
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn install --immutable
+    - run: yarn rw test && yarn workspace web test-storybook:ci
+    # order of steps is important, storybook needs to be built first as
+    # it goes into web/public/storybook which then gets built and put into
+    # web/dist
+    - run: yarn rw sb --build --no-open && yarn rw build
+    - uses: actions/[email protected]
+      with:
+        name: build-for-${{github.sha}}-node-${{matrix.node-version}}
+        path: |
+          api/dist/
+          web/dist/

netlify.toml

@@ -1,5 +1,8 @@
 [build]
-command = "yarn rw deploy netlify --no-prisma --no-data-migrate && yarn rw sb --build"
+# order of steps is important, storybook needs to be built first as
+# it goes into web/public/storybook which then gets built and put into
+# web/dist
+command = "yarn rw sb --build --no-open && yarn rw deploy netlify --no-prisma --no-data-migrate"
 publish = "web/dist"
 functions = "api/dist/functions"
 

web/package.json

@@ -34,6 +34,7 @@
     "tailwindcss": "3.0.23"
   },
   "scripts": {
-    "test-storybook": "test-storybook --url http://localhost:7910/ --config-dir \"${PWD}/node_modules/@redwoodjs/testing/config/storybook/\""
+    "test-storybook": "test-storybook --url http://localhost:7910/ --config-dir \"${PWD}/../node_modules/@redwoodjs/testing/config/storybook/\"",
+    "test-storybook:ci": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn rw sb\" \"npx wait-on tcp:7910 && yarn test-storybook\""
   }
 }

web/src/layouts/BlogLayout/BlogLayout.stories.js

@@ -15,10 +15,10 @@ generated.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
   const heading = await canvas.findByRole('heading')
   expect(heading).toHaveTextContent('Redwood Blog')
-  const homeLink = await canvas.findByRole('link', { name: 'Home' })
-  expect(homeLink).toHaveTextContent('Home')
   const aboutLink = await canvas.findByRole('link', { name: 'About' })
   expect(aboutLink).toHaveTextContent('About')
+  const homeLink = await canvas.findByRole('link', { name: 'Contact' })
+  expect(homeLink).toHaveTextContent('Contact')
 }
 
 export default { title: 'Layouts/BlogLayout' }

web/src/pages/AboutPage/AboutPage.js

@@ -5,7 +5,7 @@ const AboutPage = () => {
     <>
       <MetaTags title="About" description="About page" />
 
-      <p className="font-light">
+      <p data-testid="about-paragraph" className="font-light">
         This site was created to demonstrate my mastery of Redwood: Look on my
         works, ye mighty, and despair!
       </p>

web/src/pages/AboutPage/AboutPage.stories.js

@@ -1,5 +1,5 @@
 //@ts-check
-import { within, userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
 import AboutPage from './AboutPage'
 
@@ -9,7 +9,7 @@ export const generated = () => {
 
 generated.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
-  const paragraph = await canvas.findByRole('note')
+  const paragraph = await canvas.findByTestId('about-paragraph')
   expect(paragraph).toHaveTextContent(
     'Look on my works, ye mighty, and despair!'
   )

web/src/pages/AboutPage/__snapshots__/AboutPage.test.js.snap

@@ -4,6 +4,7 @@ exports[`AboutPage fragment matches snapshot 1`] = `
 <DocumentFragment>
   <p
     class="font-light"
+    data-testid="about-paragraph"
   >
     This site was created to demonstrate my mastery of Redwood: Look on my works, ye mighty, and despair!
   </p>