refactor: list example

equinor · Sep 18, 2023 · 8e56e3a · 8e56e3a
1 parent 97260f6
commit 8e56e3a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 60 deletions.
diff --git a/e2e/tests/plugin-list-task_list.spec.ts b/e2e/tests/plugin-list-task_list.spec.ts
@@ -71,11 +71,10 @@ test('Delete a task', async ({ page }) => {
   await expect(
     page.getByRole('paragraph').getByText('Tax return')
   ).toBeVisible()
+
   await page
-    .locator('div')
-    .filter({
-      hasText: /^Open itemTax returnMaria JohnsonMove upMove DownDelete$/,
-    })
+    .getByRole('row')
+    .filter({ has: page.getByText('Tax return', { exact: true }) })
     .getByRole('button', { name: 'Delete' })
     .click()
   await page.getByRole('button', { name: 'Save' }).click()
@@ -88,118 +87,92 @@ test('Delete a task', async ({ page }) => {
 test('Move task up and down', async ({ page }) => {
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move down' })
   ).toBeDisabled()
+
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move up' })
   ).toBeEnabled()
+
   await page
-    .locator('div')
-    .filter({
-      hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-    })
+    .getByRole('row')
+    .filter({ has: page.getByText('Paint the living room', { exact: true }) })
     .getByRole('button', { name: 'Move up' })
     .click()
   await page.getByRole('button', { name: 'Save' }).click()
   await reloadPage(page) //TODO: Remove when #153 is solved.
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move down' })
   ).toBeEnabled()
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move up' })
   ).toBeEnabled()
   await page
-    .locator('div')
-    .filter({
-      hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-    })
+    .getByRole('row')
+    .filter({ has: page.getByText('Paint the living room', { exact: true }) })
     .getByRole('button', { name: 'Move up' })
     .click()
   await page.getByRole('button', { name: 'Save' }).click()
   await reloadPage(page) //TODO: Remove when #153 is solved.
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move down' })
   ).toBeEnabled()
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move up' })
   ).toBeDisabled()
   await page
-    .locator('div')
-    .filter({
-      hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-    })
+    .getByRole('row')
+    .filter({ has: page.getByText('Paint the living room', { exact: true }) })
     .getByRole('button', { name: 'Move down' })
     .click()
   await page.getByRole('button', { name: 'Save' }).click()
   await reloadPage(page) //TODO: Remove when #153 is solved.
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move down' })
   ).toBeEnabled()
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move up' })
   ).toBeEnabled()
   await page
-    .locator('div')
-    .filter({
-      hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-    })
+    .getByRole('row')
+    .filter({ has: page.getByText('Paint the living room', { exact: true }) })
     .getByRole('button', { name: 'Move down' })
     .click()
   await page.getByRole('button', { name: 'Save' }).click()
   await reloadPage(page) //TODO: Remove when #153 is solved.
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move down' })
   ).toBeDisabled()
   await expect(
     page
-      .locator('div')
-      .filter({
-        hasText: /^Open itemPaint the living roomMove upMove DownDelete$/,
-      })
+      .getByRole('row')
+      .filter({ has: page.getByText('Paint the living room', { exact: true }) })
       .getByRole('button', { name: 'Move up' })
   ).toBeEnabled()
 })

diff --git a/packages/dm-core-plugins/src/list/ListPlugin.tsx b/packages/dm-core-plugins/src/list/ListPlugin.tsx
@@ -171,6 +171,7 @@ export const ListPlugin = (props: IUIPlugin & { config?: TListConfig }) => {
         <React.Fragment key={item?.key}>
           <Stack
             direction="row"
+            role="row"
             spacing={1}
             justifyContent="space-between"
             alignItems="center"