@primer/components 31.2.0 → 31.2.1-rc.0e01900c

package/lib/__tests__/Details.test.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Details', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Details
+  });
+  (0, _testing.checkExports)('Details', {
+    default: _.Details
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Details, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('Toggles when you click outside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps
+      } = (0, _.useDetails)({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/_react.default.createElement(_.Details, getDetailsProps(), /*#__PURE__*/_react.default.createElement("summary", null, "hi"));
+    };
+
+    const wrapper = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Accurately passes down open state', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = (0, _.useDetails)({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/_react.default.createElement(_.Details, getDetailsProps(), /*#__PURE__*/_react.default.createElement(_.Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'));
+    };
+
+    const wrapper = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Can manipulate state with setOpen', () => {
+    const CloseButton = props => /*#__PURE__*/_react.default.createElement(_.Button, props);
+
+    const Component = () => {
+      const {
+        getDetailsProps,
+        setOpen,
+        open
+      } = (0, _.useDetails)({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/_react.default.createElement(_.Details, getDetailsProps(), /*#__PURE__*/_react.default.createElement(_.Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/_react.default.createElement(CloseButton, {
+        onClick: () => setOpen(false)
+      }));
+    };
+
+    const wrapper = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
+    wrapper.find(CloseButton).simulate('click');
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Does not toggle when you click inside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = (0, _.useDetails)({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/_react.default.createElement(_.Details, getDetailsProps(), /*#__PURE__*/_react.default.createElement(_.Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/_react.default.createElement(_.Box, null, /*#__PURE__*/_react.default.createElement(_.ButtonPrimary, null, "hi")));
+    };
+
+    const wrapper = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
+    const summary = wrapper.find('summary');
+    wrapper.find(_.ButtonPrimary).simulate('click');
+    expect(summary.text()).toEqual('Open');
+    wrapper.unmount();
+  });
+});

package/lib/__tests__/Details.test.jsx

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Details', () => {
+    testing_1.behavesAsComponent({ Component: __1.Details });
+    testing_1.checkExports('Details', {
+        default: __1.Details
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Details />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('Toggles when you click outside', () => {
+        const Component = () => {
+            const { getDetailsProps } = __1.useDetails({ closeOnOutsideClick: true });
+            return (<__1.Details {...getDetailsProps()}>
+          <summary>hi</summary>
+        </__1.Details>);
+        };
+        const wrapper = testing_1.mount(<Component />);
+        document.body.click();
+        const dom = wrapper.getDOMNode();
+        expect(dom.hasAttribute('open')).toEqual(false);
+        wrapper.unmount();
+    });
+    it('Accurately passes down open state', () => {
+        const Component = () => {
+            const { getDetailsProps, open } = __1.useDetails({ closeOnOutsideClick: true });
+            return (<__1.Details {...getDetailsProps()}>
+          <__1.Button as="summary">{open ? 'Open' : 'Closed'}</__1.Button>
+        </__1.Details>);
+        };
+        const wrapper = testing_1.mount(<Component />);
+        document.body.click();
+        const dom = wrapper.getDOMNode();
+        const summary = wrapper.find('summary');
+        expect(summary.text()).toEqual('Closed');
+        expect(dom.hasAttribute('open')).toEqual(false);
+        wrapper.unmount();
+    });
+    it('Can manipulate state with setOpen', () => {
+        const CloseButton = (props) => <__1.Button {...props}/>;
+        const Component = () => {
+            const { getDetailsProps, setOpen, open } = __1.useDetails({ closeOnOutsideClick: true, defaultOpen: true });
+            return (<__1.Details {...getDetailsProps()}>
+          <__1.Button as="summary">{open ? 'Open' : 'Closed'}</__1.Button>
+          <CloseButton onClick={() => setOpen(false)}/>
+        </__1.Details>);
+        };
+        const wrapper = testing_1.mount(<Component />);
+        wrapper.find(CloseButton).simulate('click');
+        const dom = wrapper.getDOMNode();
+        const summary = wrapper.find('summary');
+        expect(summary.text()).toEqual('Closed');
+        expect(dom.hasAttribute('open')).toEqual(false);
+        wrapper.unmount();
+    });
+    it('Does not toggle when you click inside', () => {
+        const Component = () => {
+            const { getDetailsProps, open } = __1.useDetails({ closeOnOutsideClick: true, defaultOpen: true });
+            return (<__1.Details {...getDetailsProps()}>
+          <__1.Button as="summary">{open ? 'Open' : 'Closed'}</__1.Button>
+          <__1.Box>
+            <__1.ButtonPrimary>hi</__1.ButtonPrimary>
+          </__1.Box>
+        </__1.Details>);
+        };
+        const wrapper = testing_1.mount(<Component />);
+        const summary = wrapper.find('summary');
+        wrapper.find(__1.ButtonPrimary).simulate('click');
+        expect(summary.text()).toEqual('Open');
+        wrapper.unmount();
+    });
+});

package/lib/__tests__/Dialog.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Dialog.test.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+var _testing = require("../utils/testing");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+const comp = /*#__PURE__*/_react.default.createElement(_.Dialog, {
+  isOpen: true,
+  onDismiss: () => null,
+  "aria-labelledby": "header"
+}, /*#__PURE__*/_react.default.createElement(_.Dialog.Header, {
+  id: "header"
+}, "Title"), /*#__PURE__*/_react.default.createElement(_.Box, {
+  p: 3
+}, /*#__PURE__*/_react.default.createElement(_.Text, {
+  fontFamily: "sans-serif"
+}, "Some content")));
+
+const Component = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(true);
+  const returnFocusRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Button, {
+    "data-testid": "trigger-button",
+    ref: returnFocusRef,
+    onClick: () => setIsOpen(true)
+  }, "Show Dialog"), /*#__PURE__*/_react.default.createElement(_.Dialog, {
+    returnFocusRef: returnFocusRef,
+    isOpen: isOpen,
+    onDismiss: () => setIsOpen(false),
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/_react.default.createElement(_.Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    p: 3
+  }, /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontFamily: "sans-serif"
+  }, "Some content")))));
+};
+
+Component.displayName = "Component";
+
+const ClosedDialog = () => {
+  return /*#__PURE__*/_react.default.createElement(_.Dialog, {
+    isOpen: false,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/_react.default.createElement(_.Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    p: 3
+  }, /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"))));
+};
+
+ClosedDialog.displayName = "ClosedDialog";
+
+const DialogWithCustomFocusRef = () => {
+  const buttonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_.Dialog, {
+    isOpen: true,
+    initialFocusRef: buttonRef,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/_react.default.createElement(_.Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    p: 3
+  }, /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"), /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "inner-button",
+    ref: buttonRef
+  }, "hi"))));
+};
+
+DialogWithCustomFocusRef.displayName = "DialogWithCustomFocusRef";
+describe('Dialog', () => {
+  // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dialog,
+    toRender: () => comp,
+    options: {
+      skipAs: true,
+      skipSx: true
+    }
+  });
+  (0, _testing.checkExports)('Dialog', {
+    default: _.Dialog
+  });
+  describe('Dialog.Header', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.Dialog.Header
+    });
+  });
+  it('should have no axe violations', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    const {
+      container
+    } = (0, _react2.render)(comp);
+    spy.mockRestore();
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('Toggles when you click close button', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    (0, _react2.act)(() => {
+      _react2.fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    (0, _react2.cleanup)();
+  });
+  it('Renders dialog when isOpen is true', async () => {
+    const {
+      getByTestId
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    (0, _react2.cleanup)();
+  });
+  it('Does not render dialog when isOpen is false', async () => {
+    const {
+      queryByTestId
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ClosedDialog, null));
+    expect(queryByTestId('inner')).toBeNull();
+    (0, _react2.cleanup)();
+  });
+  it('Focuses close button when Dialog is opened', async () => {
+    const {
+      getByLabelText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null));
+    const closeButton = getByLabelText('Close');
+    expect(document.activeElement).toEqual(closeButton);
+    (0, _react2.cleanup)();
+  });
+  it('Focuses custom ref when Dialog is opened', async () => {
+    const {
+      getByTestId
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogWithCustomFocusRef, null));
+    const innerButton = getByTestId('inner-button');
+    expect(document.activeElement).toEqual(innerButton);
+    (0, _react2.cleanup)();
+  });
+  it('Returns focus to returnFocusRef', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    (0, _react2.act)(() => {
+      _react2.fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    const triggerButton = getByTestId('trigger-button');
+    expect(document.activeElement).toEqual(triggerButton);
+    (0, _react2.cleanup)();
+  });
+});

