Skip to content

Commit

Permalink
works
Browse files Browse the repository at this point in the history
  • Loading branch information
@annyhe
annyhe committed Dec 20, 2016
1 parent 8b24686 commit da397fd
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 48 deletions.
47 changes: 21 additions & 26 deletions tests/view/components/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import React from 'react';
import { mount } from 'enzyme';
import Dropdown from '../../../view/admin/components/common/Dropdown.js';

describe.only('Dropdown component tests', () => {
describe('Dropdown component tests', () => {
const ZERO = 0;
const ONE = 1;
const DUMMY_STRING = 'UNITED';
Expand Down Expand Up @@ -79,38 +79,22 @@ describe.only('Dropdown component tests', () => {
expect(instance.state.open).to.equal(false);
});

it('INPUT: on down key, dropdown opens', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
// DOWN keycode
instance.handleKeyUp({ keyCode: KEYCODE.DOWN });
expect(instance.state.open).to.equal(true);
});

it('INPUT: up key DOES NOT change the highlighted index', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
// DOWN keycode
instance.handleKeyUp({ keyCode: KEYCODE.DOWN });
expect(instance.state.open).to.equal(true);
});

it('DROPOWN when there are NO otions, ' +
it('there are NO otions, ' +
'highlighted index is -1', () => {
// default: no options
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
expect(instance.state.highlightedIndex).to.equal(-ONE);
});

it('DROPOWN when the INPUT has no value, and there are otions, ' +
it('the INPUT has no value, and there are options, ' +
'the first cell is highlighted', () => {
const enzymeWrapper = setup({ options: DUMMY_ARRAY, defaultValue: '' });
const instance = enzymeWrapper.instance();
expect(instance.state.highlightedIndex).to.equal(ZERO);
});

it('DROPOWN when the INPUT has value, the highlighted index ' +
it('the INPUT has value, the highlighted index ' +
'has value === INPUT.value', () => {
const INPUT_VAL = 'D';
const enzymeWrapper = setup({
Expand All @@ -121,14 +105,25 @@ describe.only('Dropdown component tests', () => {
expect(instance.state.highlightedIndex).to.equal(DUMMY_ARRAY.indexOf(INPUT_VAL));
});

it('DROPOWN: up key wraps around the highlighted index. 0 -> options.length-1');

it('DROPOWN: down key increments the highlighted index, when index === 0');
it('up key wraps around the highlighted index. 0 -> options.length-1', () => {
const enzymeWrapper = setup({
options: DUMMY_ARRAY,
});
const ARR_LEN = DUMMY_ARRAY.length;
const newIndex = Dropdown.getupdatedIndex(0, ARR_LEN, true);
expect(newIndex).to.equal(ARR_LEN-1);
});

// stub window.location.href='/perspectives/' + value
it('DROPOWN: on enter, url changes to end with the value of the highlighted cell');
it('down key increments the highlighted index, when index === 0', () => {
const enzymeWrapper = setup({
options: DUMMY_ARRAY,
});
const newIndex = Dropdown.getupdatedIndex(0, DUMMY_ARRAY.length, false);
expect(newIndex).to.equal(1);
});

it('INPUT: on enter, url changes to end with the value of the INPUT');
it('on enter, url changes to end with the value of' +
' the highlighted cell');

it('calling close from props closes the dropdown', () => {
const enzymeWrapper = setup();
Expand Down
62 changes: 40 additions & 22 deletions view/admin/components/common/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,25 @@ function getIndexFromArray(options, defaultValue) {
}

class Dropdown extends React.Component {
/**
* The index wraps around SIZE
* @param {String} oldIndex
* @param {Integer} size
* @param {Bool} direction true to go up,
* false to go down (increment index)
* @returns {Integer} updated index
*/
static getupdatedIndex(oldIndex, size, direction) {
let newIndex = 0;//default
if (direction) {
newIndex = oldIndex === 0 ? size-1 : --oldIndex;
} else {
newIndex = (oldIndex+1)%size;
}

return newIndex;
}

constructor(props) {
super(props);
this.state = {
Expand Down Expand Up @@ -84,7 +103,6 @@ class Dropdown extends React.Component {
});
}
handleKeyUp(event) {
console.log('INPUT', event); // watch for value of input vs for dropdown
const Key = {
UP: 38,
DOWN: 40,
Expand All @@ -94,16 +112,22 @@ class Dropdown extends React.Component {
if (!event) {event = window.event;} // for IE compatible
// also for cross-browser compatible
const keycode = event.keyCode || event.which;
const { highlightedIndex } = this.state;
const { getupdatedIndex } = this.constructor;
const { options } = this.props;
if (keycode == Key.UP) {
console.log('UP')
const updatedIndex = getupdatedIndex(highlightedIndex, options.length, true);
this.setState({
highlightedIndex: updatedIndex,
});
} else if (keycode == Key.DOWN) {
if (!this.state.open) {
this.toggle(true);
}
const updatedIndex = getupdatedIndex(highlightedIndex, options.length, false)
this.setState({
highlightedIndex: updatedIndex,
});
} else if (keycode == Key.ENTER) {
console.log('ENTER')
// how to get the value of the input/option on which enter was pressed?
// window.location.href = '/perspectives/' + optionsName;
const persName = options[highlightedIndex];
window.location.href = '/perspectives/' + persName;
} else {
const searchText = event.target.value || '';
this.setState({ data: [] });
Expand All @@ -112,9 +136,6 @@ class Dropdown extends React.Component {
});
}
}
handleOptionKeyUp(event) {
console.log('OPTION', event); // watch for value of input vs for dropdown
}
componentWillReceiveProps(nextProps) {
// update dropdown options on props change
if (nextProps.options !== this.props.options) {
Expand All @@ -132,13 +153,13 @@ class Dropdown extends React.Component {
dropDownStyle,
allOptionsLabel,
placeholderText,
defaultValue,
title,
showSearchIcon,
onAddNewButton,
onClickItem,
showInputElem,
children, // react elements
defaultValue,
} = this.props;
const { data } = this.state;
let outputUL = '';
Expand All @@ -147,24 +168,21 @@ class Dropdown extends React.Component {
outputUL = <ul className='slds-lookup__list' role='presentation'>
{data.map((optionsName, index) => {
let class_Name = 'slds-lookup__item-action ' +
'slds-media slds-media--center';
'slds-media slds-media--center';
if (index === this.state.highlightedIndex ) {
class_Name += ' highlighted';
}
return (
<li key={ optionsName }
onClick={ onClickItem }
onKeyUp={ this.handleOptionKeyUp.bind(this) }
className={ class_Name }>
<a href={'/perspectives/' + optionsName }>
<svg aria-hidden='true'
className={'slds-icon slds-icon-standard-account' +
' slds-icon--small slds-media__figure'}>
<use xlinkHref={'../static/icons/custom-sprite' +
'/svg/symbols.svg#custom39'}></use>
</svg>
<svg aria-hidden='true'
className={'slds-icon slds-icon-standard-account' +
' slds-icon--small slds-media__figure'}>
<use xlinkHref={'../static/icons/custom-sprite' +
'/svg/symbols.svg#custom39'}></use>
</svg>
{ optionsName }
</a>
</li>
);
}
Expand Down

0 comments on commit da397fd

Please sign in to comment.