Merge pull request #1415 from coveo/add-uts-for-table-HOC-loading

Add uts for table hoc loading

packages/react-vapor/docs/Reducers.ts

@@ -4,13 +4,11 @@ import {
     IListBoxExampleCompositeState,
     listBoxExampleReducer,
 } from '../src/components/listBox/examples/ListBoxExampleReducer';
-import {IExampleServerTableState} from '../src/components/table-hoc/examples/TableHOCServerExample';
 import {IReactVaporState} from '../src/ReactVapor';
 import {ReactVaporReducers} from '../src/ReactVaporReducers';
 
 export interface IReactVaporExampleState extends IReactVaporState {
     listBoxExampleState?: IListBoxExampleCompositeState;
-    tableHOCExample?: IExampleServerTableState;
 }
 
 export const ExamplesReducers: Redux.Reducer<IReactVaporExampleState> = Redux.combineReducers<IReactVaporExampleState>({

packages/react-vapor/src/components/index.ts

@@ -76,3 +76,4 @@ export * from './title';
 export * from './toast';
 export * from './tooltip';
 export * from './userFeedback';
+export * from './pagination';

packages/react-vapor/src/components/loading/components/tests/ActionBarLoading.spec.tsx

@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {ActionBarLoading} from '../ActionBarLoading';
+
+describe('ActionBarLoading tests', () => {
+    describe('<ActionBarLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<ActionBarLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});

packages/react-vapor/src/components/loading/components/tests/BasicHeaderLoading.spec.tsx

@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {BasicHeaderLoading} from '../BasicHeaderLoading';
+
+describe('BasicHeaderLoading tests', () => {
+    describe('<BasicHeaderLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<BasicHeaderLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});

packages/react-vapor/src/components/loading/components/tests/ContentLoadingPlaceholder.spec.tsx

@@ -0,0 +1,19 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {ContentLoadingPlaceholder} from '../ContentLoadingPlaceholder';
+
+describe('ContentLoadingPlaceholder tests', () => {
+    describe('<ContentLoadingPlaceholder />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(
+                    <ContentLoadingPlaceholder>
+                        <div>Test</div>
+                    </ContentLoadingPlaceholder>,
+                    {}
+                );
+                wrapper.unmount();
+            });
+        });
+    });
+});

packages/react-vapor/src/components/loading/components/tests/PaginationLoading.spec.tsx

@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {PaginationLoading} from '../PaginationLoading';
+
+describe('PaginationLoading tests', () => {
+    describe('<PaginationLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<PaginationLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});

packages/react-vapor/src/components/loading/components/tests/TableLoading.spec.tsx

@@ -0,0 +1,52 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {TableLoading} from '../TableLoading';
+
+describe('TableLoading tests', () => {
+    describe('<TableLoading.Table />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Table />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+
+    describe('<TableLoading.Body />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Body />, {});
+                wrapper.unmount();
+            });
+        });
+
+        it('should render <tr/> equal of the the number of columns sent as parameter', () => {
+            const wrapper = shallow(<TableLoading.Body numberOfRow={10} />, {});
+            expect(wrapper.find('tr').length).toBe(10);
+        });
+
+        it('should render <Row/> equal of the the number of columns sent as parameter', () => {
+            const wrapper = shallow(<TableLoading.Body numberOfColumns={8} numberOfRow={1} />, {});
+            expect(wrapper.find(TableLoading.Row).length).toBe(8);
+        });
+    });
+
+    describe('<TableLoading.Row />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Row num={0} />, {});
+                wrapper.unmount();
+            });
+        });
+
+        it('should add the class mod-haft if the number is odd', () => {
+            const wrapper = shallow(<TableLoading.Row num={1} />, {});
+            expect(wrapper.find('div').hasClass('mod-half')).toBe(true);
+        });
+
+        it('should not add the class mod-haft if the number is even', () => {
+            const wrapper = shallow(<TableLoading.Row num={2} />, {});
+            expect(wrapper.find('div').hasClass('mod-half')).toBe(false);
+        });
+    });
+});

packages/react-vapor/src/components/loading/components/tests/TextLoadingPlaceholder.spec.tsx

