@primer/components 32.0.0-rc.7200a6a6 → 32.0.0

package/lib/__tests__/TextInputWithTokens.test.jsx

@@ -1,302 +0,0 @@
-"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();
-    });
-});

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

@@ -1 +0,0 @@
-import 'jest-styled-components';