fixing tests

newjersey · May 22, 2024 · 4bea93f · 4bea93f
1 parent f13af11
commit 4bea93f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 30 deletions.
diff --git a/src/templates/EmailEditorContent/__tests__/index.test.tsx b/src/templates/EmailEditorContent/__tests__/index.test.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
 import { render } from '@testing-library/react'
 import { faker } from '@faker-js/faker'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { EmailTemplate } from 'src/appTypes'
 import {
   buildUniqueEmailComponent,
@@ -24,8 +25,10 @@ jest.mock('src/utils/download', () => {
 describe('EmailEditorContent', () => {
   let emailTemplate: EmailTemplate.UniqueConfig
   let alertSpy: jest.SpyInstance
+  let client: QueryClient
 
   beforeEach(() => {
+    client = new QueryClient()
     emailTemplate = buildUniqueEmailConfig({
       components: [
         buildUniqueEmailComponent('Header', {
@@ -47,7 +50,9 @@ describe('EmailEditorContent', () => {
   it('can display the email in desktop or mobile', async () => {
     const user = userEvent.setup()
     const { baseElement, getByLabelText } = render(
-      <EmailEditorContent emailTemplate={emailTemplate} />,
+      <QueryClientProvider client={client}>
+        <EmailEditorContent emailTemplate={emailTemplate} />
+      </QueryClientProvider>,
     )
 
     expect(baseElement.querySelector('.email-preview-desktop')).not.toBeNull()
@@ -64,17 +69,23 @@ describe('EmailEditorContent', () => {
   })
 
   it('can display the email components and subcomponents', () => {
-    const { queryByText } = render(<EmailEditorContent emailTemplate={emailTemplate} />)
+    const { queryByText } = render(
+      <QueryClientProvider client={client}>
+        <EmailEditorContent emailTemplate={emailTemplate} />
+       </QueryClientProvider>
+    )
     expect(queryByText('Title')).not.toBeNull()
     expect(queryByText('Dependency Benefits')).not.toBeNull()
   })
 
   it('raises an alert if the user tries to export the email without preview text', async () => {
     const user = userEvent.setup()
     const { getByText } = render(
-      <EmailPartsContent>
-        <EmailEditorContent emailTemplate={emailTemplate} />
-      </EmailPartsContent>,
+      <QueryClientProvider client={client}>
+        <EmailPartsContent>
+          <EmailEditorContent emailTemplate={emailTemplate} />
+        </EmailPartsContent>
+      </QueryClientProvider>,
     )
     const value = faker.lorem.words(4)
     await user.type(getByText('Title'), value)
@@ -93,11 +104,13 @@ describe('EmailEditorContent', () => {
     const user = userEvent.setup()
 
     const { getByText } = render(
-      <PreviewText initialValue="Some preview text">
-        <EmailPartsContent>
-          <EmailEditorContent emailTemplate={emailTemplate} />
-        </EmailPartsContent>
-      </PreviewText>,
+      <QueryClientProvider client={client}>
+        <PreviewText initialValue="Some preview text">
+          <EmailPartsContent>
+            <EmailEditorContent emailTemplate={emailTemplate} />
+          </EmailPartsContent>
+        </PreviewText>
+      </QueryClientProvider>,
     )
 
     const value = faker.lorem.words(4)
@@ -116,11 +129,13 @@ describe('EmailEditorContent', () => {
     const user = userEvent.setup()
 
     const { getByText } = render(
-      <PreviewText initialValue="Some preview text">
-        <EmailPartsContent>
-          <EmailEditorContent emailTemplate={emailTemplate} />
-        </EmailPartsContent>
-      </PreviewText>,
+      <QueryClientProvider client={client}>
+        <PreviewText initialValue="Some preview text">
+          <EmailPartsContent>
+            <EmailEditorContent emailTemplate={emailTemplate} />
+          </EmailPartsContent>
+        </PreviewText>
+      </QueryClientProvider>,
     )
 
     const value = faker.lorem.words(4)
@@ -140,14 +155,22 @@ describe('EmailEditorContent', () => {
   })
 
   it('displays the edit preview text field', () => {
-    const { baseElement } = render(<EmailEditorContent emailTemplate={emailTemplate} />)
+    const { baseElement } = render(
+      <QueryClientProvider client={client}>
+        <EmailEditorContent emailTemplate={emailTemplate} />
+      </QueryClientProvider>
+    )
     const input = baseElement.querySelector('#edit-preview-text')
 
     expect(input).not.toBeNull()
   })
 
   it('renders the preview text', () => {
-    const { baseElement } = render(<EmailEditorContent emailTemplate={emailTemplate} />)
+    const { baseElement } = render(
+      <QueryClientProvider client={client}>
+        <EmailEditorContent emailTemplate={emailTemplate} />
+      </QueryClientProvider>
+    )
     expect(baseElement.querySelector('#preview-text')).not.toBeNull()
   })
 
@@ -157,12 +180,20 @@ describe('EmailEditorContent', () => {
     })
 
     it('does not have a download HTML button', () => {
-      const { queryByText } = render(<EmailEditorContent emailTemplate={emailTemplate} />)
+      const { queryByText } = render(
+        <QueryClientProvider client={client}>
+          <EmailEditorContent emailTemplate={emailTemplate} />
+        </QueryClientProvider>
+      )
       expect(queryByText('Download HTML')).toBeNull()
     })
 
     it('does not have a copy HTML button', () => {
-      const { queryByText } = render(<EmailEditorContent emailTemplate={emailTemplate} />)
+      const { queryByText } = render(
+        <QueryClientProvider client={client}>
+          <EmailEditorContent emailTemplate={emailTemplate} />
+        </QueryClientProvider>
+      )
       expect(queryByText('Copy HTML')).toBeNull()
     })
   })

diff --git a/src/templates/__tests__/EmailEditorPage.test.tsx b/src/templates/__tests__/EmailEditorPage.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { RenderResult, render } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { EmailTemplate } from 'src/appTypes'
 import EmailEditorPage, { Head } from '../EmailEditorPage'
 import {
@@ -17,6 +18,7 @@ describe('EmailEditorPage', () => {
   let defaultPreviewText: string
 
   beforeEach(() => {
+    const client = new QueryClient()
     user = userEvent.setup()
     defaultPreviewText = faker.lorem.paragraph()
     emailTemplate = buildEmailTemplateConfig({
@@ -42,7 +44,7 @@ describe('EmailEditorPage', () => {
         buildEmailTemplateComponent('Disclaimer'),
       ],
     })
-    rendered = render(<EmailEditorPage pageContext={{ emailTemplate }} />)
+    rendered = render(<QueryClientProvider client={client}> <EmailEditorPage pageContext={{ emailTemplate }} /> </QueryClientProvider>)
   })
 
   it('is displays the layout', () => {

diff --git a/src/ui/__tests__/ExportImageButton.test.tsx b/src/ui/__tests__/ExportImageButton.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { faker } from '@faker-js/faker'
 import { render } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ExportImageButton } from '../ExportImageButton'
 import { download } from 'src/utils/download'
 import userEvent from '@testing-library/user-event'
@@ -12,25 +13,35 @@ jest.mock('src/utils/download', () => {
 })
 
 describe('ExportImageButton', () => {
+  let client: QueryClient
+
+  beforeEach(() => {
+    client = new QueryClient()
+  })
+
   it('is a button', () => {
     const { queryByRole } = render(
-      <ExportImageButton
-        html={faker.lorem.paragraph()}
-        fileName={faker.lorem.word()}
-      >
-        {faker.lorem.word()}
-      </ExportImageButton>,
+      <QueryClientProvider client={client}>
+        <ExportImageButton
+          html={faker.lorem.paragraph()}
+          fileName={faker.lorem.word()}
+        >
+          {faker.lorem.word()}
+        </ExportImageButton>
+      </QueryClientProvider>,
     )
     const button = queryByRole('button')
     expect(button).not.toBeNull()
   })
-  
+
   it('displays its children', () => {
     const text = faker.lorem.paragraph()
     const { baseElement } = render(
-      <ExportImageButton html={faker.lorem.paragraph()} fileName={faker.lorem.word()}>
-        <div>{text}</div>
-      </ExportImageButton>,
+      <QueryClientProvider client={client}>
+        <ExportImageButton html={faker.lorem.paragraph()} fileName={faker.lorem.word()}>
+          <div>{text}</div>
+        </ExportImageButton>
+      </QueryClientProvider>,
     )
     expect(baseElement).toContainHTML(`<div>${text}</div>`)
   })