improve playwright tests (#934)

Author: nichtsam

tests/e2e/onboarding.test.ts

@@ -60,9 +60,6 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
 	await emailTextbox.fill(onboardingData.email)
 
 	await page.getByRole('button', { name: /submit/i }).click()
-	await expect(
-		page.getByRole('button', { name: /submit/i, disabled: true }),
-	).toBeVisible()
 	await expect(page.getByText(/check your email/i)).toBeVisible()
 
 	const email = await readEmail(onboardingData.email)
@@ -92,6 +89,8 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
 
 	await page.getByLabel(/^confirm password/i).fill(onboardingData.password)
 
+	await page.waitForLoadState('networkidle') // ensure js is fully loaded.
+
 	await page.getByLabel(/terms/i).check()
 
 	await page.getByLabel(/remember me/i).check()
@@ -120,9 +119,6 @@ test('onboarding with a short code', async ({ page, getOnboardingData }) => {
 	await emailTextbox.fill(onboardingData.email)
 
 	await page.getByRole('button', { name: /submit/i }).click()
-	await expect(
-		page.getByRole('button', { name: /submit/i, disabled: true }),
-	).toBeVisible()
 	await expect(page.getByText(/check your email/i)).toBeVisible()
 
 	const email = await readEmail(onboardingData.email)
@@ -173,6 +169,7 @@ test('completes onboarding after GitHub OAuth given valid user details', async (
 		name: /create an account/i,
 	})
 
+	await page.waitForLoadState('networkidle') // ensure js is fully loaded.
 	await page
 		.getByLabel(/do you agree to our terms of service and privacy policy/i)
 		.check()
@@ -313,6 +310,8 @@ test('shows help texts on entering invalid details on onboarding page after GitH
 	await expect(page).toHaveURL(/\/onboarding\/github/)
 
 	// we are all set up and ...
+
+	await page.waitForLoadState('networkidle') // ensure js is fully loaded.
 	await page
 		.getByLabel(/do you agree to our terms of service and privacy policy/i)
 		.check()
@@ -350,9 +349,6 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 	).toBeVisible()
 	await page.getByRole('textbox', { name: /username/i }).fill(user.username)
 	await page.getByRole('button', { name: /recover password/i }).click()
-	await expect(
-		page.getByRole('button', { name: /recover password/i, disabled: true }),
-	).toBeVisible()
 	await expect(page.getByText(/check your email/i)).toBeVisible()
 
 	const email = await readEmail(user.email)
@@ -377,9 +373,6 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 	await page.getByLabel(/^confirm password$/i).fill(newPassword)
 
 	await page.getByRole('button', { name: /reset password/i }).click()
-	await expect(
-		page.getByRole('button', { name: /reset password/i, disabled: true }),
-	).toBeVisible()
 
 	await expect(page).toHaveURL('/login')
 	await page.getByRole('textbox', { name: /username/i }).fill(user.username)
@@ -408,9 +401,6 @@ test('reset password with a short code', async ({ page, insertNewUser }) => {
 	).toBeVisible()
 	await page.getByRole('textbox', { name: /username/i }).fill(user.username)
 	await page.getByRole('button', { name: /recover password/i }).click()
-	await expect(
-		page.getByRole('button', { name: /recover password/i, disabled: true }),
-	).toBeVisible()
 	await expect(page.getByText(/check your email/i)).toBeVisible()
 
 	const email = await readEmail(user.email)

tests/mocks/github.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url'
 import { faker } from '@faker-js/faker'
 import fsExtra from 'fs-extra'
 import { HttpResponse, passthrough, http, type HttpHandler } from 'msw'
+import { USERNAME_MAX_LENGTH } from '#app/utils/user-validation.ts'
 
 const { json } = HttpResponse
 
@@ -54,7 +55,7 @@ function createGitHubUser(code?: string | null) {
 		code,
 		accessToken: `${code}_mock_access_token`,
 		profile: {
-			login: faker.internet.username(),
+			login: faker.internet.username().slice(0, USERNAME_MAX_LENGTH),
 			id: faker.number.int(),
 			name: faker.person.fullName(),
 			avatar_url: 'https://github.com/ghost.png',