Full tests for row actions menu polling bug (#2648)

tests for row actions menu polling bug

Author: david-crespo

.eslintrc.cjs

@@ -114,11 +114,18 @@ module.exports = {
     },
     {
       files: ['*.e2e.ts'],
-      extends: ['plugin:playwright/playwright-test'],
+      extends: ['plugin:playwright/recommended'],
       rules: {
         'playwright/expect-expect': [
           'warn',
-          { assertFunctionNames: ['expectVisible', 'expectRowVisible', 'expectOptions'] },
+          {
+            assertFunctionNames: [
+              'expectVisible',
+              'expectRowVisible',
+              'expectOptions',
+              'expectRowMenuStaysOpen',
+            ],
+          },
         ],
         'playwright/no-force-option': 'off',
       },

test/e2e/instance-disks.e2e.ts

@@ -7,14 +7,12 @@
  */
 import {
   clickRowAction,
-  closeToast,
   expect,
   expectNoToast,
   expectNotVisible,
   expectRowVisible,
   expectToast,
   expectVisible,
-  openRowActions,
   stopInstance,
   test,
 } from './utils'
@@ -230,45 +228,3 @@ test('Change boot disk', async ({ page }) => {
 
   await expect(page.getByText('Attach a disk to be able to set a boot disk')).toBeVisible()
 })
-
-// silly test but we've reintroduced this bug like 3 times
-test("polling doesn't close row actions menu", async ({ page }) => {
-  await page.goto('/projects/mock-project/instances/db1')
-
-  // stop, but don't wait until the state has changed
-  await page.getByRole('button', { name: 'Stop' }).click()
-  await page.getByRole('button', { name: 'Confirm' }).click()
-  await closeToast(page)
-
-  const menu = page.getByRole('menu')
-  const stopped = page.getByText('statestopped')
-
-  await expect(menu).toBeHidden()
-  await expect(stopped).toBeHidden()
-
-  await openRowActions(page, 'disk-1')
-  await expect(stopped).toBeHidden() // still not stopped yet
-  await expect(menu).toBeVisible()
-
-  // now we're stopped, which means polling has happened, but the
-  // menu remains visible
-  await expect(stopped).toBeVisible()
-  await expect(menu).toBeVisible()
-
-  // now start it so we can check the non-boot disks table
-  await page.getByRole('button', { name: 'Start' }).click()
-  await page.getByRole('button', { name: 'Confirm' }).click()
-  await closeToast(page)
-
-  const running = page.getByText('staterunning') // not running yet
-  await expect(running).toBeHidden()
-  await expect(menu).toBeHidden()
-
-  await openRowActions(page, 'disk-2')
-  await expect(running).toBeHidden() // still not running yet
-  await expect(menu).toBeVisible()
-
-  // state change means polling has happened. menu is still visible
-  await expect(running).toBeVisible()
-  await expect(menu).toBeVisible()
-})

test/e2e/instance.e2e.ts

@@ -7,6 +7,7 @@
  */
 import {
   clickRowAction,
+  closeToast,
   expect,
   expectRowVisible,
   openRowActions,
@@ -240,3 +241,71 @@ test('instance table', async ({ page }) => {
     state: expect.stringMatching(/^starting\d+s$/),
   })
 })
+
+async function expectRowMenuStaysOpen(page: Page, rowSelector: string) {
+  // stop, but don't wait until the state has changed
+  await page.getByRole('button', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  await closeToast(page)
+
+  const menu = page.getByRole('menu')
+  const stopped = page.getByText('statestopped')
+
+  await expect(menu).toBeHidden()
+  await expect(stopped).toBeHidden()
+
+  await openRowActions(page, rowSelector)
+  await expect(stopped).toBeHidden() // still not stopped yet
+  await expect(menu).toBeVisible()
+
+  // now we're stopped, which means polling has happened, but the
+  // menu remains visible
+  await expect(stopped).toBeVisible()
+  await expect(menu).toBeVisible()
+}
+
+// silly tests, but we've reintroduced this bug like 3 times
+
+test("polling doesn't close row actions: IPs table", async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1/networking')
+  await expectRowMenuStaysOpen(page, '123.4.56.0')
+})
+
+test("polling doesn't close row actions: NICs table", async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1/networking')
+  await expectRowMenuStaysOpen(page, 'my-nic')
+})
+
+test("polling doesn't close row actions: boot disk", async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1')
+  await expectRowMenuStaysOpen(page, 'disk-1')
+})
+
+test("polling doesn't close row actions: other disk", async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1')
+  await expectRowMenuStaysOpen(page, 'disk-2')
+})
+
+test("polling doesn't close row actions: instances", async ({ page }) => {
+  await page.goto('/projects/mock-project/instances')
+
+  // can't use the cool function because it's *slightly* different
+  await clickRowAction(page, 'db1', 'Stop')
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  await closeToast(page)
+
+  const menu = page.getByRole('menu')
+  const stopped = page.getByText('stopped')
+
+  await expect(menu).toBeHidden()
+  await expect(stopped).toBeHidden()
+
+  await openRowActions(page, 'db1')
+  await expect(stopped).toBeHidden() // still not stopped yet
+  await expect(menu).toBeVisible()
+
+  // now we're stopped, which means polling has happened, but the
+  // menu remains visible
+  await expect(stopped).toBeVisible()
+  await expect(menu).toBeVisible()
+})