Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlo Bernardini committed Oct 12, 2018
2 parents ea895cd + 62cc69f commit 24c857e
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 13 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
[![npm version](https://img.shields.io/npm/v/orizzonte.svg)](https://www.npmjs.com/package/orizzonte)
[![Build Status](https://travis-ci.org/carlobernardini/orizzonte.svg?branch=master)](https://travis-ci.org/carlobernardini/orizzonte)
[![Coverage Status](https://coveralls.io/repos/github/carlobernardini/orizzonte/badge.svg?branch=master)](https://coveralls.io/github/carlobernardini/orizzonte?branch=master)
![David](https://img.shields.io/david/carlobernardini/orizzonte.svg)
![gzip size](http://img.badgesize.io/https://npmcdn.com/orizzonte/dist/orizzonte.min.js?compression=gzip)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/carlobernardini/orizzonte/blob/master/LICENSE)

Expand Down
134 changes: 130 additions & 4 deletions __tests__/Dropdown.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import React from 'react';
import Dropdown from '../src/components/Dropdown';
import CheckBox from '../src/components/CheckBox';

const labelTransformerFunction = (value) => (
value.length === 1 ? value[0].label : `${ value.length } Countries`
);

describe('<Dropdown />', () => {
it('should render a default, collapsed dropdown without filtering and selected values', () => {
jest.useFakeTimers();

it('should render a default dropdown without filtering and selected values', () => {
const onUpdate = jest.fn();

const wrapper = shallow(
<Dropdown
fieldName="country"
label="Country"
selectedLabel={ labelTransformerFunction }
onUpdate={ onUpdate }
options={[{
label: 'Austria',
value: 'at'
Expand All @@ -26,13 +32,40 @@ describe('<Dropdown />', () => {
);

expect(wrapper).toMatchSnapshot();

wrapper.find('.orizzonte__dropdown-button').simulate('click');
expect(wrapper.state().expanded).toBe(true);
expect(wrapper).toMatchSnapshot();

// Browse using arrow key up
wrapper.find('.orizzonte__dropdown-item').first().simulate('keydown', {
preventDefault: () => {},
keyCode: 40
});
expect(wrapper.state().cursor).toBe(0);

// Browse using arrow key up
wrapper.find('.orizzonte__dropdown-item').first().simulate('keydown', {
preventDefault: () => {},
keyCode: 38
});
expect(wrapper.state().cursor).toBe(2);

// Select option with enter key
wrapper.find('.orizzonte__dropdown-item').first().simulate('keydown', {
preventDefault: () => {},
keyCode: 13
});
expect(onUpdate).toHaveBeenCalledWith('at');
expect(wrapper.state().expanded).toBe(false);
});

it('should render an expanded dropdown multiselect with filtering', () => {
const wrapper = shallow(
<Dropdown
fieldName="country"
label="Country"
information="This is some information for this filter"
selectedLabel={ labelTransformerFunction }
options={[{
label: 'Austria',
Expand All @@ -54,19 +87,104 @@ describe('<Dropdown />', () => {
);

wrapper.setState({
expanded: true,
filter: 'aus'
expanded: true
});

wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'aus'
}
});

expect(wrapper.state().filter).toBe('aus');
expect(wrapper).toMatchSnapshot();
});

it('should render an expanded, grouped dropdown with a few checked options', () => {
it('should render a dropdown with custom matching requirements on the filter', () => {
const wrapper = shallow(
<Dropdown
fieldName="country"
label="Country"
information="This is some information for this filter"
selectedLabel={ labelTransformerFunction }
options={[{
label: 'Austria',
value: 'at'
}, {
label: 'Portugal',
value: 'pt'
}, {
label: 'Ireland',
value: 'ie'
}, {
label: 'Cöúntry',
value: 'un'
}]}
multiple
value={['at', 'ie']}
filter={{
enabled: true,
placeholder: 'Search options...',
matchCase: true,
matchDiacritics: true,
matchPosition: 'start'
}}
/>
);

wrapper.setState({
expanded: true
});
expect(wrapper.find(CheckBox)).toHaveLength(4);

// Verify matching position
wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'tria'
}
});
expect(wrapper.find(CheckBox)).toHaveLength(0);

// Verify case matching
wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'aus'
}
});
expect(wrapper.find(CheckBox)).toHaveLength(0);

// Verify diacritics matching
wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'Cöúntry'
}
});
expect(wrapper.find(CheckBox)).toHaveLength(1);
wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'Country'
}
});
expect(wrapper.find(CheckBox)).toHaveLength(0);
wrapper.find('.orizzonte__dropdown-filter').simulate('change', {
target: {
value: 'Austrià'
}
});
expect(wrapper.find(CheckBox)).toHaveLength(0);
});

it('should render an expanded, grouped dropdown with a few checked options and select-all', () => {
const syncCache = jest.fn();
const onUpdate = jest.fn();

const wrapper = shallow(
<Dropdown
fieldName="country"
label="Country"
selectedLabel={ labelTransformerFunction }
syncCache={ syncCache }
onUpdate={ onUpdate }
options={[{
label: 'Austria',
value: 'at'
Expand All @@ -87,6 +205,8 @@ describe('<Dropdown />', () => {
}]
}]}
multiple
selectAll
selectAllLabel="Select all options"
value={['us']}
/>
);
Expand All @@ -96,5 +216,11 @@ describe('<Dropdown />', () => {
});

expect(wrapper).toMatchSnapshot();

wrapper.find(CheckBox).at(5).prop('onChange')(true);
expect(onUpdate).toHaveBeenCalledWith(['us', 'ca']);

wrapper.find(CheckBox).first().prop('onChange')(true);
expect(onUpdate).toHaveBeenCalledWith(['at', 'pt', 'ie', 'us', 'ca']);
});
});
97 changes: 88 additions & 9 deletions __tests__/__snapshots__/Dropdown.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Dropdown /> should render a default, collapsed dropdown without filtering and selected values 1`] = `
exports[`<Dropdown /> should render a default dropdown without filtering and selected values 1`] = `
<div
className="orizzonte__filter"
>
Expand Down Expand Up @@ -59,7 +59,7 @@ exports[`<Dropdown /> should render a default, collapsed dropdown without filter
</div>
`;

exports[`<Dropdown /> should render an expanded dropdown multiselect with filtering 1`] = `
exports[`<Dropdown /> should render a default dropdown without filtering and selected values 2`] = `
<div
className="orizzonte__filter"
>
Expand All @@ -69,6 +69,65 @@ exports[`<Dropdown /> should render an expanded dropdown multiselect with filter
<OrizzonteFilterCaption>
Country
</OrizzonteFilterCaption>
<div
className="orizzonte__dropdown orizzonte__dropdown--focused orizzonte__dropdown--expanded"
>
<button
className="orizzonte__dropdown-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="button"
>
None selected
</button>
<ul
className="orizzonte__dropdown-list"
>
<li
className="orizzonte__dropdown-item"
key="at.0"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex="-1"
>
Austria
</li>
<li
className="orizzonte__dropdown-item"
key="pt.1"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex="-1"
>
Portugal
</li>
<li
className="orizzonte__dropdown-item"
key="ie.2"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex="-1"
>
Ireland
</li>
</ul>
</div>
</div>
`;

exports[`<Dropdown /> should render an expanded dropdown multiselect with filtering 1`] = `
<div
className="orizzonte__filter"
>
<OrizzonteFilterInfo
information="This is some information for this filter"
/>
<OrizzonteFilterCaption>
Country
</OrizzonteFilterCaption>
<div
className="orizzonte__dropdown orizzonte__dropdown--focused orizzonte__dropdown--expanded"
>
Expand Down Expand Up @@ -101,7 +160,7 @@ exports[`<Dropdown /> should render an expanded dropdown multiselect with filter
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-4"
id="checkbox-7"
label={
<span>
<span>
Expand Down Expand Up @@ -135,7 +194,7 @@ exports[`<Dropdown /> should render an expanded dropdown multiselect with filter
</div>
`;

exports[`<Dropdown /> should render an expanded, grouped dropdown with a few checked options 1`] = `
exports[`<Dropdown /> should render an expanded, grouped dropdown with a few checked options and select-all 1`] = `
<div
className="orizzonte__filter"
>
Expand All @@ -162,6 +221,26 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
<ul
className="orizzonte__dropdown-list"
>
<li
className="orizzonte__dropdown-item"
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-23"
label="Select all options"
onChange={[Function]}
selected={false}
value="select-all"
viewBox={
Array [
0,
0,
13,
13,
]
}
/>
</li>
<li
className="orizzonte__dropdown-item"
key="at.0"
Expand All @@ -170,7 +249,7 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-10"
id="checkbox-24"
label="Austria"
onChange={[Function]}
selected={false}
Expand All @@ -193,7 +272,7 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-11"
id="checkbox-25"
label="Portugal"
onChange={[Function]}
selected={false}
Expand All @@ -216,7 +295,7 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-12"
id="checkbox-26"
label="Ireland"
onChange={[Function]}
selected={false}
Expand Down Expand Up @@ -248,7 +327,7 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-13"
id="checkbox-27"
label="United States"
onChange={[Function]}
selected={true}
Expand All @@ -271,7 +350,7 @@ exports[`<Dropdown /> should render an expanded, grouped dropdown with a few che
>
<OrizzonteCheckBox
disabled={false}
id="checkbox-14"
id="checkbox-28"
label="Canada"
onChange={[Function]}
selected={false}
Expand Down

0 comments on commit 24c857e

Please sign in to comment.