1) move index.test.js into src folder

2) make useDynamicTabs.js testable

Author: dev-javascript

src/index.js

@@ -1,3 +1,3 @@
 
-import useDynamicTabs from './useDynamicTabs/useDynamicTabs.js';
+import useDynamicTabs from './useDynamicTabs/index.js';
 export default useDynamicTabs;

src/useDynamicTabs/index.test.js renamed to src/index.test.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react"
 import { render, unmountComponentAtNode } from "react-dom";
-import useDynTabs from "./useDynamicTabs.js";
+import useDynTabs from "./index.js";
 import { act } from "react-dom/test-utils";
-import renderer from 'react-test-renderer';
 let container = document.createElement("div");
 let op = '';//options
 beforeAll(() => {
@@ -64,6 +63,31 @@ describe("actions", () => {
         expect(op.onSelect.mock.calls.length).toBe(1);
         expect(op.onLoad.mock.calls.length).toBe(1);
     });
+    test('result of select and close actions', () => {
+        expect.assertions(2);
+        let _api;
+        act(() => {
+            const App = function (props) {
+                const [Tablist, Panellist, api] = useDynTabs(op);
+                _api = api;
+                return (
+                    <div>
+                        <Tablist></Tablist>
+                        <Panellist></Panellist>
+                    </div>
+                );
+            };
+            render(<App></App>, container);
+        });
+        return act(() => {
+            return _api.select('2').then(result => {
+                expect(typeof result != 'undefined').toBe(true);
+                return _api.close('2').then(result => {
+                    expect(typeof result != 'undefined').toBe(true);
+                });
+            });
+        });
+    });
     test('opening new tab and closing selected tab', () => {
         let _api;
         act(() => {
@@ -148,7 +172,7 @@ describe("actions", () => {
 });
 describe("calling some action inside the events options", () => {
     let _api;
-    test("calling select method inside the onLoad option", () => {
+    test("select method can be called inside the onLoad option", () => {
         const op = {
             tabs: [{
                 id: '1',

src/useDynamicTabs/index.js

@@ -0,0 +1,14 @@
+
+import TabList from "../tabList/tabList.js";
+import PanelList from "../panelList/panelList.js";
+import reducer from "../utils/stateManagement/reducer.js";
+import Api from '../utils/api/api.js';
+import useDynTabs from './useDynamicTabs.js';
+import { ApiContext, StateContext, ForceUpdateContext } from "../utils/context.js";
+const getDeps = function () {
+    const getApiInstance = (options) => {
+        return new (Api)(options);
+    };
+    return { reducer, getApiInstance, PanelList, TabList, ApiContext, StateContext, ForceUpdateContext };
+};
+export default useDynTabs.bind(null, getDeps);

src/useDynamicTabs/useDynamicTabs.js

@@ -1,24 +1,20 @@
 
 import React, { useReducer, useLayoutEffect, useRef } from "react";
-import TabList from "../tabList/tabList";
-import PanelList from "../panelList/panelList.js";
-import reducer from "../utils/stateManagement/reducer";
-import Api from '../utils/api';
-import { ApiContext, StateContext, ForceUpdateContext } from "../utils/context.js";
-function useDynamicTabs(options) {
+function useDynamicTabs(getDeps, options = {}) {
+    const { reducer, getApiInstance, PanelList, TabList, ApiContext, StateContext, ForceUpdateContext } = getDeps();
     const ref = useRef(null);
     if (ref.current === null)
-        ref.current = { api: new (Api)({ options }), TabListComponent: null, PanelListComponent: null };
+        ref.current = { api: getApiInstance(options), TabListComponent: null, PanelListComponent: null };
     const { current: { api } } = ref
         , _ref = ref.current
         , [state, dispatch] = useReducer(reducer, api.getInitialState());
-    api.updateStateRef(state).updateDispatch(dispatch).setPerviousState(state);
+    api.updateStateRef(state).updateDispatchRef(dispatch);
     useLayoutEffect(() => {
         api.trigger('onLoad', api.userProxy);
         return () => { api.trigger('onDestroy', api.userProxy); };
     }, []);
     useLayoutEffect(() => {
-        api.updatePerviousState(state);
+        api.updateState(state);
     }, [state]);
     useLayoutEffect(() => {
         api.trigger('onInit', api.userProxy);

src/utils/api/baseApi.js

@@ -2,13 +2,13 @@ import actions from '../stateManagement/actions';
 import Helper from '../helper.js';
 function BaseApi(helper) {
     this._helper = helper;
-    this._state = null;// it will be updated after execution of useState
+    this._state = null;// it will be updated after each render
     this._initialState = null;
     this._perviousState = null;// it is a pervious value of this._state
     this._dispatch = null;
     helper.setNoneEnumProps(this, {
         forceUpdateState: {},
-        stateRef: {}// both of stateRef and state have a same reference. It will be updated in each execution of useDynamicTabs.js
+        stateRef: {}// have a same reference with state . It will be updated in each execution of useDynamicTabs.js
     });
 }
 BaseApi.prototype._select = function (tabId) { this._dispatch({ type: actions.active, tabId }); };
@@ -19,20 +19,10 @@ BaseApi.prototype._refresh = function () {
     this._dispatch({ type: actions.refresh });
 };
 Helper.setNoneEnumProps(BaseApi.prototype, {
-    updateStateRef: function (state) {
-        this.stateRef = state;
-        return this;
-    },
-    updateDispatch: function (dispatch) { this._dispatch = dispatch; return this; },
-    setPerviousState: function (state) {
-        if (this._perviousState == null) {
-            this._perviousState = this._helper.getCopyState(state);
-            this._state = this._helper.getCopyState(state);
-        }
-        return this;
-    },
-    updatePerviousState: function (state) {
-        this._perviousState = this._helper.getCopyState(this._state);
+    updateStateRef: function (state) { this.stateRef = state; return this; },
+    updateDispatchRef: function (dispatch) { this._dispatch = dispatch; return this; },
+    updateState: function (state) {
+        this._perviousState = this._helper.getCopyState(this._state || state);
         this._state = this._helper.getCopyState(state);
         return this;
     }