@@ -0,0 +1,36 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {TextLoadingPlaceholder} from '../TextLoadingPlaceholder';
+
+describe('TextLoadingPlaceholder tests', () => {
+    describe('<TextLoadingPlaceholder />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TextLoadingPlaceholder />, {});
+                wrapper.unmount();
+            });
+        });
+
+        it('should not have class by default', () => {
+            const wrapper = shallow(<TextLoadingPlaceholder />, {});
+            expect(wrapper.hasClass('mod-small')).toBe(false);
+            expect(wrapper.hasClass('mod-word')).toBe(false);
+            expect(wrapper.hasClass('mod-large')).toBe(false);
+        });
+
+        it('should add mod-small with small as prop', () => {
+            const wrapper = shallow(<TextLoadingPlaceholder small />, {});
+            expect(wrapper.hasClass('mod-small')).toBe(true);
+        });
+
+        it('should add mod-word with word as prop', () => {
+            const wrapper = shallow(<TextLoadingPlaceholder word />, {});
+            expect(wrapper.hasClass('mod-word')).toBe(true);
+        });
+
+        it('should add mod-large with large as prop', () => {
+            const wrapper = shallow(<TextLoadingPlaceholder large />, {});
+            expect(wrapper.hasClass('mod-large')).toBe(true);
+        });
+    });
+});

packages/react-vapor/src/components/loading/index.ts

@@ -2,3 +2,9 @@ export * from './Loading';
 export * from './LoadingActions';
 export * from './LoadingConnected';
 export * from './LoadingReducers';
+export * from './components/ActionBarLoading';
+export * from './components/BasicHeaderLoading';
+export * from './components/ContentLoadingPlaceholder';
+export * from './components/PaginationLoading';
+export * from './components/TableLoading';
+export * from './components/TextLoadingPlaceholder';

packages/react-vapor/src/components/navigation/pagination/NavigationPaginationActions.ts

@@ -44,3 +44,10 @@ export const resetPaging = (id: string): IReduxAction<IChangePaginationActionPay
         pageNb: 0,
     },
 });
+
+export const PaginationReduxActions = {
+    addPagination,
+    removePagination,
+    changePage,
+    resetPaging,
+};

packages/react-vapor/src/components/pagination/PaginationPagesNumber.tsx

@@ -4,57 +4,44 @@ import {connect} from 'react-redux';
 import * as _ from 'underscore';
 import {IReactVaporState, IReduxActionsPayload} from '../../ReactVapor';
 import {IReduxAction} from '../../utils/ReduxUtils';
-import {
-    INavigationPaginationDispatchProps,
-    INavigationPaginationOwnProps,
-    INavigationPaginationStateProps,
-} from '../navigation/pagination/NavigationPagination';
-import {addPagination, changePage, removePagination} from '../navigation/pagination/NavigationPaginationActions';
-import {IPaginationState} from '../navigation/pagination/NavigationPaginationReducers';
-import {NavigationPaginationSelect} from '../navigation/pagination/NavigationPaginationSelect';
+import {PaginationReduxActions} from '../navigation/pagination/NavigationPaginationActions';
 import {Svg} from '../svg/Svg';
+import {PaginationSelect} from './PaginationSelect';
+import {PaginationSelectors} from './PaginationSelectors';
 
 export interface IPaginationPagesNumberOwnProps {
-    id?: string;
+    id: string;
     totalPages: number;
     numberOfPagesToShow?: number;
     previousLabel?: string;
     nextLabel?: string;
-    loadingIds?: string[];
     hidden?: boolean;
     disabled?: boolean;
 }
 
