test(e2e): align specs with current page structure
join-flow:
- Form now requires Community Guidelines agreement; tests check the
checkbox before expecting submit to enable.
- Contribution input is a numeric field with preset chip buttons, not a
USelect with $0/mo options — fill the input directly.
- Success state lives in SignupFlowOverlay ("Welcome to Ghost Guild!");
no .success-box exists. Match by heading instead.
- Inline .error-box renders OUTSIDE <form>, so duplicate-email assertion
uses .signup-flow-overlay .error-box (which is the user-facing error).
member-profile:
- "How you appear to other members" copy was retired; replace with the
stable "Show in Member Directory" structural label.
- Add waitForLoadState('networkidle') after goto for ClientOnly auth
hydration so "Edit Profile" reliably appears within timeout.
board:
- Add waitForLoadState('networkidle') after goto so the action-bar's
"+ New Post" click handler is bound before the test clicks.
- Submit button is named exactly "Post" — disambiguate from "+ New Post"
buttons with { exact: true }.
- Delete is a two-step in-card confirm (Delete → Confirm), not a native
browser dialog; drop the page.once('dialog') listener.
admin-board-channels:
- Channel name placeholder is "e.g., coop-formation" (no leading #).
- Slack Channel ID input only appears in the Edit modal (v-if="editingId"),
not on Create — Slack channel is auto-created server-side. Drop the
slack ID fill from the Create step.
- Add waitForLoadState('networkidle') before opening the modal.
This commit is contained in:
parent
3f42307c64
commit
bb0dbfe53e
4 changed files with 32 additions and 18 deletions
|
|
@ -11,6 +11,7 @@ test.describe('Admin board channels page', () => {
|
||||||
|
|
||||||
test('create, edit, and delete a channel', async ({ adminPage }) => {
|
test('create, edit, and delete a channel', async ({ adminPage }) => {
|
||||||
await adminPage.goto('/admin/board-channels')
|
await adminPage.goto('/admin/board-channels')
|
||||||
|
await adminPage.waitForLoadState('networkidle')
|
||||||
await expect(adminPage.getByRole('heading', { name: 'Board Channels' })).toBeVisible({
|
await expect(adminPage.getByRole('heading', { name: 'Board Channels' })).toBeVisible({
|
||||||
timeout: 15000,
|
timeout: 15000,
|
||||||
})
|
})
|
||||||
|
|
@ -18,14 +19,14 @@ test.describe('Admin board channels page', () => {
|
||||||
const suffix = Date.now().toString().slice(-6)
|
const suffix = Date.now().toString().slice(-6)
|
||||||
const channelName = `e2e-channel-${suffix}`
|
const channelName = `e2e-channel-${suffix}`
|
||||||
const editedName = `e2e-channel-${suffix}-edited`
|
const editedName = `e2e-channel-${suffix}-edited`
|
||||||
const slackId = `C${suffix}XYZ`
|
|
||||||
|
|
||||||
// --- Create ---
|
// --- Create ---
|
||||||
|
// Create flow only takes a name; the Slack channel ID is auto-assigned on
|
||||||
|
// creation and only becomes editable in the Edit modal.
|
||||||
await adminPage.getByRole('button', { name: '+ New Channel' }).click()
|
await adminPage.getByRole('button', { name: '+ New Channel' }).click()
|
||||||
await expect(adminPage.getByRole('heading', { name: 'New Channel' })).toBeVisible()
|
await expect(adminPage.getByRole('heading', { name: 'New Channel' })).toBeVisible()
|
||||||
|
|
||||||
await adminPage.locator('input[placeholder="e.g., #coop-formation"]').fill(channelName)
|
await adminPage.locator('input[placeholder="e.g., coop-formation"]').fill(channelName)
|
||||||
await adminPage.locator('input[placeholder="C0123456789"]').fill(slackId)
|
|
||||||
|
|
||||||
// Select the first available cooperative tag if any are present
|
// Select the first available cooperative tag if any are present
|
||||||
const firstTagCheckbox = adminPage.locator('.tag-select input[type="checkbox"]').first()
|
const firstTagCheckbox = adminPage.locator('.tag-select input[type="checkbox"]').first()
|
||||||
|
|
@ -44,7 +45,7 @@ test.describe('Admin board channels page', () => {
|
||||||
await row.getByRole('button', { name: 'Edit' }).click()
|
await row.getByRole('button', { name: 'Edit' }).click()
|
||||||
|
|
||||||
await expect(adminPage.getByRole('heading', { name: 'Edit Channel' })).toBeVisible()
|
await expect(adminPage.getByRole('heading', { name: 'Edit Channel' })).toBeVisible()
|
||||||
const nameInput = adminPage.locator('input[placeholder="e.g., #coop-formation"]')
|
const nameInput = adminPage.locator('input[placeholder="e.g., coop-formation"]')
|
||||||
await nameInput.fill(editedName)
|
await nameInput.fill(editedName)
|
||||||
await adminPage.getByRole('button', { name: 'Save Changes' }).click()
|
await adminPage.getByRole('button', { name: 'Save Changes' }).click()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ test.describe('Board page', () => {
|
||||||
|
|
||||||
test('clicking New Post reveals the form', async ({ memberPage }) => {
|
test('clicking New Post reveals the form', async ({ memberPage }) => {
|
||||||
await memberPage.goto('/board')
|
await memberPage.goto('/board')
|
||||||
|
await memberPage.waitForLoadState('networkidle')
|
||||||
await expect(memberPage.getByRole('button', { name: '+ New Post' }).first()).toBeVisible({
|
await expect(memberPage.getByRole('button', { name: '+ New Post' }).first()).toBeVisible({
|
||||||
timeout: 15000,
|
timeout: 15000,
|
||||||
})
|
})
|
||||||
|
|
@ -40,6 +41,7 @@ test.describe('Board page', () => {
|
||||||
|
|
||||||
test('create, edit, and delete own post', async ({ memberPage }) => {
|
test('create, edit, and delete own post', async ({ memberPage }) => {
|
||||||
await memberPage.goto('/board')
|
await memberPage.goto('/board')
|
||||||
|
await memberPage.waitForLoadState('networkidle')
|
||||||
await expect(memberPage.getByRole('button', { name: '+ New Post' }).first()).toBeVisible({
|
await expect(memberPage.getByRole('button', { name: '+ New Post' }).first()).toBeVisible({
|
||||||
timeout: 15000,
|
timeout: 15000,
|
||||||
})
|
})
|
||||||
|
|
@ -55,7 +57,7 @@ test.describe('Board page', () => {
|
||||||
await memberPage.locator('#post-title').fill(originalTitle)
|
await memberPage.locator('#post-title').fill(originalTitle)
|
||||||
await memberPage.locator('#post-seeking').fill('Playwright test seeking text')
|
await memberPage.locator('#post-seeking').fill('Playwright test seeking text')
|
||||||
|
|
||||||
await memberPage.getByRole('button', { name: 'Post' }).click()
|
await memberPage.getByRole('button', { name: 'Post', exact: true }).click()
|
||||||
|
|
||||||
await expect(memberPage.getByRole('heading', { name: originalTitle })).toBeVisible({
|
await expect(memberPage.getByRole('heading', { name: originalTitle })).toBeVisible({
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
|
|
@ -75,10 +77,10 @@ test.describe('Board page', () => {
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
})
|
})
|
||||||
|
|
||||||
// --- Delete (confirm dialog) ---
|
// --- Delete (in-card two-step confirm; not a native dialog) ---
|
||||||
memberPage.once('dialog', (dialog) => dialog.accept())
|
|
||||||
const editedCard = memberPage.locator('article.board-post', { hasText: editedTitle })
|
const editedCard = memberPage.locator('article.board-post', { hasText: editedTitle })
|
||||||
await editedCard.getByRole('button', { name: 'Delete' }).click()
|
await editedCard.getByRole('button', { name: 'Delete' }).click()
|
||||||
|
await editedCard.getByRole('button', { name: 'Confirm' }).click()
|
||||||
|
|
||||||
await expect(memberPage.getByRole('heading', { name: editedTitle })).not.toBeVisible({
|
await expect(memberPage.getByRole('heading', { name: editedTitle })).not.toBeVisible({
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
|
|
|
||||||
|
|
@ -68,8 +68,12 @@ test.describe('Join page — member signup flow', () => {
|
||||||
await page.locator('#join-name').fill('Test User')
|
await page.locator('#join-name').fill('Test User')
|
||||||
await expect(page.locator('.form-submit')).toBeDisabled()
|
await expect(page.locator('.form-submit')).toBeDisabled()
|
||||||
|
|
||||||
// Fill email too — now all fields are populated and button should be enabled
|
// Fill email — agreement still unchecked, so still disabled
|
||||||
await page.locator('#join-email').fill('incomplete-test@example.com')
|
await page.locator('#join-email').fill('incomplete-test@example.com')
|
||||||
|
await expect(page.locator('.form-submit')).toBeDisabled()
|
||||||
|
|
||||||
|
// Check the Community Guidelines agreement — now all required fields satisfied
|
||||||
|
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||||||
await expect(page.locator('.form-submit')).toBeEnabled()
|
await expect(page.locator('.form-submit')).toBeEnabled()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -83,8 +87,9 @@ test.describe('Join page — member signup flow', () => {
|
||||||
await page.locator('#join-name').fill('E2E Test User')
|
await page.locator('#join-name').fill('E2E Test User')
|
||||||
await page.locator('#join-email').fill(uniqueEmail)
|
await page.locator('#join-email').fill(uniqueEmail)
|
||||||
await page.locator('#circle-community').check({ force: true })
|
await page.locator('#circle-community').check({ force: true })
|
||||||
await page.locator('#join-contribution').click()
|
// Contribution is now a numeric input with preset chips, not a select
|
||||||
await page.getByRole('option', { name: '$0/mo' }).click()
|
await page.locator('#join-contribution').fill('0')
|
||||||
|
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||||||
|
|
||||||
await expect(page.locator('.form-submit')).toBeEnabled()
|
await expect(page.locator('.form-submit')).toBeEnabled()
|
||||||
|
|
||||||
|
|
@ -93,8 +98,10 @@ test.describe('Join page — member signup flow', () => {
|
||||||
|
|
||||||
await page.locator('.form-submit').click()
|
await page.locator('.form-submit').click()
|
||||||
|
|
||||||
// Free tier creates subscription then shows confirmation (step 3)
|
// Free tier flips the SignupFlowOverlay into its success state
|
||||||
await expect(page.locator('.success-box')).toBeVisible({ timeout: 15000 })
|
await expect(
|
||||||
|
page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
|
||||||
|
).toBeVisible({ timeout: 15000 })
|
||||||
})
|
})
|
||||||
|
|
||||||
test('duplicate email shows error', async ({ page }) => {
|
test('duplicate email shows error', async ({ page }) => {
|
||||||
|
|
@ -109,12 +116,13 @@ test.describe('Join page — member signup flow', () => {
|
||||||
await page.locator('#join-name').fill('Dup Test User')
|
await page.locator('#join-name').fill('Dup Test User')
|
||||||
await page.locator('#join-email').fill(duplicateEmail)
|
await page.locator('#join-email').fill(duplicateEmail)
|
||||||
await page.locator('#circle-community').check({ force: true })
|
await page.locator('#circle-community').check({ force: true })
|
||||||
await page.locator('#join-contribution').click()
|
await page.locator('#join-contribution').fill('0')
|
||||||
await page.getByRole('option', { name: '$0/mo' }).click()
|
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||||||
await page.locator('.form-submit').click()
|
await page.locator('.form-submit').click()
|
||||||
|
|
||||||
// Should show an error about the email already existing
|
// Helcim 409 puts SignupFlowOverlay into its error state
|
||||||
await expect(page.locator('.error-box')).toBeVisible({ timeout: 10000 })
|
const overlayError = page.locator('.signup-flow-overlay .error-box')
|
||||||
await expect(page.locator('.error-box')).toContainText(/already/i)
|
await expect(overlayError).toBeVisible({ timeout: 10000 })
|
||||||
|
await expect(overlayError).toContainText(/already/i)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,11 @@ import { test, expect } from './helpers/fixtures.js'
|
||||||
test.describe('Member profile page', () => {
|
test.describe('Member profile page', () => {
|
||||||
test('profile page loads', async ({ adminPage }) => {
|
test('profile page loads', async ({ adminPage }) => {
|
||||||
await adminPage.goto('/member/profile')
|
await adminPage.goto('/member/profile')
|
||||||
|
await adminPage.waitForLoadState('networkidle')
|
||||||
// Auth is checked client-side in onMounted — wait for profile form to render
|
// Auth is checked client-side in onMounted — wait for profile form to render
|
||||||
await expect(adminPage.getByText('Edit Profile')).toBeVisible({ timeout: 15000 })
|
await expect(adminPage.getByText('Edit Profile')).toBeVisible({ timeout: 15000 })
|
||||||
await expect(adminPage.getByText('How you appear to other members')).toBeVisible()
|
// Verify a stable structural section label, not transient marketing copy
|
||||||
|
await expect(adminPage.getByText('Show in Member Directory')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('form fields are present', async ({ adminPage }) => {
|
test('form fields are present', async ({ adminPage }) => {
|
||||||
|
|
@ -24,6 +26,7 @@ test.describe('Member profile page', () => {
|
||||||
|
|
||||||
test('bio field accepts input', async ({ adminPage }) => {
|
test('bio field accepts input', async ({ adminPage }) => {
|
||||||
await adminPage.goto('/member/profile')
|
await adminPage.goto('/member/profile')
|
||||||
|
await adminPage.waitForLoadState('networkidle')
|
||||||
await expect(adminPage.getByText('Edit Profile')).toBeVisible({ timeout: 15000 })
|
await expect(adminPage.getByText('Edit Profile')).toBeVisible({ timeout: 15000 })
|
||||||
|
|
||||||
const bio = adminPage.locator('textarea[placeholder*="Share your background"]')
|
const bio = adminPage.locator('textarea[placeholder*="Share your background"]')
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue