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('', () => {
- it('should render correctly', () => {
- const wrapper = shallow()
- const textComponent = wrapper.find(Text).at(0)
- const text = textComponent.dive().text()
+ it('should render package version correctly', () => {
+ const { getByText, container } = render()
+ 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('', () => {
afterAll(() => {
- jest.resetAllMocks()
+ jest.clearAllMocks()
})
it('should render', () => {
@@ -66,8 +74,24 @@ describe('', () => {
it('should show progress indicator when `showProgressIndicator=true`', () => {
const { getByTestId } = render()
+ 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(
+ ,
+ )
+ 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('', () => {
+ afterAll(() => {
+ useStore.clearState()
+ })
+
+ it('should render', () => {
+ const { container } = render()
+
+ expect(container).toBeInTheDocument()
+ })
+
+ it('should render `...` when animations disabled', () => {
+ useStore.setState({ enableAnimations: false })
+
+ const { getByText } = render()
+ const threeDots = getByText('...')
+
+ expect(threeDots).toBeInTheDocument()
+ })
+
+ it('should render the component with animation classes when animations enabled', () => {
+ useStore.setState({ enableAnimations: true })
+
+ const { container } = render()
+ 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': '/src/store',
},
// Add more setup options before each test is run
- setupFilesAfterEnv: ['/test.polyfills.js', '/test.setup.js'],
+ setupFilesAfterEnv: [
+ '/test.polyfills.js',
+ '/test.setup.js',
+ '/__mocks__/store.js',
+ ],
testPathIgnorePatterns: ['/node_modules/', '/.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 (
-
+
, get: GetState
) => ({
...createModalSlice(set, get),
})
+interface UseStoreWithClear extends UseBoundStore> {
+ /**
+ * For tests only: Clears the state, and set it to an empty object.
+ */
+ clearState: () => {}
+}
let useStore: UseBoundStore>
if (process.env.NODE_ENV === 'development') {
@@ -23,4 +29,4 @@ if (process.env.NODE_ENV === 'development') {
useStore = create(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) => (
+ {JSON.stringify(props)}
+)
+
+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'