Merge branch 'develop' into PWA-1880-tailwindcss

packages/venia-ui/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();
+    });
+});

packages/venia-ui/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);
+    });
+});

packages/venia-ui/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);
+    });
+});

packages/venia-ui/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);
+    });
+});

packages/venia-ui/lib/components/FilterModal/__tests__/filterBlock.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import FilterList from '../FilterList';
+import FilterBlock from '../filterBlock';
+
+let mockIsExpanded;
+
+jest.mock('../FilterList', () => props => <mock-FilterList {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
+    useFilterBlock: jest.fn(() => {
+        return {
+            handleClick: jest.fn(),
+            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(FilterList)).not.toThrow();
+        expect(root.findByType(FilterList).props.isExpanded).toBe(false);
+    });
+
+    it('renders expanded', () => {
+        givenExpanded();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(FilterList)).not.toThrow();
+        expect(root.findByType(FilterList).props.isExpanded).toBe(true);
+    });
+});