From 0c5ec0dff9da45f03e63a205f8fb3897f78f1266 Mon Sep 17 00:00:00 2001 From: dev-javascript Date: Tue, 29 Oct 2024 19:11:18 +0330 Subject: [PATCH] update test --- __tests__/api.factory.test.js | 114 +++++++++++++++++++--------------- 1 file changed, 63 insertions(+), 51 deletions(-) diff --git a/__tests__/api.factory.test.js b/__tests__/api.factory.test.js index 658c7ce..a00cff9 100644 --- a/__tests__/api.factory.test.js +++ b/__tests__/api.factory.test.js @@ -1,5 +1,5 @@ import ElManagement from '../src/distanceFromFactory.js'; -import {Api} from '../src/api.factory.js'; +import { Api } from '../src/api.factory.js'; let container = document.createElement('div'); let getElManagementIns, ins, buttonElement, containerElement, tablistElement; beforeAll(() => { @@ -29,7 +29,7 @@ beforeAll(() => { }); beforeEach(() => { getElManagementIns = (params) => new ElManagement(params); - ins = new Api(() => ({getElManagementIns}), { + ins = new Api(() => ({ getElManagementIns }), { buttonElement, containerElement, tablistElement, @@ -53,14 +53,14 @@ describe('_setEls method : ', () => { ins._options = { buttonElement: { previousElementSibling: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, }, containerElement: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, tablistElement: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, }; ins._setEls(); @@ -71,14 +71,14 @@ describe('_setEls method : ', () => { ins._options = { buttonElement: { previousElementSibling: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, }, containerElement: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, tablistElement: { - style: {overflow: 'unset'}, + style: { overflow: 'unset' }, }, }; ins._setEls(); @@ -87,7 +87,7 @@ describe('_setEls method : ', () => { }); describe('resize method : ', () => { test('it should call showAll method at frist if validateTabsCount method returns true, regardless of return value from checkOverflow method', () => { - ins._showAll = jest.fn(() => {}); + ins._showAll = jest.fn(() => { }); ins._validateTabsCount = jest.fn(() => { ins._tabs = ins._tablistEl.children; ins._tabsCount = ins._tabs.length; @@ -98,7 +98,7 @@ describe('resize method : ', () => { expect(ins._validateTabsCount.mock.calls.length).toBe(1); expect(ins._showAll.mock.calls.length).toBe(1); - ins._showAll = jest.fn(() => {}); + ins._showAll = jest.fn(() => { }); ins._validateTabsCount = jest.fn(() => { ins._tabs = ins._tablistEl.children; ins._tabsCount = ins._tabs.length; @@ -155,9 +155,9 @@ describe('resize method : ', () => { describe('hideTabs method : ', () => { test('it should hide tabs from firstHiddenTabIndex', () => { ins._validateTabsCount(); - const selectedTabInfo = {index: 4}; - ins._options.containerElement = {style: {display: ''}}; - ins._showBtn = () => {}; + const selectedTabInfo = { index: 4 }; + ins._options.containerElement = { style: { display: '' } }; + ins._showBtn = () => { }; ins._hideTabs(5, selectedTabInfo); expect(ins._tabs[0].style.display === 'none').toBe(false); expect(ins._tabs[1].style.display === 'none').toBe(false); @@ -169,9 +169,9 @@ describe('hideTabs method : ', () => { }); test('it should return the array of objects including el and index properties', () => { ins._validateTabsCount(); - const selectedTabInfo = {index: 4}; - ins._options.containerElement = {style: {display: ''}}; - ins._showBtn = () => {}; + const selectedTabInfo = { index: 4 }; + ins._options.containerElement = { style: { display: '' } }; + ins._showBtn = () => { }; const result = ins._hideTabs(5, selectedTabInfo); expect(result.length).toBe(2); expect(result[0].el).toEqual(ins._tabs[5]); @@ -181,9 +181,9 @@ describe('hideTabs method : ', () => { }); test('it should not consider selected tab if third parameter is not true', () => { ins._validateTabsCount(); - const selectedTabInfo = {index: 4}; - ins._options.containerElement = {style: {display: ''}}; - ins._showBtn = () => {}; + const selectedTabInfo = { index: 4 }; + ins._options.containerElement = { style: { display: '' } }; + ins._showBtn = () => { }; const result = ins._hideTabs(3, selectedTabInfo); expect(ins._tabs[0].style.display === 'none').toBe(false); expect(ins._tabs[1].style.display === 'none').toBe(false); @@ -202,9 +202,9 @@ describe('hideTabs method : ', () => { }); test('it should consider selected tab if third parameter is true', () => { ins._validateTabsCount(); - const selectedTabInfo = {index: 4}; - ins._options.containerElement = {style: {display: ''}}; - ins._showBtn = () => {}; + const selectedTabInfo = { index: 4 }; + ins._options.containerElement = { style: { display: '' } }; + ins._showBtn = () => { }; const result = ins._hideTabs(3, selectedTabInfo, true); expect(ins._tabs[0].style.display === 'none').toBe(false); expect(ins._tabs[1].style.display === 'none').toBe(false); @@ -225,33 +225,33 @@ describe('hideTabs method : ', () => { }); test('it should call _showBtn method', () => { ins._validateTabsCount(); - const selectedTabInfo = {index: 4}; - ins._options.containerElement = {style: {display: ''}}; - ins._showBtn = jest.fn(() => {}); + const selectedTabInfo = { index: 4 }; + ins._options.containerElement = { style: { display: '' } }; + ins._showBtn = jest.fn(() => { }); ins._hideTabs(3, selectedTabInfo, true); expect(ins._showBtn.mock.calls.length).toBe(1); }); }); describe('validateTabsCount method : ', () => { test('it should set tabs and tabsCount properties', () => { - ins._tablistEl = {children: {length: 2}}; + ins._tablistEl = { children: { length: 2 } }; ins._validateTabsCount(); expect(ins._tabs).toEqual(ins._tablistEl.children); expect(ins._tabsCount).toEqual(ins._tablistEl.children.length); }); test('it should returns true if tabsCount is greater than zero', () => { - ins._tablistEl = {children: {length: 2}}; + ins._tablistEl = { children: { length: 2 } }; expect(ins._validateTabsCount()).toBe(true); - ins._tablistEl = {children: {length: 0}}; + ins._tablistEl = { children: { length: 0 } }; expect(ins._validateTabsCount()).toBe(false); }); }); describe('showAll method : ', () => { test('it should set display of all tabs into tabDisplay option', () => { ins._validateTabsCount(); - ins._options.containerElement = {style: {display: ''}}; + ins._options.containerElement = { style: { display: '' } }; ins._options.tabDisplay = 'flex'; - ins._hideBtn = () => {}; + ins._hideBtn = () => { }; ins._showAll(); expect(ins._tabs[0].style.display === 'flex').toBe(true); expect(ins._tabs[1].style.display === 'flex').toBe(true); @@ -263,9 +263,9 @@ describe('showAll method : ', () => { }); test('it should call _hideBtn method', () => { ins._validateTabsCount(); - ins._options.containerElement = {style: {display: ''}}; + ins._options.containerElement = { style: { display: '' } }; ins._options.tabDisplay = 'flex'; - ins._hideBtn = jest.fn(() => {}); + ins._hideBtn = jest.fn(() => { }); ins._showAll(); expect(ins._hideBtn.mock.calls.length).toBe(1); }); @@ -305,66 +305,78 @@ describe('findFirstHiddenTabIndexFactory mehtod : ', () => { test('findFirstHiddenTabIndexDSCE should loop through the tabs from the end and return the last tab index which its distance is negative', () => { ins._tablistEl = tablistElement; ins._validateTabsCount(); - const selectedTabInfo = {index: 5, overflowFullSize: 6}; + const selectedTabInfo = { index: 5, overflowFullSize: 6 }; const tabsArray = [...ins._tabs]; ins._getTabDis = (selectedTabInfo, tabEl) => { const tabIndex = tabsArray.indexOf(tabEl); if (selectedTabInfo.index == tabIndex || selectedTabInfo.overflowFullSize == tabIndex) { - return {value: -1}; + return { value: -1 }; } - return {value: 1}; + return { value: 1 }; }; expect(ins._findFirstHiddenTabIndexDSCE(selectedTabInfo, 0, 6)).toBe(5); }); test('_findFirstHiddenTabIndexASC should loop through the tabs and return the first tab index which its distance is negative', () => { ins._tablistEl = tablistElement; ins._validateTabsCount(); - const selectedTabInfo = {index: 4, overflowFullSize: 3}; + const selectedTabInfo = { index: 4, overflowFullSize: 3 }; const tabsArray = [...ins._tabs]; ins._getTabDis = (selectedTabInfo, tabEl) => { const tabIndex = tabsArray.indexOf(tabEl); if (selectedTabInfo.index == tabIndex || selectedTabInfo.overflowFullSize == tabIndex) { - return {value: -1}; + return { value: -1 }; } - return {value: 1}; + return { value: 1 }; }; expect(ins._findFirstHiddenTabIndexASC(selectedTabInfo, 0, 6)).toBe(3); }); }); describe('getOrder method : ', () => { - test('it should return asc if : last tab child distance from end-edge of tablist container would greater then tablist container size', () => { + test('it should return asc if : first tab distance is more less than last tab distance', () => { ins._validateTabsCount(); ins.els = { - getDistance: () => ({value: 100}), - getVisibleSize: () => ({value: 99}), + getDistance: (el) => { + if (el === ins._tabs[0]) { + return { value: 50 }; + } + if (el === ins._tabs[ins._tabs.length - 1]) { + return { value: 100 }; + } + }, }; - expect(ins._getOrder()).toBe('asc'); + expect(ins._getOrder(ins._tabs[0], ins._tabs[ins._tabs.length - 1])).toBe('asc'); }); - it('it should return desc if : last tab child distance from end-edge of tablist container would equal or less then tablist container size', () => { + it('it should return desc if : last tab distance is more less than first tab distance', () => { ins._validateTabsCount(); ins.els = { - getDistance: () => ({value: 100}), - getVisibleSize: () => ({value: 101}), + getDistance: (el) => { + if (el === ins._tabs[0]) { + return { value: 150 }; + } + if (el === ins._tabs[ins._tabs.length - 1]) { + return { value: 100 }; + } + }, }; - expect(ins._getOrder()).toBe('desc'); + expect(ins._getOrder(ins._tabs[0], ins._tabs[ins._tabs.length - 1])).toBe('desc'); }); }); describe('getSearchBoundries method : ', () => { test('it should return [0, tabsCount - 2] if there is not any tab selected', () => { ins._validateTabsCount(); - const boundry = ins._getSearchBoundries({index: -1}); + const boundry = ins._getSearchBoundries({ index: -1 }); expect(boundry[0]).toBe(0); //start value expect(boundry[1]).toBe(ins._tabsCount - 2); //stop value }); test('it should return [0, selectedTabIndex - 1] if selected tab is overflow', () => { ins._validateTabsCount(); - const boundry = ins._getSearchBoundries({index: 3, overflowFullSize: 1}); + const boundry = ins._getSearchBoundries({ index: 3, overflowFullSize: 1 }); expect(boundry[0]).toBe(0); //start value expect(boundry[1]).toBe(3 - 1); //stop value }); test('it should return [selectedTabIndex + 1, tabsCount - 2] if selected tab is not overflow', () => { ins._validateTabsCount(); - const boundry = ins._getSearchBoundries({index: 3, overflowFullSize: 0}); + const boundry = ins._getSearchBoundries({ index: 3, overflowFullSize: 0 }); expect(boundry[0]).toBe(3 + 1); //start value expect(boundry[1]).toBe(ins._tabsCount - 2); //stop value }); @@ -373,7 +385,7 @@ describe('hideBtn method : ', () => { test(`it should not hide the button, because the button size is needed when all tabs are visible but the button should not be visible`, () => { ins._options.buttonElement = { - style: {display: 'flex', position: 'relative', opacity: 1, pointerEvents: 'all'}, + style: { display: 'flex', position: 'relative', opacity: 1, pointerEvents: 'all' }, }; ins._hideBtn(); expect(ins._options.buttonElement.style.display).toBe('flex'); @@ -396,7 +408,7 @@ describe('showBtn method : ', () => { describe('_checkOverflow method : ', () => { test('_checkOverflow should check distance of last tab', () => { ins.els = { - getDistance: (lastTab) => ({value: lastTab}), + getDistance: (lastTab) => ({ value: lastTab }), }; expect(ins._checkOverflow(1)).toBe(false); expect(ins._checkOverflow(-1)).toBe(true);