Upgrade playwright eslint plugin to get new rules (#1752)

* upgrade playwright eslint plugin to get expect-expect and no-useless-await

* bump playwright for UI mode console log improvement

Author: david-crespo

.eslintrc.json

@@ -59,7 +59,13 @@
     },
     {
       "files": ["*.e2e.ts"],
-      "extends": ["plugin:playwright/playwright-test"]
+      "extends": ["plugin:playwright/playwright-test"],
+      "rules": {
+        "playwright/expect-expect": [
+          "warn",
+          { "additionalAssertFunctionNames": ["expectVisible"] }
+        ]
+      }
     }
   ]
 }

app/test/e2e/click-everything.e2e.ts

@@ -70,12 +70,6 @@ test('Click through disks page', async ({ page }) => {
   ])
 })
 
-// eslint-disable-next-line playwright/no-skipped-test
-test.skip('Click through access & IAM', async ({ page }) => {
-  await page.click('role=link[name*="Access & IAM"]')
-  // not implemented
-})
-
 test('Click through images', async ({ page }) => {
   await page.click('role=link[name*="Images"]')
   await expectVisible(page, [

app/test/e2e/disk-create.e2e.ts

@@ -22,6 +22,9 @@ test.describe('Disk create', () => {
     await expectVisible(page, ['role=cell[name="a-new-disk"]'])
   })
 
+  // expects are in the afterEach
+
+  /* eslint-disable playwright/expect-expect */
   test('from blank', async ({ page }) => {
     await page.getByRole('radio', { name: '512' }).click()
   })
@@ -42,4 +45,5 @@ test.describe('Disk create', () => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
     await page.getByRole('radio', { name: 'Blank' }).click()
   })
+  /* eslint-enable playwright/expect-expect */
 })

app/test/e2e/instance-create.e2e.ts

@@ -54,16 +54,15 @@ test('can create an instance', async ({ page }) => {
 
   // network tab works
   await page.getByRole('tab', { name: 'Network Interfaces' }).click()
-  const table = await page.getByRole('table')
+  const table = page.getByRole('table')
   await expectRowVisible(table, { name: 'default', vpc: 'mock-vpc', subnet: 'mock-subnet' })
+})
 
-  // trying to create another instance with the same name produces a visible
-  // error
-  await page.goto('/projects/mock-project/instances')
-  await page.locator('text="New Instance"').click()
-  await page.fill('input[name=name]', instanceName)
+test('duplicate instance name produces visible error', async ({ page }) => {
+  await page.goto('/projects/mock-project/instances-new')
+  await page.fill('input[name=name]', 'db1')
   await page.locator('button:has-text("Create instance")').click()
-  await page.getByText('Instance name already exists')
+  await expect(page.getByText('Instance name already exists')).toBeVisible()
 })
 
 test('first preset is auto-selected in each tab', async ({ page }) => {

app/test/e2e/scroll-restore.e2e.ts

@@ -8,13 +8,13 @@
 import { type Page, expect, test } from './utils'
 
 async function expectScrollTop(page: Page, expected: number) {
-  const container = await page.getByTestId('scroll-container')
+  const container = page.getByTestId('scroll-container')
   const getScrollTop = () => container.evaluate((el: HTMLElement) => el.scrollTop)
   await expect.poll(getScrollTop).toBe(expected)
 }
 
 async function scrollTo(page: Page, to: number) {
-  const container = await page.getByTestId('scroll-container')
+  const container = page.getByTestId('scroll-container')
   await container.evaluate((el: HTMLElement, to) => el.scrollTo(0, to), to)
 }
 

app/test/e2e/vpcs.e2e.ts

@@ -13,13 +13,13 @@ test('can nav to VpcPage from /', async ({ page }) => {
   await page.click('a:has-text("Networking")')
   await page.click('a:has-text("mock-vpc")')
   await expect(page.locator('text=mock-subnet')).toBeVisible()
-  await expect(await page.title()).toEqual('mock-vpc / VPCs / mock-project / Oxide Console')
+  expect(await page.title()).toEqual('mock-vpc / VPCs / mock-project / Oxide Console')
 })
 
 test('can create and delete subnet', async ({ page }) => {
   await page.goto('/projects/mock-project/vpcs/mock-vpc')
   // only one row in table, the default mock-subnet
-  const rows = await page.locator('tbody >> tr')
+  const rows = page.locator('tbody >> tr')
   await expect(rows).toHaveCount(1)
   await expect(rows.nth(0).locator('text="mock-subnet"')).toBeVisible()
 

package-lock.json

@@ -85,7 +85,7 @@
     "@figma-export/transform-svg-with-svgo": "^4.3.0",
     "@ladle/react": "^2.14.0",
     "@mswjs/http-middleware": "^0.8.0",
-    "@playwright/test": "^1.36.1",
+    "@playwright/test": "^1.37.1",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -111,7 +111,7 @@
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-playwright": "^0.12.0",
+    "eslint-plugin-playwright": "^0.16.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hook-form": "^0.3.0",