Merge headless and waspc todoApp

Signed-off-by: Mihovil Ilakovac <[email protected]>

.github/workflows/waspc-ci.yaml

@@ -3,18 +3,18 @@ name: WASPC-CI
 on:
   push:
     paths:
-      - 'waspc/**'
+      - "waspc/**"
     branches:
       - main
       - release
   pull_request:
     paths:
-      - 'waspc/**'
+      - "waspc/**"
   create: { tags: [v*] }
   schedule:
     # Additionally run once per week (At 00:00 on Sunday) to avoid loosing cache
     # (GH deletes it after 7 days of not using it).
-    - cron: '0 0 * * 0'
+    - cron: "0 0 * * 0"
 
 env:
   WASP_TELEMETRY_DISABLE: 1
@@ -51,24 +51,24 @@ jobs:
           - macos-latest
           - windows-latest
         node-version:
-          - 'latest'
+          - "latest"
         ghc:
-          - '8.10.7'
+          - "8.10.7"
         cabal:
-          - '3.6.2.0'
+          - "3.6.2.0"
         # In addition to the default matrix, we also want to run the build job for
         # additional Node.js versions, to make sure that Wasp works with them.
         # To reduce the number of jobs, we only test the Node.js versions on
         # Ubuntu 20.04.
         include:
           - os: ubuntu-20.04
             node-version: 18
-            ghc: '8.10.7'
-            cabal: '3.6.2.0'
+            ghc: "8.10.7"
+            cabal: "3.6.2.0"
           - os: ubuntu-20.04
             node-version: 20
-            ghc: '8.10.7'
-            cabal: '3.6.2.0'
+            ghc: "8.10.7"
+            cabal: "3.6.2.0"
 
     steps:
       - name: Configure git
@@ -80,7 +80,7 @@ jobs:
           git config --global core.autocrlf input
           git config --global core.eol lf
 
-      - uses: 'actions/checkout@v3'
+      - uses: "actions/checkout@v3"
         with:
           # Workaround for a Github Checkout action bug
           # https://github.com/actions/checkout/issues/1359#issuecomment-1567902034
@@ -174,14 +174,14 @@ jobs:
         id: headless-install-dependencies
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           npm ci
 
       - name: Headless - Store Playwright's Version
         id: headless-store-playwright-version
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
           echo "Playwright's Version: $PLAYWRIGHT_VERSION"
           echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
@@ -198,18 +198,17 @@ jobs:
         id: headless-setup-playwright
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true' && matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           npx playwright install --with-deps
 
       - name: Headless - Run Playwright Tests
         id: headless-run-playwright-tests
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
-          npm ci
+          cd examples/todoApp
           # Runs the tests with the debug flag so that we can see Wasp output
-          DEBUG=pw:webserver npx playwright test
-      
+          DEBUG=pw:webserver npx playwright test --config headless-tests/
+
       - name: Run e2e tests
         run: cabal test e2e-test
 
@@ -226,7 +225,7 @@ jobs:
         with:
           draft: true
           allowUpdates: true
-          artifacts: 'waspc/artifacts/*'
+          artifacts: "waspc/artifacts/*"
           artifactErrorsFailBuild: true
           replacesArtifacts: true
           token: ${{ secrets.GITHUB_TOKEN }}

waspc/examples/todo-typescript/src/Main.css

@@ -30,7 +30,8 @@ img {
   max-height: 100px;
 }
 
-.logout {
+.logout,
+.delete-tasks {
   margin-top: 1rem;
 }
 
@@ -94,4 +95,4 @@ h1 {
 
 h2 {
   @apply text-2xl font-bold;
-}
+}

waspc/examples/todo-typescript/src/MainPage.tsx

@@ -50,7 +50,7 @@ export const MainPage = ({ user }: { user: AuthUser }) => {
       {allTasks && <TasksList tasks={allTasks} />}
       <div className="buttons">
         <button
-          className="logout"
+          className="delete-tasks"
           onClick={() => void deleteTasks(completed ?? [])}
         >
           Delete completed

waspc/examples/todoApp/.env.server.example

@@ -8,11 +8,10 @@ GOOGLE_CLIENT_ID='dummy-g-client-id.apps.googleusercontent.com'
 GITHUB_CLIENT_ID='dummy-gh-client-id'
 GITHUB_CLIENT_SECRET='dummy-gh-client-secret'
 
-# Uncomment lines below and set them to real values if you want to use smtp email sender.
-# SMTP_HOST='smtp.dummy.com'
-# SMTP_USERNAME='[email protected]'
-# SMTP_PASSWORD='dummy_pass'
-# SMTP_PORT='587'
+SMTP_HOST='smtp.dummy.com'
+SMTP_USERNAME='[email protected]'
+SMTP_PASSWORD='dummy_pass'
+SMTP_PORT='587'
 
 # Uncomment lines below and set them to real values if you want to use Keycloak Auth.
 # KEYCLOAK_CLIENT_ID='dummy-id'
@@ -24,3 +23,5 @@ DISCORD_CLIENT_SECRET='dummy-discord-client-secret'
 DISCORD_CLIENT_ID='dummy-discord-client-id'
 
 MY_ENV_VAR=123
+
+SKIP_EMAIL_VERIFICATION_IN_DEV=true

waspc/examples/todoApp/.env.server.headless

@@ -0,0 +1,22 @@
+TEST_ENV_VAR="I am test"
+
+# Dummy values here will allow app to run, but you will need real values to get Google Auth to work.
+GOOGLE_CLIENT_SECRET='dummy-g-client-secret'
+GOOGLE_CLIENT_ID='dummy-g-client-id.apps.googleusercontent.com'
+
+# Dummy values here will allow app to run, but you will need real values to get GitHub Auth to work.
+GITHUB_CLIENT_ID='dummy-gh-client-id'
+GITHUB_CLIENT_SECRET='dummy-gh-client-secret'
+
+SMTP_HOST='smtp.dummy.com'
+SMTP_USERNAME='[email protected]'
+SMTP_PASSWORD='dummy_pass'
+SMTP_PORT='587'
+
+# Dummy values here will allow app to run, but you will need real values to get Discord Auth to work.
+DISCORD_CLIENT_SECRET='dummy-discord-client-secret'
+DISCORD_CLIENT_ID='dummy-discord-client-id'
+
+MY_ENV_VAR=123
+
+SKIP_EMAIL_VERIFICATION_IN_DEV=true

waspc/examples/todoApp/.gitignore

@@ -18,3 +18,7 @@ node_modules/
 # These are config files for dotenv-vault, so we don't want to ignore them.
 !.env.project
 !.env.vault
+
+# Headless tests
+!.env.*.headless
+test-results/

waspc/headless-test/playwright.config.ts → waspc/examples/todoApp/headless-tests/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from "@playwright/test";
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,7 @@ import { defineConfig, devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: "./tests",
+  testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,34 +20,35 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? "dot" : "list",
+  reporter: process.env.CI ? 'dot' : 'list',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:3000",
+    baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
+    trace: 'on-first-retry',
   },
 
   projects: [
     {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
     },
     /* Test against mobile viewports. */
     {
-      name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
     },
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "npm run example-app:start",
+    command: 'npm run headless:start',
+
     // Wait for the backend to start
-    url: "http://localhost:3001",
+    url: 'http://localhost:3001',
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },
-});
+})

