add tests for preview

.vscode/settings.json

@@ -1,3 +1,12 @@
 {
-  "cSpell.words": ["doctypes", "rehype", "resumarkdown", "résumé", "spacebar", "tablist", "testid"]
+  "cSpell.words": [
+    "doctypes",
+    "rehype",
+    "resumarkdown",
+    "résumé",
+    "spacebar",
+    "tablist",
+    "testid",
+    "textbox"
+  ]
 }

tests/general.test.ts

@@ -13,3 +13,23 @@ test('nav items work', async ({ page }) => {
     await expect(page.getByTestId(`${await tab.textContent()}-pane`)).toBeVisible();
   }
 });
+
+test('preview accepts content', async ({ page }) => {
+  await page.goto('/');
+  await page.getByText('content').click();
+  await page.getByRole('textbox').fill('# résumé');
+
+  const previewFrame = page.getByTitle('résumé preview').contentFrame();
+  await expect(previewFrame.getByRole('heading')).toHaveText('résumé');
+});
+
+test('preview accepts styles', async ({ page }) => {
+  await page.goto('/');
+  await page.getByText('content').click();
+  await page.getByRole('textbox').fill('# blah');
+  await page.getByText('style', { exact: true }).click();
+  await page.getByRole('textbox').fill('h1 { color: red; }');
+
+  const previewFrame = page.getByTitle('résumé preview').contentFrame();
+  await expect(previewFrame.getByRole('heading')).toHaveCSS('color', 'rgb(255, 0, 0)');
+});