Instance state changes asynchronously in mock API

mock-api/msw/handlers.ts

@@ -474,10 +474,20 @@ export const handlers = makeHandlers({
       project_id: project.id,
       ...pick(body, 'name', 'description', 'hostname', 'memory', 'ncpus'),
       ...getTimestamps(),
-      run_state: 'running',
+      run_state: 'creating',
       time_run_state_updated: new Date().toISOString(),
     }
+
+    setTimeout(() => {
+      newInstance.run_state = 'starting'
+    }, 1000)
+
+    setTimeout(() => {
+      newInstance.run_state = 'running'
+    }, 5000)
+
     db.instances.push(newInstance)
+
     return json(newInstance, { status: 201 })
   },
   instanceView: ({ path, query }) => lookup.instance({ ...path, ...query }),
@@ -599,7 +609,7 @@ export const handlers = makeHandlers({
 
     setTimeout(() => {
       instance.run_state = 'running'
-    }, 3000)
+    }, 1000)
 
     return json(instance, { status: 202 })
   },
@@ -609,13 +619,21 @@ export const handlers = makeHandlers({
   },
   instanceStart({ path, query }) {
     const instance = lookup.instance({ ...path, ...query })
-    instance.run_state = 'running'
+    instance.run_state = 'starting'
+
+    setTimeout(() => {
+      instance.run_state = 'running'
+    }, 1000)
 
     return json(instance, { status: 202 })
   },
   instanceStop({ path, query }) {
     const instance = lookup.instance({ ...path, ...query })
-    instance.run_state = 'stopped'
+    instance.run_state = 'stopping'
+
+    setTimeout(() => {
+      instance.run_state = 'stopped'
+    }, 1000)
 
     return json(instance, { status: 202 })
   },

test/e2e/instance.e2e.ts

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { expect, test } from './utils'
+import { expect, refreshInstance, sleep, test } from './utils'
 
 test('can delete a failed instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
@@ -36,6 +36,9 @@ test('can stop and delete a running instance', async ({ page }) => {
   await page.getByRole('menuitem', { name: 'Stop' }).click()
   await page.getByRole('button', { name: 'Confirm' }).click()
 
+  await sleep(3000)
+  await refreshInstance(page)
+
   // now it's stopped
   await expect(row.getByRole('cell', { name: /stopped/ })).toBeVisible()
 
@@ -58,6 +61,9 @@ test('can stop a starting instance', async ({ page }) => {
   await page.getByRole('menuitem', { name: 'Stop' }).click()
   await page.getByRole('button', { name: 'Confirm' }).click()
 
+  await sleep(3000)
+  await refreshInstance(page)
+
   await expect(row.getByRole('cell', { name: /stopped/ })).toBeVisible()
 })
 

test/e2e/network-interface-create.e2e.ts

@@ -7,16 +7,13 @@
  */
 import { test } from '@playwright/test'
 
-import { expect, expectRowVisible } from './utils'
+import { expect, expectRowVisible, stopInstance } from './utils'
 
 test('can create a NIC with a specified IP address', async ({ page }) => {
   // go to an instance’s Network Interfaces page
   await page.goto('/projects/mock-project/instances/db1/network-interfaces')
 
-  // stop the instance
-  await page.getByRole('button', { name: 'Instance actions' }).click()
-  await page.getByRole('menuitem', { name: 'Stop' }).click()
-  await page.getByRole('button', { name: 'Confirm' }).click()
+  await stopInstance(page)
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()
@@ -43,10 +40,7 @@ test('can create a NIC with a blank IP address', async ({ page }) => {
   // go to an instance’s Network Interfaces page
   await page.goto('/projects/mock-project/instances/db1/network-interfaces')
 
-  // stop the instance
-  await page.getByRole('button', { name: 'Instance actions' }).click()
-  await page.getByRole('menuitem', { name: 'Stop' }).click()
-  await page.getByRole('button', { name: 'Confirm' }).click()
+  await stopInstance(page)
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()

test/e2e/utils.ts

@@ -104,10 +104,17 @@ export async function expectRowVisible(
 }
 
 export async function stopInstance(page: Page) {
-  await page.click('role=button[name="Instance actions"]')
-  await page.click('role=menuitem[name="Stop"]')
-  await page.click('role=button[name="Confirm"]')
+  await page.getByRole('button', { name: 'Instance actions' }).click()
+  await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
   await closeToast(page)
+  await sleep(1200)
+  await refreshInstance(page)
+  await expect(page.getByText('statusstopped')).toBeVisible()
+}
+
+export async function refreshInstance(page: Page) {
+  await page.getByRole('button', { name: 'Refresh data' }).click()
 }
 
 /**

test/e2e/z-index.e2e.ts

@@ -7,7 +7,7 @@
  */
 import { expect, test } from '@playwright/test'
 
-import { expectObscured } from './utils'
+import { expectObscured, stopInstance } from './utils'
 
 test('Dropdown content can scroll off page and doesn’t hide TopBar', async ({ page }) => {
   // load the page
@@ -45,10 +45,7 @@ test('Dropdown content in SidebarModal shows on screen', async ({ page }) => {
   // go to an instance’s Network Interfaces page
   await page.goto('/projects/mock-project/instances/db1/network-interfaces')
 
-  // stop the instance
-  await page.getByRole('button', { name: 'Instance actions' }).click()
-  await page.getByRole('menuitem', { name: 'Stop' }).click()
-  await page.getByRole('button', { name: 'Confirm' }).click()
+  await stopInstance(page)
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()