02/01: add problem

Author: kettanaito

exercises/02.test-setup/01.solution.fixtures/.env.example renamed to exercises/02.test-setup/01.problem.custom-fixtures/.env.example

@@ -1,5 +1,5 @@
 {
-  "name": "exercises_02.test-setup_01.solution.fixtures",
+  "name": "exercises_02.test-setup_01.problem.custom-fixtures",
   "private": true,
   "sideEffects": false,
   "type": "module",

exercises/02.test-setup/01.solution.fixtures/.github/PULL_REQUEST_TEMPLATE.md renamed to exercises/02.test-setup/01.problem.custom-fixtures/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+// 💣 Remove this import.
+// You will be using your custom `test` and `expect` functions.
+import { test, expect } from '@playwright/test'
+
+// 🐨 Import `test` and `expect` from the "#tests/test-extend.ts" module.
+// 💰 import { this, that } from 'somewhere'
+
+test('displays the welcome heading', async ({
+	// 🐨 Import the newly created `navigate` fixture from the test context.
+	page,
+}) => {
+	// 🐨 Replace the `page.goto()` call with `navigate()`.
+	// Explore the path argument to `navigate()`. See how it provides route suggestions?
+	await page.goto('/')
+
+	await expect(
+		page.getByRole('heading', { name: 'The Epic Stack' }),
+	).toBeVisible()
+})

exercises/02.test-setup/01.solution.fixtures/.github/workflows/deploy.yml renamed to exercises/02.test-setup/01.problem.custom-fixtures/.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+// 🐨 Import `test` and `expect` from the "@playwright/test" package.
+// Alias the `test` import as `testBase`, you will need it in the future.
+// 💰 import { this as that, another } from 'package'
+//
+// 🐨 Import `href` and `type Register` from "react-router".
+// 💰 import { this, typeof that } from 'package'
+//
+// 🐨 Declare a new interface called "Fixtures".
+// In that interface, declare a "navigate" function with the following type:
+// 💰 navigate: <T extends keyof Register['pages']>(...args: Parameters<typeof href<T>>) => Promise<void>
+// 💰 interface Fixtures {}
+//
+// 🐨 Declare and export a new variable called "test".
+// Assign it the result of calling `testBase.extend()`.
+// Provide the `Fixtures` interface as a type argument to the `testBase.extend()` call.
+// 💰 export const test = value
+// 💰 testBase.extend<Arg>()
+//
+// 🐨 Provide an object as the first argument to the `testBase.extend()`.
+// In that object, declare an asynchronous function called "navigate"
+// with the following call signature:
+// 💰 { async navigate({ page }, use) {} }
+//
+// 🐨 Inside the `navigate` function, call and await the `use()` function.
+// 💰 await use()
+//
+// 📜 The `use()` function expects the implementation of your custom fixture.
+// Whatever you provide it as an argument will be exposed as the value of "navigate"
+// in your tests.
+// 🐨 Provide the implementation of the fixture as the first argument to the
+// `use()` function. The fixture must do the following:
+// - Get the arguments past by it as "...args";
+// - Call `page.goto()` and await that call.
+// - Pass `href(...args)` as the argument to `page.goto()`.
+//
+// 🐨 Finally, export the `expect` function from this module.
+// 💰 export { something }

exercises/02.test-setup/01.solution.fixtures/.gitignore renamed to exercises/02.test-setup/01.problem.custom-fixtures/.gitignore

@@ -0,0 +1,29 @@
+LITEFS_DIR="/litefs/data"
+DATABASE_PATH="./prisma/data.db"
+DATABASE_URL="file:./data.db?connection_limit=1"
+CACHE_DATABASE_PATH="./other/cache.db"
+SESSION_SECRET="super-duper-s3cret"
+HONEYPOT_SECRET="super-duper-s3cret"
+RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
+SENTRY_DSN="your-dsn"
+
+# this is set to a random value in the Dockerfile
+INTERNAL_COMMAND_TOKEN="some-made-up-token"
+
+# the mocks and some code rely on these two being prefixed with "MOCK_"
+# if they aren't then the real github api will be attempted
+GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
+GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
+GITHUB_TOKEN="MOCK_GITHUB_TOKEN"
+GITHUB_REDIRECT_URI="https://example.com/auth/github/callback"
+
+# set this to false to prevent search engines from indexing the website
+# default to allow indexing for seo safety
+ALLOW_INDEXING="true"
+
+# Tigris Object Storage (S3-compatible) Configuration
+AWS_ACCESS_KEY_ID="mock-access-key"
+AWS_SECRET_ACCESS_KEY="mock-secret-key"
+AWS_REGION="auto"
+AWS_ENDPOINT_URL_S3="https://fly.storage.tigris.dev"
+BUCKET_NAME="mock-bucket"

exercises/02.test-setup/01.solution.fixtures/.npmrc renamed to exercises/02.test-setup/01.problem.custom-fixtures/.npmrc

@@ -0,0 +1,229 @@
+name: 🚀 Deploy
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-22.04
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
+      - name: 🔬 Lint
+        run: npm run lint
+
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: ubuntu-22.04
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+
+      - name: 🏗 Build
+        run: npm run build
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
+      - name: 🔎 Type check
+        run: npm run typecheck --if-present
+
+  vitest:
+    name: ⚡ Vitest
+    runs-on: ubuntu-22.04
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
+      - name: ⚡ Run vitest
+        run: npm run test -- --coverage
+
+  playwright:
+    name: 🎭 Playwright
+    runs-on: ubuntu-22.04
+    timeout-minutes: 60
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+
+      - name: 📥 Install Playwright Browsers
+        run: npm run test:e2e:install
+
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
+      - name: 🏦 Cache Database
+        id: db-cache
+        uses: actions/cache@v4
+        with:
+          path: prisma/data.db
+          key:
+            db-cache-schema_${{ hashFiles('./prisma/schema.prisma')
+            }}-migrations_${{ hashFiles('./prisma/migrations/*/migration.sql')
+            }}
+
+      - name: 🌱 Seed Database
+        if: steps.db-cache.outputs.cache-hit != 'true'
+        run: npx prisma migrate reset --force
+
+      - name: 🏗 Build
+        run: npm run build
+
+      - name: 🎭 Playwright tests
+        run: npx playwright test
+
+      - name: 📊 Upload report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+  container:
+    name: 📦 Prepare Container
+    runs-on: ubuntu-24.04
+    # only prepare container on pushes
+    if: ${{ github.event_name == 'push' }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 50
+
+      - name: 👀 Read app name
+        uses: SebRollen/[email protected]
+        id: app_name
+        with:
+          file: 'fly.toml'
+          field: 'app'
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 📦 Build Staging Container
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        run: |
+          flyctl deploy \
+            --build-only \
+            --push \
+            --image-label ${{ github.sha }} \
+            --build-arg COMMIT_SHA=${{ github.sha }} \
+            --app ${{ steps.app_name.outputs.value }}-staging
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: 📦 Build Production Container
+        if: ${{ github.ref == 'refs/heads/main' }}
+        run: |
+          flyctl deploy \
+            --build-only \
+            --push \
+            --image-label ${{ github.sha }} \
+            --build-arg COMMIT_SHA=${{ github.sha }} \
+            --build-secret SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} \
+            --app ${{ steps.app_name.outputs.value }}
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+  deploy:
+    name: 🚀 Deploy
+    runs-on: ubuntu-24.04
+    needs: [lint, typecheck, vitest, playwright, container]
+    # only deploy on pushes
+    if: ${{ github.event_name == 'push' }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: '50'
+
+      - name: 👀 Read app name
+        uses: SebRollen/[email protected]
+        id: app_name
+        with:
+          file: 'fly.toml'
+          field: 'app'
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 🚀 Deploy Staging
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        run: |
+          flyctl deploy \
+            --image "registry.fly.io/${{ steps.app_name.outputs.value }}-staging:${{ github.sha }}" \
+            --app ${{ steps.app_name.outputs.value }}-staging
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: 🚀 Deploy Production
+        if: ${{ github.ref == 'refs/heads/main' }}
+        run: |
+          flyctl deploy \
+            --image "registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.sha }}"
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

exercises/02.test-setup/01.solution.fixtures/.prettierignore renamed to exercises/02.test-setup/01.problem.custom-fixtures/.prettierignore

@@ -0,0 +1,28 @@
+node_modules
+.DS_store
+
+/build
+/server-build
+.env
+.cache
+
+/prisma/data.db
+/prisma/data.db-journal
+/tests/prisma
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/fixtures/email/
+/tests/fixtures/uploaded/
+/tests/fixtures/openimg/
+/coverage
+
+/other/cache.db
+
+# Easy way to create temporary files/folders that won't accidentally be added to git
+*.local.*
+
+# generated files
+/app/components/ui/icons
+.react-router/

exercises/02.test-setup/01.solution.fixtures/.vscode/extensions.json renamed to exercises/02.test-setup/01.problem.custom-fixtures/.vscode/extensions.json

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+registry=https://registry.npmjs.org/