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

package/lib/__tests__/TabNav.test.jsx

@@ -0,0 +1,32 @@
+"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('TabNav', () => {
+    testing_1.behavesAsComponent({ Component: __1.TabNav });
+    testing_1.checkExports('TabNav', {
+        default: __1.TabNav
+    });
+    describe('TabNav.Link', () => {
+        testing_1.behavesAsComponent({ Component: __1.TabNav.Link });
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.TabNav aria-label="main"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('sets aria-label appropriately', () => {
+        const { getByLabelText } = react_2.render(<__1.TabNav aria-label="stuff"/>);
+        expect(getByLabelText('stuff')).toBeTruthy();
+        expect(getByLabelText('stuff').tagName).toEqual('NAV');
+    });
+});

package/lib/__tests__/Text.test.jsx

@@ -0,0 +1,71 @@
+"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 theme_1 = __importDefault(require("../theme"));
+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('Text', () => {
+    testing_1.behavesAsComponent({ Component: __1.Text });
+    testing_1.checkExports('Text', {
+        default: __1.Text
+    });
+    it('renders a <span> by default', () => {
+        expect(testing_1.render(<__1.Text />).type).toEqual('span');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Text>hello</__1.Text>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders fontSize', () => {
+        for (const fontSize of theme_1.default.fontSizes) {
+            expect(testing_1.render(<__1.Text fontSize={fontSize}/>)).toHaveStyleRule('font-size', testing_1.px(fontSize));
+        }
+    });
+    it('renders responsive fontSize', () => {
+        expect(testing_1.renderStyles(<__1.Text fontSize={[1, 2]}/>)).toEqual({
+            'font-size': testing_1.px(theme_1.default.fontSizes[1]),
+            [`@media screen and (min-width:${testing_1.px(theme_1.default.breakpoints[0])})`]: {
+                'font-size': testing_1.px(theme_1.default.fontSizes[2])
+            }
+        });
+    });
+    it('renders responsive lineHeight', () => {
+        expect(testing_1.renderStyles(<__1.Text lineHeight={['condensed', 'default']}/>)).toEqual({
+            'line-height': String(theme_1.default.lineHeights.condensed),
+            [`@media screen and (min-width:${testing_1.px(theme_1.default.breakpoints[0])})`]: {
+                'line-height': String(theme_1.default.lineHeights.default)
+            }
+        });
+    });
+    it('respects fontWeight', () => {
+        expect(testing_1.render(<__1.Text fontWeight="bold"/>)).toHaveStyleRule('font-weight', '600');
+        expect(testing_1.render(<__1.Text fontWeight="normal"/>)).toHaveStyleRule('font-weight', '400');
+    });
+    it('respects the "fontStyle" prop', () => {
+        expect(testing_1.render(<__1.Text fontStyle="italic"/>)).toHaveStyleRule('font-style', 'italic');
+        expect(testing_1.render(<__1.Text as="i" fontStyle="normal"/>)).toHaveStyleRule('font-style', 'normal');
+    });
+    it('respects lineHeight', () => {
+        for (const [name, value] of Object.entries(theme_1.default.lineHeights)) {
+            expect(testing_1.render(<__1.Text lineHeight={name}/>)).toHaveStyleRule('line-height', String(value));
+        }
+    });
+    it('respects fontFamily="mono"', () => {
+        // styled-components removes the whitespace between font-family values
+        const mono = theme_1.default.fonts.mono.replace(/, /g, ',');
+        expect(testing_1.render(<__1.Text fontFamily="mono"/>)).toHaveStyleRule('font-family', mono);
+    });
+    it('respects other values for fontSize', () => {
+        expect(testing_1.render(<__1.Text fontSize="2em"/>)).toHaveStyleRule('font-size', '2em');
+        expect(testing_1.render(<__1.Text fontSize={100}/>)).toHaveStyleRule('font-size', '100px');
+    });
+});

