refactor: add tests for BodyTemplate

opengovsg · May 3, 2021 · 9cc7c23 · 9cc7c23
1 parent fecd93c
commit 9cc7c23
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 187 deletions.
diff --git a/...ard/create/sms/tests/SMSTemplate.test.tsx → ...create/common/tests/BodyTemplate.test.tsx b/...ard/create/sms/tests/SMSTemplate.test.tsx → ...create/common/tests/BodyTemplate.test.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import { screen, mockCommonApis, server, render, Campaign } from 'test-utils'
-import SMSTemplate from '../SMSTemplate'
+import BodyTemplate from '../BodyTemplate'
 import CampaignContextProvider from 'contexts/campaign.context'
 import FinishLaterModalContextProvider from 'contexts/finish-later.modal.context'
 import userEvent from '@testing-library/user-event'
 import { Route } from 'react-router-dom'
+import { saveTemplate as saveSmsTemplate } from 'services/sms.service'
+import { saveTemplate as saveTelegramTemplate } from 'services/telegram.service'
 
 const TEST_SMS_CAMPAIGN: Campaign = {
   id: 1,
@@ -30,14 +32,21 @@ function mockApis() {
   return handlers
 }
 
-function renderTemplatePage() {
+function renderTemplatePage(
+  saveTemplate: typeof BodyTemplate.arguments.saveTemplate
+) {
   const setActiveStep = jest.fn()
 
   render(
     <Route path="/campaigns/:id">
       <CampaignContextProvider>
         <FinishLaterModalContextProvider>
-          <SMSTemplate setActiveStep={setActiveStep} />
+          <BodyTemplate
+            setActiveStep={setActiveStep}
+            saveTemplate={saveTemplate}
+            warnCharacterCount={5}
+            errorCharacterCount={10}
+          />
         </FinishLaterModalContextProvider>
       </CampaignContextProvider>
     </Route>,
@@ -50,7 +59,7 @@ function renderTemplatePage() {
 test('displays the necessary elements', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const heading = await screen.findByRole('heading', {
@@ -77,7 +86,7 @@ test('displays the necessary elements', async () => {
 test('next button is disabled when template is empty', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -102,7 +111,7 @@ test('next button is disabled when template is empty', async () => {
 test('next button is enabled when the template is filled', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -124,7 +133,7 @@ test('next button is enabled when the template is filled', async () => {
 test('character count text reflects the actual number of characters in the textbox', async () => {
   // Setup
   server.use(...mockApis())
-  renderTemplatePage()
+  renderTemplatePage(jest.fn())
 
   // Wait for the component to fully load
   const templateTextbox = await screen.findByRole('textbox', {
@@ -146,37 +155,56 @@ test('character count text reflects the actual number of characters in the textb
   }
 })
 
-test('displays an error if the template is invalid', async () => {
-  // Setup
-  jest.spyOn(console, 'error').mockImplementation(() => {
-    // Do nothing. Mock console.error to silence expected errors
-    // due to submitting invalid templates to the API
+describe('displays an error if the template is invalid', () => {
+  async function runTest() {
+    // Wait for the component to fully load
+    const templateTextbox = await screen.findByRole('textbox', {
+      name: /message/i,
+    })
+    const nextButton = screen.getByRole('button', { name: /next/i })
+
+    // Test against various invalid templates
+    const TEST_TEMPLATES = ['<hehe>', '<script>']
+    for (const template of TEST_TEMPLATES) {
+      // Type the template text into the textbox
+      userEvent.clear(templateTextbox)
+      userEvent.type(templateTextbox, template)
+
+      // Click the next button to submit the template
+      userEvent.click(nextButton)
+
+      // Assert that an error message is shown
+      expect(
+        await screen.findByText(/message template is invalid/i)
+      ).toBeInTheDocument()
+    }
+  }
+
+  beforeEach(() => {
+    // Setup
+    jest.spyOn(console, 'error').mockImplementation(() => {
+      // Do nothing. Mock console.error to silence expected errors
+      // due to submitting invalid templates to the API
+    })
+    server.use(...mockApis())
   })
-  server.use(...mockApis())
-  renderTemplatePage()
 
-  // Wait for the component to fully load
-  const templateTextbox = await screen.findByRole('textbox', {
-    name: /message/i,
+  afterEach(() => {
+    // Teardown
+    jest.restoreAllMocks()
   })
-  const nextButton = screen.getByRole('button', { name: /next/i })
 
-  // Test against various invalid templates
-  const TEST_TEMPLATES = ['<hehe>', '<script>']
-  for (const template of TEST_TEMPLATES) {
-    // Type the template text into the textbox
-    userEvent.clear(templateTextbox)
-    userEvent.type(templateTextbox, template)
+  test('sms', async () => {
+    // Setup
+    renderTemplatePage(saveSmsTemplate)
 
-    // Click the next button to submit the template
-    userEvent.click(nextButton)
+    await runTest()
+  })
 
-    // Assert that an error message is shown
-    expect(
-      await screen.findByText(/message template is invalid/i)
-    ).toBeInTheDocument()
-  }
+  test('email', async () => {
+    // Setup
+    renderTemplatePage(saveTelegramTemplate)
 
-  // Teardown
-  jest.restoreAllMocks()
+    await runTest()
+  })
 })
diff --git a/frontend/src/components/dashboard/create/telegram/tests/TelegramTemplate.test.tsx b/frontend/src/components/dashboard/create/telegram/tests/TelegramTemplate.test.tsx