feat(dropdown): added footer to icondropdown

src/components/Dropdown/Dropdown.story.jsx

@@ -87,39 +87,27 @@ const props = () => ({
   ),
 });
 
-storiesOf('Watson IoT/Dropdown', module)
-  .add('with icons and labels', () => {
-    return React.createElement(() => {
-      const [selectedViewId, setSelectedViewId] = useState(items[1].id);
+storiesOf('Watson IoT/Dropdown', module).add('with icons and labels', () => {
+  return React.createElement(() => {
+    const [selectedViewId, setSelectedViewId] = useState(items[1].id);
 
-      const renderFooter = (item) => {
-        return <div>{item.title}</div>;
-      };
-
-      const itemsWithFooter = items.map((item) => {
-        return {
-          ...item,
-          footer: renderFooter(item),
-        };
-      });
-
-      return (
-        <div
-          style={{
-            width: select('wrapper width', ['300px', '100px'], '300px'),
-          }}>
-          <DropdownWithIcon
-            {...props()}
-            items={itemsWithFooter}
-            selectedViewId={selectedViewId}
-            actions={{
-              onChangeView: (viewItem) => {
-                setSelectedViewId(viewItem.id);
-                action('onChangeView')(viewItem);
-              },
-            }}
-          />
-        </div>
-      );
-    });
-  });
+    return (
+      <div
+        style={{
+          width: select('wrapper width', ['300px', '100px'], '300px'),
+        }}>
+        <DropdownWithIcon
+          {...props()}
+          items={items}
+          selectedViewId={selectedViewId}
+          actions={{
+            onChangeView: (viewItem) => {
+              setSelectedViewId(viewItem.id);
+              action('onChangeView')(viewItem);
+            },
+          }}
+        />
+      </div>
+    );
+  });
+});

src/components/Dropdown/DropdownWithIcon.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { items } from '../IconDropdown/IconDropdown.story';
+
+import Dropdown from './DropdownWithIcon';
+
+const iconDropdownProps = {
+  id: 'icon-dropdown-1',
+  label: 'Icon Dropdown menu options',
+  items,
+};
+
+const itemsWithoutIcons = [
+  {
+    id: 'option-0',
+    text: 'Option 0',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+];
+
+describe('Dropdown with Icon and Labels', () => {
+  it('Renders default', () => {
+    render(
+      <Dropdown
+        items={itemsWithoutIcons}
+        {...iconDropdownProps}
+        actions={{
+          onChangeView: () => {},
+        }}
+      />
+    );
+
+    const renderedLabel = screen.queryByText(iconDropdownProps.label);
+
+    expect(renderedLabel).toBeDefined();
+  });
+
+  it('Renders selected item', () => {
+    render(
+      <Dropdown
+        {...iconDropdownProps}
+        selectedViewId={items[0].id}
+        actions={{
+          onChangeView: () => {},
+        }}
+      />
+    );
+
+    const selectedItem = screen.queryByText(items[0].text);
+
+    expect(selectedItem).toBeDefined();
+  });
+
+  it('Renders in dropdown', () => {
+    const label = 'Icon Dropdown menu options';
+
+    render(
+      <Dropdown
+        {...iconDropdownProps}
+        items={items}
+        actions={{
+          onChangeView: () => {},
+        }}
+      />
+    );
+
+    const renderedLabel = screen.queryByText(label);
+
+    fireEvent.click(renderedLabel);
+
+    expect(screen.queryByTestId(`dropdown-button__${items[3].id}`)).toBeNull();
+    expect(screen.queryByTestId(items[3].text)).toBeDefined();
+
+    expect(screen.queryByTestId(`dropdown-button__${items[5].id}`)).toBeNull();
+    expect(screen.queryByTestId(items[5].text)).toBeDefined();
+  });
+
+  it('handles callback', () => {
+    let selectedItem = null;
+
+    render(
+      <Dropdown
+        {...iconDropdownProps}
+        actions={{
+          onChangeView: (item) => {
+            selectedItem = item;
+          },
+        }}
+      />
+    );
+
+    const itemToSelect = items[3];
+
+    fireEvent.click(screen.getByText(iconDropdownProps.label));
+    fireEvent.click(screen.getAllByText(itemToSelect.text)[0]);
+
+    expect(selectedItem.id).toEqual(itemToSelect.id);
+  });
+
+  it('custom render', () => {
+    render(
+      <Dropdown
+        {...iconDropdownProps}
+        itemToString={() => 'test'}
+        actions={{
+          onChangeView: () => {},
+        }}
+      />
+    );
+
+    fireEvent.click(screen.getByText(iconDropdownProps.label));
+
+    expect(screen.getAllByText('test').length).toEqual(items.length);
+  });
+});

src/components/Dropdown/__snapshots__/Dropdown.story.storyshot

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dropdown with icons and labels 1`] = `
+<div
+  className="storybook-container"
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "width": "300px",
+        }
+      }
+    >
+      <div
+        actions={Object {}}
+        className="bx--dropdown__wrapper bx--list-box__wrapper"
+      >
+        <label
+          className="bx--label"
+          htmlFor="downshift-8-toggle-button"
+          id="downshift-8-label"
+        >
+          Dropdown label
+        </label>
+        <div
+          aria-label="Dropdown"
+          className="bx--dropdown bx--list-box"
+          id="carbon-dropdown-example"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+        >
+          <button
+            aria-disabled={false}
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            aria-labelledby="downshift-8-label downshift-8-toggle-button"
+            className="bx--list-box__field"
+            disabled={false}
+            id="downshift-8-toggle-button"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className="bx--list-box__label"
+            >
+              Dropdown menu options
+            </span>
+            <div
+              className="bx--list-box__menu-icon"
+            >
+              <svg
+                aria-label="Open menu"
+                fill="currentColor"
+                focusable="false"
+                height={16}
+                name="chevron--down"
+                preserveAspectRatio="xMidYMid meet"
+                role="img"
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                />
+                <title>
+                  Open menu
+                </title>
+              </svg>
+            </div>
+          </button>
+          <div
+            aria-labelledby="downshift-8-label"
+            className="bx--list-box__menu"
+            id="downshift-8-menu"
+            onBlur={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            role="listbox"
+            tabIndex={-1}
+          />
+        </div>
+        <div
+          className="bx--form__helper-text"
+        >
+          This is some helper text.
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
+`;