-const mapStateToProps = (
-    state: IReactVaporState,
-    ownProps: INavigationPaginationOwnProps
-): INavigationPaginationStateProps => {
-    const item: IPaginationState = _.findWhere(state.paginationComposite, {id: ownProps.id});
-
-    return {
-        currentPage: item ? item.pageNb : 0,
-    };
-};
+const mapStateToProps = (state: IReactVaporState, ownProps: IPaginationPagesNumberOwnProps) => ({
+    currentPage: PaginationSelectors.getPaginationPageNumber(state, {id: ownProps.id}),
+});
 
 const mapDispatchToProps = (
     dispatch: (action: IReduxAction<IReduxActionsPayload>) => void,
-    ownProps: INavigationPaginationOwnProps
-): INavigationPaginationDispatchProps => ({
-    onRender: () => dispatch(addPagination(ownProps.id)),
-    onDestroy: () => dispatch(removePagination(ownProps.id)),
-    onPageClick: (pageNb: number) => dispatch(changePage(ownProps.id, pageNb)),
+    ownProps: IPaginationPagesNumberOwnProps
+) => ({
+    onRender: () => dispatch(PaginationReduxActions.addPagination(ownProps.id)),
+    onDestroy: () => dispatch(PaginationReduxActions.removePagination(ownProps.id)),
+    onPageClick: (pageNb: number) => dispatch(PaginationReduxActions.changePage(ownProps.id, pageNb)),
 });
 
-export interface INavigationPaginationProps
+export interface IPaginationPagesNumberProps
     extends IPaginationPagesNumberOwnProps,
         ReturnType<typeof mapDispatchToProps>,
         ReturnType<typeof mapStateToProps> {}
 
-export const NUMBER_OF_PAGES_SHOWING: number = 7;
-export const PREVIOUS_LABEL: string = 'Previous';
-export const NEXT_LABEL: string = 'Next';
+const NUMBER_OF_PAGES_SHOWING: number = 7;
+const PREVIOUS_LABEL: string = 'Previous';
+const NEXT_LABEL: string = 'Next';
 
-class PaginationPagesNumberDisconnected extends React.Component<INavigationPaginationProps, any> {
+class PaginationPagesNumberDisconnected extends React.Component<IPaginationPagesNumberProps, any> {
     private handlePageClick = (pageNb: number) => {
         if (pageNb >= 0 && this.props.currentPage !== pageNb) {
             this.props.onPageClick?.(pageNb);
@@ -108,7 +95,7 @@ class PaginationPagesNumberDisconnected extends React.Component<INavigationPagin
 
             _.each(_.range(start, end + 1), (nbr: number): void => {
                 pageSelects.push(
-                    <NavigationPaginationSelect
+                    <PaginationSelect
                         key={'page-' + nbr}
                         onPageClick={this.handlePageClick}
                         pageNb={nbr}

packages/react-vapor/src/components/pagination/PaginationPerPage.tsx

@@ -24,17 +24,15 @@ export const PaginationPerPage = ({
     disabled,
     hidden,
 }: IPaginationPerPageProps) => (
-    <>
-        <FlatSelectWithPrepend
-            id={PaginationUtils.getPaginationPerPageId(id)}
-            options={_.map(perPage, (nb: number) => ({
-                id: nb?.toString(),
-                option: {content: nb},
-            }))}
-            defaultSelectedOptionId={defaultPerPageSelected?.toString()}
-            prependClassName={classNames('items-per-page', {hidden: hidden})}
-            prepend={label}
-            disabled={disabled}
-        />
-    </>
+    <FlatSelectWithPrepend
+        id={PaginationUtils.getPaginationPerPageId(id)}
+        options={_.map(perPage, (nb: number) => ({
+            id: nb?.toString(),
+            option: {content: nb},
+        }))}
+        defaultSelectedOptionId={defaultPerPageSelected?.toString()}
+        prependClassName={classNames('items-per-page', {hidden: hidden})}
+        prepend={label}
+        disabled={disabled}
+    />
 );

packages/react-vapor/src/components/pagination/PaginationSelect.tsx

@@ -0,0 +1,35 @@
+import * as classNames from 'classnames';
+import {FunctionComponent} from 'react';
+import * as React from 'react';
+
+export interface IPaginationSelectProps extends React.HTMLAttributes<HTMLAnchorElement> {
+    disabled?: boolean;
+    selected: boolean;
+    pageNb: number;
+    onPageClick: (pageNb: number) => void;
+}
+
+export const PaginationSelect: FunctionComponent<IPaginationSelectProps> = ({
+    disabled,
+    selected,
+    pageNb,
+    onPageClick,
+    className,
+    ...linkProps
+}) => (
+    <a
+        {...linkProps}
+        className={classNames(
+            'flat-select-option',
+            {
+                selectable: !selected,
+                disabled: disabled,
+            },
+            className
+        )}
+        data-page={pageNb}
+        onClick={() => onPageClick(pageNb)}
+    >
+        {pageNb + 1}
+    </a>
+);

packages/react-vapor/src/components/pagination/PaginationSelectors.tsx

@@ -0,0 +1,17 @@
+import {createSelector} from 'reselect';
+import * as _ from 'underscore';
+import {IReactVaporState} from '../../ReactVapor';
+import {IPaginationState} from '../navigation/pagination';
+
+const getPaginationState = (state: IReactVaporState, {id}: {id: string}) =>
+    _.findWhere(state.paginationComposite, {id: id});
+
+const getPaginationPageNumber = createSelector(
+    getPaginationState,
+    (paginationState: IPaginationState): number => paginationState?.pageNb ?? 0
+);
+
+export const PaginationSelectors = {
+    getPaginationState,
+    getPaginationPageNumber,
+};

packages/react-vapor/src/components/pagination/index.ts

@@ -0,0 +1,6 @@
+export * from './PaginationPagesNumber';
+export * from './PaginationPerPage';
+export * from './PaginationSelect';
+export * from './PaginationUtils';
+export * from './PaginationSelectors';
+export * from './TablePagination';