|
| 1 | +/* eslint-disable react/prop-types */ |
| 2 | +import React from 'react'; |
| 3 | +import renderer from 'react-test-renderer'; |
| 4 | +import showMorePlugin, { |
| 5 | + ShowMoreButton, |
| 6 | + setMoreButtonPlugin, |
| 7 | + setTablistOverflow, |
| 8 | + setTablistView, |
| 9 | + setDefaultOptions, |
| 10 | +} from './setComponents.js'; |
| 11 | +beforeAll(() => {}); |
| 12 | +beforeEach(() => {}); |
| 13 | +afterEach(() => {}); |
| 14 | +afterAll(() => { |
| 15 | + showMorePlugin.ShowMoreButton = ShowMoreButton; |
| 16 | + showMorePlugin.setMoreButtonPlugin = setMoreButtonPlugin; |
| 17 | + showMorePlugin.setTablistOverflow = setTablistOverflow; |
| 18 | + showMorePlugin.setTablistView = setTablistView; |
| 19 | + showMorePlugin.setDefaultOptions = setDefaultOptions; |
| 20 | +}); |
| 21 | +describe('showMorePlugin ', () => { |
| 22 | + test('MoreButtonPlugin : ', () => { |
| 23 | + const ctx = {}; |
| 24 | + const components = {useForceUpdate: () => {}, useRootState: () => ({openTabIDs: ['1', '2'], selectedTabID: '1'})}; |
| 25 | + const ShowMoreTabs = (props) => <div {...props}>{props.children}</div>; |
| 26 | + const memo = jest.fn((fn) => fn); |
| 27 | + setMoreButtonPlugin(ctx, components, ShowMoreTabs, ShowMoreButton, memo); |
| 28 | + const Com = <components.MoreButtonPlugin customProp="customProp">button children</components.MoreButtonPlugin>; |
| 29 | + const tree = renderer.create(Com).toJSON(); |
| 30 | + expect(tree).toMatchSnapshot(); |
| 31 | + expect(memo.mock.calls.length).toBe(1); |
| 32 | + expect(typeof memo.mock.calls[0][0]).toBe('function'); |
| 33 | + expect(memo.mock.calls[0][1]()).toBe(true); |
| 34 | + }); |
| 35 | + test('setTablistOverflow only works if the OriginalTablistOverflow property is not existed : ', () => { |
| 36 | + const components = {TablistOverflow: '', OriginalTablistOverflow: 1}; |
| 37 | + setTablistOverflow(components); |
| 38 | + expect(components.TablistOverflow).toBe(''); |
| 39 | + }); |
| 40 | + test('TablistOverflow : ', () => { |
| 41 | + const TablistOverflow = (props) => ( |
| 42 | + <div id="TablistOverflow" {...props}> |
| 43 | + {props.children} |
| 44 | + </div> |
| 45 | + ); |
| 46 | + const MoreButtonPlugin = () => <div id="MoreButtonPlugin"></div>; |
| 47 | + const components = {TablistOverflow, MoreButtonPlugin}; |
| 48 | + setTablistOverflow(components); |
| 49 | + const Com = <components.TablistOverflow customProp="customProp">tablist</components.TablistOverflow>; |
| 50 | + const tree = renderer.create(Com).toJSON(); |
| 51 | + expect(tree).toMatchSnapshot(); |
| 52 | + expect(components.OriginalTablistOverflow).toEqual(TablistOverflow); |
| 53 | + }); |
| 54 | + test('TablistView : ', () => { |
| 55 | + const components = { |
| 56 | + tablistViewPropsManager: () => ({className: ''}), |
| 57 | + TablistViewFactory: (getDeps, props) => { |
| 58 | + const {tablistViewPropsManager} = getDeps(); |
| 59 | + return <div {...tablistViewPropsManager()}>{props.children}</div>; |
| 60 | + }, |
| 61 | + }; |
| 62 | + setTablistView(components); |
| 63 | + const Com = <components.TablistView>tablist view children</components.TablistView>; |
| 64 | + const tree = renderer.create(Com).toJSON(); |
| 65 | + expect(tree).toMatchSnapshot(); |
| 66 | + }); |
| 67 | + test('setDefaultOptions : ', () => { |
| 68 | + const ctx = { |
| 69 | + optionsManager: { |
| 70 | + options: {}, |
| 71 | + }, |
| 72 | + }; |
| 73 | + const components = {}; |
| 74 | + const moreButtonPlugin_buttonComponent = jest.fn((obj) => |
| 75 | + obj.components && obj.ctx ? 'moreButtonPlugin_buttonComponent' : '', |
| 76 | + ); |
| 77 | + const moreButtonPlugin_iconComponent = 'moreButtonPlugin_iconComponent'; |
| 78 | + setDefaultOptions(ctx, components, moreButtonPlugin_buttonComponent, moreButtonPlugin_iconComponent); |
| 79 | + expect(ctx.optionsManager.options.moreButtonPlugin_iconComponent).toBe('moreButtonPlugin_iconComponent'); |
| 80 | + expect(ctx.optionsManager.options.moreButtonPlugin_buttonComponent).toBe('moreButtonPlugin_buttonComponent'); |
| 81 | + expect(ctx.optionsManager.options.moreButtonPlugin_buttonTooltip).toBe('show more'); |
| 82 | + expect(moreButtonPlugin_buttonComponent.mock.calls.length).toBe(1); |
| 83 | + expect(moreButtonPlugin_buttonComponent.mock.calls[0][0]).toEqual({ctx, components}); |
| 84 | + }); |
| 85 | + test('constructor : ', () => { |
| 86 | + showMorePlugin.ShowMoreButton = jest.fn(() => {}); |
| 87 | + showMorePlugin.setMoreButtonPlugin = jest.fn(() => {}); |
| 88 | + showMorePlugin.setTablistOverflow = jest.fn(() => {}); |
| 89 | + showMorePlugin.setTablistView = jest.fn(() => {}); |
| 90 | + showMorePlugin.setDefaultOptions = jest.fn(() => {}); |
| 91 | + const deps = { |
| 92 | + moreButtonPlugin_buttonComponent: 'moreButtonPlugin_buttonComponent', |
| 93 | + ShowMoreTabs: 'ShowMoreTabs', |
| 94 | + moreButtonPlugin_iconComponent: 'moreButtonPlugin_iconComponent', |
| 95 | + }; |
| 96 | + const ctx = {}; |
| 97 | + const components = {}; |
| 98 | + showMorePlugin(deps, ctx, components); |
| 99 | + expect(showMorePlugin.setDefaultOptions.mock.calls.length).toBe(1); |
| 100 | + expect(showMorePlugin.setTablistView.mock.calls.length).toBe(1); |
| 101 | + expect(showMorePlugin.setMoreButtonPlugin.mock.calls.length).toBe(1); |
| 102 | + expect(showMorePlugin.setTablistOverflow.mock.calls.length).toBe(1); |
| 103 | + expect(showMorePlugin.setDefaultOptions).toHaveBeenCalledBefore(showMorePlugin.setTablistView); |
| 104 | + expect(showMorePlugin.setTablistView).toHaveBeenCalledBefore(showMorePlugin.setMoreButtonPlugin); |
| 105 | + expect(showMorePlugin.setMoreButtonPlugin).toHaveBeenCalledBefore(showMorePlugin.setTablistOverflow); |
| 106 | + expect(showMorePlugin.setMoreButtonPlugin.mock.calls[0][3]).toEqual(showMorePlugin.ShowMoreButton); |
| 107 | + }); |
| 108 | +}); |
0 commit comments