add extrude test for circle

e2e/playwright/authenticatedApp.ts

@@ -0,0 +1,173 @@
+import type { Page, Locator } from '@playwright/test'
+import { expect, test as base } from '@playwright/test'
+import { getUtils, setup, tearDown } from './test-utils'
+import fsp from 'fs/promises'
+import { join } from 'path'
+
+export class AuthenticatedApp {
+  private readonly codeContent: Locator
+  private readonly extrudeButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.codeContent = page.locator('.cm-content')
+    this.extrudeButton = page.getByTestId('extrude')
+  }
+
+  async initialise(code = '') {
+    const u = await getUtils(this.page)
+    await this.page.addInitScript(async (code) => {
+      localStorage.setItem('persistCode', code)
+      ;(window as any).playwrightSkipFilePicker = true
+    }, code)
+
+    await this.page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+  }
+  getInputFile = (fileName: string) => {
+    return fsp.readFile(
+      join('src', 'wasm-lib', 'tests', 'executor', 'inputs', fileName),
+      'utf-8'
+    )
+  }
+  makeMouseHelpers = (x: number, y: number) => [
+    () => this.page.mouse.click(x, y),
+    () => this.page.mouse.move(x, y),
+  ]
+
+  /** Likely no where, there's a chance it will click something in the scene, depending what you have in the scene.
+   *
+   * Expects the viewPort to be 1000x500 */
+  clickNoWhere = () => this.page.mouse.click(998, 60)
+
+  // Toolbars
+  expectExtrudeButtonToBeDisabled = async () =>
+    await expect(this.extrudeButton).toBeDisabled()
+  expectExtrudeButtonToBeEnabled = async () =>
+    await expect(this.extrudeButton).not.toBeDisabled()
+  clickExtrudeButton = async () => await this.extrudeButton.click()
+
+  serialiseCmdBar = async (): Promise<{
+    tabNames: Array<string>
+    inReview: boolean
+    currentArg: string
+    currentTab: string
+    currentArgValue: string
+  }> => {
+    const sanitizeString = (str: string) =>
+      str.replaceAll(/\n/g, '').replaceAll(/\s+/g, ' ').trim()
+    const reviewForm = await this.page.locator('#review-form')
+    const getTabs = () =>
+      this.page
+        .getByTestId('cmd-bar-input-tab')
+        .allInnerTexts()
+        .then((a) => a.map(sanitizeString))
+    if (await reviewForm.isVisible()) {
+      return {
+        tabNames: await getTabs(),
+        inReview: true,
+        currentArg: '',
+        currentTab: '',
+        currentArgValue: '',
+      }
+    }
+    const [currentArg, tabNames, currentTab, currentArgValue] =
+      await Promise.all([
+        this.page.getByTestId('cmd-bar-arg-name').textContent(),
+        getTabs(),
+        this.page.locator('[data-is-current-arg="true"]').textContent(),
+        this.page.getByTestId('cmd-bar-arg-value').textContent(),
+      ])
+    return {
+      currentArg: sanitizeString(currentArg || ''),
+      tabNames: tabNames,
+      currentTab: sanitizeString(currentTab || ''),
+      currentArgValue: sanitizeString(currentArgValue || ''),
+      inReview: false,
+    }
+  }
+  progressCmdBar = async () => {
+    if (Math.random() > 0.5) {
+      const arrowButton = this.page.getByRole('button', {
+        name: 'arrow right Continue',
+      })
+      // .click()
+      if (await arrowButton.isVisible()) {
+        await arrowButton.click()
+      } else {
+        await this.page
+          .getByRole('button', { name: 'checkmark Submit command' })
+          .click()
+      }
+    } else {
+      await this.page.keyboard.press('Enter')
+    }
+  }
+  expectCodeHighlightedToBe = async (code: string) =>
+    await expect
+      .poll(async () => {
+        const texts = (
+          await this.page.getByTestId('hover-highlight').allInnerTexts()
+        ).map((s) => s.replace(/\s+/g, '').trim())
+        return texts.join('')
+      })
+      .toBe(code.replace(/\s+/g, '').trim())
+  expectActiveLinesToBe = async (lines: Array<string>) => {
+    await expect
+      .poll(async () => {
+        return (await this.page.locator('.cm-activeLine').allInnerTexts()).map(
+          (l) => l.trim()
+        )
+      })
+      .toEqual(lines.map((l) => l.trim()))
+  }
+  private _expectEditorToContain =
+    (not = false) =>
+    (
+      code: string,
+      {
+        shouldNormalise = false,
+        timeout = 5_000,
+      }: { shouldNormalise?: boolean; timeout?: number } = {}
+    ) => {
+      if (!shouldNormalise) {
+        const expectStart = expect(this.codeContent)
+        if (not) {
+          return expectStart.not.toContainText(code, { timeout })
+        }
+        return expectStart.toContainText(code, { timeout })
+      }
+      const normalisedCode = code.replaceAll(/\s+/g, ' ').trim()
+      const expectStart = expect.poll(() => this.codeContent.textContent(), {
+        timeout,
+      })
+      if (not) {
+        return expectStart.not.toContain(normalisedCode)
+      }
+      return expectStart.toContain(normalisedCode)
+    }
+
+  expectEditor = {
+    toContain: this._expectEditorToContain(),
+    not: { toContain: this._expectEditorToContain(true) },
+  }
+}
+
+export const test = base.extend<{
+  app: AuthenticatedApp
+}>({
+  app: async ({ page }, use) => {
+    const authenticatedApp = new AuthenticatedApp(page)
+    await use(authenticatedApp)
+  },
+})
+
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
+})
+
+test.afterEach(async ({ page }, testInfo) => {
+  await tearDown(page, testInfo)
+})
+
+export { expect } from '@playwright/test'

