validate tabData object before opening a tab :

update _addTab function

Author: dev-javascript

src/utils/api/api.factory.js

@@ -85,11 +85,9 @@ const _apiProps = {
         return this;
     },
     open: function (tabObj = missingParamEr('open')) {
-        if (tabObj.id)
-            tabObj.id = tabObj.id + '';//make sure id is string
+        const newTabObj = this._addTab(tabObj, { defaultPanelComponent: this.getOption('defaultPanelComponent') });
         const result = this._getOnChangePromise();
-        this._open(tabObj.id);
-        this._addTab(tabObj, { defaultPanelComponent: this.getOption('defaultPanelComponent') });
+        this._open(newTabObj.id);
         return result;
     },
     __close: function (id) {
@@ -121,10 +119,13 @@ Helper.setNoneEnumProps(_apiProps, {
         if (!this._initialState) {
             const { selectedTabID, tabs, defaultPanelComponent } = this.optionsManager.options, openTabIDs = [];
             tabs.map(tab => {
-                this._addTab(tab, { defaultPanelComponent });
-                openTabIDs.push(tab.id);
+                const newTab = this._addTab(tab, { defaultPanelComponent });
+                openTabIDs.push(newTab.id);
             });
-            this._initialState = { selectedTabID, openTabIDs };
+            this._initialState = {
+                selectedTabID: selectedTabID + '', //make sure it is type of string
+                openTabIDs
+            };
         }
         return this._initialState;
     },

src/utils/api/api.factory.test.js

@@ -0,0 +1,55 @@
+import { apiProps, apiConstructor } from './api.factory';
+import OptionManager from './optionManager/optionManager.js';
+import helper from '../helper';
+import ActivedTabsHistory from './activedTabsHistory';
+import Pub_Sub from './pub_sub.js';
+import Tabs from './tabs.js';
+import BaseApi from './baseApi.js';
+import { TestScheduler } from 'jest';
+let getDeps;
+beforeAll(() => {
+    apiConstructor.prototype = Object.create(BaseApi.prototype);
+    helper.assingAll(apiConstructor.prototype, Tabs.prototype, Pub_Sub.prototype, apiProps).constructor = apiConstructor;
+});
+beforeEach(() => {
+    getDeps = function (options = {}) {
+        const activedTabsHistory = new (ActivedTabsHistory)(), optionsManager = new (OptionManager)({ options });
+        BaseApi.call(this, helper);
+        Tabs.call(this);
+        Pub_Sub.call(this);
+        return { activedTabsHistory, helper, optionsManager };
+    };
+});
+afterEach(() => {
+    getDeps = null;
+});
+describe('Api.prototype.getInitialState : ', () => {
+    test('it should call _addTab internally per each tabData option', () => {
+        const obj = new (apiConstructor)(getDeps, {
+            options: {
+                tabs: [
+                    { id: '1', title: 'tab1' },
+                    { id: '2', title: 'tab2' },
+                    { id: '3', title: 'tab3' }
+                ]
+            }
+        });
+        obj._addTab = jest.fn(() => ({ id: '2' }));
+        obj.getInitialState();
+        expect(obj._addTab.mock.calls.length === 3).toBe(true);
+    });
+});
+describe('Api.prototype.open : ', () => {
+    test('it should call _addTab internally', () => {
+        const obj = new (apiConstructor)(getDeps, { options: {} });
+        Object.assign(obj, {
+            _addTab: jest.fn(() => ({ id: '2' })),
+            _getOnChangePromise: jest.fn(() => Promise),
+            _open: jest.fn(() => { })
+        });
+        obj.open({ id: '2' });
+        expect(obj._addTab.mock.calls.length === 1).toBe(true);
+        expect(obj._addTab).toHaveBeenCalledBefore(obj._getOnChangePromise);
+        expect(obj._getOnChangePromise).toHaveBeenCalledBefore(obj._open);
+    });
+});

src/utils/api/api.test.js

@@ -4,7 +4,7 @@ beforeEach(() => {
 });
 describe('user api : ', () => {
     test('list all available props for consumer', () => {
-        const obj = new (API)({ a: 2 });
+        const obj = new (API)();
         const userApi = ['getTab', 'setTab', 'off', 'on', 'one', 'getOption', 'setOption', 'getCopyPerviousData', 'getCopyData',
             'isSelected', 'isOpen', 'select', 'open', 'close', 'refresh'];
         expect(Object.keys(obj.userProxy).length === userApi.length).toBe(true);

src/utils/api/tabs.js

@@ -24,13 +24,18 @@ Tabs.prototype._prepareTabData = (function () {
         };
     };
     return function (tabData, DefaultPanelComponent) {
+        if (Object.prototype.toString.call(tabData) !== '[object Object]')
+            throw new Error('tabData must be type of Object');
         tabData.panelComponent = this._checkPanelComponent(DefaultPanelComponent, tabData.panelComponent);
-        return Object.assign(_getDefaultTabData(DefaultPanelComponent), tabData);
+        const newTabData = Object.assign(_getDefaultTabData(DefaultPanelComponent), tabData);
+        newTabData.id = newTabData.id + '';//make sure id is string
+        return newTabData
     };
 })();
 Tabs.prototype._addTab = function (tabObj, { defaultPanelComponent }) {
-    this._data.push(this._prepareTabData(tabObj, defaultPanelComponent));
-    return this;
+    const newTabObj = this._prepareTabData(tabObj, defaultPanelComponent);
+    this._data.push(newTabObj);
+    return newTabObj;
 };
 Tabs.prototype._removeTab = function (id) {
     const delIndex = this._data.findIndex(tab => tab.id === id);

src/utils/api/tabs.test.js

@@ -0,0 +1,63 @@
+import Tabs from './tabs.js';
+import React from 'react';
+let obj, defaultPanelComponent;
+beforeEach(() => {
+    obj = new (Tabs)();
+    defaultPanelComponent = function (props) { return <p></p> };
+});
+afterEach(() => {
+    obj = null;
+    defaultPanelComponent = null;
+});
+describe('Tabs.prototype._addTab :  ', () => {
+    test('_addTab method should work correctly with empty object as a parameter', () => {
+        const tabData = obj._addTab({}, { defaultPanelComponent });
+        expect(tabData.hasOwnProperty('title')).toBe(true);
+        expect(tabData.hasOwnProperty('tooltip')).toBe(true);
+        expect(typeof tabData.panelComponent === 'function').toBe(true);
+        expect(tabData.closable === true).toBe(true);
+        expect(tabData.hasOwnProperty('iconClass')).toBe(true);
+        expect(tabData.disable === false).toBe(true);
+        expect(typeof tabData.id === 'string').toBe(true);
+    });
+    test('_addTab method should work correctly when is called with parameters', () => {
+        const panelComponent = props => <p></p>;
+        const tabData = obj._addTab({
+            id: '3', title: 'a', tooltip: 't', panelComponent, closable: false, iconClass: 'c', disable: true
+        }, { defaultPanelComponent });
+        expect(tabData.title === 'a').toBe(true);
+        expect(tabData.tooltip === 't').toBe(true);
+        expect(tabData.panelComponent === panelComponent).toBe(true);
+        expect(tabData.closable === false).toBe(true);
+        expect(tabData.iconClass === 'c').toBe(true);
+        expect(tabData.disable === true).toBe(true);
+        expect(tabData.id === '3').toBe(true);
+    });
+    test('_addTab method should convert a number id into string id', () => {
+        const panelComponent = props => <p></p>;
+        const tabData = obj._addTab({ id: 3 }, { defaultPanelComponent });
+        expect(tabData.id === '3').toBe(true);
+    });
+    test('_addTab method should throw an error when is called with an none real object param', () => {
+        expect.assertions(2);
+        let tabData;
+        try {
+            tabData = obj._addTab([], { defaultPanelComponent });
+        } catch (er) {
+            expect(typeof tabData === 'undefined').toBe(true);
+            expect(er.message === 'tabData must be type of Object').toBe(true);
+        }
+    });
+    test('_addTab method should work correctly when is called with a react element as a panelComponent parameter', () => {
+        const tabData = obj._addTab({ panelComponent: <div></div> }, { defaultPanelComponent });
+        expect(tabData.hasOwnProperty('title')).toBe(true);
+        expect(tabData.hasOwnProperty('tooltip')).toBe(true);
+        expect(typeof tabData.panelComponent === 'function').toBe(true);
+        expect(tabData.closable === true).toBe(true);
+        expect(tabData.hasOwnProperty('iconClass')).toBe(true);
+        expect(tabData.disable === false).toBe(true);
+        expect(typeof tabData.id === 'string').toBe(true);
+    });
+});
+
+