update panel.test.js : create snapshot

for lazy panels

Author: dev-javascript

src/index.test.js

@@ -177,8 +177,8 @@ describe('apply multiple actions : ', () => {
   });
 });
 describe('lazy tabs : ', () => {
-  const Panel = React.lazy(() => import('./mock/mock-lazy-panel-1.js'));
   const LazyPanel = () => {
+    const Panel = React.lazy(() => import('./mock/mock-lazy-panel-1.js'));
     return (
       <React.Suspense fallback={<p>loading...</p>}>
         <Panel></Panel>

src/panel/__snapshots__/panel.test.js.snap

@@ -119,6 +119,47 @@ exports[`panel structure :  default options 1`] = `
 </div>
 `;
 
+exports[`panel structure :  lazy panels 1`] = `
+<div>
+  <div
+    className="rc-dyn-tabs-panel"
+    tab-id="1"
+  >
+    <p>
+      lazy panel 1
+    </p>
+  </div>
+  <div
+    className="rc-dyn-tabs-panel rc-dyn-tabs-selected"
+    tab-id="2"
+  >
+    <p>
+      lazy panel 2
+    </p>
+  </div>
+  <div
+    className="rc-dyn-tabs-panel"
+    tab-id="3"
+  >
+    <p>
+      lazy panel 3
+    </p>
+  </div>
+  <div
+    className="rc-dyn-tabs-panel"
+    tab-id="4"
+  >
+    <p>
+      loading...
+    </p>
+  </div>
+  <div
+    className="rc-dyn-tabs-panel"
+    tab-id="5"
+  />
+</div>
+`;
+
 exports[`panel structure :  rtl and none accessibility options 1`] = `
 <div>
   <div

src/panel/panel.test.js

@@ -34,9 +34,10 @@ const getDefaultOptions = () => ({
     {id: '5', title: 'tab5', panelComponent: <span>panel 6</span>},
   ],
 });
-const setMockUseContext = (op = {}) => {
+const setMockUseContext = (op = {}, onCreateInstance = () => {}) => {
   const defaultOp = getDefaultOptions();
   const instance = new Api({options: Object.assign({}, defaultOp, op)});
+  onCreateInstance(instance);
   React.useContext = jest.fn(() => instance);
 };
 beforeAll(() => {
@@ -130,4 +131,40 @@ describe('panel structure : ', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test('lazy panels', () => {
+    setMockUseContext({accessibility: false}, (instance) => {
+      instance.state.selectedTabID = '1';
+      instance.activedTabsHistory.tabsId = ['3', '4'];
+      instance.getTab = (id) => ({
+        lazy: true,
+        panelComponent: () => {
+          let LazyPanel;
+          if (id === '4') {
+            LazyPanel = (props) => {
+              const Panel = React.lazy(() => import('../mock/mock-lazy-panel-1.js'));
+              return (
+                <React.Suspense fallback={<p>loading...</p>}>
+                  <Panel></Panel>
+                </React.Suspense>
+              );
+            };
+            return <LazyPanel></LazyPanel>;
+          }
+          return <p>{`lazy panel ${id}`}</p>;
+        },
+      });
+    });
+    const tree = renderer
+      .create(
+        <div>
+          <Panel id="1" selectedTabID="2"></Panel>
+          <Panel id="2" selectedTabID="2"></Panel>
+          <Panel id="3" selectedTabID="2"></Panel>
+          <Panel id="4" selectedTabID="2"></Panel>
+          <Panel id="5" selectedTabID="2"></Panel>
+        </div>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });