test it, rework helpers to avoid mistakes

Author: david-crespo

app/forms/disk-create.tsx

@@ -37,6 +37,7 @@ import { Radio } from '~/ui/lib/Radio'
 import { RadioGroup } from '~/ui/lib/RadioGroup'
 import { Slash } from '~/ui/lib/Slash'
 import { toLocaleDateString } from '~/util/date'
+import { roundUpDiskSize } from '~/util/math'
 import { bytesToGiB, GiB } from '~/util/units'
 
 const blankDiskSource: DiskSource = {
@@ -227,8 +228,7 @@ const DiskSourceField = ({
               const image = images.find((i) => i.id === id)! // if it's selected, it must be present
               const imageSizeGiB = image.size / GiB
               if (diskSizeField.value < imageSizeGiB) {
-                const nearest10 = Math.ceil(imageSizeGiB / 10) * 10
-                diskSizeField.onChange(Math.min(nearest10, MAX_DISK_SIZE_GiB))
+                diskSizeField.onChange(roundUpDiskSize(imageSizeGiB))
               }
             }}
           />
@@ -288,8 +288,7 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
         const snapshot = snapshots.find((i) => i.id === id)! // if it's selected, it must be present
         const snapshotSizeGiB = snapshot.size / GiB
         if (diskSizeField.value < snapshotSizeGiB) {
-          const nearest10 = Math.ceil(snapshotSizeGiB / 10) * 10
-          diskSizeField.onChange(Math.min(nearest10, MAX_DISK_SIZE_GiB))
+          diskSizeField.onChange(roundUpDiskSize(snapshotSizeGiB))
         }
       }}
     />

app/util/math.ts

@@ -8,6 +8,8 @@
 
 import * as R from 'remeda'
 
+import { MAX_DISK_SIZE_GiB } from '~/api'
+
 /**
  * Get the two parts of a number (before decimal and after-and-including
  * decimal) as strings. Round to 2 decimal points if necessary.
@@ -99,3 +101,11 @@ export function displayBigNum(
 export function nearest10(num: number): number {
   return Math.ceil(num / 10) * 10
 }
+
+/**
+ * Calculate disk size based on image or snapshot size. We round up to the
+ * nearest 10, but also cap it at the max disk size so that, for example, a 1023
+ * GiB image doesn't produce a 1030 GiB disk, which is not valid.
+ */
+export const roundUpDiskSize = (imageSizeGiB: number) =>
+  Math.min(nearest10(imageSizeGiB), MAX_DISK_SIZE_GiB)

mock-api/snapshot.ts

@@ -10,6 +10,8 @@ import { v4 as uuid } from 'uuid'
 
 import type { Snapshot } from '@oxide/api'
 
+import { GiB } from '~/util/units'
+
 import { disks } from './disk'
 import type { Json } from './json-type'
 import { project } from './project'
@@ -81,7 +83,18 @@ export const snapshots: Json<Snapshot>[] = [
     project_id: project.id,
     time_created: new Date().toISOString(),
     time_modified: new Date().toISOString(),
-    size: 1024 * 1024 * 1024 * 20,
+    size: 20 * GiB,
+    disk_id: disks[3].id,
+    state: 'ready',
+  },
+  {
+    id: '3b252b04-d896-49d3-bae3-0ac102eed9b4',
+    name: 'snapshot-max-size',
+    description: '',
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 1023 * GiB, // the biggest size allowed
     disk_id: disks[3].id,
     state: 'ready',
   },

test/e2e/disks.e2e.ts

@@ -11,7 +11,6 @@ import {
   expectNoToast,
   expectRowVisible,
   expectToast,
-  expectVisible,
   test,
 } from './utils'
 
@@ -60,14 +59,16 @@ test('Disk snapshot error', async ({ page }) => {
 test.describe('Disk create', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/projects/mock-project/disks-new')
+    await expect(page.getByRole('dialog', { name: 'Create disk' })).toBeVisible()
     await page.getByRole('textbox', { name: 'Name' }).fill('a-new-disk')
   })
 
   test.afterEach(async ({ page }) => {
     await page.getByRole('button', { name: 'Create disk' }).click()
 
+    await expect(page.getByRole('dialog', { name: 'Create disk' })).toBeHidden()
     await expectToast(page, 'Disk a-new-disk created')
-    await expectVisible(page, ['role=cell[name="a-new-disk"]'])
+    await expect(page.getByRole('cell', { name: 'a-new-disk' })).toBeVisible()
   })
 
   // expects are in the afterEach
@@ -83,6 +84,13 @@ test.describe('Disk create', () => {
     await page.getByRole('option', { name: 'delete-500' }).click()
   })
 
+  // max-size snapshot required a fix
+  test('from max-size snapshot', async ({ page }) => {
+    await page.getByRole('radio', { name: 'Snapshot' }).click()
+    await page.getByRole('button', { name: 'Source snapshot' }).click()
+    await page.getByRole('option', { name: 'snapshot-max' }).click()
+  })
+
   test('from image', async ({ page }) => {
     await page.getByRole('radio', { name: 'Image' }).click()
     await page.getByRole('button', { name: 'Source image' }).click()