From e651e9c7975fa033045973f89114f1fe27f11af2 Mon Sep 17 00:00:00 2001
From: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>
Date: Tue, 30 May 2023 12:16:13 +0300
Subject: [PATCH] feat: store and component mocks setup (#237)

* feat: store and component mocks setup

* feat: more examples
---
 __mocks__/store.js                            | 23 +++++++++++++
 __tests__/Footer.test.tsx                     | 12 +++----
 __tests__/components/Button/Button.test.tsx   | 30 ++++++++++++++--
 .../components/CircularProgress.test.tsx      | 34 +++++++++++++++++++
 jest.config.js                                |  6 +++-
 src/components/CircularProgress.tsx           |  6 +---
 src/store/index.ts                            |  8 ++++-
 src/utils/testing.tsx                         |  7 ++++
 test.setup.js                                 |  1 -
 9 files changed, 109 insertions(+), 18 deletions(-)
 create mode 100644 __mocks__/store.js
 create mode 100644 __tests__/components/CircularProgress.test.tsx
 create mode 100644 src/utils/testing.tsx

diff --git a/__mocks__/store.js b/__mocks__/store.js
new file mode 100644
index 00000000..0ceb53cc
--- /dev/null
+++ b/__mocks__/store.js
@@ -0,0 +1,23 @@
+jest.mock('store', () => {
+  let state = {}
+
+  const mockUseStore = (selectorFn) => {
+    return selectorFn(state)
+  }
+
+  mockUseStore.setState = (newState) => {
+    state = {
+      ...state,
+      ...newState,
+    }
+  }
+
+  mockUseStore.clearState = () => {
+    state = {}
+  }
+
+  return {
+    __esModule: true,
+    default: mockUseStore,
+  }
+})
diff --git a/__tests__/Footer.test.tsx b/__tests__/Footer.test.tsx
index 650e253f..d68cd3a8 100644
--- a/__tests__/Footer.test.tsx
+++ b/__tests__/Footer.test.tsx
@@ -1,16 +1,14 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import Footer from 'components/Footer'
-import Text from 'components/Text'
 
 import packageJSON from '../package.json'
 
 describe('<Footer />', () => {
-  it('should render correctly', () => {
-    const wrapper = shallow(<Footer />)
-    const textComponent = wrapper.find(Text).at(0)
-    const text = textComponent.dive().text()
+  it('should render package version correctly', () => {
+    const { getByText, container } = render(<Footer />)
+    const versionText = getByText(`v${packageJSON.version}`)
 
-    expect(text).toBe(`v${packageJSON.version}`)
+    expect(versionText).toBeInTheDocument()
   })
 })
diff --git a/__tests__/components/Button/Button.test.tsx b/__tests__/components/Button/Button.test.tsx
index 4ef4e298..829d6029 100644
--- a/__tests__/components/Button/Button.test.tsx
+++ b/__tests__/components/Button/Button.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { cleanup, render } from '@testing-library/react'
 
 import Button from 'components/Button'
 import {
@@ -7,10 +7,18 @@ import {
   buttonVariantClasses,
   focusClasses,
 } from 'components/Button/constants'
+import { parseMockComponent } from 'utils/testing'
+
+jest.mock('components/CircularProgress', () => {
+  const { createMockComponent } = require('utils/testing')
+  return {
+    CircularProgress: (props: any) => createMockComponent('circular-progress-component', props),
+  }
+})
 
 describe('<Button />', () => {
   afterAll(() => {
-    jest.resetAllMocks()
+    jest.clearAllMocks()
   })
 
   it('should render', () => {
@@ -66,8 +74,24 @@ describe('<Button />', () => {
 
   it('should show progress indicator when `showProgressIndicator=true`', () => {
     const { getByTestId } = render(<Button showProgressIndicator={true} />)
+    const circularProgressComponent = getByTestId('circular-progress-component')
 
-    expect(getByTestId('circular-progress-component')).toBeInTheDocument()
+    expect(circularProgressComponent).toBeInTheDocument()
+  })
+
+  it('should set correct values for progress indicator size', () => {
+    const sizeValues = { small: 10, medium: 12, large: 18 }
+
+    Object.entries(sizeValues).forEach(([size, value]) => {
+      const { getByTestId } = render(
+        <Button showProgressIndicator={true} size={size as keyof typeof buttonSizeClasses} />,
+      )
+      const circularProgressComponent = getByTestId('circular-progress-component')
+      const sizeProp = parseMockComponent(circularProgressComponent).size
+
+      expect(sizeProp).toBe(value)
+      cleanup()
+    })
   })
 
   it('should handle `size` prop correctly', () => {
diff --git a/__tests__/components/CircularProgress.test.tsx b/__tests__/components/CircularProgress.test.tsx
new file mode 100644
index 00000000..b4aeb883
--- /dev/null
+++ b/__tests__/components/CircularProgress.test.tsx
@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react'
+
+import { CircularProgress } from 'components/CircularProgress'
+import useStore from 'store'
+
+describe('<CircularProgress />', () => {
+  afterAll(() => {
+    useStore.clearState()
+  })
+
+  it('should render', () => {
+    const { container } = render(<CircularProgress />)
+
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should render `...` when animations disabled', () => {
+    useStore.setState({ enableAnimations: false })
+
+    const { getByText } = render(<CircularProgress />)
+    const threeDots = getByText('...')
+
+    expect(threeDots).toBeInTheDocument()
+  })
+
+  it('should render the component with animation classes when animations enabled', () => {
+    useStore.setState({ enableAnimations: true })
+
+    const { container } = render(<CircularProgress />)
+    const progressWithAnimations = container.querySelector('.animate-progress')
+
+    expect(progressWithAnimations).toBeInTheDocument()
+  })
+})
diff --git a/jest.config.js b/jest.config.js
index b23f1dd3..cf83e3cc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -39,7 +39,11 @@ module.exports = {
     '^store': '<rootDir>/src/store',
   },
   // Add more setup options before each test is run
-  setupFilesAfterEnv: ['<rootDir>/test.polyfills.js', '<rootDir>/test.setup.js'],
+  setupFilesAfterEnv: [
+    '<rootDir>/test.polyfills.js',
+    '<rootDir>/test.setup.js',
+    '<rootDir>/__mocks__/store.js',
+  ],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
   testEnvironment: 'jsdom',
   transform: {
diff --git a/src/components/CircularProgress.tsx b/src/components/CircularProgress.tsx
index 946a5105..15fd9844 100644
--- a/src/components/CircularProgress.tsx
+++ b/src/components/CircularProgress.tsx
@@ -31,11 +31,7 @@ export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Pr
     )
 
   return (
-    <div
-      data-testid='circular-progress-component'
-      className={loaderClasses}
-      style={{ width: `${size}px`, height: `${size}px` }}
-    >
+    <div className={loaderClasses} style={{ width: `${size}px`, height: `${size}px` }}>
       <div
         className={elementClasses}
         style={{
diff --git a/src/store/index.ts b/src/store/index.ts
index 2bd64969..50ad5d61 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -15,6 +15,12 @@ const store = (set: SetState<any>, get: GetState<any>) => ({
   ...createModalSlice(set, get),
 })
 
+interface UseStoreWithClear extends UseBoundStore<StoreApi<Store>> {
+  /**
+   * For tests only: Clears the state, and set it to an empty object.
+   */
+  clearState: () => {}
+}
 let useStore: UseBoundStore<StoreApi<Store>>
 
 if (process.env.NODE_ENV === 'development') {
@@ -23,4 +29,4 @@ if (process.env.NODE_ENV === 'development') {
   useStore = create<Store>(store)
 }
 
-export default useStore
+export default useStore as UseStoreWithClear
diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx
new file mode 100644
index 00000000..2214907c
--- /dev/null
+++ b/src/utils/testing.tsx
@@ -0,0 +1,7 @@
+const createMockComponent = (testId?: string, props?: any) => (
+  <div {...(testId && { 'data-testid': testId })}>{JSON.stringify(props)}</div>
+)
+
+const parseMockComponent = (element: HTMLElement) => JSON.parse(element.innerHTML)
+
+export { createMockComponent, parseMockComponent }
diff --git a/test.setup.js b/test.setup.js
index 429cc404..782b9bd2 100644
--- a/test.setup.js
+++ b/test.setup.js
@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom/extend-expect'
-
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'