Electron machine api tests (#3534)

* start

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* Look at this (photo)Graph *in the voice of Nickelback*

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* hide on webapp

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fix machine-api

Signed-off-by: Jess Frazelle <github@jessfraz.com>

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

e2e/playwright/desktop-export.spec.ts

@@ -106,7 +106,7 @@ test(
 
     await test.step('on open of file in file pane', async () => {
       const u = await getUtils(page)
-      u.openFilePanel()
+      await u.openFilePanel()
 
       const otherKclButton = page.getByRole('button', { name: 'other.kcl' })
 
@@ -114,7 +114,7 @@ test(
       await otherKclButton.click()
 
       // Close the file pane
-      u.closeFilePanel()
+      await u.closeFilePanel()
 
       // wait for it to finish executing (todo: make this more robust)
       await page.waitForTimeout(1000)

e2e/playwright/machines.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '@playwright/test'
+import { setupElectron, tearDown } from './test-utils'
+import fsp from 'fs/promises'
+
+test.afterEach(async ({ page }, testInfo) => {
+  await tearDown(page, testInfo)
+})
+
+test(
+  'When machine-api server not found button is disabled and shows the reason',
+  { tag: '@electron' },
+  async ({ browserName }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+      folderSetupFn: async (dir) => {
+        await fsp.mkdir(`${dir}/bracket`, { recursive: true })
+        await fsp.copyFile(
+          'src/wasm-lib/tests/executor/inputs/focusrite_scarlett_mounting_braket.kcl',
+          `${dir}/bracket/main.kcl`
+        )
+      },
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await expect(page.getByText('bracket')).toBeVisible()
+
+    await page.getByText('bracket').click()
+
+    await expect(page.getByTestId('loading')).toBeAttached()
+    await expect(page.getByTestId('loading')).not.toBeAttached({
+      timeout: 20_000,
+    })
+
+    const notFoundText = 'Machine API server was not discovered'
+    await expect(page.getByText(notFoundText).first()).not.toBeVisible()
+
+    // Find the make button
+    const makeButton = page.getByRole('button', { name: 'Make' })
+    // Make sure the button is visible but disabled
+    await expect(makeButton).toBeVisible()
+    await expect(makeButton).toBeDisabled()
+
+    // When you hover over the button, the tooltip should show
+    // that the machine-api server is not found
+    await makeButton.hover()
+    await expect(page.getByText(notFoundText).first()).toBeVisible()
+
+    await electronApp.close()
+  }
+)
+
+test(
+  'When machine-api server not found home screen & project status shows the reason',
+  { tag: '@electron' },
+  async ({ browserName }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+      folderSetupFn: async (dir) => {
+        await fsp.mkdir(`${dir}/bracket`, { recursive: true })
+        await fsp.copyFile(
+          'src/wasm-lib/tests/executor/inputs/focusrite_scarlett_mounting_braket.kcl',
+          `${dir}/bracket/main.kcl`
+        )
+      },
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    const notFoundText = 'Machine API server was not discovered'
+
+    await expect(page.getByText(notFoundText)).not.toBeVisible()
+
+    const networkMachineToggle = page.getByTestId('network-machine-toggle')
+    await networkMachineToggle.hover()
+    await expect(page.getByText(notFoundText)).toBeVisible()
+
+    await expect(page.getByText('bracket')).toBeVisible()
+
+    await page.getByText('bracket').click()
+
+    await expect(page.getByTestId('loading')).toBeAttached()
+    await expect(page.getByTestId('loading')).not.toBeAttached({
+      timeout: 20_000,
+    })
+
+    await expect(page.getByText(notFoundText).nth(1)).not.toBeVisible()
+
+    await networkMachineToggle.hover()
+    await expect(page.getByText(notFoundText).nth(1)).toBeVisible()
+
+    await electronApp.close()
+  }
+)

e2e/playwright/projects.spec.ts

@@ -15,6 +15,44 @@ test.afterEach(async ({ page }, testInfo) => {
   await tearDown(page, testInfo)
 })
 
+test(
+  'when code with error first loads you get errors in console',
+  { tag: '@electron' },
+  async ({ browserName }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+      folderSetupFn: async (dir) => {
+        await fsp.mkdir(`${dir}/broken-code`, { recursive: true })
+        await fsp.copyFile(
+          'src/wasm-lib/tests/executor/inputs/broken-code-test.kcl',
+          `${dir}/broken-code/main.kcl`
+        )
+      },
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await expect(page.getByText('broken-code')).toBeVisible()
+
+    await page.getByText('broken-code').click()
+
+    await expect(page.getByTestId('loading')).toBeAttached()
+    await expect(page.getByTestId('loading')).not.toBeAttached({
+      timeout: 20_000,
+    })
+
+    // error in guter
+    await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
+
+    // error text on hover
+    await page.hover('.cm-lint-marker-error')
+    const crypticErrorText = `Expected a tag declarator`
+    await expect(page.getByText(crypticErrorText).first()).toBeVisible()
+
+    await electronApp.close()
+  }
+)
+
 test(
   'Can export from electron app',
   { tag: '@electron' },

package.json

@@ -86,7 +86,7 @@
     "build:wasm-clean": "yarn wasm-prep && yarn build:wasm",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
-    "lint": "eslint --fix src",
+    "lint": "eslint --fix src e2e",
     "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
     "postinstall": "yarn xstate:typegen",
     "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\"",

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -63,8 +63,10 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
           data: { name: 'Make', groupId: 'modeling' },
         })
       },
-      hide: () => machineManager.machineCount() === 0,
-      hideOnPlatform: 'web',
+      hide: () => !isDesktop(),
+      disable: () => {
+        return machineManager.noMachinesReason()
+      },
     },
   ]
   const filteredActions: SidebarAction[] = sidebarActions.filter(
@@ -186,6 +188,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
                       iconSize: 'md',
                     }}
                     onClick={action.action}