package/lib/__tests__/TextInput.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 __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('TextInput', () => {
+    testing_1.behavesAsComponent({ Component: __1.TextInput, options: { skipAs: true } });
+    testing_1.checkExports('TextInput', {
+        default: __1.TextInput
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.TextInput aria-label="zipcode" name="zipcode" variant="small"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders', () => {
+        expect(testing_1.render(<__1.TextInput name="zipcode"/>)).toMatchSnapshot();
+    });
+    it('renders small', () => {
+        expect(testing_1.render(<__1.TextInput name="zipcode" variant="small"/>)).toMatchSnapshot();
+    });
+    it('renders large', () => {
+        expect(testing_1.render(<__1.TextInput name="zipcode" variant="large"/>)).toMatchSnapshot();
+    });
+    it('renders block', () => {
+        expect(testing_1.render(<__1.TextInput name="zipcode" block/>)).toMatchSnapshot();
+    });
+    it('should call onChange prop with input value', () => {
+        const onChangeMock = jest.fn();
+        const component = testing_1.mount(<__1.TextInput onChange={onChangeMock} value="test"/>);
+        component.find('input').simulate('change');
+        expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should render a password input', () => {
+        expect(testing_1.render(<__1.TextInput name="password" type="password"/>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/TextInputWithTokens.test.jsx

@@ -0,0 +1,302 @@
+"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 testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+const TokenBase_1 = require("../Token/TokenBase");
+const Token_1 = require("../Token");
+const TextInputWithTokens_1 = __importDefault(require("../TextInputWithTokens"));
+expect.extend(jest_axe_1.toHaveNoViolations);
+const mockTokens = [
+    { text: 'zero', id: 0 },
+    { text: 'one', id: 1 },
+    { text: 'two', id: 2 },
+    { text: 'three', id: 3 },
+    { text: 'four', id: 4 },
+    { text: 'five', id: 5 },
+    { text: 'six', id: 6 },
+    { text: 'seven', id: 7 }
+];
+const LabelledTextInputWithTokens = ({ onTokenRemove, tokens, ...rest }) => (<>
+    {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+    <label htmlFor="tokenInput" id="tokenLabel">
+      Tokens
+    </label>
+    <TextInputWithTokens_1.default tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest}/>
+  </>);
+jest.useFakeTimers();
+describe('TextInputWithTokens', () => {
+    it('renders without tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={[]} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders as block layout', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default block tokens={[]} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders with tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders with tokens using a custom token component', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} tokenComponent={Token_1.IssueLabelToken}/>)).toMatchSnapshot();
+    });
+    it('renders at a maximum height when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default maxHeight="20px" tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders tokens on a single line when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default preventTokenWrapping tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders tokens at the specified sizes', () => {
+        const onRemoveMock = jest.fn();
+        const tokenSizeKeys = Object.keys(TokenBase_1.tokenSizes);
+        for (const tokenSizeKey of tokenSizeKeys) {
+            expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} size={tokenSizeKey}/>)).toMatchSnapshot();
+        }
+    });
+    it('renders tokens without a remove button when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default hideTokenRemoveButtons tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders a truncated set of tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>)).toMatchSnapshot();
+    });
+    it('focuses the previous token when keying ArrowLeft', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        const lastTokenNode = getByText(mockTokens[lastTokenIndex].text);
+        expect(document.activeElement).not.toEqual(lastTokenNode);
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(lastTokenNode.id);
+        react_2.fireEvent.keyDown(lastTokenNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(getByText(mockTokens[lastTokenIndex - 1].text).id);
+    });
+    it('focuses the next token when keying ArrowRight', () => {
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[4].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).toEqual(getByText(mockTokens[5].text).id);
+    });
+    it('focuses the input when keying ArrowLeft on the first token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[0].text);
+        expect(document.activeElement).not.toEqual(firstTokenNode);
+        react_2.fireEvent.focus(firstTokenNode);
+        react_2.fireEvent.keyDown(firstTokenNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('focuses the input when keying ArrowRight on the last token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text);
+        expect(document.activeElement).not.toEqual(lastTokenNode);
+        react_2.fireEvent.focus(lastTokenNode);
+        react_2.fireEvent.keyDown(lastTokenNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('focuses the input when keying Escape when focused on a token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text);
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+        react_2.fireEvent.focus(lastTokenNode);
+        expect(document.activeElement?.id).toEqual(lastTokenNode.id);
+        react_2.fireEvent.keyUp(lastTokenNode, { key: 'Escape' });
+        expect(document.activeElement?.id).not.toEqual(lastTokenNode.id);
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('does not focus the input when clicking a token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>);
+        const inputNode = getByLabelText('Tokens');
+        const tokenNode = getByText(mockTokens[0].text);
+        expect(document.activeElement).not.toEqual(inputNode.id);
+        react_2.fireEvent.click(tokenNode);
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+    });
+    it('focuses the input when clicking somewhere in the component besides the tokens', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>);
+        const inputNode = getByLabelText('Tokens');
+        const truncatedTokenCount = getByText('+6');
+        expect(document.activeElement).not.toEqual(inputNode.id);
+        react_2.fireEvent.click(truncatedTokenCount);
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('shows all tokens when the input is focused and hides them when it is blurred (when visibleTokenCount is set)', () => {
+        const onRemoveMock = jest.fn();
+        const visibleTokenCount = 2;
+        const { getByLabelText, getByText } = react_2.render(<>
+        <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={visibleTokenCount}/>
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>);
+        const inputNode = getByLabelText('Tokens');
+        const focusableOutsideComponentNode = getByText('Focus me');
+        const allTokenLabels = mockTokens.map(token => token.text);
+        const truncatedTokenCountNode = getByText('+6');
+        react_2.act(() => {
+            jest.runAllTimers();
+            react_2.fireEvent.focus(inputNode);
+        });
+        setTimeout(() => {
+            for (const tokenLabel of allTokenLabels) {
+                const tokenNode = getByText(tokenLabel);
+                expect(tokenNode).toBeDefined();
+            }
+        }, 0);
+        react_2.act(() => {
+            jest.runAllTimers();
+            // onBlur isn't called on input unless we specifically fire the "blur" event
+            // eslint-disable-next-line github/no-blur
+            react_2.fireEvent.blur(inputNode);
+            react_2.fireEvent.focus(focusableOutsideComponentNode);
+        });
+        setTimeout(() => {
+            expect(truncatedTokenCountNode).toBeDefined();
+            for (const tokenLabel of allTokenLabels) {
+                const tokenNode = getByText(tokenLabel);
+                if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(tokenNode).toBeDefined();
+                }
+                else {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(tokenNode).not.toBeDefined();
+                }
+            }
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('does not hide tokens when blurring the input to focus within the component (when visibleTokenCount is set)', () => {
+        const onRemoveMock = jest.fn();
+        const visibleTokenCount = 2;
+        const { getByLabelText, getByText } = react_2.render(<>
+        <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={visibleTokenCount}/>
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[visibleTokenCount - 1].text);
+        const allTokenLabels = mockTokens.map(token => token.text);
+        const truncatedTokenCountNode = getByText('+6');
+        react_2.act(() => {
+            react_2.fireEvent.focus(inputNode);
+            react_2.fireEvent.focus(firstTokenNode);
+        });
+        expect(truncatedTokenCountNode).toBeDefined();
+        for (const tokenLabel of allTokenLabels) {
+            const tokenNode = getByText(tokenLabel);
+            expect(tokenNode).toBeDefined();
+        }
+    });
+    it('focuses the first token when keying ArrowRight in the input', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[0].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+        expect(document.activeElement?.id).toEqual(firstTokenNode.id);
+    });
+    it('calls onTokenRemove on the last token when keying Backspace in an empty input', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[lastTokenIndex].id);
+    });
+    it("sets the input text to the last token's text when keying Backspace in an empty input", () => {
+        const onRemoveMock = jest.fn();
+        const { getByDisplayValue, getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(getByDisplayValue(mockTokens[lastTokenIndex].text).id).toEqual(inputNode.id);
+    });
+    it('does not call onTokenRemove on the last token when keying Backspace in an input that has a value', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} defaultValue="test"/>);
+        const inputNode = getByLabelText('Tokens');
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(onRemoveMock).not.toHaveBeenCalled();
+    });
+    it('calls onTokenRemove on the focused token when keying Backspace and moves focus to the next token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[4].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id);
+    });
+    it('moves focus to the next token when removing the first token', () => {
+        jest.useFakeTimers();
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={[...mockTokens].slice(0, 2)} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[0].text);
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        jest.runAllTimers();
+        setTimeout(() => {
+            expect(document.activeElement?.textContent).toBe(mockTokens[1].text);
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('moves focus to the input when the last token is removed', () => {
+        jest.useFakeTimers();
+        const onRemoveMock = jest.fn();
+        const { getByText, getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={[mockTokens[0]]} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[0].text);
+        const inputNode = getByLabelText('Tokens');
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        jest.runAllTimers();
+        setTimeout(() => {
+            expect(document.activeElement?.id).toBe(inputNode.id);
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('calls onKeyDown', () => {
+        const onRemoveMock = jest.fn();
+        const onKeyDownMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} onKeyDown={onKeyDownMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        expect(onKeyDownMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'a' });
+        expect(onKeyDownMock).toHaveBeenCalled();
+    });
+    it('should have no axe violations', async () => {
+        const onRemoveMock = jest.fn();
+        const { container } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});