Add a few more tests

coder · BrunoQuaresma · Feb 17, 2023 · Feb 16, 2023 · Feb 16, 2023 · Feb 16, 2023
commit 8b6bfcfa31e2f2d3bcf0df77cab13e62817dac2f
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { createContext, FC, Suspense, useContext } from "react"
-import { NavLink, Outlet, useParams } from "react-router-dom"
+import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
 import {
   TemplateContext,
@@ -47,6 +47,7 @@ export const useTemplateLayoutContext = (): TemplateLayoutContextValue => {
 export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   children = <Outlet />,
 }) => {
+  const navigate = useNavigate()
   const styles = useStyles()
   const organizationId = useOrganizationId()
   const templateName = useTemplateName()
@@ -68,6 +69,9 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
       <TemplatePageHeader
         template={template}
         permissions={templatePermissions}
+        onDeleteTemplate={() => {
+          navigate("/templates")
+        }}
       />
 
       <div className={styles.tabs}>

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import { MockTemplate } from "testHelpers/entities"
+import {
+  TemplatePageHeader,
+  TemplatePageHeaderProps,
+} from "./TemplatePageHeader"
+
+export default {
+  title: "Components/TemplatePageHeader",
+  component: TemplatePageHeader,
+  argTypes: {
+    template: {
+      defaultValue: MockTemplate,
+    },
+    permissions: {
+      defaultValue: {
+        canUpdateTemplate: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof TemplatePageHeader>
+
+const Template: Story<TemplatePageHeaderProps> = (args) => (
+  <TemplatePageHeader {...args} />
+)
+
+export const CanUpdate = Template.bind({})
+CanUpdate.args = {}
+
+export const CanNotUpdate = Template.bind({})
+CanNotUpdate.args = {}
diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -14,7 +14,7 @@ import {
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import { useDeleteTemplate } from "./delete"
+import { useDeleteTemplate } from "./deleteTemplate"
 import { Margins } from "components/Margins/Margins"
 
 const Language = {
@@ -55,12 +55,19 @@ const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
   </Button>
 )
 
-export const TemplatePageHeader: FC<{
+export type TemplatePageHeaderProps = {
   template: Template
   permissions: AuthorizationResponse
-}> = ({ template, permissions }) => {
+  onDeleteTemplate: () => void
+}
+
+export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
+  template,
+  permissions,
+  onDeleteTemplate,
+}) => {
   const hasIcon = template.icon && template.icon !== ""
-  const deleteTemplate = useDeleteTemplate(template)
+  const deleteTemplate = useDeleteTemplate(template, onDeleteTemplate)
 
   return (
     <Margins>

diff --git a/site/src/components/TemplateLayout/deleteTemplate.test.ts b/site/src/components/TemplateLayout/deleteTemplate.test.ts
@@ -0,0 +1,48 @@
+import { act, renderHook, waitFor } from "@testing-library/react"
+import { MockTemplate } from "testHelpers/entities"
+import { useDeleteTemplate } from "./deleteTemplate"
+import * as API from "api/api"
+
+test("delete dialog starts closed", () => {
+  const { result } = renderHook(() =>
+    useDeleteTemplate(MockTemplate, jest.fn()),
+  )
+  expect(result.current.isDeleteDialogOpen).toBeFalsy()
+})
+
+test("confirm template deletion", async () => {
+  const onDeleteTemplate = jest.fn()
+  const { result } = renderHook(() =>
+    useDeleteTemplate(MockTemplate, onDeleteTemplate),
+  )
+
+  //Open delete confirmation
+  act(() => {
+    result.current.openDeleteConfirmation()
+  })
+  expect(result.current.isDeleteDialogOpen).toBeTruthy()
+
+  // Confirm delete
+  jest.spyOn(API, "deleteTemplate")
+  await act(async () => result.current.confirmDelete())
+  await waitFor(() => expect(API.deleteTemplate).toBeCalledTimes(1))
+  expect(onDeleteTemplate).toBeCalledTimes(1)
+})
+
+test("cancel template deletion", () => {
+  const { result } = renderHook(() =>
+    useDeleteTemplate(MockTemplate, jest.fn()),
+  )
+
+  //Open delete confirmation
+  act(() => {
+    result.current.openDeleteConfirmation()
+  })
+  expect(result.current.isDeleteDialogOpen).toBeTruthy()
+
+  // Cancel deletion
+  act(() => {
+    result.current.cancelDeleteConfirmation()
+  })
+  expect(result.current.isDeleteDialogOpen).toBeFalsy()
+})
diff --git a/site/src/components/TemplateLayout/delete.ts → ...mponents/TemplateLayout/deleteTemplate.ts b/site/src/components/TemplateLayout/delete.ts → ...mponents/TemplateLayout/deleteTemplate.ts
@@ -1,15 +1,13 @@
 import { deleteTemplate } from "api/api"
 import { Template } from "api/typesGenerated"
 import { useState } from "react"
-import { useNavigate } from "react-router-dom"
 
 type DeleteTemplateState =
   | { status: "idle" }
   | { status: "confirming" }
   | { status: "deleting" }
 
-export const useDeleteTemplate = (template: Template) => {
-  const navigate = useNavigate()
+export const useDeleteTemplate = (template: Template, onDelete: () => void) => {
   const [state, setState] = useState<DeleteTemplateState>({ status: "idle" })
   const isDeleteDialogOpen =
     state.status === "confirming" || state.status === "deleting"
@@ -25,7 +23,7 @@ export const useDeleteTemplate = (template: Template) => {
   const confirmDelete = async () => {
     setState({ status: "deleting" })
     await deleteTemplate(template.id)
-    navigate("/templates")
+    onDelete()
   }
 
   return {

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
@@ -88,16 +88,6 @@ describe("TemplateSettingsPage", () => {
     expect(element).toBeDefined()
   })
 
-  it("allows an admin to delete a template", async () => {
-    const { t } = i18next
-    await renderTemplateSettingsPage()
-    const deleteCta = t("dangerZone.deleteCta", {
-      ns: "templateSettingsPage",
-    })
-    const deleteButton = await screen.findByText(deleteCta)
-    expect(deleteButton).toBeDefined()
-  })
-
   it("succeeds", async () => {
     await renderTemplateSettingsPage()