Merge pull request #2336 from adevinta/feat-update-e2e-tests-3107

feat: update e2e tests
adevinta · Aug 1, 2024 · 1b49602 · 1b49602
2 parents fc8256f + 8026a28
commit 1b49602
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 53 deletions.
diff --git a/e2e/combobox-within-dialog/index.spec.tsx b/e2e/combobox-within-dialog/index.spec.tsx
@@ -5,10 +5,10 @@ import { BASE_URL } from '../constant'
 test('combobox within a dialog', async ({ page }) => {
   await page.goto(`${BASE_URL}/combobox-within-dialog`)
 
-  await test.step('can interact with a combobox within a dialog', async () => {
-    const openDialogButton = page.getByRole('button', { name: 'Create account' })
+  const dialogTrigger = page.getByRole('button', { name: 'Create account' })
 
-    await openDialogButton.click()
+  await test.step('can interact with a combobox within a dialog', async () => {
+    await dialogTrigger.click()
 
     await page.getByPlaceholder('Pick a book').click()
     await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()

diff --git a/e2e/dropdown-with-adjacent-buttons/index.spec.tsx b/e2e/dropdown-with-adjacent-buttons/index.spec.tsx
@@ -2,16 +2,17 @@ import { expect, test } from '@playwright/test'
 
 import { BASE_URL } from '../constant'
 
-test('dropdown that has adjacent buttons', async ({ page }) => {
+test('dropdown with adjacent buttons', async ({ page }) => {
   await page.goto(`${BASE_URL}/dropdown-with-adjacent-buttons`)
 
+  const dropdown = page.getByRole('combobox', { name: 'Book' })
+
   await test.step('can interact with a dropdown within a dialog', async () => {
-    const combobox = page.getByRole('combobox', { name: 'Book' })
+    await dropdown.click()
 
-    await combobox.click()
     await page.getByRole('option', { name: 'War and Peace' }).click()
 
-    await expect(combobox).toHaveText('War and Peace')
+    await expect(dropdown).toHaveText('War and Peace')
   })
 
   await test.step('can also interact with adjacent buttons', async () => {

diff --git a/e2e/dropdown-with-adjacent-buttons/index.tsx b/e2e/dropdown-with-adjacent-buttons/index.tsx
@@ -8,48 +8,50 @@ export function DropdownWithAdjacentButtons() {
   const [secondBtnText, setSecondBtnText] = React.useState('there')
 
   return (
-    <div style={{ paddingBlock: '200px' }}>
-      <Button className="my-sm" onClick={() => setFirstBtnText('clicked on first btn')}>
-        {firstBtnText}
-      </Button>
-      <FormField name="books">
-        <FormField.Label className="text-body-2">Books</FormField.Label>
-        <Dropdown>
-          <Dropdown.Trigger aria-label="Book">
-            <Dropdown.LeadingIcon>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-              </svg>
-            </Dropdown.LeadingIcon>
-            <Dropdown.Value placeholder="Pick a book" />
-          </Dropdown.Trigger>
+    <div style={{ height: '100vh', display: 'grid', alignItems: 'center' }}>
+      <div>
+        <Button className="my-sm" onClick={() => setFirstBtnText('clicked on first btn')}>
+          {firstBtnText}
+        </Button>
+        <FormField name="books">
+          <FormField.Label className="text-body-2">Books</FormField.Label>
+          <Dropdown>
+            <Dropdown.Trigger aria-label="Book">
+              <Dropdown.LeadingIcon>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+                </svg>
+              </Dropdown.LeadingIcon>
+              <Dropdown.Value placeholder="Pick a book" />
+            </Dropdown.Trigger>
 
-          <Dropdown.Popover>
-            <Dropdown.Items>
-              <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
-              <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
-              <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
-              <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
-              <Dropdown.Item value="book-5">1984</Dropdown.Item>
-              <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
-            </Dropdown.Items>
-          </Dropdown.Popover>
-        </Dropdown>
-      </FormField>
-      <Button className="my-sm" onClick={() => setSecondBtnText('clicked on second btn')}>
-        {secondBtnText}
-      </Button>
+            <Dropdown.Popover>
+              <Dropdown.Items>
+                <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
+                <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
+                <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
+                <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
+                <Dropdown.Item value="book-5">1984</Dropdown.Item>
+                <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
+              </Dropdown.Items>
+            </Dropdown.Popover>
+          </Dropdown>
+        </FormField>
+        <Button className="my-sm" onClick={() => setSecondBtnText('clicked on second btn')}>
+          {secondBtnText}
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/e2e/dropdown-within-dialog/index.spec.tsx b/e2e/dropdown-within-dialog/index.spec.tsx
@@ -5,15 +5,16 @@ import { BASE_URL } from '../constant'
 test('dropdown within a dialog', async ({ page }) => {
   await page.goto(`${BASE_URL}/dropdown-within-dialog`)
 
-  await test.step('can interact with a dropdown within a dialog', async () => {
-    const openDialogButton = page.getByRole('button', { name: 'Create account' })
+  const dialogTrigger = page.getByRole('button', { name: 'Create account' })
+  const dropdown = page.getByRole('combobox', { name: 'books' })
 
-    await openDialogButton.click()
+  await test.step('can interact with a dropdown within a dialog', async () => {
+    await dialogTrigger.click()
 
-    await page.getByRole('combobox', { name: 'books' }).click()
+    await dropdown.click()
     await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()
 
-    await expect(page.getByRole('combobox', { name: 'books' })).toHaveText('To Kill a Mockingbird')
+    await expect(dropdown).toHaveText('To Kill a Mockingbird')
   })
 
   await test.step('can also interact with adjacent button', async () => {