@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

package/lib/__tests__/Caret.test.jsx

@@ -0,0 +1,37 @@
+"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 Caret_1 = __importDefault(require("../Caret"));
+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('Caret', () => {
+    it('renders <svg>', () => {
+        expect(testing_1.render(<Caret_1.default />).type).toEqual('svg');
+    });
+    testing_1.checkExports('Caret', {
+        default: Caret_1.default
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<Caret_1.default />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders cardinal directions', () => {
+        for (const location of ['top', 'right', 'bottom', 'left']) {
+            expect(testing_1.render(<Caret_1.default location={location}/>)).toMatchSnapshot();
+        }
+        for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
+            expect(testing_1.render(<Caret_1.default location={location}/>)).toMatchSnapshot();
+        }
+        for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
+            expect(testing_1.render(<Caret_1.default location={location}/>)).toMatchSnapshot();
+        }
+    });
+});

package/lib/__tests__/CircleBadge.test.jsx

@@ -0,0 +1,55 @@
+"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 octicons_react_1 = require("@primer/octicons-react");
+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);
+const imgInput = <img alt="" src="primer.jpg"/>;
+describe('CircleBadge', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.CircleBadge,
+        toRender: () => <__1.CircleBadge>{imgInput}</__1.CircleBadge>
+    });
+    testing_1.checkExports('CircleBadge', {
+        default: __1.CircleBadge
+    });
+    describe('CircleBadge.Icon', () => {
+        testing_1.behavesAsComponent({
+            Component: __1.CircleBadge.Icon,
+            toRender: () => <__1.CircleBadge.Icon icon={octicons_react_1.CheckIcon}/>
+        });
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.CircleBadge variant="large" size={20}/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the inline prop', () => {
+        expect(testing_1.render(<__1.CircleBadge inline/>)).toMatchSnapshot();
+    });
+    it('respects the variant prop', () => {
+        expect(testing_1.render(<__1.CircleBadge variant="large"/>)).toMatchSnapshot();
+    });
+    it('uses the size prop to override the variant prop', () => {
+        expect(testing_1.render(<__1.CircleBadge variant="large" size={20}/>)).toMatchSnapshot();
+    });
+    it('applies title', () => {
+        expect(testing_1.render(<__1.CircleBadge as="a" title="primer logo">
+          {imgInput}
+        </__1.CircleBadge>).props['title']).toEqual('primer logo');
+    });
+    it('preserves child class names', () => {
+        const comp = testing_1.mount(<__1.CircleBadge>
+        <img className="primer" alt="" src="primer.jpg"/>
+      </__1.CircleBadge>);
+        expect(comp.find('img').hasClass('primer')).toEqual(true);
+    });
+});

package/lib/__tests__/CircleOcticon.test.jsx

@@ -0,0 +1,45 @@
+"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 octicons_react_1 = require("@primer/octicons-react");
+const theme_1 = __importDefault(require("../theme"));
+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('CircleOcticon', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.CircleOcticon,
+        toRender: () => <__1.CircleOcticon icon={octicons_react_1.CheckIcon}/>
+    });
+    testing_1.checkExports('CircleOcticon', {
+        default: __1.CircleOcticon
+    });
+    it('renders a <div> with width and height', () => {
+        const result = testing_1.render(<__1.CircleOcticon icon={octicons_react_1.CheckIcon} size={10}/>);
+        expect(result).toHaveStyleRule('width', '10px');
+        expect(result).toHaveStyleRule('height', '10px');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.CircleOcticon icon={octicons_react_1.CheckIcon} size={10}/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders {borderRadius: 50%}', () => {
+        expect(testing_1.render(<__1.CircleOcticon icon={octicons_react_1.CheckIcon}/>)).toHaveStyleRule('border-radius', '50%');
+    });
+    it('respects the bg prop', () => {
+        expect(testing_1.render(<__1.CircleOcticon icon={octicons_react_1.CheckIcon} bg="danger.subtle"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.danger?.subtle);
+    });
+    it('has a default size', () => {
+        const result = testing_1.render(<__1.CircleOcticon icon={octicons_react_1.CheckIcon}/>);
+        expect(result).toHaveStyleRule('width', '32px');
+        expect(result).toHaveStyleRule('height', '32px');
+    });
+});

package/lib/__tests__/ConfirmationDialog.test.jsx

