Fix template settings tests

coder · presleyp · Dec 7, 2022 · Dec 6, 2022 · Dec 6, 2022 · Dec 6, 2022
commit 2a09e4297a6fd90ec6e5701ccb1403bc405eaa9c
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -41,26 +41,27 @@ const MAX_DESCRIPTION_CHAR_LIMIT = 128
 const MAX_TTL_DAYS = 7
 const MS_HOUR_CONVERSION = 3600000
 
-export const getValidationSchema = (): Yup.AnyObjectSchema => Yup.object({
-  name: nameValidator(i18next.t("nameLabel", { ns: "templateSettingsPage" })),
-  display_name: templateDisplayNameValidator(
-    i18next.t("displayNameLabel", {
-      ns: "templateSettingsPage",
-    }),
-  ),
-  description: Yup.string().max(
-    MAX_DESCRIPTION_CHAR_LIMIT,
-    i18next.t("descriptionMaxError", { ns: "templateSettingsPage" }),
-  ),
-  default_ttl_ms: Yup.number()
-    .integer()
-    .min(0, i18next.t("ttlMinError", { ns: "templateSettingsPage" }))
-    .max(
-      24 * MAX_TTL_DAYS /* 7 days in hours */,
-      i18next.t("ttlMaxError", { ns: "templateSettingsPage" }),
+export const getValidationSchema = (): Yup.AnyObjectSchema =>
+  Yup.object({
+    name: nameValidator(i18next.t("nameLabel", { ns: "templateSettingsPage" })),
+    display_name: templateDisplayNameValidator(
+      i18next.t("displayNameLabel", {
+        ns: "templateSettingsPage",
+      }),
     ),
-  allow_user_cancel_workspace_jobs: Yup.boolean(),
-})
+    description: Yup.string().max(
+      MAX_DESCRIPTION_CHAR_LIMIT,
+      i18next.t("descriptionMaxError", { ns: "templateSettingsPage" }),
+    ),
+    default_ttl_ms: Yup.number()
+      .integer()
+      .min(0, i18next.t("ttlMinError", { ns: "templateSettingsPage" }))
+      .max(
+        24 * MAX_TTL_DAYS /* 7 days in hours */,
+        i18next.t("ttlMaxError", { ns: "templateSettingsPage" }),
+      ),
+    allow_user_cancel_workspace_jobs: Yup.boolean(),
+  })
 
 export interface TemplateSettingsForm {
   template: Template

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
@@ -6,19 +6,21 @@ import { Language as FooterFormLanguage } from "components/FormFooter/FormFooter
 import { MockTemplate } from "../../testHelpers/entities"
 import { renderWithAuth } from "../../testHelpers/renderHelpers"
 import {
-  Language as FormLanguage,
-  validationSchema,
+  getValidationSchema,
 } from "./TemplateSettingsForm"
 import { TemplateSettingsPage } from "./TemplateSettingsPage"
 import i18next from "i18next"
 
+const { t } = i18next
+
 const renderTemplateSettingsPage = async () => {
   const renderResult = renderWithAuth(<TemplateSettingsPage />, {
     route: `/templates/${MockTemplate.name}/settings`,
     path: `/templates/:templateId/settings`,
   })
   // Wait the form to be rendered
-  await screen.findAllByLabelText(FormLanguage.nameLabel)
+  const label = t("nameLabel", { ns: "templateSettingsPage" })
+  await screen.findAllByLabelText(label)
   return renderResult
 }
 
@@ -39,28 +41,31 @@ const fillAndSubmitForm = async ({
   icon,
   allow_user_cancel_workspace_jobs,
 }: Required<UpdateTemplateMeta>) => {
-  const nameField = await screen.findByLabelText(FormLanguage.nameLabel)
+  const label = t("nameLabel", { ns: "templateSettingsPage" })
+  const nameField = await screen.findByLabelText(label)
   await userEvent.clear(nameField)
   await userEvent.type(nameField, name)
 
-  const { t } = i18next
-  const displayNameLabel = t("displayNameLabel", { ns: "templatePage" })
+  const displayNameLabel = t("displayNameLabel", { ns: "templateSettingsPage" })
 
   const displayNameField = await screen.findByLabelText(displayNameLabel)
   await userEvent.clear(displayNameField)
   await userEvent.type(displayNameField, display_name)
 
+  const descriptionLabel = t("descriptionLabel", { ns: "templateSettingsPage" })
   const descriptionField = await screen.findByLabelText(
-    FormLanguage.descriptionLabel,
+    descriptionLabel,
   )
   await userEvent.clear(descriptionField)
   await userEvent.type(descriptionField, description)
 
-  const iconField = await screen.findByLabelText(FormLanguage.iconLabel)
+  const iconLabel = t("iconLabel", { ns: "templateSettingsPage" })
+  const iconField = await screen.findByLabelText(iconLabel)
   await userEvent.clear(iconField)
   await userEvent.type(iconField, icon)
 
-  const maxTtlField = await screen.findByLabelText(FormLanguage.defaultTtlLabel)
+  const defaultTtlLabel = t("defaultTtlLabel", { ns: "templateSettingsPage" })
+  const maxTtlField = await screen.findByLabelText(defaultTtlLabel)
   await userEvent.clear(maxTtlField)
   await userEvent.type(maxTtlField, default_ttl_ms.toString())
 
@@ -79,8 +84,8 @@ const fillAndSubmitForm = async ({
 describe("TemplateSettingsPage", () => {
   it("renders", async () => {
     const { t } = i18next
-    const pageTitle = t("templateSettings.title", {
-      ns: "templatePage",
+    const pageTitle = t("title", {
+      ns: "templateSettingsPage",
     })
     await renderTemplateSettingsPage()
     const element = await screen.findByText(pageTitle)
@@ -90,8 +95,8 @@ describe("TemplateSettingsPage", () => {
   it("allows an admin to delete a template", async () => {
     const { t } = i18next
     await renderTemplateSettingsPage()
-    const deleteCta = t("templateSettings.dangerZone.deleteCta", {
-      ns: "templatePage",
+    const deleteCta = t("dangerZone.deleteCta", {
+      ns: "templateSettingsPage",
     })
     const deleteButton = await screen.findByText(deleteCta)
     expect(deleteButton).toBeDefined()
@@ -137,7 +142,7 @@ describe("TemplateSettingsPage", () => {
       ...validFormValues,
       default_ttl_ms: 24 * 7,
     }
-    const validate = () => validationSchema.validateSync(values)
+    const validate = () => getValidationSchema().validateSync(values)
     expect(validate).not.toThrowError()
   })
 
@@ -146,7 +151,7 @@ describe("TemplateSettingsPage", () => {
       ...validFormValues,
       default_ttl_ms: 0,
     }
-    const validate = () => validationSchema.validateSync(values)
+    const validate = () => getValidationSchema().validateSync(values)
     expect(validate).not.toThrowError()
   })
 
@@ -155,8 +160,8 @@ describe("TemplateSettingsPage", () => {
       ...validFormValues,
       default_ttl_ms: 24 * 7 + 1,
     }
-    const validate = () => validationSchema.validateSync(values)
-    expect(validate).toThrowError(FormLanguage.ttlMaxError)
+    const validate = () => getValidationSchema().validateSync(values)
+    expect(validate).toThrowError(t("ttlMaxError", { ns: "templateSettingsPage" }))
   })
 
   it("allows a description of 128 chars", () => {
@@ -165,7 +170,7 @@ describe("TemplateSettingsPage", () => {
       description:
         "Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, port",
     }
-    const validate = () => validationSchema.validateSync(values)
+    const validate = () => getValidationSchema().validateSync(values)
     expect(validate).not.toThrowError()
   })
 
@@ -175,7 +180,7 @@ describe("TemplateSettingsPage", () => {
       description:
         "Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, port a",
     }
-    const validate = () => validationSchema.validateSync(values)
-    expect(validate).toThrowError(FormLanguage.descriptionMaxError)
+    const validate = () => getValidationSchema().validateSync(values)
+    expect(validate).toThrowError(t("descriptionMaxError", { ns: "templateSettingsPage" }))
   })
 })
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx
@@ -86,9 +86,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
                 <p className={classes.deleteTemplateHeader}>
                   {t("dangerZone.deleteTemplateHeader")}
                 </p>
-                <span>
-                  {t("dangerZone.deleteTemplateCaption")}
-                </span>
+                <span>{t("dangerZone.deleteTemplateCaption")}</span>
               </Stack>
               <Button
                 className={classes.deleteButton}