test: e2e tests, docker and playwright config + linting and readme

Dockerfile.e2e

@@ -0,0 +1,15 @@
+# Prebuilt MS image
+FROM mcr.microsoft.com/playwright:bionic
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+# Run the npm run test:e2e command to host the server and run the e2e tests
+CMD ["npm", "run", "test:e2e"]

README.md

@@ -20,5 +20,22 @@ npm run build
 npm run lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Runs e2e tests
+```
+npm run test:e2e
+```
+
+## Docker commands
+
+### Hosting the app
+
+```
+docker build . -t arthur
+docker run -p 9000:8080 arthur
+```
+
+### Running the e2e tests
+```
+docker build . -f Dockerfile.e2e -t arthur-e2e 
+docker run --rm arthur-e2e
+```

__tests__/e2e/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+        'plugin:jest-playwright/recommended'
+    ]
+};

__tests__/e2e/arthur.e2e.js

@@ -0,0 +1,43 @@
+describe('arthur', () => {
+    beforeEach(async () => {
+        await page.goto('http://localhost:8080/')
+    })
+
+    test('should show the page with buttons and initial state', async () => {
+        await expect(page).toHaveText("#dog-message", "I'm waiting...");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 0");
+    });
+
+    test('should count up and woof when a bone is given', async () => {
+        await page.click("#give-bone");
+        await expect(page).toHaveText("#dog-message", "Woof!");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 1");
+
+    });
+
+    test('should count down and whine when a bone is taken', async () => {
+        await page.click("#give-bone");
+        await page.click("#give-bone");
+        // first give 2 bones so we have bones to take!
+        await expect(page).toHaveText("#dog-message", "Woof!");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 2");
+
+
+        await page.click("#take-bone");
+
+        await expect(page).toHaveText("#dog-message", "Whine!");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 1");
+
+    });
+
+    test('should be confused when a bone is taken and the count is zero', async () => {
+        // check it's 0 first
+        await expect(page).toHaveText("#dog-message", "I'm waiting...");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 0");
+
+        await page.click("#take-bone");
+
+        await expect(page).toHaveText("#dog-message", "I'm confused!");
+        await expect(page).toHaveText("#bone-count", "Current bone count: 0");
+    });
+})

jest-playwright.config.js

@@ -0,0 +1,13 @@
+// jest-playwright.config.js
+
+module.exports = {
+    browsers: ['chromium', 'webkit', 'firefox'],
+    serverOptions: {
+        command: 'npm run start',
+        port: 8080,
+        usedPortAction: 'kill',
+        waitOnScheme: {
+            delay: 1000,
+        }
+    }
+}

jest.e2e.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'jest-playwright-preset',
+  setupFilesAfterEnv: ['expect-playwright'],
+  testMatch: ['**/*.e2e.js']
+};