@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Trigger from '../../../Trigger';
+import CurrentFilter from '../currentFilter';
+
+const mockItem = {
+    title: 'Item Title'
+};
+
+const mockRemoveItem = jest.fn();
+
+const mockOnRemove = jest.fn();
+
+jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <CurrentFilter {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        group: 'group',
+        item: mockItem,
+        removeItem: mockRemoveItem
+    };
+};
+
+const givenValuesWithOnRemove = () => {
+    inputProps = {
+        ...inputProps,
+        onRemove: mockOnRemove
+    };
+};
+
+describe('#CurrentFilter', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Trigger)).not.toThrow();
+    });
+
+    it('handles when a user clicks on remove and onRemove is not provided', () => {
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType(Trigger).props.action();
+        });
+
+        expect(mockRemoveItem).toHaveBeenCalled();
+    });
+
+    it('handles when a user clicks on remove and onRemove is provided', () => {
+        givenValuesWithOnRemove();
+
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType(Trigger).props.action();
+        });
+
+        expect(mockRemoveItem).toHaveBeenCalled();
+        expect(mockOnRemove).toHaveBeenCalled();
+    });
+});

package/lib/components/FilterModal/CurrentFilters/__tests__/currentFilters.spec.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import CurrentFilters from '../currentFilters';
+import CurrentFilter from '../currentFilter';
+
+const mockOnRemove = jest.fn();
+
+const mockFilterItems = [
+    [
+        'group-a',
+        [
+            {
+                title: 'Title A 1',
+                value: 'Value A 1'
+            },
+            null
+        ]
+    ],
+    [
+        'group-b',
+        [
+            {
+                title: 'Title B 1',
+                value: 'Value B 1'
+            }
+        ]
+    ]
+];
+
+const mockFilterState = new Map(mockFilterItems);
+
+jest.mock('../currentFilter', () => props => <mock-CurrentFilter {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <CurrentFilters {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filterApi: jest.fn(),
+        filterState: mockFilterState,
+        onRemove: mockOnRemove
+    };
+};
+
+describe('#CurrentFilters', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.findAllByType(CurrentFilter)).toHaveLength(3);
+    });
+});

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -6,7 +6,7 @@ import { X as Remove } from 'react-feather';
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
 import Trigger from '../../Trigger';
-import defaultClasses from './currentFilter.css';
+import defaultClasses from './currentFilter.module.css';
 
 const CurrentFilter = props => {
     const { group, item, removeItem, onRemove } = props;

package/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 
 import { useStyle } from '../../../classify';
 import CurrentFilter from './currentFilter';
-import defaultClasses from './currentFilters.css';
+import defaultClasses from './currentFilters.module.css';
 
 const CurrentFilters = props => {
     const { filterApi, filterState, onRemove } = props;

package/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Checkbox from '../../../Checkbox';
+import FilterDefault from '../filterDefault';
+
+jest.mock('../../../Checkbox', () => props => <mock-Checkbox {...props} />);
+
+const mockLabel = 'Item Label';
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterDefault {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        isSelected: false,
+        item: null
+    };
+};
+
+const givenWithItem = () => {
+    inputProps = {
+        ...inputProps,
+        item: {
+            label: mockLabel,
+            value_index: 'item_value_index'
+        }
+    };
+};
+
+const givenWithSelectedItem = () => {
+    inputProps = {
+        ...inputProps,
+        isSelected: true
+    };
+};
+
+describe('#FilterDefault', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders without item', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Checkbox)).not.toThrow();
+
+        expect(() => root.findByType(Checkbox)).not.toThrow();
+        expect(root.findByType(Checkbox).props.fieldValue).toBe(false);
+        expect(root.findByType(Checkbox).props.label).toBeUndefined();
+    });
+
+    it('renders with item', () => {
+        givenWithItem();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Checkbox)).not.toThrow();
+        expect(root.findByType(Checkbox).props.fieldValue).toBe(false);
+        expect(root.findByType(Checkbox).props.label).toBe(mockLabel);
+    });
+
+    it('renders with selected item', () => {
+        givenWithItem();
+        givenWithSelectedItem();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Checkbox)).not.toThrow();
+        expect(root.findByType(Checkbox).props.fieldValue).toBe(true);
+        expect(root.findByType(Checkbox).props.label).toBe(mockLabel);
+    });
+});

package/lib/components/FilterModal/FilterList/__tests__/filterItem.spec.js

@@ -36,7 +36,6 @@ const givenDefaultValues = () => {
             title: 'Bar',
             value: 'bar'
         },
-        isExpanded: true,
         onApply: null
     };
 };
