From f8c731542d245613084c17d41a0bec8d478d5402 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Thu, 30 Jan 2020 16:21:27 +0300 Subject: [PATCH 1/3] Web: Components: GroupButtonsMenu: Fixed countMenuItems function --- .../src/components/group-buttons-menu/index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index 62d486ca8d..25883f253b 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -117,14 +117,13 @@ class GroupButtonsMenu extends React.PureComponent { countMenuItems = (array, outerWidth, moreWidth) => { const itemsArray = array || [] - const moreButton = moreWidth || 0; - let total = (moreButton + 80); + let total = (moreWidth || 0) + 80; for (let i = 0, len = itemsArray.length; i < len; i++) { - if (total + array[i] > outerWidth) { + if (total + itemsArray[i] > outerWidth) { return i < 1 ? 1 : i; } else { - total += array[i]; + total += itemsArray[i]; } } }; From 948a8755839eeddd4db9b6f1c13c98b8f0de312e Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Thu, 30 Jan 2020 16:21:56 +0300 Subject: [PATCH 2/3] Web: Components: GroupButtonsMenu: Added render tests --- .../group-buttons-menu.test.js | 151 +++++++++++++++++- 1 file changed, 149 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/group-buttons-menu.test.js b/web/ASC.Web.Components/src/components/group-buttons-menu/group-buttons-menu.test.js index 926947debb..a93884f82d 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/group-buttons-menu.test.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/group-buttons-menu.test.js @@ -3,6 +3,19 @@ import { mount, shallow } from 'enzyme'; import GroupButtonsMenu from '.'; import DropDownItem from '../drop-down-item'; +beforeEach(() => { + const div = document.createElement('div'); + div.setAttribute('id', 'container'); + document.body.appendChild(div); +}); + +afterEach(() => { + const div = document.getElementById('container'); + if (div) { + document.body.removeChild(div); + } +}); + const defaultMenuItems = [ { label: 'Select', @@ -29,6 +42,13 @@ const defaultMenuItems = [ } ]; +const getMenuItems = (count = 10) => new Array(count).fill( + { + label: 'test item', + disabled: false, + onClick: jest.fn() + }); + const baseProps = { checked: false, menuItems: defaultMenuItems, @@ -87,9 +107,11 @@ describe('', () => { const wrapper = mount(); const instance = wrapper.instance(); + instance.countMenuItems(null, 2, 1); instance.countMenuItems([], 2, 1); instance.countMenuItems([1, 2], 200, 2); - instance.countMenuItems([1,2,3,4], 1, 2); + instance.countMenuItems([1, 2, 3, 4, 5], 10, 100); + instance.countMenuItems([1, 2, 3, 4], 1, 2); expect(wrapper.state('visible')).toBe(true); }); @@ -114,7 +136,7 @@ describe('', () => { const wrapper = shallow(); const instance = wrapper.instance(); - instance.componentDidUpdate({ visible: true, menuItems: defaultMenuItems }, wrapper.state()); + instance.componentDidUpdate({ visible: true, menuItems: getMenuItems(3) }, wrapper.state()); expect(wrapper.props()).toBe(wrapper.props()); }); @@ -142,4 +164,129 @@ describe('', () => { expect(wrapper).toExist(false); }); + it('render with 100% width', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('100%'); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(2); + }); + + it('render with 1024px width and 3 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('1024px'); + expect(menuNode.props.menuItems.length).toEqual(3); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(2); + }) + + it('render with 1024px width and 10 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('1024px'); + expect(menuNode.props.menuItems.length).toEqual(10); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(9); + }) + + it('render with 1024px width and 100 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('1024px'); + expect(menuNode.props.menuItems.length).toEqual(100); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(99); + }) + + it('render with 500px width and 3 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('500px'); + expect(menuNode.props.menuItems.length).toEqual(3); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(2); + }) + + it('render with 500px width and 10 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('500px'); + expect(menuNode.props.menuItems.length).toEqual(10); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(9); + }) + + it('render with 500px width and 100 items', () => { + const wrapper = mount( +
+ +
, { attachTo: document.getElementById('container') }); + + const menuNodeStyle = wrapper.get(0).props.style; + const menuNode = wrapper.find(GroupButtonsMenu).instance(); + + const moreItemsCount = menuNode.state.moreItems.length; + const priorityItemsCount = menuNode.state.priorityItems.length; + + expect(menuNodeStyle.width).toEqual('500px'); + expect(menuNode.props.menuItems.length).toEqual(100); + expect(priorityItemsCount).toEqual(1); + expect(moreItemsCount).toEqual(99); + }) + }); \ No newline at end of file From 128a29def4966692794771b0ac1f389565628445 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Thu, 30 Jan 2020 16:22:13 +0300 Subject: [PATCH 3/3] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 7254d03416..90762e1d0f 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.331", + "version": "1.0.332", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js",