package/lib/__tests__/Dialog.test.jsx

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+const testing_1 = require("../utils/testing");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const comp = (<__1.Dialog isOpen onDismiss={() => null} aria-labelledby="header">
+    <__1.Dialog.Header id="header">Title</__1.Dialog.Header>
+    <__1.Box p={3}>
+      <__1.Text fontFamily="sans-serif">Some content</__1.Text>
+    </__1.Box>
+  </__1.Dialog>);
+const Component = () => {
+    const [isOpen, setIsOpen] = react_1.useState(true);
+    const returnFocusRef = react_1.useRef(null);
+    return (<div>
+      <__1.Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
+        Show Dialog
+      </__1.Button>
+      <__1.Dialog returnFocusRef={returnFocusRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)} aria-labelledby="header">
+        <div data-testid="inner">
+          <__1.Dialog.Header id="header">Title</__1.Dialog.Header>
+          <__1.Box p={3}>
+            <__1.Text fontFamily="sans-serif">Some content</__1.Text>
+          </__1.Box>
+        </div>
+      </__1.Dialog>
+    </div>);
+};
+const ClosedDialog = () => {
+    return (<__1.Dialog isOpen={false} onDismiss={() => null} aria-labelledby="header">
+      <div data-testid="inner">
+        <__1.Dialog.Header id="header">Title</__1.Dialog.Header>
+        <__1.Box p={3}>
+          <__1.Text fontFamily="sans-serif">Some content</__1.Text>
+        </__1.Box>
+      </div>
+    </__1.Dialog>);
+};
+const DialogWithCustomFocusRef = () => {
+    const buttonRef = react_1.useRef(null);
+    return (<__1.Dialog isOpen initialFocusRef={buttonRef} onDismiss={() => null} aria-labelledby="header">
+      <div data-testid="inner">
+        <__1.Dialog.Header id="header">Title</__1.Dialog.Header>
+        <__1.Box p={3}>
+          <__1.Text fontFamily="sans-serif">Some content</__1.Text>
+          <button data-testid="inner-button" ref={buttonRef}>
+            hi
+          </button>
+        </__1.Box>
+      </div>
+    </__1.Dialog>);
+};
+describe('Dialog', () => {
+    // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
+    testing_1.behavesAsComponent({
+        Component: __1.Dialog,
+        toRender: () => comp,
+        options: { skipAs: true, skipSx: true }
+    });
+    testing_1.checkExports('Dialog', {
+        default: __1.Dialog
+    });
+    describe('Dialog.Header', () => {
+        testing_1.behavesAsComponent({ Component: __1.Dialog.Header });
+    });
+    it('should have no axe violations', async () => {
+        const spy = jest.spyOn(console, 'warn').mockImplementation();
+        const { container } = react_2.render(comp);
+        spy.mockRestore();
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('Toggles when you click close button', async () => {
+        const { getByLabelText, getByTestId, queryByTestId } = react_2.render(<Component />);
+        expect(getByTestId('inner')).toBeTruthy();
+        react_2.act(() => {
+            react_2.fireEvent.click(getByLabelText('Close'));
+        });
+        expect(queryByTestId('inner')).toBeNull();
+        react_2.cleanup();
+    });
+    it('Renders dialog when isOpen is true', async () => {
+        const { getByTestId } = react_2.render(<Component />);
+        expect(getByTestId('inner')).toBeTruthy();
+        react_2.cleanup();
+    });
+    it('Does not render dialog when isOpen is false', async () => {
+        const { queryByTestId } = react_2.render(<ClosedDialog />);
+        expect(queryByTestId('inner')).toBeNull();
+        react_2.cleanup();
+    });
+    it('Focuses close button when Dialog is opened', async () => {
+        const { getByLabelText } = react_2.render(<Component />);
+        const closeButton = getByLabelText('Close');
+        expect(document.activeElement).toEqual(closeButton);
+        react_2.cleanup();
+    });
+    it('Focuses custom ref when Dialog is opened', async () => {
+        const { getByTestId } = react_2.render(<DialogWithCustomFocusRef />);
+        const innerButton = getByTestId('inner-button');
+        expect(document.activeElement).toEqual(innerButton);
+        react_2.cleanup();
+    });
+    it('Returns focus to returnFocusRef', async () => {
+        const { getByLabelText, getByTestId, queryByTestId } = react_2.render(<Component />);
+        expect(getByTestId('inner')).toBeTruthy();
+        react_2.act(() => {
+            react_2.fireEvent.click(getByLabelText('Close'));
+        });
+        expect(queryByTestId('inner')).toBeNull();
+        const triggerButton = getByTestId('trigger-button');
+        expect(document.activeElement).toEqual(triggerButton);
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/Dropdown.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Dropdown.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Dropdown', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown, null, "Hello!")
+  });
+  (0, _testing.checkExports)('Dropdown', {
+    default: _.Dropdown
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Dropdown, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});
+describe('Dropdown.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Item,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Item, null, "Hello!")
+  });
+});
+describe('Dropdown.Button', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Button,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Button, null, "Hello!")
+  });
+});
+describe('Dropdown.Caret', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Caret
+  });
+});
+describe('Dropdown.Menu', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Menu,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement("li", {
+      key: "a"
+    }, "1"), /*#__PURE__*/_react.default.createElement("li", {
+      key: "b"
+    }, "2"), /*#__PURE__*/_react.default.createElement("li", {
+      key: "c"
+    }, "3"))
+  });
+});

package/lib/__tests__/Dropdown.test.jsx

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Dropdown', () => {
+    testing_1.behavesAsComponent({ Component: __1.Dropdown, toRender: () => <__1.Dropdown>Hello!</__1.Dropdown> });
+    testing_1.checkExports('Dropdown', {
+        default: __1.Dropdown
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Dropdown />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});
+describe('Dropdown.Item', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.Dropdown.Item,
+        toRender: () => <__1.Dropdown.Item>Hello!</__1.Dropdown.Item>
+    });
+});
+describe('Dropdown.Button', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.Dropdown.Button,
+        toRender: () => <__1.Dropdown.Button>Hello!</__1.Dropdown.Button>
+    });
+});
+describe('Dropdown.Caret', () => {
+    testing_1.behavesAsComponent({ Component: __1.Dropdown.Caret });
+});
+describe('Dropdown.Menu', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.Dropdown.Menu,
+        toRender: () => (<__1.Dropdown.Menu>
+        <li key="a">1</li>
+        <li key="b">2</li>
+        <li key="c">3</li>
+      </__1.Dropdown.Menu>)
+    });
+});

package/lib/__tests__/DropdownMenu.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';