@@ -52,7 +51,6 @@ const givenOnApply = () => {
             title: 'Bar',
             value: 'bar'
         },
-        isExpanded: true,
         onApply: mockOnApply
     };
 };
@@ -69,8 +67,7 @@ const givenSelectedItem = () => {
         },
         filterState: new Set().add(item),
         group: 'Foo',
-        item: item,
-        isExpanded: true
+        item: item
     };
 };
 
@@ -87,7 +84,6 @@ describe('#FilterItem', () => {
 
         expect(mockFilterDefault).toHaveBeenCalledWith(
             expect.objectContaining({
-                isExpanded: true,
                 isSelected: false,
                 onClick: expect.any(Function)
             }),
@@ -121,7 +117,6 @@ describe('#FilterItem', () => {
 
         expect(mockFilterDefault).toHaveBeenCalledWith(
             expect.objectContaining({
-                isExpanded: true,
                 onClick: expect.any(Function),
                 isSelected: true
             }),

package/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import FilterList from '../filterList';
+import FilterItem from '../filterItem';
+
+const mockItems = [
+    {
+        title: 'Title A 1',
+        value: 'Value A 1'
+    },
+    {
+        title: 'Title A 2',
+        value: 'Value A 2'
+    }
+];
+
+const mockShowLess = 'Show Less';
+
+const mockShowMore = 'Show More';
+
+let mockIsListExpanded;
+
+jest.mock('../filterItem', () => props => <mock-FilterItem {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
+    useFilterList: jest.fn(() => {
+        return {
+            isListExpanded: mockIsListExpanded,
+            handleListToggle: jest.fn()
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterList {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filterApi: jest.fn(),
+        filterState: jest.fn(),
+        group: 'Group',
+        items: mockItems
+    };
+
+    mockIsListExpanded = false;
+};
+
+const givenShowMore = () => {
+    inputProps = {
+        ...inputProps,
+        itemCountToShow: 1
+    };
+};
+
+const givenExpanded = () => {
+    mockIsListExpanded = true;
+};
+
+describe('#FilterList', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders without show more button', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.findAllByType(FilterItem)).toHaveLength(2);
+        expect(() => root.findByType('button')).toThrow();
+    });
+
+    it('renders with show more button', () => {
+        givenShowMore();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType('button')).not.toThrow();
+        expect(root.findByType('button').children[0]).toBe(mockShowMore);
+    });
+
+    it('renders with show less button', () => {
+        givenShowMore();
+        givenExpanded();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType('button')).not.toThrow();
+        expect(root.findByType('button').children[0]).toBe(mockShowLess);
+    });
+});

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -4,16 +4,10 @@ import { bool, shape, string } from 'prop-types';
 
 import Checkbox from '../../Checkbox';
 import { useStyle } from '../../../classify';
-import defaultClasses from './filterDefault.css';
+import defaultClasses from './filterDefault.module.css';
 
 const FilterDefault = props => {
-    const {
-        classes: propsClasses,
-        isSelected,
-        item,
-        isExpanded,
-        ...restProps
-    } = props;
+    const { classes: propsClasses, isSelected, item, ...restProps } = props;
 
     const { label, value_index } = item || {};
     const classes = useStyle(defaultClasses, propsClasses);
@@ -44,7 +38,6 @@ const FilterDefault = props => {
             classes={classes}
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
-            disabled={!isExpanded}
             label={label}
             ariaLabel={ariaLabel}
             {...restProps}

package/lib/components/FilterModal/FilterList/filterItem.js

@@ -5,7 +5,7 @@ import setValidator from '@magento/peregrine/lib/validators/set';
 import FilterDefault from './filterDefault';
 
 const FilterItem = props => {
-    const { filterApi, filterState, group, item, isExpanded, onApply } = props;
+    const { filterApi, filterState, group, item, onApply } = props;
     const { toggleItem } = filterApi;
     const { title, value } = item;
     const isSelected = filterState && filterState.has(item);
@@ -30,7 +30,6 @@ const FilterItem = props => {
     return (
         <FilterDefault
             isSelected={isSelected}
-            isExpanded={isExpanded}
             item={tileItem}
             onClick={handleClick}
             title={title}

package/lib/components/FilterModal/FilterList/filterList.js

@@ -1,12 +1,12 @@
 import React, { Fragment, useMemo } from 'react';
-import { array, shape, string, func, number, bool } from 'prop-types';
+import { array, shape, string, func, number } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
 import { useFilterList } from '@magento/peregrine/lib/talons/FilterModal';
 
 import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
-import defaultClasses from './filterList.css';
+import defaultClasses from './filterList.module.css';
 
 const labels = new WeakMap();
 
@@ -17,11 +17,10 @@ const FilterList = props => {
         group,
         itemCountToShow,
         items,
-        isExpanded,
         onApply
     } = props;
     const classes = useStyle(defaultClasses, props.classes);
-    const talonProps = useFilterList();
+    const talonProps = useFilterList({ filterState, items, itemCountToShow });
     const { isListExpanded, handleListToggle } = talonProps;
     const { formatMessage } = useIntl();
 
@@ -32,28 +31,27 @@ const FilterList = props => {
             items.map((item, index) => {
                 const { title, value } = item;
                 const key = `item-${group}-${value}`;
-                const itemClass =
-                    isListExpanded || index < itemCountToShow
-                        ? classes.item
-                        : classes.itemHidden;
+
+                if (!isListExpanded && index >= itemCountToShow) {
+                    return null;
+                }
 
                 // create an element for each item
                 const element = (
-                    <li key={key} className={itemClass}>
+                    <li key={key} className={classes.item}>
                         <FilterItem
                             filterApi={filterApi}
                             filterState={filterState}
                             group={group}
                             item={item}
                             onApply={onApply}
-                            isExpanded={isExpanded}
                         />
                     </li>
                 );
 
                 // associate each element with its normalized title
                 // titles are not unique, so use the element as the key
-                labels.set(element, title.toUpperCase() || '');
+                labels.set(element, title.toUpperCase());
 
                 return element;
             }),
@@ -63,7 +61,6 @@ const FilterList = props => {
             filterState,
             group,
             items,
-            isExpanded,
             isListExpanded,
             itemCountToShow,
             onApply
@@ -116,8 +113,7 @@ const FilterList = props => {
 
 FilterList.defaultProps = {
     onApply: null,
-    itemCountToShow: 5,
-    isExpanded: false
+    itemCountToShow: 5
 };
 
 FilterList.propTypes = {
@@ -130,8 +126,7 @@ FilterList.propTypes = {
     group: string,
     items: array,
     onApply: func,
-    itemCountToShow: number,
-    isExpanded: bool
+    itemCountToShow: number
 };
 
 export default FilterList;

package/lib/components/FilterModal/FilterList/{filterList.css → filterList.module.css}

@@ -6,10 +6,6 @@
     padding-bottom: 2rem;
 }
 
-.itemHidden {
-    display: none;
-}
-
 .showMoreLessItem {
     padding-left: 3px;
 }

package/lib/components/FilterModal/__tests__/filterBlock.spec.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+import { Form } from 'informed';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import FilterBlock from '../filterBlock';
+
+const mockHandleClick = jest.fn();
+let mockIsExpanded;
+
+jest.mock('informed', () => ({
+    Form: ({ children, ...rest }) => <mock-Form {...rest}>{children}</mock-Form>
+}));
+
+jest.mock('../FilterList', () => props => <mock-FilterList {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
+    useFilterBlock: jest.fn(() => {
+        return {
+            handleClick: mockHandleClick,
+            isExpanded: mockIsExpanded
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterBlock {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filterApi: jest.fn(),
+        filterState: jest.fn(),
+        group: 'Group',
+        items: [],
+        name: 'Name'
+    };
+
+    mockIsExpanded = false;
+};
+
+const givenExpanded = () => {
+    mockIsExpanded = true;
+};
+
+describe('#FilterBlock', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders not expanded', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Form)).toThrow();
+    });
+
+    it('renders expanded', () => {
+        givenExpanded();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Form)).not.toThrow();
+    });
+
+    it('renders not expanded and button is clicked', () => {
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType('button').props.onClick();
+        });
+
+        expect(mockHandleClick).toHaveBeenCalled();
+    });
+});

package/lib/components/FilterModal/__tests__/filterFooter.spec.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Button from '../../Button';
+import FilterFooter from '../filterFooter';
+
+jest.mock('../../Button', () => props => <mock-Button {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
+    useFilterFooter: jest.fn(({ isOpen }) => {
+        return {
+            touched: isOpen
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterFooter {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        applyFilters: jest.fn(),
+        hasFilters: jest.fn(),
+        isOpen: false
+    };
+};
+
+const givenOpened = () => {
+    inputProps = {
+        ...inputProps,
+        isOpen: true
+    };
+};
+
+describe('#FilterFooter', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders not opened', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Button)).not.toThrow();
+        expect(root.findByType(Button).props.disabled).toBe(true);
+    });
+
+    it('renders opened', () => {
+        givenOpened();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Button)).not.toThrow();
+        expect(root.findByType(Button).props.disabled).toBe(false);
+    });
+});