@@ -0,0 +1,119 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("babel-polyfill");
+const react_1 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+const react_2 = __importStar(require("react"));
+const ActionMenu_1 = require("../ActionMenu");
+const BaseStyles_1 = __importDefault(require("../BaseStyles"));
+const Box_1 = __importDefault(require("../Box"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const ConfirmationDialog_1 = require("../Dialog/ConfirmationDialog");
+const theme_1 = __importDefault(require("../theme"));
+const ThemeProvider_1 = require("../ThemeProvider");
+const ssr_1 = require("../utils/ssr");
+const testing_1 = require("../utils/testing");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const Basic = () => {
+    const [isOpen, setIsOpen] = react_2.useState(false);
+    const buttonRef = react_2.useRef(null);
+    const onDialogClose = react_2.useCallback(() => setIsOpen(false), []);
+    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
+      <ssr_1.SSRProvider>
+        <BaseStyles_1.default>
+          <Button_1.default ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+            Show dialog
+          </Button_1.default>
+          {isOpen && (<ConfirmationDialog_1.ConfirmationDialog title="Confirm" onClose={onDialogClose} cancelButtonContent="Secondary" confirmButtonContent="Primary">
+              Lorem ipsum dolor sit Pippin good dog.
+            </ConfirmationDialog_1.ConfirmationDialog>)}
+        </BaseStyles_1.default>
+      </ssr_1.SSRProvider>
+    </ThemeProvider_1.ThemeProvider>);
+};
+const ShorthandHookFromActionMenu = () => {
+    const confirm = ConfirmationDialog_1.useConfirm();
+    const [text, setText] = react_2.useState('Show menu');
+    const onButtonClick = react_2.useCallback(async () => {
+        if (await confirm({
+            title: 'Confirm',
+            content: 'Confirm',
+            cancelButtonContent: 'Secondary',
+            confirmButtonContent: 'Primary'
+        })) {
+            setText('Confirmed');
+        }
+    }, [confirm]);
+    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
+      <ssr_1.SSRProvider>
+        <BaseStyles_1.default>
+          <Box_1.default display="flex" flexDirection="column" alignItems="flex-start">
+            <ActionMenu_1.ActionMenu renderAnchor={props => <Button_1.default {...props}>{text}</Button_1.default>} items={[{ text: 'Show dialog', onAction: onButtonClick }]}/>
+          </Box_1.default>
+        </BaseStyles_1.default>
+      </ssr_1.SSRProvider>
+    </ThemeProvider_1.ThemeProvider>);
+};
+describe('ConfirmationDialog', () => {
+    testing_1.behavesAsComponent({
+        Component: ConfirmationDialog_1.ConfirmationDialog,
+        toRender: () => <Basic />,
+        options: { skipAs: true, skipSx: true }
+    });
+    testing_1.checkExports('Dialog/ConfirmationDialog', {
+        default: undefined,
+        useConfirm: ConfirmationDialog_1.useConfirm,
+        ConfirmationDialog: ConfirmationDialog_1.ConfirmationDialog
+    });
+    it('should have no axe violations', async () => {
+        const spy = jest.spyOn(console, 'warn').mockImplementation();
+        const { container } = react_1.render(<Basic />);
+        spy.mockRestore();
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('focuses the primary action when opened', async () => {
+        const { getByText } = react_1.render(<Basic />);
+        react_1.act(() => {
+            react_1.fireEvent.click(getByText('Show dialog'));
+        });
+        expect(getByText('Primary')).toEqual(document.activeElement);
+        expect(getByText('Secondary')).not.toEqual(document.activeElement);
+        react_1.cleanup();
+    });
+    it('supports nested `focusTrap`s', async () => {
+        const { getByText } = react_1.render(<ShorthandHookFromActionMenu />);
+        react_1.act(() => {
+            react_1.fireEvent.click(getByText('Show menu'));
+        });
+        react_1.act(() => {
+            react_1.fireEvent.click(getByText('Show dialog'));
+        });
+        expect(getByText('Primary')).toEqual(document.activeElement);
+        expect(getByText('Secondary')).not.toEqual(document.activeElement);
+        react_1.cleanup();
+    });
+});

package/lib/__tests__/CounterLabel.test.jsx

@@ -0,0 +1,36 @@
+"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 theme_1 = __importDefault(require("../theme"));
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('CounterLabel', () => {
+    testing_1.behavesAsComponent({ Component: __1.CounterLabel });
+    testing_1.checkExports('CounterLabel', {
+        default: __1.CounterLabel
+    });
+    it('renders a <span>', () => {
+        expect(testing_1.render(<__1.CounterLabel />).type).toEqual('span');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.CounterLabel />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the primary "scheme" prop', () => {
+        expect(testing_1.render(<__1.CounterLabel scheme="primary"/>)).toHaveStyleRule('color', theme_1.default.colorSchemes.light.colors.fg?.onEmphasis.trim());
+        expect(testing_1.render(<__1.CounterLabel scheme="primary"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.neutral?.emphasis.trim());
+    });
+    it('respects the secondary "scheme" prop', () => {
+        expect(testing_1.render(<__1.CounterLabel scheme="secondary"/>)).toHaveStyleRule('color', theme_1.default.colorSchemes.light.colors.fg?.default.trim());
+        expect(testing_1.render(<__1.CounterLabel scheme="secondary"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.neutral?.muted);
+    });
+});

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.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.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>)
+    });
+});