test(collapse): add testcase

components/collapse/__tests__/group.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { Collapse } from 'components'
+import { updateWrapper } from 'tests/utils'
+
+describe('Collapse Group', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Collapse.Group>
+        <Collapse title="title1">content1</Collapse>
+        <Collapse title="title2">content2</Collapse>
+      </Collapse.Group>
+    )
+    
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should be no errors when children are missing', () => {
+    const wrapper = mount(<Collapse.Group></Collapse.Group>)
+  
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should work without accordion', () => {
+    const wrapper = render(
+      <Collapse.Group accordion={false}>
+        <Collapse title="title1">content1</Collapse>
+        <Collapse title="title2">content2</Collapse>
+      </Collapse.Group>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  
+  it('should be display all when without accordion', async () => {
+    const wrapper = mount(
+      <Collapse.Group accordion={false}>
+        <Collapse title="title1">content1</Collapse>
+        <Collapse title="title2">content2</Collapse>
+      </Collapse.Group>
+    )
+  
+    const views = wrapper.find('.view')
+    views.at(0).simulate('click')
+    views.at(1).simulate('click')
+    await updateWrapper(wrapper, 300)
+    expect(wrapper.find('.expanded').length).toBe(2)
+  
+    views.at(0).simulate('click')
+    views.at(1).simulate('click')
+    await updateWrapper(wrapper, 300)
+    expect(wrapper.find('.expanded').length).toBe(0)
+  })
+  
+  it('should be display one when in accordion mode', async () => {
+    const wrapper = mount(
+      <Collapse.Group>
+        <Collapse title="title1">content1</Collapse>
+        <Collapse title="title2">content2</Collapse>
+      </Collapse.Group>
+    )
+  
+    const views = wrapper.find('.view')
+    views.at(0).simulate('click')
+    views.at(1).simulate('click')
+    await updateWrapper(wrapper, 300)
+    expect(wrapper.find('.expanded').length).toBe(1)
+  
+    views.at(1).simulate('click')
+    await updateWrapper(wrapper, 300)
+    expect(wrapper.find('.expanded').length).toBe(0)
+  })
+})

components/collapse/__tests__/index.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { Collapse } from 'components'
+import { updateWrapper } from 'tests/utils'
+
+describe('Collapse', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<Collapse title="title">content</Collapse>)
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should work with subtitle and shadow', () => {
+    const wrapper = render(
+      <div>
+        <Collapse title="title" subtitle="subtitle">content</Collapse>
+        <Collapse title="title" subtitle="subtitle" shadow>content</Collapse>
+      </div>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  
+  it('should work with initial visible', () => {
+    const wrapper = render(
+      <div>
+        <Collapse title="title" subtitle="subtitle">content</Collapse>
+        <Collapse title="title" initialVisible>content</Collapse>
+      </div>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  
+  it('should throw error when title missing', () => {
+    const Component = Collapse as any
+    let errorMessage = ''
+    const errorSpy = jest.spyOn(console, 'error')
+      .mockImplementation(msg => errorMessage = msg)
+  
+    mount(<Component subtitle="subtitle">content</Component>)
+    expect(errorMessage.toLowerCase()).not.toEqual('')
+    errorSpy.mockRestore()
+  })
+  
+  it('should expand when title clicked', async () => {
+    const wrapper = mount(<Collapse title="title">content</Collapse>)
+    wrapper.find('.view').at(0).simulate('click')
+    await updateWrapper(wrapper, 300)
+    expect(wrapper.find('.expanded').length).not.toBe(0)
+  })
+})

components/collapse/collapse-group.tsx

@@ -32,6 +32,9 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
     }
     
     if (nextState) {
+      // In a few cases, the user will set Collapse Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+      /* istanbul ignore if */
       if (hasChild) return
       return setState([...stateRef.current, currentIndex])
     }

components/collapse/collapse.tsx

@@ -5,6 +5,7 @@ import Expand from '../shared/expand'
 import { useCollapseContext } from './collapse-context'
 import useCurrentState from '../utils/use-current-state'
 import CollapseGroup from './collapse-group'
+import useWarning from '../utils/use-warning'
 
 interface Props {
   title: string
@@ -31,6 +32,10 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   const theme = useTheme()
   const [visible, setVisible, visibleRef] = useCurrentState<boolean>(initialVisible)
   const { values, updateValues } = useCollapseContext()
+  
+  if (!title) {
+    useWarning('"title" is required.', 'Collapse')
+  }
 
   useEffect(() => {
     if (!values.length) return