Deliverable 5-Test Driven Development

.env.development

@@ -1,2 +1,2 @@
 VITE_PIZZA_SERVICE_URL=http://localhost:3000
-VITE_PIZZA_FACTORY_URL=https://pizza-factory.cs329.click
+VITE_PIZZA_FACTORY_URL=https://pizza-factory.cs329.click

.github/workflows/ci.yml

@@ -0,0 +1,76 @@
+name: CI Pipeline
+
+on:
+  push:
+    branches:
+      - main
+      - user-interface-testing
+  workflow_dispatch:
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.set_version.outputs.version }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: set version
+        id: set_version
+        run: |
+          version=$(date +'%Y%m%d.%H%M%S')
+          echo "version=$version" >> "$GITHUB_OUTPUT"
+          printf '{"version": "%s" }' "$version" > public/version.json
+
+      - name: Build
+        run: |
+          npm ci && npm run build
+
+      - name: Run tests
+        run: |
+          npx playwright install --with-deps chromium
+          npm run test:coverage
+
+      - name: Update coverage
+        run: |
+          coverage=$(jq '.total.lines.pct' coverage/coverage-summary.json)
+          color=$(echo "$coverage < 80" | bc | awk '{if ($1) print "red"; else print "green"}')
+          curl -s -X POST "https://pizza-factory.cs329.click/api/badge/${{ secrets.NET_ID }}/jwtpizzacoverage?label=Coverage&value=$coverage%25&color=$color" -H "authorization: bearer ${{ secrets.FACTORY_API_KEY }}"
+
+      - name: Update dist artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: package
+          path: dist/
+  deploy:
+    needs: build
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+    env:
+      version: ${{needs.build.outputs.version}}
+    steps:
+      - name: Create OIDC token to AWS
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          audience: sts.amazonaws.com
+          aws-region: us-east-1
+          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT }}:role/${{ secrets.CI_IAM_ROLE }}
+
+      - name: Download dist artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: dist/
+
+      - name: Push to AWS S3
+        run: |
+          echo Deploying $version
+          aws s3 cp dist s3://${{ secrets.APP_BUCKET }} --recursive
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

.github/workflows/tests.yml

@@ -0,0 +1,37 @@
+name: tests
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.set_version.outputs.version }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: set version
+        id: set_version
+        run: |
+          version=$(date +'%Y%m%d.%H%M%S')
+          echo "version=$version" >> "$GITHUB_OUTPUT"
+          printf '{"version": "%s" }' "$version" > public/version.json
+
+      - name: Build
+        run: |
+          npm ci && npm run build
+
+      - name: Run tests
+        run: |
+          npx playwright install --with-deps chromium
+          npm run test:coverage

.gitignore

@@ -5,3 +5,13 @@ config.js
 coverage
 dist
 **/.vite
+.idea
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+.nyc_output

.nycrc.json

@@ -0,0 +1,7 @@
+{
+  "check-coverage": true,
+  "branches": 0,
+  "lines": 80,
+  "functions": 0,
+  "statements": 0
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 4,
+  "trailingComma": "all"
+}

README.md

@@ -1,10 +1,14 @@
 # 🍕 JWT Pizza
 
-![Coverage badge](https://pizza-factory.cs329.click/api/badge/accountId/jwtpizzacoverage?t=1)
+![Coverage badge](https://pizza-factory.cs329.click/api/badge/cjmotyer/jwtpizzacoverage)  
+[![CI Pipeline](https://github.com/cjmot/jwt-pizza/actions/workflows/ci.yml/badge.svg)](https://github.com/cjmot/jwt-pizza/actions/workflows/ci.yml)
 
-A JSON Web Token, or [JWT](https://jwt.io/introduction), (pronounced JOT) is a digitally signed transfer of information using JSON notation. Because you can validate the digital signature you can buy JWT pizzas with confidence.
+A JSON Web Token, or [JWT](https://jwt.io/introduction), (pronounced JOT) is a digitally signed transfer of information
+using JSON notation. Because you can validate the digital signature you can buy JWT pizzas with confidence.
 
-`JWT Pizza` takes the next stage of digital evolution by allowing you to buy pizzas that you can never actually eat. Not only does JWT exchange bitcoin and give you nothing in return, it also allows for you to be come a franchisee and turn the whole vapor company into an MLM.
+`JWT Pizza` takes the next stage of digital evolution by allowing you to buy pizzas that you can never actually eat. Not
+only does JWT exchange bitcoin and give you nothing in return, it also allows for you to be come a franchisee and turn
+the whole vapor company into an MLM.
 
 You can see a working example of the application at [pizza.cs329.click](https://pizza.cs329.click)
 
@@ -30,7 +34,8 @@ You can see a working example of the application at [pizza.cs329.click](https://
 
 ## Development notes
 
-JWT Pizza uses Vite, React, Tailwind, and Preline. The following contains some notes about how these components were integrated into the project.
+JWT Pizza uses Vite, React, Tailwind, and Preline. The following contains some notes about how these components were
+integrated into the project.
 
 ### Vite
 
@@ -45,15 +50,16 @@ Modify `package.json`
 
 ```json
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
+"dev": "vite",
+"build": "vite build",
+"preview": "vite preview"
+},
 ```
 
 ### React
 
-React works out of the box with Vite, but we do need to install the desired React packages. The `index.html` file loads `index.jsx` which then loads the app component (`src/app.jsx`).
+React works out of the box with Vite, but we do need to install the desired React packages. The `index.html` file loads
+`index.jsx` which then loads the app component (`src/app.jsx`).
 
 ```sh
 npm install react react-dom react-router-dom
@@ -73,11 +79,11 @@ Modify `tailwind.config.js`
 ```js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['index.html', './src/**/*.{html,js,jsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: ['index.html', './src/**/*.{html,js,jsx}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
 };
 ```
 
@@ -92,17 +98,19 @@ Create a `main.css` and add the basic Tailwind directives.
 Modify `index.html` to include tailwind output.css.
 
 ```html
+
 <head>
-  ...
-  <link href="./main.css" rel="stylesheet" />
+    ...
+    <link href="./main.css" rel="stylesheet"/>
 </head>
 ```
 
 Now when you run with `npm run dev` the css will automatically be generated.
 
 ### Preline
 
-Added the Tailwind [Preline component library](https://preline.co/) so that I can use all of their nifty nav, slideshow, containers, and cards.
+Added the Tailwind [Preline component library](https://preline.co/) so that I can use all of their nifty nav, slideshow,
+containers, and cards.
 
 ```sh
 npm i preline
@@ -114,15 +122,15 @@ Updated the tailwind config to use preline.
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['index.html', './src/**/*.{html,js,jsx}', './node_modules/preline/preline.js'],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-      },
+    content: ['index.html', './src/**/*.{html,js,jsx}', './node_modules/preline/preline.js'],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+            },
+        },
     },
-  },
-  plugins: [require('preline/plugin')],
+    plugins: [require('preline/plugin')],
 };
 ```
 
@@ -135,15 +143,15 @@ import 'preline/preline';
 Initialize components whenever the page location changes.
 
 ```js
-import { useLocation, Routes, Route, NavLink } from 'react-router-dom';
+import {useLocation, Routes, Route, NavLink} from 'react-router-dom';
 
 export default function App() {
-  const location = useLocation();
+    const location = useLocation();
 
-  useEffect(() => {
-    window.HSStaticMethods.autoInit();
-  }, [location.pathname]);
-  //...
+    useEffect(() => {
+        window.HSStaticMethods.autoInit();
+    }, [location.pathname]);
+//...
 ```
 
 ### Icons