Form is populated

mtojek · mtojek · commit 497b024e0ff6 · 2023-04-19T11:37:02.000+02:00
diff --git a/site/e2e/pom/CreateTemplatePage.ts b/site/e2e/pom/CreateTemplatePage.ts
@@ -0,0 +1,33 @@
+import { expect, Locator, Page } from "@playwright/test"
+import { BasePom } from "./BasePom"
+
+export class CreateTemplatePage extends BasePom {
+  readonly createTemplateForm: Locator
+  readonly createTemplateButton: Locator
+
+  constructor(baseURL: string | undefined, page: Page) {
+    super(baseURL, `/templates`, page)
+
+    this.createTemplateForm = page.getByTestId("form-create-template")
+    this.createTemplateButton = page.getByTestId("button-create-template")
+  }
+
+  async loaded() {
+    await expect(this.page).toHaveTitle("Create Template - Coder")
+
+    await this.createTemplateForm.waitFor({ state: "visible" })
+    await this.createTemplateButton.waitFor({ state: "visible" })
+  }
+
+  async fillIn() {
+    await this.createTemplateForm.getByLabel("Name *").fill("my-first-template")
+    await this.createTemplateForm
+      .getByLabel("Display name")
+      .fill("My First Template")
+    await this.createTemplateForm
+      .getByLabel("Description")
+      .fill("This is my first template.")
+
+    await this.createTemplateButton.click()
+  }
+}
diff --git a/site/e2e/pom/TemplatesPage.ts b/site/e2e/pom/TemplatesPage.ts
@@ -0,0 +1,26 @@
+import { expect, Locator, Page } from "@playwright/test"
+import { BasePom } from "./BasePom"
+
+export class TemplatesPage extends BasePom {
+  readonly addTemplateButton: Locator
+
+  constructor(baseURL: string | undefined, page: Page) {
+    super(baseURL, `/templates`, page)
+
+    this.addTemplateButton = page.getByTestId("button-add-template")
+  }
+
+  async goto() {
+    await this.page.goto(this.url, { waitUntil: "networkidle" })
+  }
+
+  async loaded() {
+    await expect(this.page).toHaveTitle("Templates - Coder")
+
+    await this.addTemplateButton.waitFor({ state: "visible" })
+  }
+
+  async addTemplate() {
+    await this.addTemplateButton.click()
+  }
+}
diff --git a/site/e2e/tests/basicScenario.spec.ts b/site/e2e/tests/basicScenario.spec.ts
@@ -0,0 +1,25 @@
+import { test } from "@playwright/test"
+import { getStatePath } from "../helpers"
+import { TemplatesPage } from "../pom/TemplatesPage"
+import { CreateTemplatePage } from "../pom/CreateTemplatePage"
+
+test.use({ storageState: getStatePath("authState") })
+
+test("Basic scenario", async ({ page, baseURL }) => {
+  const templatesPage = new TemplatesPage(baseURL, page)
+  const createTemplatePage = new CreateTemplatePage(baseURL, page)
+
+  await test.step("Load empty templates page", async () => {
+    await templatesPage.goto()
+    await templatesPage.loaded()
+  })
+
+  await test.step("Upload a template", async () => {
+    await templatesPage.addTemplate()
+    await createTemplatePage.loaded()
+
+    await createTemplatePage.fillIn()
+
+    await page.waitForTimeout(5 * 60 * 1000) // FIXME
+  })
+})
diff --git a/site/e2e/tests/listTemplates.spec.ts b/site/e2e/tests/listTemplates.spec.ts
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -16,13 +16,15 @@ export interface FormFooterProps {
   styles?: FormFooterStyles
   submitLabel?: string
   submitDisabled?: boolean
+  submitTestId?: string
 }
 
 export const FormFooter: FC<FormFooterProps> = ({
   onCancel,
   isLoading,
   submitDisabled,
   submitLabel = Language.defaultSubmitLabel,
+  submitTestId,
   styles = defaultStyles(),
 }) => {
   return (
@@ -35,6 +37,7 @@ export const FormFooter: FC<FormFooterProps> = ({
         color="primary"
         type="submit"
         disabled={submitDisabled}
+        data-testid={submitTestId}
       >
         {submitLabel}
       </LoadingButton>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -225,7 +225,10 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
   const { t: commonT } = useTranslation("common")
 
   return (
-    <HorizontalForm onSubmit={form.handleSubmit}>
+    <HorizontalForm
+      onSubmit={form.handleSubmit}
+      data-testid="form-create-template"
+    >
       {/* General info */}
       <FormSection
         title={t("form.generalInfo.title")}
@@ -505,6 +508,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
         onCancel={onCancel}
         isLoading={isSubmitting}
         submitLabel={jobError ? "Retry" : "Create template"}
+        submitTestId="button-create-template"
       />
     </HorizontalForm>
   )
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -158,7 +158,12 @@ export const TemplatesPageView: FC<
             >
               Starter templates
             </Button>
-            <Button startIcon={<AddIcon />} component={RouterLink} to="new">
+            <Button
+              startIcon={<AddIcon />}
+              component={RouterLink}
+              to="new"
+              data-testid="button-add-template"
+            >
               Add template
             </Button>
           </Maybe>
