feat: store and component mocks setup (#237)

* feat: store and component mocks setup

* feat: more examples

__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,
+  }
+})

__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', () => {
+  it('should render package version correctly', () => {
-    const wrapper = shallow(<Footer />)
+    const { getByText, container } = render(<Footer />)
-    const textComponent = wrapper.find(Text).at(0)
+    const versionText = getByText(`v${packageJSON.version}`)
-    const text = textComponent.dive().text()
 
-    expect(text).toBe(`v${packageJSON.version}`)
+    expect(versionText).toBeInTheDocument()
   })
 })

__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', () => {

__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()
+  })
+})

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: {

src/components/CircularProgress.tsx

@@ -31,11 +31,7 @@ export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Pr
     )
 
   return (
-    <div
+    <div className={loaderClasses} style={{ width: `${size}px`, height: `${size}px` }}>
-      data-testid='circular-progress-component'
-      className={loaderClasses}
-      style={{ width: `${size}px`, height: `${size}px` }}
-    >
       <div
         className={elementClasses}
         style={{

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

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 }

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'