test: update tabs tests

Author: woothu

src/tabs/tests/CTabContent.test.js

@@ -1,27 +1,20 @@
 import React from 'react'
-import { configure, mount } from 'enzyme'
+import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
 import CTabContent from '../CTabContent'
 
 configure({ adapter: new Adapter() })
 
 describe('CTabContent', () => {
-  it('renders basic wrapper correctly', () => {
-    const component = renderer.create(<CTabContent/>);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot()
-  })
   it('renders customized wrapper correctly', () => {
     const componentCustomized = renderer.create(
-      <CTabContent
-        className='class-name'
-      >
+      <CTabContent className="class-name">
         CTabContent
       </CTabContent>
-    );
-    let tree = componentCustomized.toJSON();
+    )
+    let tree = componentCustomized.toJSON()
     expect(tree).toMatchSnapshot()
   })
 })

src/tabs/tests/CTabPane.test.js

@@ -1,29 +1,20 @@
 import React from 'react'
 import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import renderer from 'react-test-renderer';
+import toJson from 'enzyme-to-json'
 
 import CTabPane from '../CTabPane'
 
 configure({ adapter: new Adapter() })
 
 describe('CTabPane', () => {
-  it('renders basic wrapper correctly', () => {
-    const component = renderer.create(<CTabPane/>);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot()
-  })
   it('renders customized wrapper correctly', () => {
-    const componentCustomized = renderer.create(
-      <CTabPane
-        className='class-name'
-        data-tab="data-tab"
-      >
+    const wrapper = mount(
+      <CTabPane className="class-name" active>
         CTabPane
       </CTabPane>
-    );
-    let tree = componentCustomized.toJSON();
-    expect(tree).toMatchSnapshot()
+    )
+    expect(toJson(wrapper)).toMatchSnapshot()
   })
 
 })

src/tabs/tests/CTabs.test.js

@@ -1,38 +1,22 @@
 import React from 'react'
 import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import renderer from 'react-test-renderer';
+import toJson from 'enzyme-to-json'
 
 import CTabs from '../CTabs'
 
 import CTabPane from '../CTabPane'
-import CNav from '../CNav'
-import CNavItem from '../CNavItem'
-import CNavLink from '../CNavLink'
+import CNav from '../../nav/CNav'
+import CNavItem from '../../nav/CNavItem'
+import CNavLink from '../../nav/CNavLink'
 import CTabContent from '../CTabContent'
 
 configure({ adapter: new Adapter() })
 
 describe('CTabs', () => {
-  it('renders basic wrapper correctly', () => {
-    const component = renderer.create(<CTabs/>);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot()
-  })
-  it('renders customized wrapper correctly', () => {
-    const componentCustomized = renderer.create(
-      <CTabs
-        activeTab='first-one'
-        fade
-      >
-        CTabs
-      </CTabs>
-    );
-    let tree = componentCustomized.toJSON();
-    expect(tree).toMatchSnapshot()
-  })
+
   it('render full tabs', () => {
-    const componentCustomized = renderer.create(
+    const wrapper = mount(
       <CTabs activeTab="home">
         <CNav variant="tabs">
           <CNavItem>
@@ -63,12 +47,12 @@ describe('CTabs', () => {
           </CTabPane>
         </CTabContent>
       </CTabs>
-    );
-    let tree = componentCustomized.toJSON();
-    expect(tree).toMatchSnapshot()
-  });
+    )
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
   it('onActiveTabChange', () => {
-    const tabChange = jest.fn();
+    const tabChange = jest.fn()
     const component = mount(
       <CTabs 
         activeTab="home"
@@ -103,8 +87,8 @@ describe('CTabs', () => {
           </CTabPane>
         </CTabContent>
       </CTabs>
-    );
+    )
     component.find('.nav-link').at(1).simulate('click')
     expect(tabChange).toHaveBeenCalledTimes(1);
-  });
+  })
 })

src/tabs/tests/__snapshots__/CTabContent.test.js.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CTabContent renders basic wrapper correctly 1`] = `
-<div
-  className="tab-content"
-/>
-`;
-
 exports[`CTabContent renders customized wrapper correctly 1`] = `
 <div
   className="tab-content class-name"

src/tabs/tests/__snapshots__/CTabPane.test.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabPane renders customized wrapper correctly 1`] = `
+<CTabPane
+  active={true}
+  className="class-name"
+>
+  <CFade
+    appear={true}
+    baseClass=""
+    baseClassActive="show"
+    className="tab-pane active class-name"
+    enter={true}
+    exit={true}
+    in={true}
+    innerRef={
+      Object {
+        "current": <div
+          class="tab-pane active class-name"
+        >
+          CTabPane
+        </div>,
+      }
+    }
+    tag="div"
+    timeout={150}
+  >
+    <Transition
+      appear={true}
+      enter={true}
+      exit={true}
+      in={true}
+      mountOnEnter={false}
+      nodeRef={
+        Object {
+          "current": <div
+            class="tab-pane active class-name"
+          >
+            CTabPane
+          </div>,
+        }
+      }
+      onEnter={[Function]}
+      onEntered={[Function]}
+      onEntering={[Function]}
+      onExit={[Function]}
+      onExited={[Function]}
+      onExiting={[Function]}
+      timeout={150}
+      unmountOnExit={false}
+    >
+      <div
+        className="tab-pane active class-name"
+      >
+        CTabPane
+      </div>
+    </Transition>
+  </CFade>
+</CTabPane>
+`;