e2e/playwright/point-click.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from './authenticatedApp'
+
+// test file is for testing point an click code gen functionality that's not sketch mode related
+
+test('verify extruding circle works', async ({ app }) => {
+  const file = await app.getInputFile('test-circle-extrude.kcl')
+  await app.initialise(file)
+  const [clickCircle, moveToCircle] = app.makeMouseHelpers(582, 217)
+
+  await test.step('because there is sweepable geometry, verify extrude is enable when nothing is selected', async () => {
+    await app.clickNoWhere()
+    await app.expectExtrudeButtonToBeEnabled()
+  })
+
+  await test.step('check code model connection works and that button is still enable once circle is selected ', async () => {
+    await moveToCircle()
+    const circleSnippet =
+      'circle({ center: [318.33, 168.1], radius: 182.8 }, %)'
+    await app.expectCodeHighlightedToBe(circleSnippet)
+
+    await clickCircle()
+    await app.expectActiveLinesToBe([circleSnippet.slice(-5)])
+    await app.expectExtrudeButtonToBeEnabled()
+  })
+
+  await test.step('do extrude flow and check extrude code is added to editor', async () => {
+    await app.clickExtrudeButton()
+
+    await expect
+      .poll(() => app.serialiseCmdBar())
+      .toEqual({
+        currentArg: 'distance',
+        tabNames: ['Selection: 1 face', 'Distance:'],
+        currentTab: 'distance:',
+        currentArgValue: '5',
+        inReview: false,
+      })
+    await app.progressCmdBar()
+
+    const expectString = 'const extrude001 = extrude(5, sketch001)'
+    app.expectEditor.not.toContain(expectString)
+
+    await expect
+      .poll(() => app.serialiseCmdBar())
+      .toEqual({
+        inReview: true,
+        tabNames: ['Selection: 1 face', 'Distance: 5'],
+        currentArg: '',
+        currentTab: '',
+        currentArgValue: '',
+      })
+    await app.progressCmdBar()
+
+    app.expectEditor.toContain(expectString)
+  })
+})

src/components/CommandBar/CommandBarBasicInput.tsx

@@ -33,11 +33,15 @@ function CommandBarBasicInput({
 
   return (
     <form id="arg-form" onSubmit={handleSubmit}>
-      <label className="flex items-center mx-4 my-4">
+      <label
+        data-testid="cmd-bar-arg-name"
+        className="flex items-center mx-4 my-4"
+      >
         <span className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
           {arg.name}
         </span>
         <input
+          data-testid="cmd-bar-arg-value"
           id="arg-form"
           name={arg.inputType}
           ref={inputRef}

src/components/CommandBar/CommandBarHeader.tsx

@@ -92,6 +92,10 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
 
                 return (
                   <button
+                    data-testid="cmd-bar-input-tab"
+                    data-is-current-arg={
+                      argName === currentArgument?.name ? 'true' : 'false'
+                    }
                     disabled={!isReviewing && currentArgument?.name === argName}
                     onClick={() => {
                       commandBarSend({

src/components/CommandBar/CommandBarKclInput.tsx

@@ -139,10 +139,17 @@ function CommandBarKclInput({
   return (
     <form id="arg-form" onSubmit={handleSubmit} data-can-submit={canSubmit}>
       <label className="flex gap-4 items-center mx-4 my-4 border-solid border-b border-chalkboard-50">
-        <span className="capitalize text-chalkboard-80 dark:text-chalkboard-20">
+        <span
+          data-testid="cmd-bar-arg-name"
+          className="capitalize text-chalkboard-80 dark:text-chalkboard-20"
+        >
           {arg.name}
         </span>
-        <div ref={editorRef} className={styles.editor} />
+        <div
+          data-testid="cmd-bar-arg-value"
+          ref={editorRef}
+          className={styles.editor}
+        />
         <CustomIcon
           name="equal"
           className="w-5 h-5 text-chalkboard-70 dark:text-chalkboard-40"

src/components/CommandBar/CommandBarTextareaInput.tsx

@@ -36,10 +36,14 @@ function CommandBarTextareaInput({
   return (
     <form id="arg-form" onSubmit={handleSubmit} ref={formRef}>
       <label className="flex items-start rounded mx-4 my-4 border border-chalkboard-100 dark:border-chalkboard-80">
-        <span className="capitalize px-2 py-1 rounded-br bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
+        <span
+          data-testid="cmd-bar-arg-name"
+          className="capitalize px-2 py-1 rounded-br bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80"
+        >
           {arg.name}
         </span>
         <textarea
+          data-testid="cmd-bar-arg-value"
           id="arg-form"
           name={arg.inputType}
           ref={inputRef}

src/wasm-lib/tests/executor/inputs/test-circle-extrude.kcl

@@ -0,0 +1,17 @@
+const sketch002 = startSketchOn('XZ')
+  |> startProfileAt([-108.83, -57.48], %)
+  |> angledLine([0, 105.13], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
+       77.9
+     ], %)
+  |> angledLine([
+       segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
+     ], %)
+  |> close(%)
+const sketch001 = startSketchOn('XZ')
+  |> circle({
+       center: [318.33, 168.1],
+       radius: 182.8
+     }, %)