UX-102 Add menu and textfield tests

packages/matchbox/src/components/MultiSelect/MultiSelectTextField.js

@@ -77,7 +77,10 @@ function MultiSelectTextField(props) {
         removeItem(selectedItems[selectedItems.length - 1]);
       })(e);
     }
-    onKeyDown(e);
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
   }
 
   return (

packages/matchbox/src/components/MultiSelect/MultiSelectTextField.module.scss

@@ -78,3 +78,7 @@
     margin: 0 3px 0 0;
   }
 }
+
+.InlineError {
+  padding-left: spacing(small);
+}

packages/matchbox/src/components/MultiSelect/tests/MultiSelectMenu.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import MultiSelectMenu from '../MultiSelectMenu';
+import { mount } from 'enzyme';
+
+describe('MultiSelectMenu', () => {
+  const subject = (props = {}) => mount(<MultiSelectMenu {...props}/>);
+  const items = [
+    { content: 'foo' },
+    { content: <div>bar</div> }
+  ];
+
+  it('should render items correctly', () => {
+    expect(subject({ items })).toMatchSnapshot();
+  });
+
+  it('should render correctly when open', () => {
+    const menu = subject({ items, isOpen: true });
+    expect(menu.find('.List')).toHaveAttributeValue('class', 'List open');
+  });
+});

packages/matchbox/src/components/MultiSelect/tests/MultiSelectTextField.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import MultiSelectTextField from '../MultiSelectTextField';
+import { shallow } from 'enzyme';
+
+describe('MultiSelectTextField', () => {
+  let focus;
+
+  beforeEach(() => {
+    focus = jest.fn();
+    React.useRef = jest.fn(() => ({
+      current: {
+        focus: focus
+      }
+    }));
+  });
+
+  const items = [
+    { content: 'foo' },
+    { content: 'bar' }
+  ];
+  const itemToString = ({ content }) => content;
+  const subject = (props = {}) => shallow(
+    <MultiSelectTextField
+      selectedItems={items}
+      itemToString={itemToString}
+      {...props}
+    />
+  );
+
+  it('should render the full fieldset with label, id, error and help text', () => {
+    const textfield = subject({
+      label: 'test label',
+      id: 'test-id',
+      helpText: 'help',
+      error: 'error'
+    });
+
+    expect(textfield).toMatchSnapshot();
+  });
+
+  it('should render an error in label', () => {
+    const textfield = subject({ error: 'test error', label: 'test label', errorInLabel: true });
+    expect(textfield.find('Error').prop('className')).toMatch('InlineError');
+  });
+
+  it('should render a hidden label', () => {
+    const textfield = subject({ label: 'test label', labelHidden: true });
+    expect(textfield.find('Label')).not.toExist();
+  });
+
+  it('should focus on input when clicking wrapper', () => {
+    const textfield = subject({ });
+    textfield.find('.Wrapper').simulate('click');
+    expect(focus).toHaveBeenCalled();
+  });
+
+  describe('selected items', () => {
+    it('should render selected items correctly', () => {
+      const textfield = subject();
+      expect(textfield.find('Tag')).toMatchSnapshot();
+    });
+
+    it('should handle remove on a tag correctly', () => {
+      const removeItem = jest.fn();
+      const textfield = subject({ removeItem });
+
+      textfield.find('Tag').at(0).simulate('remove');
+      expect(removeItem).toHaveBeenCalledWith({ content: 'foo' });
+    });
+
+    it('should not be removable when disabled', () => {
+      const removeItem = jest.fn();
+      const textfield = subject({ removeItem, disabled: true });
+
+      textfield.find('Tag').at(0).simulate('remove');
+      expect(removeItem).not.toHaveBeenCalled();
+    });
+
+    it('should handle remove on a backspace correctly', () => {
+      const removeItem = jest.fn();
+      const onKeyDown = jest.fn();
+      const textfield = subject({ removeItem, value: '', onKeyDown });
+
+      textfield.find('input').simulate('keyDown', { key: 'Backspace', shiftKey: false });
+      expect(removeItem).toHaveBeenCalledWith({ content: 'bar' });
+      expect(onKeyDown).toHaveBeenCalledWith({ key: 'Backspace', shiftKey: false });
+    });
+
+    it('should not remove on a backspace with a value', () => {
+      const removeItem = jest.fn();
+      const onKeyDown = jest.fn();
+      const textfield = subject({ removeItem, value: 'test', onKeyDown });
+
+      textfield.find('input').simulate('keyDown', { key: 'Backspace', shiftKey: false });
+      expect(removeItem).not.toHaveBeenCalledWith();
+      expect(onKeyDown).toHaveBeenCalledWith({ key: 'Backspace', shiftKey: false });
+    });
+  });
+});

