feat: add slidePane test case

Author: ProfBramble

package-lock.json

@@ -74,7 +74,7 @@
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/history": "^4.7.0",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.9",
     "@types/lodash": "^4.14.137",
     "@types/react": "^16.9.2",
     "@types/react-router": "^3.0.4",

package.json

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test SlidePane  should render correct 1`] = `
+<div>
+  <div
+    class="dtc-slide-pane"
+    style="top: 0px; color: red; background: rgb(255, 124, 18);"
+  >
+    <div
+      class="dtc-slide-pane-conent"
+      data-testid="slidepane_container"
+      style="display: block; height: 100%;"
+    >
+      <div>
+        <h1>
+          success
+        </h1>
+      </div>
+    </div>
+    <span
+      class="dtc-slide-pane-toggle"
+      data-testid="slidepane_action"
+    >
+      <i
+        aria-label="icon: double-right"
+        class="anticon anticon-double-right"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="double-right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+          />
+        </svg>
+      </i>
+    </span>
+  </div>
+</div>
+`;

src/components/slidePane/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,36 @@
+import  React from 'react';
+import SlidePane from '../index';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+
+describe('test SlidePane ', () => {
+    const expectValues = {
+        children:(<div>
+            <h1>success</h1>
+        </div>),
+        visible:true,
+        style:{color:'red',background:'#FF7C12'},
+    }
+    test('should render correct', () => {
+        const {container,getByTestId}=render(<SlidePane 
+            children={expectValues.children} 
+            visible={expectValues.visible} 
+            style={expectValues.style}
+             />)
+        expect(container.firstChild).toHaveStyle(expectValues.style);
+        const oDiv = getByTestId('slidepane_container');
+        expect(oDiv).not.toBeNull();
+        expect(oDiv).toHaveStyle('display:block');
+        expect(oDiv.innerHTML).toEqual("<div><h1>success</h1></div>");
+        expect(container).toMatchSnapshot();
+    })
+    test('should be invisible', () => {
+        const {getByTestId}=render(<SlidePane 
+        children={expectValues.children} 
+        visible={false} 
+         />)
+         const oDiv = getByTestId('slidepane_container');
+         expect(oDiv).toHaveStyle('display:none');
+    })}
+)

src/components/slidePane/__tests__/index.test.tsx

@@ -35,10 +35,12 @@ class SlidePane extends React.Component<SlidePaneProps, any> {
 
         return (
             <div className={ classes } style={myStyle} >
-                <div className={`${slidePrefixCls}-conent`} style={{ display: visible ? 'block' : 'none', height: '100%' }}>
+                <div className={`${slidePrefixCls}-conent`} 
+                data-testid="slidepane_container" 
+                style={{ display: visible ? 'block' : 'none', height: '100%' }}>
                     { children }
                 </div>
-                <span className={`${slidePrefixCls}-toggle`} onClick={onClose} {...{ onClick: onClose }}>
+                <span className={`${slidePrefixCls}-toggle`} data-testid="slidepane_action"  onClick={onClose} {...{ onClick: onClose }}>
                     <Icon type="double-right" />
                 </span>
             </div>

src/components/slidePane/index.tsx

@@ -1,15 +1,15 @@
 {
-    "compilerOptions": {
-      "outDir": "lib",
-      "module": "esnext",
-      "target": "es5",
-      "declaration": true,
-      "jsx": "react",
-      "moduleResolution":"Node",
-      "keyofStringsOnly": true,
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true
-    },
-    "include": ["src/components"],
-    "exclude": ["node_modules", "build", "scripts", "**/__tests__/*.test.tsx",]
-  }
+  "compilerOptions": {
+    "outDir": "lib",
+    "module": "esnext",
+    "target": "es5",
+    "declaration": true,
+    "jsx": "react",
+    "moduleResolution": "Node",
+    "keyofStringsOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+  },
+  "include": ["src/components"],
+  "exclude": ["node_modules", "build", "scripts", "**/__tests__/*.test.tsx"]
+}