+                    disabledText={action.disable?.()}
                   />
                 ))}
               </ul>
@@ -238,6 +241,7 @@ interface ModelingPaneButtonProps
   onClick: () => void
   paneIsOpen?: boolean
   showBadge?: BadgeInfoComputed
+  disabledText?: string
 }
 
 function ModelingPaneButton({
@@ -245,6 +249,7 @@ function ModelingPaneButton({
   onClick,
   paneIsOpen,
   showBadge,
+  disabledText,
   ...props
 }: ModelingPaneButtonProps) {
   useHotkeys(paneConfig.keybinding, onClick, {
@@ -258,6 +263,8 @@ function ModelingPaneButton({
         onClick={onClick}
         name={paneConfig.title}
         data-testid={paneConfig.id + '-pane-button'}
+        disabled={disabledText !== undefined}
+        aria-disabled={disabledText !== undefined}
         {...props}
       >
         <ActionIcon
@@ -284,6 +291,7 @@ function ModelingPaneButton({
         >
           <span className="flex-1">
             {paneConfig.title}
+            {disabledText !== undefined ? ` (${disabledText})` : ''}
             {paneIsOpen !== undefined ? ` pane` : ''}
           </span>
           <kbd className="hotkey text-xs capitalize">
@@ -326,4 +334,5 @@ export type SidebarAction = {
   action: () => void
   hideOnPlatform?: 'desktop' | 'web'
   hide?: boolean | (() => boolean)
+  disable?: () => string | undefined
 }

src/components/NetworkMachineIndicator.tsx

@@ -9,7 +9,9 @@ export const NetworkMachineIndicator = ({
 }: {
   className?: string
 }) => {
-  const machineCount = Object.keys(machineManager.machines).length
+  const machineCount = machineManager.machineCount()
+  const reason = machineManager.noMachinesReason()
+
   return isDesktop() ? (
     <Popover className="relative">
       <Popover.Button
@@ -26,7 +28,7 @@ export const NetworkMachineIndicator = ({
           </p>
         )}
         <Tooltip position="top-right" wrapperClassName="ui-open:hidden">
-          Network machines ({machineCount})
+          Network machines ({machineCount}) {reason && `: ${reason}`}
         </Tooltip>
       </Popover.Button>
       <Popover.Panel

src/lib/machineManager.ts

@@ -51,6 +51,19 @@ export class MachineManager {
     return this._machineApiIp
   }
 
+  // Get the reason message for why there are no machines.
+  noMachinesReason(): string | undefined {
+    if (this.machineCount() > 0) {
+      return undefined
+    }
+
+    if (this.machineApiIp === null) {
+      return 'Machine API server was not discovered'
+    }
+
+    return 'Machine API server was discovered, but no machines are available'
+  }
+
   get currentMachine(): components['schemas']['Machine'] | null {
     return this._currentMachine
   }

src/main.ts

@@ -131,8 +131,6 @@ ipcMain.handle('kittycad', (event, data) => {
     )(data.args)
 })
 
-const SERVICE_NAME = '_machine-api._tcp.local.'
-
 ipcMain.handle('find_machine_api', () => {
   const timeoutAfterMs = 5000
   return new Promise((resolve, reject) => {
@@ -144,8 +142,19 @@ ipcMain.handle('find_machine_api', () => {
       resolve(null)
     })
     console.log('Looking for machine API...')
-    bonjourEt.find({ type: SERVICE_NAME }, (service: Service) => {
-      resolve(service.fqdn)
-    })
+    bonjourEt.find(
+      { protocol: 'tcp', type: 'machine-api' },
+      (service: Service) => {
+        console.log('Found machine API!', JSON.stringify(service))
+        if (!service.addresses || service.addresses?.length === 0) {
+          console.log('No addresses found for machine API!')
+          return resolve(null)
+        }
+        const ip = service.addresses[0]
+        const port = service.port
+        // We want to return the ip address of the machine API.
+        resolve(`${ip}:${port}`)
+      }
+    )
   })
 })

src/wasm-lib/tests/executor/inputs/broken-code-test.kcl

@@ -0,0 +1,60 @@
+// Shelf Bracket
+// This is a shelf bracket made out of 6061-T6 aluminum sheet metal. The required thickness is calculated based on a point load of 300 lbs applied to the end of the shelf. There are two brackets holding up the shelf, so the moment experienced is divided by 2. The shelf is 1 foot long from the wall.
+
+
+// Define our bracket feet lengths
+const shelfMountL = 8 // The length of the bracket holding up the shelf is 6 inches
+const wallMountL = 6 // the length of the bracket
+
+
+// Define constants required to calculate the thickness needed to support 300 lbs
+const sigmaAllow = 35000 // psi
+const width = 6 // inch
+const p = 300 // Force on shelf - lbs
+const L = 12 // inches
+const M = L * p / 2 // Moment experienced at fixed end of bracket
+const FOS = 2 // Factor of safety of 2 to be conservative
+
+
+// Calculate the thickness off the bending stress and factor of safety
+const thickness = sqrt(6 * M * FOS / (width * sigmaAllow))
+
+// 0.25 inch fillet radius
+const filletR = 0.25
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Sketch the bracket and extrude with fillets
+const bracket = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
+  |> line([0, wallMountL], %, 'outerEdge')
+  |> line([-shelfMountL, 0], %)
+  |> line([0, -thickness], %)
+  |> line([shelfMountL - thickness, 0], %, 'innerEdge')
+  |> line([0, -wallMountL + thickness], %)
+  |> close(%)
+  |> extrude(width, %)
+  |> fillet({
+       radius: filletR,
+       tags: [
+         getPreviousAdjacentEdge('innerEdge', %)
+       ]
+     }, %)
+  |> fillet({
+       radius: filletR + thickness,
+       tags: [
+         getPreviousAdjacentEdge('outerEdge', %)
+       ]
+     }, %)
+