Release branch - dry run

.eslintrc.js

@@ -1,49 +1,55 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true
+  'env': {
+    'browser': true,
+    'es6': true,
+    'jest/globals': true,
+    'node': true,
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
+  'extends': [
+    'eslint:recommended',
+    'plugin:react/recommended'
   ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+  'parserOptions': {
+    'ecmaFeatures': {
+      'jsx': true
     },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    'ecmaVersion': 2018,
+    'sourceType': 'module'
   },
-  "plugins": [
-    "react", "jest"
+  'plugins': [
+    'react', 'jest'
   ],
-  "rules": {
-    "indent": [
-      "error",
-        2
-      ],
-    "linebreak-style": [
-      "error",
-      "unix"
+  'settings': {
+    'react': {
+      'version': '18.2.0'
+    }
+  },
+  'rules': {
+    'indent': [
+      'error',
+      2
+    ],
+    'linebreak-style': [
+      'error',
+      'unix'
     ],
-    "quotes": [
-      "error",
-      "single"
+    'quotes': [
+      'error',
+      'single'
     ],
-    "semi": [
-      "error",
-      "never"
+    'semi': [
+      'error',
+      'never'
     ],
-    "eqeqeq": "error",
-    "no-trailing-spaces": "error",
-    "object-curly-spacing": [
-      "error", "always"
+    'eqeqeq': 'error',
+    'no-trailing-spaces': 'error',
+    'object-curly-spacing': [
+      'error', 'always'
     ],
-    "arrow-spacing": [
-      "error", { "before": true, "after": true }
+    'arrow-spacing': [
+      'error', { 'before': true, 'after': true }
     ],
-    "no-console": "error",
-    "react/prop-types": 0
+    'no-console': 'error',
+    'react/prop-types': 0
   }
 }

.github/workflows/hello.yml

@@ -0,0 +1,20 @@
+name: Hello World!
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  hello_world_job:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Say hello
+        run: |
+          echo "Hello World!"
+
+      - name: Display the date
+        run: date "+%A, %B %d, %Y at %T"
+
+      - name: Directory content
+        run: ls -l
+

.github/workflows/pipeline.yml

@@ -0,0 +1,47 @@
+name: Deployment pipeline
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+
+jobs:
+  simple_deployment_pipeline:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm install
+      - name: Check style
+        run: npm run eslint
+      - name: Run unit and integration tests
+        run: npm run test
+      - name: Build
+        run: npm run build
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+      - name: Run e2e tests
+        run: npm run test:e2e
+      - name: Trigger deployment with deploy hook
+        if: ${{ github.event_name == 'push' }}
+        run: curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
+
+  tag_release:
+    if: ${{ github.event_name == 'push' }}
+    needs: [simple_deployment_pipeline]
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: '0'
+      - name: Bump version and push tag
+        uses: anothrNick/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          DEFAULT_BUMP: patch

.gitignore

@@ -1,2 +1,8 @@
 dist/
-node_modules/
+node_modules/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

app.js

@@ -1,11 +1,19 @@
-const express = require("express");
-const app = express();
+const express = require('express')
+const app = express()
 
 // get the port from env variable
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5001
 
-app.use(express.static("dist"));
+app.use(express.static('dist'))
 
+/* eslint-disable no-console */
 app.listen(PORT, () => {
-  console.log(`server started on port ${PORT}`);
-});
+  console.log(`server started on port ${PORT}`)
+})
+/* eslint-enable no-console */
+app.get('/version', (req, res) => {
+  res.send('1') // change this string to ensure a new version deployed
+})
+app.get('/health', (req, res) => {
+  res.send('ok')
+})

build_step.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+echo "Build script"
+
+npm install
+npm run build
+npm run start-prod

e2e-tests/e2e.spec.js

@@ -0,0 +1,56 @@
+const { test, describe, expect } = require('@playwright/test')
+
+describe('Pokedex', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('front page can be opened', async ({ page }) => {
+    await expect(page.getByText('ivysaur')).toBeVisible()
+    await expect(page.getByText('Pokémon and Pokémon character names are trademarks of Nintendo.')).toBeVisible()
+  })
+
+  test('can navigate to individual pokemon page', async ({ page }) => {
+    await page.getByText('ivysaur').click()
+    await expect(page.getByText('ivysaur', { exact: true })).toBeVisible()
+    await expect(page.getByTestId('stats')).toBeVisible()
+  })
+
+  test('navigation between pokemons works', async ({ page }) => {
+    await page.getByText('ivysaur').click()
+    await page.getByText('Next').click()
+    await expect(page.getByText('venusaur', { exact: true })).toBeVisible()
+    await page.getByText('Previous').click()
+    await expect(page.getByText('ivysaur', { exact: true })).toBeVisible()
+    await page.getByText('Home').click()
+    await expect(page.getByText('ivysaur')).toBeVisible()
+  })
+
+  test('pokemon details are displayed correctly', async ({ page }) => {
+    await page.getByText('ivysaur').click()
+    await expect(page.locator('.pokemon-image')).toBeVisible()
+    const statsTable = page.getByTestId('stats')
+    await expect(statsTable).toBeVisible()
+    await expect(page.locator('td.pokemon-stats-name', { hasText: 'hp' })).toBeVisible()
+    await expect(page.locator('td.pokemon-stats-name', { hasText: 'special attack' })).toBeVisible()
+    await expect(page.locator('td.pokemon-stats-name', { hasText: 'special defense' })).toBeVisible()
+    await expect(page.locator('.pokemon-abilities')).toBeVisible()
+  })
+
+  test('pokemon loading state and data fetching works', async ({ page }) => {
+    await page.route('**/api.co/api/v2/pokemon/**', async (route) => {
+      await new Promise(resolve => setTimeout(resolve, 1000)) // Add 1s delay
+      await route.continue()
+    })
+    await page.getByText('ivysaur').click()
+    await expect(page.locator('.pokemon-info')).toBeVisible()
+  })
+
+  test('pokemon type affects the page styling', async ({ page }) => {
+    await page.getByText('ivysaur').click()
+    await expect(page.locator('.pokemon-page')).toBeVisible()
+    const pokemonPage = page.locator('.pokemon-page')
+    const typeClass = await pokemonPage.getAttribute('class')
+    expect(typeClass).toMatch(/pokemon-type-\w+/)
+  })
+})