Test for onboarding after GitHub OAuth (#680)

* chore: gituhb oauth onboarding test

* chore: fix typos

* chore: rm duplicate test

* chore: add 'title' to Icon component

* chore: isolate github oauth test

* chore: rm NB abbreviation in comment

* chore: do not export 'getGitHubUsers' helper

* chore: add 'deleteGitHubUser' helper, use for e2e test cleanup

* chore: verify the user is not in system before signup

* chore: update 'normalizeUsername' to work with string only

* chore: use 'newConnection' and 'newUser' const names

* chore: use 'testInfo.testId' as GitHub 'code' value

* chore: split GitHub OAuth test into testcases

* Use ternary rather than logical AND in JSX

Co-authored-by: Kent C. Dodds <[email protected]>

* Use 'loading' rather than 'spinner' for animated spin icon

Co-authored-by: Kent C. Dodds <[email protected]>

* Use 'success' rather than 'check mark' for successful submission icon

Co-authored-by: Kent C. Dodds <[email protected]>

* Use 'error' rather than 'cross' for submission failure icon

Co-authored-by: Kent C. Dodds <[email protected]>

* chore: update e2e after changes to icon title

* chore: stick to test naming convention

* chore: add 'prepareGitHubUser' fixture for onboarding tests after OAuth

---------

Co-authored-by: Kent C. Dodds <[email protected]>

Author: rustworthy

app/components/ui/icon.tsx

@@ -33,23 +33,34 @@ const childrenSizeClassName = {
  * Alternatively, if you're not ok with the icon being to the left of the text,
  * you need to wrap the icon and text in a common parent and set the parent to
  * display "flex" (or "inline-flex") with "items-center" and a reasonable gap.
+ *
+ * Pass `title` prop to the `Icon` component to get `<title>` element rendered
+ * in the SVG container, providing this way for accessibility.
  */
 export function Icon({
 	name,
 	size = 'font',
 	className,
+	title,
 	children,
 	...props
 }: SVGProps<SVGSVGElement> & {
 	name: IconName
 	size?: Size
+	title?: string
 }) {
 	if (children) {
 		return (
 			<span
 				className={`inline-flex items-center ${childrenSizeClassName[size]}`}
 			>
-				<Icon name={name} size={size} className={className} {...props} />
+				<Icon
+					name={name}
+					size={size}
+					className={className}
+					title={title}
+					{...props}
+				/>
 				{children}
 			</span>
 		)
@@ -59,6 +70,7 @@ export function Icon({
 			{...props}
 			className={cn(sizeClassName[size], 'inline self-center', className)}
 		>
+			{title ? <title>{title}</title> : null}
 			<use href={`${href}#${name}`} />
 		</svg>
 	)

app/components/ui/status-button.tsx

@@ -25,18 +25,31 @@ export const StatusButton = React.forwardRef<
 	})
 	const companion = {
 		pending: delayedPending ? (
-			<div className="inline-flex h-6 w-6 items-center justify-center">
-				<Icon name="update" className="animate-spin" />
+			<div
+				role="status"
+				className="inline-flex h-6 w-6 items-center justify-center"
+			>
+				<Icon name="update" className="animate-spin" title="loading" />
 			</div>
 		) : null,
 		success: (
-			<div className="inline-flex h-6 w-6 items-center justify-center">
-				<Icon name="check" />
+			<div
+				role="status"
+				className="inline-flex h-6 w-6 items-center justify-center"
+			>
+				<Icon name="check" title="success" />
 			</div>
 		),
 		error: (
-			<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive">
-				<Icon name="cross-1" className="text-destructive-foreground" />
+			<div
+				role="status"
+				className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive"
+			>
+				<Icon
+					name="cross-1"
+					className="text-destructive-foreground"
+					title="error"
+				/>
 			</div>
 		),
 		idle: null,

app/routes/_auth+/auth.$provider.callback.ts

@@ -8,6 +8,10 @@ import { ProviderNameSchema, providerLabels } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { ensurePrimary } from '#app/utils/litefs.server.ts'
 import { combineHeaders } from '#app/utils/misc.tsx'
+import {
+	normalizeEmail,
+	normalizeUsername,
+} from '#app/utils/providers/provider.ts'
 import {
 	destroyRedirectToHeader,
 	getRedirectCookieValue,
@@ -140,8 +144,11 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 	verifySession.set(onboardingEmailSessionKey, profile.email)
 	verifySession.set(prefilledProfileKey, {
 		...profile,
-		email: profile.email.toLowerCase(),
-		username: profile.username?.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase(),
+		email: normalizeEmail(profile.email),
+		username:
+			typeof profile.username === 'string'
+				? normalizeUsername(profile.username)
+				: undefined,
 	})
 	verifySession.set(providerIdKey, profile.id)
 	const onboardingRedirect = [

app/routes/_auth+/onboarding.tsx

@@ -129,7 +129,7 @@ export const meta: MetaFunction = () => {
 	return [{ title: 'Setup Epic Notes Account' }]
 }
 
-export default function SignupRoute() {
+export default function OnboardingRoute() {
 	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()

app/routes/_auth+/onboarding_.$provider.tsx

@@ -177,7 +177,7 @@ export const meta: MetaFunction = () => {
 	return [{ title: 'Setup Epic Notes Account' }]
 }
 
-export default function SignupRoute() {
+export default function OnboardingProviderRoute() {
 	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()

app/utils/providers/constants.ts

@@ -0,0 +1,3 @@
+export const MOCK_CODE_GITHUB = 'MOCK_CODE_GITHUB_KODY'
+
+export const MOCK_CODE_GITHUB_HEADER = 'x-mock-code-github'

app/utils/providers/github.server.ts

@@ -5,6 +5,7 @@ import { z } from 'zod'
 import { cache, cachified } from '../cache.server.ts'
 import { connectionSessionStorage } from '../connections.server.ts'
 import { type Timings } from '../timing.server.ts'
+import { MOCK_CODE_GITHUB_HEADER, MOCK_CODE_GITHUB } from './constants.ts'
 import { type AuthProvider } from './provider.ts'
 
 const GitHubUserSchema = z.object({ login: z.string() })
@@ -19,7 +20,9 @@ const GitHubUserParseResult = z
 		}),
 	)
 
-const shouldMock = process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_')
+const shouldMock =
+	process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_') ||
+	process.env.NODE_ENV === 'test'
 
 export class GitHubProvider implements AuthProvider {
 	getAuthStrategy() {
@@ -87,7 +90,11 @@ export class GitHubProvider implements AuthProvider {
 		)
 		const state = cuid()
 		connectionSession.set('oauth2:state', state)
-		const code = 'MOCK_CODE_GITHUB_KODY'
+
+		// allows us to inject a code when running e2e tests,
+		// but falls back to a pre-defined 🐨 constant
+		const code =
+			request.headers.get(MOCK_CODE_GITHUB_HEADER) || MOCK_CODE_GITHUB
 		const searchParams = new URLSearchParams({ code, state })
 		throw redirect(`/auth/github/callback?${searchParams}`, {
 			headers: {

app/utils/providers/provider.ts

@@ -21,3 +21,8 @@ export interface AuthProvider {
 		link?: string | null
 	}>
 }
+
+export const normalizeEmail = (s: string) => s.toLowerCase()
+
+export const normalizeUsername = (s: string) =>
+	s.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase()

app/utils/user-validation.ts

@@ -1,9 +1,12 @@
 import { z } from 'zod'
 
+export const USERNAME_MIN_LENGTH = 3
+export const USERNAME_MAX_LENGTH = 20
+
 export const UsernameSchema = z
 	.string({ required_error: 'Username is required' })
-	.min(3, { message: 'Username is too short' })
-	.max(20, { message: 'Username is too long' })
+	.min(USERNAME_MIN_LENGTH, { message: 'Username is too short' })
+	.max(USERNAME_MAX_LENGTH, { message: 'Username is too long' })
 	.regex(/^[a-zA-Z0-9_]+$/, {
 		message: 'Username can only include letters, numbers, and underscores',
 	})

playwright.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
 		stderr: 'pipe',
 		env: {
 			PORT,
+			NODE_ENV: 'test',
 		},
 	},
 })