Merge from main to stable

.env.example

@@ -0,0 +1,5 @@
+TEST_SERVER_URL=http://localhost:8080
+DEBUG=headless|screenshot|interactive
+SLOWDOWN_IN_MS=<delay_between_each_action>
+VIEWPORT_HEIGHT=720
+VIEWPORT_WIDTH=1280

.github/workflows/ci.yml

@@ -6,6 +6,14 @@ on:
       - 'README.md'
       - 'LICENSE'
       - '.prettierrc'
+      - 'docs'
+      - 'docs/**'
+      - 'ava.**'
+      - '.env*'
+      - '.nvmrc'
+      - 'tslint.json'
+      - 'test'
+      - 'test/**'
 
 name: Deploy to Amazon ECS
 
@@ -16,18 +24,18 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1.5.11
+        uses: aws-actions/configure-aws-credentials@v2.2.0
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: us-east-2
 
       - name: Login to Amazon ECR
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v1.3.3
+        uses: aws-actions/amazon-ecr-login@v1.6.2
 
       - name: Build, tag, and push image to Amazon ECR
         id: build-image
@@ -45,14 +53,14 @@ jobs:
 
       - name: Fill in the new image ID in the Amazon ECS task definition
         id: task-def
-        uses: aws-actions/amazon-ecs-render-task-definition@v1.0.24
+        uses: aws-actions/amazon-ecs-render-task-definition@v1.1.3
         with:
           task-definition: .github/workflows/task.json
           container-name: website
           image: ${{ steps.build-image.outputs.image }}
 
       - name: Update the service with the new task definition
-        uses: aws-actions/amazon-ecs-deploy-task-definition@v1.4.7
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v1.4.11
         with:
           task-definition: ${{ steps.task-def.outputs.task-definition }}
           service: bingo-service

.github/workflows/tests.yml

@@ -12,10 +12,16 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest]
+        node: ['18', '20']
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
 
       - name: Run tests and lint
         id: test-and-lint

.gitignore

@@ -3,6 +3,7 @@ public/**/*.css
 public/**/*.js
 public/**/*.map
 public/**/*.json
+public/**/*.txt
 public/artifacts
 docs/output.html
 

.nvmrc

@@ -1 +1 @@
-16
+20

README.md

@@ -33,6 +33,8 @@ The development build does use hot reloading for both Javascript/Typescript and
 
 The server code is stored in the `server` folder and the client code is stored in the `client` folder. There are some common modules that are stored in a `common` folder. We use a path alias to import components into files, for example, `import CardDetailRow from '@bingo/components/CardDetailRow`. Similar path aliases exist for the common folder (`@bingo/common`) and the client folder (`@bingo/client`).
 
+There are also functional tests included in the `test` folder. These tests exercise different aspects of the application so that changes don't break some of the core functionality and we can validate in an automated way.
+
 ## Development
 
 There are two ways to run this application - docker and just NPM if you have a Node.js environment set up. You can use the NPM commands listed below to start this application up within a Node.js environment.
@@ -60,7 +62,11 @@ The code in this repository comes with large number of npm scripts listed in the
 - `npm start` - used to start the server and webpack in development mode (HMR enabled)
 - `npm run assets:dev` - used to run the assets build one time in development
 - `npm run assets:watch` - used to run the assets build in watch mode, recommended to use `npm start` because we also need the server running and it builds the assets too
-- `npm test` - used to run the unit tests, once
+- `npm run unit-test` - used to run the unit tests, with coverage
+- `npm test` - alias for `npm run unit-test`
+- `npm run unit-test:no-coverage` - used to run the unit tests without coverage
+- `npm run functional-test` - used to run the functional tests based off of puppeteer
+- `npm run test:all` - used to run all the test suites
 - `npm run tslint` - used to lint the entire project
 - `npm run show-stats` - used to pull up the webpack statistics on package size and contents
 - `npm run start:prod` - used to start the server and webpack in production mode (HMR disabled)

ava.base.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extensions: ['ts'],
+  require: ['ts-node/register'],
+};

ava.func.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require('./ava.base.config');
+
+module.exports = Object.assign({}, baseConfig, {
+  files: ['test/**/*.spec.ts'],
+  concurrency: 1,
+  failFast: true,
+  failWithoutAssertions: true,
+  timeout: '30s',
+});

ava.unit.config.js

@@ -0,0 +1,5 @@
+const baseConfig = require('./ava.base.config');
+
+module.exports = Object.assign({}, baseConfig, {
+  files: ['client/**/*.spec.ts', 'common/**/*.spec.ts', 'server/**/*.spec.ts'],
+});

client/Component.ts

@@ -8,7 +8,7 @@ export interface IDocumentWithRegistry extends Document {
 (document as IDocumentWithRegistry).componentRegistry = {};
 (document as IDocumentWithRegistry).nextId = 0;
 
-export default class Component<P = {}, S = {}> {
+export default class Component<P extends {} = {}, S extends {} = {}> {
   protected readonly id: string;
   protected readonly props: P;
   protected state: S;

client/components/Card/Card.ts

@@ -76,7 +76,11 @@ export default class Card extends Component<ICardProps> {
         </div>
       `;
     } catch (err) {
-      return '<div>Invalid card numbers! Please check the link.</div>';
+      return `
+        <div class="card invalid-card">
+          Invalid card numbers! Please check the link.
+        </div>
+      `;
     }
   }
 }