Add test for monaco, add screenshots

wandb · Jun 22, 2024 · 68325a8 · 68325a8
1 parent 08c3159
commit 68325a8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -170,7 +170,9 @@ jobs:
         if: always()
         with:
           name: playwright-report
-          path: ./frontend/playwright-report/
+          path: |
+            ./frontend/playwright-report/
+            ./frontend/screenshots/
           retention-days: 30
 
   release:

diff --git a/frontend/integration_tests/basic.spec.ts b/frontend/integration_tests/basic.spec.ts
@@ -17,7 +17,7 @@ test('test good flow', async ({ page }) => {
 		.click()
 	await page.getByRole('button', { name: 'Change theme', exact: true }).click()
 	await page.getByRole('button', { name: 'Orange' }).click()
-	const iframe = await page.frameLocator('#version-0')
+	let iframe = await page.frameLocator('#version-0')
 	await expect(iframe.locator('h1')).toHaveText('Hello, world!')
 	await expect(iframe.locator('img')).toHaveAttribute(
 		'src',
@@ -27,4 +27,25 @@ test('test good flow', async ({ page }) => {
 	await annotator?.screenshot({
 		path: './screenshots/annotator-screenshot.png'
 	})
+	await page.getByRole('button', { name: 'Edit HTML', exact: true }).click()
+	let monacoEditor = page.locator('.monaco-editor').nth(0)
+	await monacoEditor.click({
+		position: {
+			x: 300,
+			y: 300
+		}
+	})
+	await monacoEditor.click({
+		position: {
+			x: 300,
+			y: 300
+		}
+	})
+	await page.keyboard.type(
+		'<div class="edited">Inserted some cool text</div>\n'
+	)
+	iframe = await page.frameLocator('#version-1')
+	await expect(iframe.locator('div.edited')).toHaveText(
+		'Inserted some cool text'
+	)
 })
diff --git a/frontend/src/components/HtmlAnnotator.tsx b/frontend/src/components/HtmlAnnotator.tsx
@@ -767,6 +767,7 @@ export default function HTMLAnnotator({ error, id }: HTMLAnnotatorProps) {
 									}}
 								>
 									<CodeIcon strokeWidth={4} className='h-5 w-5' />
+									<span className='sr-only'>Edit HTML</span>
 								</Button>
 							</TooltipTrigger>
 							<TooltipContent>Edit HTML</TooltipContent>