@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/__tests__/Token.test.jsx

@@ -1,93 +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 Token_1 = __importDefault(require("../Token/Token"));
-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_2 = require("../Token");
-expect.extend(jest_axe_1.toHaveNoViolations);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const testTokenComponent = (Component) => {
-    testing_1.behavesAsComponent({ Component: Token_1.default });
-    it('renders a <span>', () => {
-        expect(testing_1.render(<Component text="token"/>).type).toEqual('span');
-    });
-    it('renders a <button> or <a> when specified', () => {
-        expect(testing_1.render(<Component as="button" text="token"/>).type).toEqual('button');
-        expect(testing_1.render(<Component as="a" text="token"/>).type).toEqual('a');
-    });
-    it('renders with a remove button', () => {
-        const onRemoveMock = jest.fn();
-        expect(testing_1.render(<Component text="token" onRemove={onRemoveMock}/>)).toMatchSnapshot();
-    });
-    it('renders button inside the token when the token also has a remove button', () => {
-        const onRemoveMock = jest.fn();
-        const { getByText } = react_2.render(<Component as="button" text="token" onRemove={onRemoveMock}/>);
-        expect(testing_1.render(<Component as="button" text="token" onRemove={onRemoveMock}/>).type).not.toEqual('button');
-        expect(getByText('token').tagName.toLowerCase()).toEqual('button');
-    });
-    it('renders anchor inside the token when the token also has a remove button', () => {
-        const onRemoveMock = jest.fn();
-        const { getByText } = react_2.render(<Component as="a" text="token" onRemove={onRemoveMock}/>);
-        expect(testing_1.render(<Component as="a" text="token" onRemove={onRemoveMock}/>).type).not.toEqual('a');
-        expect(getByText('token').tagName.toLowerCase()).toEqual('a');
-    });
-    it('renders isSelected', () => {
-        expect(testing_1.render(<Component text="token" isSelected/>)).toMatchSnapshot();
-    });
-    it('renders all sizes', () => {
-        const onRemoveMock = jest.fn();
-        const tokenSizeKeys = Object.keys(TokenBase_1.tokenSizes);
-        for (const tokenSizeKey of tokenSizeKeys) {
-            expect(testing_1.render(<Component text="token" size={tokenSizeKey} onRemove={onRemoveMock}/>)).toMatchSnapshot();
-        }
-    });
-    it('calls onRemove when the user clicks the remove button', () => {
-        const onRemoveMock = jest.fn();
-        const component = testing_1.mount(<Component text="token" onRemove={onRemoveMock}/>);
-        component.find('button').simulate('click');
-        expect(onRemoveMock).toHaveBeenCalled();
-    });
-    it('calls onRemove when the user keys Backspace on a focused Token', () => {
-        const onRemoveMock = jest.fn();
-        const { getByText } = react_2.render(<Component text="token" onRemove={onRemoveMock}/>);
-        const domNode = getByText('token');
-        react_2.fireEvent.keyDown(domNode, { key: 'Backspace' });
-        expect(onRemoveMock).toHaveBeenCalled();
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<Component text="token"/>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-};
-describe('Token components', () => {
-    describe('Token', () => {
-        testTokenComponent(Token_1.default);
-        it('renders with a leadingVisual', () => {
-            expect(testing_1.render(<Token_1.default text="token" leadingVisual={() => <div style={{ backgroundColor: 'blue' }}/>}/>)).toMatchSnapshot();
-        });
-    });
-    describe('IssueLabelToken', () => {
-        testTokenComponent(Token_2.IssueLabelToken);
-        it('renders default fill color', () => {
-            const onRemoveMock = jest.fn();
-            expect(testing_1.render(<Token_2.IssueLabelToken text="token" onRemove={onRemoveMock}/>)).toMatchSnapshot();
-        });
-        it('renders custom fill color', () => {
-            const onRemoveMock = jest.fn();
-            expect(testing_1.render(<Token_2.IssueLabelToken text="token" fillColor="#0366d6" onRemove={onRemoveMock}/>)).toMatchSnapshot();
-        });
-    });
-    describe('AvatarToken', () => {
-        const AvatarTokenWithDefaultAvatar = ({ avatarSrc = 'https://avatars.githubusercontent.com/mperrotti', ...rest }) => <Token_2.AvatarToken avatarSrc={avatarSrc} {...rest}/>;
-        testTokenComponent(AvatarTokenWithDefaultAvatar);
-    });
-});

package/lib/__tests__/Tooltip.test.jsx

@@ -1,46 +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 Tooltip_1 = __importDefault(require("../Tooltip"));
-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('Tooltip', () => {
-    testing_1.behavesAsComponent({ Component: Tooltip_1.default });
-    testing_1.checkExports('Tooltip', {
-        default: Tooltip_1.default
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<Tooltip_1.default text="hi"/>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('renders a <span> with the "tooltipped" class', () => {
-        expect(testing_1.render(<Tooltip_1.default />).type).toEqual('span');
-        expect(testing_1.renderClasses(<Tooltip_1.default />)).toContain('tooltipped-n');
-    });
-    it('respects the "align" prop', () => {
-        expect(testing_1.rendersClass(<Tooltip_1.default align="left"/>, 'tooltipped-align-left-2')).toBe(true);
-        expect(testing_1.rendersClass(<Tooltip_1.default align="right"/>, 'tooltipped-align-right-2')).toBe(true);
-    });
-    it('respects the "direction" prop', () => {
-        for (const direction of Tooltip_1.default.directions) {
-            expect(testing_1.rendersClass(<Tooltip_1.default direction={direction}/>, `tooltipped-${direction}`)).toBe(true);
-        }
-    });
-    it('respects the "noDelay" prop', () => {
-        expect(testing_1.rendersClass(<Tooltip_1.default noDelay/>, 'tooltipped-no-delay')).toBe(true);
-    });
-    it('respects the "text" prop', () => {
-        expect(testing_1.render(<Tooltip_1.default text="hi"/>).props['aria-label']).toEqual('hi');
-    });
-    it('respects the "wrap" prop', () => {
-        expect(testing_1.rendersClass(<Tooltip_1.default wrap/>, 'tooltipped-multiline')).toBe(true);
-    });
-});

package/lib/__tests__/Truncate.test.jsx

@@ -1,41 +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 __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('Truncate', () => {
-    testing_1.behavesAsComponent({
-        Component: __1.Truncate,
-        toRender: () => <__1.Truncate title="a-long-branch-name"/>
-    });
-    testing_1.checkExports('Truncate', {
-        default: __1.Truncate
-    });
-    it('renders a <div> by default', () => {
-        expect(testing_1.render(<__1.Truncate title="a-long-branch-name"/>).type).toEqual('div');
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<__1.Truncate title="a-long-branch-name">a-long-branch-name</__1.Truncate>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('respects the maxWidth prop', () => {
-        expect(testing_1.render(<__1.Truncate maxWidth={250} title="a-long-branch-name"/>)).toHaveStyleRule('max-width', '250px');
-    });
-    it('respects the inline prop', () => {
-        expect(testing_1.render(<__1.Truncate inline title="a-long-branch-name"/>)).toHaveStyleRule('display', 'inline-block');
-    });
-    it('respects the expandable prop', () => {
-        expect(testing_1.render(<__1.Truncate expandable title="a-long-branch-name"/>)).toHaveStyleRule('max-width', '10000px', {
-            modifier: ':hover'
-        });
-    });
-});

package/lib/__tests__/UnderlineNav.test.jsx

@@ -1,53 +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 __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('UnderlineNav', () => {
-    testing_1.behavesAsComponent({ Component: __1.UnderlineNav });
-    testing_1.checkExports('UnderlineNav', {
-        default: __1.UnderlineNav
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<__1.UnderlineNav />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('renders a <nav>', () => {
-        expect(testing_1.render(<__1.UnderlineNav />).type).toEqual('nav');
-    });
-    it('adds the UnderlineNav class', () => {
-        expect(testing_1.rendersClass(<__1.UnderlineNav />, 'UnderlineNav')).toEqual(true);
-    });
-    it('respects the "align" prop', () => {
-        expect(testing_1.rendersClass(<__1.UnderlineNav align="right"/>, 'UnderlineNav--right')).toEqual(true);
-    });
-    it('respects the "full" prop', () => {
-        expect(testing_1.rendersClass(<__1.UnderlineNav full/>, 'UnderlineNav--full')).toEqual(true);
-    });
-    it('sets aria-label to the "label" prop', () => {
-        expect(testing_1.render(<__1.UnderlineNav label="foo"/>).props['aria-label']).toEqual('foo');
-    });
-    it('wraps its children in an "UnderlineNav-body" div', () => {
-        const children = <b>yo</b>;
-        const wrapper = testing_1.mount(<__1.UnderlineNav>{children}</__1.UnderlineNav>);
-        const body = wrapper.find('.UnderlineNav-body');
-        expect(body.exists()).toEqual(true);
-        expect(body.childAt(0).type()).toEqual('b');
-    });
-    it('respects the "actions" prop', () => {
-        const content = <h1>hi!</h1>;
-        const wrapper = testing_1.mount(<__1.UnderlineNav actions={content}/>);
-        const actions = wrapper.find('.UnderlineNav-actions');
-        expect(actions.exists()).toEqual(true);
-        expect(actions.text()).toEqual('hi!');
-    });
-});

package/lib/__tests__/UnderlineNavLink.test.jsx

@@ -1,31 +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 __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('UnderlineNav.Link', () => {
-    testing_1.behavesAsComponent({ Component: __1.UnderlineNav.Link });
-    it('renders an <a> by default', () => {
-        expect(testing_1.render(<__1.UnderlineNav.Link />).type).toEqual('a');
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<__1.UnderlineNav.Link href="www.github.com">Go to GitHub</__1.UnderlineNav.Link>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('respects the "selected" prop', () => {
-        expect(testing_1.render(<__1.UnderlineNav.Link selected/>)).toMatchSnapshot();
-    });
-    it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-        const Link = ({ theme: _ignoredTheme, ...props }) => <div {...props}/>;
-        expect(testing_1.render(<__1.UnderlineNav.Link as={Link} to="#"/>)).toMatchSnapshot();
-    });
-});

package/lib/__tests__/behaviors/focusTrap.test.jsx

@@ -1,184 +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 react_2 = require("@testing-library/react");
-const focusTrap_1 = require("../../behaviors/focusTrap");
-// Since we use strict `isTabbable` checks within focus trap, we need to mock these
-// properties that Jest does not populate.
-beforeAll(() => {
-    try {
-        Object.defineProperties(HTMLElement.prototype, {
-            offsetHeight: {
-                get: () => 42
-            },
-            offsetWidth: {
-                get: () => 42
-            },
-            getClientRects: {
-                get: () => () => [42]
-            }
-        });
-    }
-    catch {
-        // ignore
-    }
-});
-it('Should initially focus the container when activated', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    expect(document.activeElement).toEqual(trapContainer);
-    controller.abort();
-});
-it('Should initially focus the initialFocus element when specified', () => {
-    const { container } = react_2.render(<div id="trapContainer">
-      <button tabIndex={0}>Apple</button>
-      <button tabIndex={0}>Banana</button>
-      <button tabIndex={0}>Cantaloupe</button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const secondButton = trapContainer.querySelectorAll('button')[1];
-    const controller = focusTrap_1.focusTrap(trapContainer, secondButton);
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should prevent focus from exiting the trap, returns focus to previously-focused element', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const secondButton = trapContainer.querySelectorAll('button')[1];
-    const durianButton = container.querySelector('#durian');
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    focus(durianButton);
-    expect(document.activeElement).toEqual(trapContainer);
-    focus(secondButton);
-    expect(document.activeElement).toEqual(secondButton);
-    focus(durianButton);
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should prevent focus from exiting the trap if there are no focusable children', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer"></div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const durianButton = container.querySelector('#durian');
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    focus(durianButton);
-    expect(document.activeElement === durianButton).toEqual(false);
-    controller.abort();
-});
-it('Should cycle focus from last element to first element and vice-versa', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const firstButton = trapContainer.querySelector('button');
-    const lastButton = trapContainer.querySelectorAll('button')[2];
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    lastButton.focus();
-    react_2.fireEvent(lastButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab' }));
-    expect(document.activeElement).toEqual(firstButton);
-    react_2.fireEvent(firstButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));
-    expect(document.activeElement).toEqual(lastButton);
-    controller.abort();
-});
-it('Should should release the trap when the signal is aborted', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const durianButton = container.querySelector('#durian');
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    focus(durianButton);
-    expect(document.activeElement).toEqual(trapContainer);
-    controller.abort();
-    focus(durianButton);
-    expect(document.activeElement).toEqual(durianButton);
-});
-it('Should should release the trap when the container is removed from the DOM', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-      </div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const durianButton = container.querySelector('#durian');
-    const firstButton = trapContainer.querySelector('button');
-    focusTrap_1.focusTrap(trapContainer);
-    focus(durianButton);
-    expect(document.activeElement).toEqual(trapContainer);
-    // empty trap and remove it from the DOM
-    trapContainer.removeChild(firstButton);
-    trapContainer.parentElement?.removeChild(trapContainer);
-    focus(durianButton);
-    expect(document.activeElement).toEqual(durianButton);
-});
-it('Should handle dynamic content', async () => {
-    const { container } = react_2.render(<div>
-      <div id="trapContainer">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-      <button id="durian" tabIndex={0}>
-        Durian
-      </button>
-    </div>);
-    const trapContainer = container.querySelector('#trapContainer');
-    const [firstButton, secondButton, thirdButton] = trapContainer.querySelectorAll('button');
-    const controller = focusTrap_1.focusTrap(trapContainer);
-    secondButton.focus();
-    trapContainer.removeChild(thirdButton);
-    react_2.fireEvent(secondButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab' }));
-    expect(document.activeElement).toEqual(firstButton);
-    react_2.fireEvent(firstButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-/**
- * Helper to handle firing the focusin event, which jest/JSDOM does not do for us.
- * @param element
- */
-function focus(element) {
-    element.focus();
-    react_2.fireEvent(element, new FocusEvent('focusin', { bubbles: true }));
-}