Tests: ButtonFilterGroup, CheckboxFilterGroup, FacetGroup, Filter, Fi…

…lterButton (#17) * tests: ButtonFilterGroup, CheckboxFilterGroup, FacetGroup, Filter, FilterButton * package-lock Co-authored-by: Mark Brocato <[email protected]>
storefront-foundation · Jan 21, 2020 · 9d048f0 · 9d048f0
1 parent fcffa91
commit 9d048f0
Show file tree

Hide file tree

Showing 6 changed files with 376 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/test/plp/ButtonFilterGroup.test.js b/test/plp/ButtonFilterGroup.test.js
@@ -0,0 +1,126 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import SearchResultsContext from 'react-storefront/plp/SearchResultsContext'
+import ButtonFilterGroup from 'react-storefront/plp/ButtonFilterGroup'
+import SwatchProductOption from 'react-storefront/option/SwatchProductOption'
+import TextProductOption from 'react-storefront/option/TextProductOption'
+
+describe('ButtonFilterGroup', () => {
+  let wrapper
+
+  const group1 = {
+    name: 'Type',
+    ui: 'checkboxes',
+    options: [
+      { name: 'New', code: 'type:new', matches: 100 },
+      { name: 'Used', code: 'type:used' },
+    ],
+  }
+
+  const group2 = {
+    name: 'Color',
+    options: [
+      {
+        name: 'Red',
+        code: `color:red`,
+        image: {
+          src: `test/red`,
+          alt: 'red',
+        },
+      },
+    ],
+  }
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render TextProductOptions when passed groups without image key', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: ['type:new'],
+          },
+          actions: {
+            toggleFilter: jest.fn(),
+          },
+        }}
+      >
+        <ButtonFilterGroup group={group1} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(TextProductOption).length).toBe(group1.options.length)
+    expect(
+      wrapper
+        .find(TextProductOption)
+        .first()
+        .prop('selected'),
+    ).toBe(true)
+    expect(
+      wrapper
+        .find(TextProductOption)
+        .first()
+        .text(),
+    ).toBe('New(100)')
+  })
+
+  it('should render SwatchProductOptions when passed groups with image key', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: ['color:red'],
+          },
+          actions: {
+            toggleFilter: jest.fn(),
+          },
+        }}
+      >
+        <ButtonFilterGroup group={group2} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(SwatchProductOption).length).toBe(group2.options.length)
+    expect(
+      wrapper
+        .find(SwatchProductOption)
+        .first()
+        .prop('selected'),
+    ).toBe(true)
+    expect(
+      wrapper
+        .find(SwatchProductOption)
+        .first()
+        .prop('imageProps'),
+    ).toBe(group2.options[0].image)
+  })
+
+  it('should call toggleFilter function from context on button click', () => {
+    const toggleFilterSpy = jest.fn()
+
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: [],
+          },
+          actions: {
+            toggleFilter: toggleFilterSpy,
+          },
+        }}
+      >
+        <ButtonFilterGroup group={group1} />
+      </SearchResultsContext.Provider>,
+    )
+
+    wrapper
+      .find(TextProductOption)
+      .first()
+      .simulate('click')
+
+    expect(toggleFilterSpy).toBeCalled()
+    expect(toggleFilterSpy).toHaveBeenCalledWith(group1.options[0], undefined)
+  })
+})
diff --git a/test/plp/CheckboxFilterGroup.test.js b/test/plp/CheckboxFilterGroup.test.js
@@ -0,0 +1,94 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import SearchResultsContext from 'react-storefront/plp/SearchResultsContext'
+import CheckboxFilterGroup from 'react-storefront/plp/CheckboxFilterGroup'
+import { Checkbox, FormControlLabel } from '@material-ui/core'
+
+describe('CheckboxFilterGroup', () => {
+  let wrapper
+
+  const group = {
+    name: 'Size',
+    ui: 'buttons',
+    options: [
+      { name: 'SM', code: 'size:sm' },
+      { name: 'MD', code: 'size:md' },
+      { name: 'LG', code: 'size:lg' },
+      { name: 'XL', code: 'size:xl' },
+      { name: 'XXL', code: 'size:xxl' },
+    ],
+  }
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render as many checkboxes as there are options in group', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: [],
+          },
+          actions: {
+            toggleFilter: jest.fn(),
+          },
+        }}
+      >
+        <CheckboxFilterGroup group={group} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(Checkbox).length).toBe(group.options.length)
+  })
+
+  it('should render checkboxes as selected if they are in filters', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: ['size:sm', 'size:lg'],
+          },
+          actions: {
+            toggleFilter: jest.fn(),
+          },
+        }}
+      >
+        <CheckboxFilterGroup group={group} />
+      </SearchResultsContext.Provider>,
+    )
+
+    const checkedCheckboxes = wrapper
+      .find(Checkbox)
+      .filterWhere(item => item.prop('checked') === true)
+
+    expect(checkedCheckboxes.length).toBe(2)
+  })
+
+  it('should call toggleFilter function from context on checkbox click', () => {
+    const toggleFilterSpy = jest.fn()
+
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            filters: [],
+          },
+          actions: {
+            toggleFilter: toggleFilterSpy,
+          },
+        }}
+      >
+        <CheckboxFilterGroup group={group} />
+      </SearchResultsContext.Provider>,
+    )
+
+    wrapper
+      .find(Checkbox)
+      .first()
+      .invoke('onChange')()
+
+    expect(toggleFilterSpy).toBeCalled()
+    expect(toggleFilterSpy).toHaveBeenCalledWith(group.options[0], undefined)
+  })
+})
diff --git a/test/plp/FacetGroup.test.js b/test/plp/FacetGroup.test.js
@@ -0,0 +1,101 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import SearchResultsContext from 'react-storefront/plp/SearchResultsContext'
+import FacetGroup from 'react-storefront/plp/FacetGroup'
+import CheckboxFilterGroup from 'react-storefront/plp/CheckboxFilterGroup'
+import ButtonFilterGroup from 'react-storefront/plp/ButtonFilterGroup'
+import ExpandableSection from 'react-storefront/ExpandableSection'
+
+describe('FacetGroup', () => {
+  let wrapper
+
+  const group = {
+    name: 'Size',
+    ui: 'buttons',
+    options: [
+      { name: 'SM', code: 'size:sm' },
+      { name: 'MD', code: 'size:md' },
+      { name: 'LG', code: 'size:lg' },
+      { name: 'XL', code: 'size:xl' },
+      { name: 'XXL', code: 'size:xxl' },
+    ],
+  }
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should be emptry render when filters are undefined', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {},
+        }}
+      >
+        <FacetGroup />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(FacetGroup).isEmptyRender()).toBe(true)
+  })
+
+  it('should render button filter group when ui prop is button', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: { filters: [] },
+          actions: { toggleFilter: jest.fn() },
+        }}
+      >
+        <FacetGroup group={group} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(ButtonFilterGroup).exists()).toBe(true)
+  })
+
+  it('should render button checkbox filter group when ui prop is not button', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: { filters: [] },
+          actions: { toggleFilter: jest.fn() },
+        }}
+      >
+        <FacetGroup group={{ ...group, ui: '' }} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(CheckboxFilterGroup).exists()).toBe(true)
+  })
+
+  it('should show selected filter name when only 1 filter selected', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: { filters: ['size:sm'] },
+          actions: { toggleFilter: jest.fn() },
+        }}
+      >
+        <FacetGroup group={{ ...group, ui: '' }} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(ExpandableSection).prop('caption')).toBe('SM')
+  })
+
+  it('should show how many filters selected as a number when more than 1', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: { filters: ['size:sm', 'size:md', 'size:lg'] },
+          actions: { toggleFilter: jest.fn() },
+        }}
+      >
+        <FacetGroup group={{ ...group, ui: '' }} />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(ExpandableSection).prop('caption')).toBe('3 selected')
+  })
+})
diff --git a/test/plp/Filter.test.js b/test/plp/Filter.test.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import SearchResultsContext from 'react-storefront/plp/SearchResultsContext'
+import FacetGroup from 'react-storefront/plp/FacetGroup'
+import Filter from 'react-storefront/plp/Filter'
+
+describe('Filter', () => {
+  let wrapper
+
+  const facets = [
+    {
+      name: 'Size',
+      ui: 'buttons',
+      options: [
+        { name: 'SM', code: 'size:sm' },
+        { name: 'MD', code: 'size:md' },
+        { name: 'LG', code: 'size:lg' },
+        { name: 'XL', code: 'size:xl' },
+        { name: 'XXL', code: 'size:xxl' },
+      ],
+    },
+    {
+      name: 'Colors',
+      ui: 'buttons',
+      options: [
+        { name: 'SM', code: 'size:sm' },
+        { name: 'MD', code: 'size:md' },
+        { name: 'LG', code: 'size:lg' },
+        { name: 'XL', code: 'size:xl' },
+        { name: 'XXL', code: 'size:xxl' },
+      ],
+    },
+  ]
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render as many facet groups as there are facets', () => {
+    wrapper = mount(
+      <SearchResultsContext.Provider
+        value={{
+          pageData: {
+            facets,
+          },
+        }}
+      >
+        <Filter />
+      </SearchResultsContext.Provider>,
+    )
+
+    expect(wrapper.find(FacetGroup).length).toBe(2)
+  })
+})
diff --git a/test/plp/FilterButton.test.js b/test/plp/FilterButton.test.js
@@ -5,7 +5,6 @@ import FilterButton from 'react-storefront/plp/FilterButton'
 import Filter from 'react-storefront/plp/Filter'
 import ActionButton from 'react-storefront/ActionButton'
 import Drawer from 'react-storefront/drawer/Drawer'
-import { Router } from '../mocks/mockRouter'
 import { act } from 'react-dom/test-utils'
 
 describe('FilterButton', () => {