packages/matchbox/src/components/MultiSelect/tests/__snapshots__/MultiSelectMenu.test.js.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectMenu should render items correctly 1`] = `
+<MultiSelectMenu
+  items={
+    Array [
+      Object {
+        "content": "foo",
+      },
+      Object {
+        "content": <div>
+          bar
+        </div>,
+      },
+    ]
+  }
+>
+  <div
+    className="List"
+  >
+    <ActionList
+      actions={
+        Array [
+          Object {
+            "content": "foo",
+          },
+          Object {
+            "content": <div>
+              bar
+            </div>,
+          },
+        ]
+      }
+      groupByKey="section"
+    >
+      <div
+        className="ActionList"
+        style={
+          Object {
+            "maxHeight": "none",
+          }
+        }
+      >
+        <Section
+          key="0"
+          section={
+            Array [
+              Object {
+                "content": "foo",
+              },
+              Object {
+                "content": <div>
+                  bar
+                </div>,
+              },
+            ]
+          }
+        >
+          <div
+            className="Section"
+          >
+            <UnstyledLink
+              className="Action"
+              key="0"
+            >
+              <a
+                className="Action"
+              >
+                foo
+              </a>
+            </UnstyledLink>
+            <UnstyledLink
+              className="Action"
+              key="1"
+            >
+              <a
+                className="Action"
+              >
+                <div>
+                  bar
+                </div>
+              </a>
+            </UnstyledLink>
+          </div>
+        </Section>
+      </div>
+    </ActionList>
+  </div>
+</MultiSelectMenu>
+`;

packages/matchbox/src/components/MultiSelect/tests/__snapshots__/MultiSelectTextField.test.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectTextField selected items should render selected items correctly 1`] = `
+Array [
+  <Tag
+    key="0"
+    onRemove={[Function]}
+  >
+    foo
+  </Tag>,
+  <Tag
+    key="1"
+    onRemove={[Function]}
+  >
+    bar
+  </Tag>,
+]
+`;
+
+exports[`MultiSelectTextField should render the full fieldset with label, id, error and help text 1`] = `
+<fieldset
+  className="TextField"
+>
+  <Label
+    id="test-id"
+    label="test label"
+  />
+  <div
+    className="Wrapper Error"
+    onClick={[Function]}
+  >
+    <Tag
+      key="0"
+      onRemove={[Function]}
+    >
+      foo
+    </Tag>
+    <Tag
+      key="1"
+      onRemove={[Function]}
+    >
+      bar
+    </Tag>
+    <input
+      className="Input"
+      id="test-id"
+      onKeyDown={[Function]}
+    />
+  </div>
+  <Error
+    error="error"
+  />
+  <div
+    className="HelpText"
+  >
+    help
+  </div>
+</fieldset>
+`;

stories/form/MultiSelect.stories.js

@@ -53,6 +53,10 @@ function TypeaheadExample(props) {
     setSelected(selected.filter((i) => i !== item));
   }
 
+  function itemToString({ name = ''} = {}) {
+    return name;
+  }
+
   function typeaheadfn(downshift) {
     const {
       getInputProps,
@@ -67,7 +71,7 @@ function TypeaheadExample(props) {
     const items = getItems()
       .filter((item) => !selected.some(({ name }) => name === item.name))
       .map((item, index) => getItemProps({
-        content: item.name,
+        content: itemToString(item),
         highlighted: highlightedIndex === index,
         index,
         item
@@ -78,7 +82,7 @@ function TypeaheadExample(props) {
       id: 'story',
       label: 'Label',
       selectedItems: selected,
-      itemToString: ({ name }) => name,
+      itemToString,
       removeItem,
       onFocus: openMenu,
       error: error && !isOpen ? 'test' : null,
@@ -102,7 +106,7 @@ function TypeaheadExample(props) {
   }
 
   return (
-    <Downshift itemToString={(item) => item ? item.name : ''} stateReducer={stateReducer}>
+    <Downshift itemToString={itemToString} stateReducer={stateReducer}>
       {typeaheadfn}
     </Downshift>
   );