feat: article creation modal

web/visual/states.ts

@@ -203,6 +203,38 @@ async function typeExactBodyLength(page: Page, totalLength: number) {
 	await page.keyboard.insertText(inner)
 }
 
+const newArticleTitle = 'Choosing tiles for a small bathroom'
+const newArticleBody = 'Small rooms show every grout line, so we start with the floor.'
+
+function newArticleHomeApi(overrides: Record<string, ApiMock> = {}): Record<string, ApiMock> {
+	return {
+		'GET /v1/auth/me': verifiedSession,
+		'GET /v1/article/': { status: 200, body: sixArticlesFixture },
+		...overrides,
+	}
+}
+
+async function openNewArticleModal(page: Page) {
+	await page.getByRole('button', { name: 'New article' }).click()
+	await page.getByRole('dialog').waitFor()
+}
+
+async function fillNewArticleValid(page: Page) {
+	await page.getByPlaceholder(`e.g. ${newArticleTitle}`).fill(newArticleTitle)
+	await page
+		.getByPlaceholder("Start writing. You'll continue in the editor.")
+		.fill(newArticleBody)
+}
+
+function submitNewArticle() {
+	return async (page: Page) => {
+		await openNewArticleModal(page)
+		await fillNewArticleValid(page)
+		await page.getByRole('button', { name: 'Create draft', exact: true }).click()
+		await page.mouse.move(0, 0)
+	}
+}
+
 export const visualStates: Record<string, Record<string, VisualState>> = {
 	home: {
 		Default: {
@@ -482,6 +514,44 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 			},
 		},
 	},
+	'new-article': {
+		Default: {
+			path: '/home',
+			now: boardNow,
+			api: newArticleHomeApi(),
+			steps: openNewArticleModal,
+		},
+		Validation: {
+			path: '/home',
+			now: boardNow,
+			api: newArticleHomeApi(),
+			steps: async (page) => {
+				await openNewArticleModal(page)
+				await page.getByPlaceholder(`e.g. ${newArticleTitle}`).fill('Ti')
+				await page.getByPlaceholder(`e.g. ${newArticleTitle}`).blur()
+				await page.getByPlaceholder("Start writing. You'll continue in the editor.").click()
+				await page.getByPlaceholder("Start writing. You'll continue in the editor.").blur()
+			},
+		},
+		Submitting: {
+			path: '/home',
+			now: boardNow,
+			api: newArticleHomeApi({ 'POST /v1/article/': { status: 201, hang: true } }),
+			steps: submitNewArticle(),
+		},
+		'Title rejected (400)': {
+			path: '/home',
+			now: boardNow,
+			api: newArticleHomeApi({ 'POST /v1/article/': { status: 400 } }),
+			steps: submitNewArticle(),
+		},
+		Error: {
+			path: '/home',
+			now: boardNow,
+			api: newArticleHomeApi({ 'POST /v1/article/': { status: 500 } }),
+			steps: submitNewArticle(),
+		},
+	},
 	verify: {
 		Verifying: {
 			path: '/register/validate?c=abc123',