waspc/examples/todoApp/headless-tests/start.cjs

@@ -0,0 +1,32 @@
+const cp = require('child_process')
+const readline = require('linebyline')
+
+function spawn(name, cmd, args, done) {
+  const spawnOptions = {
+    detached: true,
+    stdio: ['ignore', 'pipe', 'pipe'],
+  }
+  const proc = cp.spawn(cmd, args, spawnOptions)
+
+  // We close stdin stream on the new process because otherwise the start-app
+  // process hangs.
+  // See https://github.com/wasp-lang/wasp/pull/1218#issuecomment-1599098272.
+  // proc.stdin.destroy()
+
+  readline(proc.stdout).on('line', (data) => {
+    console.log(`\x1b[0m\x1b[33m[${name}][out]\x1b[0m ${data}`)
+  })
+  readline(proc.stderr).on('line', (data) => {
+    console.log(`\x1b[0m\x1b[33m[${name}][err]\x1b[0m ${data}`)
+  })
+  proc.on('exit', done)
+}
+
+// Exit if either child fails
+const cb = (code) => {
+  if (code !== 0) {
+    process.exit(code)
+  }
+}
+spawn('app', 'npm', ['run', 'headless:start-app'], cb)
+spawn('db', 'npm', ['run', 'headless:start-db'], cb)

waspc/examples/todoApp/headless-tests/tests/crud.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test'
+import { generateRandomCredentials, performSignup } from './helpers'
+
+test.describe('CRUD test', () => {
+  const { email, password } = generateRandomCredentials()
+
+  test.describe.configure({ mode: 'serial' })
+
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage()
+
+    await performSignup(page, {
+      email,
+      password,
+    })
+
+    await expect(page.locator('body')).toContainText(
+      `You've signed up successfully! Check your email for the confirmation link.`
+    )
+  })
+
+  test('CRUD with override works', async ({ page }) => {
+    await page.goto('/login')
+
+    await page.waitForSelector('text=Log in to your account')
+
+    await page.locator("input[type='email']").fill(email)
+    await page.locator("input[type='password']").fill(password)
+    await page.getByRole('button', { name: 'Log in' }).click()
+
+    await page.waitForSelector('text=User Auth Fields Demo')
+
+    await page.goto('/crud')
+
+    await page.waitForSelector('text=Tasks')
+
+    await createTask(page, 'special filter 1')
+    await createTask(page, 'special filter 2')
+    await createTask(page, 'something else')
+
+    await expect(page.locator('body')).toContainText('special filter 1')
+    await expect(page.locator('body')).toContainText('special filter 2')
+    await expect(page.locator("li[text='something else']")).not.toBeVisible()
+  })
+})
+
+async function createTask(page: any, description: string) {
+  await page.locator("input[type='text']").fill(description)
+  await page.getByText('Create task').click()
+}

waspc/headless-test/tests/helpers.ts → waspc/examples/todoApp/headless-tests/tests/helpers.ts

@@ -2,14 +2,15 @@ import type { Page } from '@playwright/test'
 
 export async function performSignup(
   page: Page,
-  { email, password }: { email: string; password: string },
+  { email, password }: { email: string; password: string }
 ) {
   await page.goto('/signup')
 
   await page.waitForSelector('text=Create a new account')
 
   await page.locator("input[type='email']").fill(email)
   await page.locator("input[type='password']").fill(password)
+  await page.locator("input[name='address']").fill('Dummy address')
   await page.locator('button').click()
 }
 
@@ -21,7 +22,7 @@ export async function performLogin(
   }: {
     email: string
     password: string
-  },
+  }
 ) {
   await page.goto('/login')