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

package/lib/__tests__/NewButton.test.jsx

@@ -1,61 +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 NewButton_1 = require("../NewButton");
-const testing_1 = require("../utils/testing");
-const react_2 = require("@testing-library/react");
-const jest_axe_1 = require("jest-axe");
-require("babel-polyfill");
-const octicons_react_1 = require("@primer/octicons-react");
-expect.extend(jest_axe_1.toHaveNoViolations);
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() { }
-describe('Button', () => {
-    testing_1.behavesAsComponent({ Component: NewButton_1.NewButton });
-    it('renders a <button>', () => {
-        expect(testing_1.render(<NewButton_1.NewButton>Default</NewButton_1.NewButton>).type).toEqual('button');
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<NewButton_1.NewButton>Click here</NewButton_1.NewButton>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('preserves "onClick" prop', () => {
-        expect(testing_1.render(<NewButton_1.NewButton onClick={noop}>Noop</NewButton_1.NewButton>).props.onClick).toEqual(noop);
-    });
-    it('respects width props', () => {
-        expect(testing_1.render(<NewButton_1.NewButton sx={{ width: 200 }}>Block</NewButton_1.NewButton>)).toHaveStyleRule('width', '200px');
-    });
-    it('respects the "disabled" prop', () => {
-        const item = testing_1.render(<NewButton_1.NewButton disabled> Disabled</NewButton_1.NewButton>);
-        expect(item.props.disabled).toEqual(true);
-        expect(item).toMatchSnapshot();
-    });
-    it('respects the "variant" prop', () => {
-        expect(testing_1.render(<NewButton_1.NewButton size="small">Smol</NewButton_1.NewButton>)).toHaveStyleRule('font-size', '12px');
-        expect(testing_1.render(<NewButton_1.NewButton size="large">Large</NewButton_1.NewButton>)).toHaveStyleRule('font-size', '16px');
-    });
-    it('respects the "fontSize" prop over the "variant" prop', () => {
-        expect(testing_1.render(<NewButton_1.NewButton size="small" sx={{ fontSize: 20 }}>
-          Big Smol
-        </NewButton_1.NewButton>)).toHaveStyleRule('font-size', '20px');
-    });
-    it('styles primary button appropriately', () => {
-        expect(testing_1.render(<NewButton_1.NewButton variant="primary">Primary</NewButton_1.NewButton>)).toHaveStyleRule('background-color', '#2da44e');
-    });
-    it('styles invisible button appropriately', () => {
-        expect(testing_1.render(<NewButton_1.NewButton variant="invisible">Invisible</NewButton_1.NewButton>)).toHaveStyleRule('background-color', 'transparent');
-    });
-    it('styles danger button appropriately', () => {
-        expect(testing_1.render(<NewButton_1.NewButton variant="danger">Danger</NewButton_1.NewButton>)).toHaveStyleRule('background-color', '#f6f8fa');
-    });
-    it('styles icon only button to make it a square', () => {
-        const IconOnlyButton = testing_1.render(<NewButton_1.NewButton icon={octicons_react_1.SearchIcon}>Search icon only button</NewButton_1.NewButton>);
-        expect(IconOnlyButton).toHaveStyleRule('padding-right', '7px');
-        expect(IconOnlyButton).toMatchSnapshot();
-    });
-});

package/lib/__tests__/Overlay.test.jsx

@@ -1,105 +0,0 @@
-"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 });
-const react_1 = __importStar(require("react"));
-const __1 = require("..");
-const react_2 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const jest_axe_1 = require("jest-axe");
-const theme_1 = __importDefault(require("../theme"));
-const BaseStyles_1 = __importDefault(require("../BaseStyles"));
-const ThemeProvider_1 = require("../ThemeProvider");
-expect.extend(jest_axe_1.toHaveNoViolations);
-const TestComponent = ({ initialFocus, callback }) => {
-    const [isOpen, setIsOpen] = react_1.useState(false);
-    const buttonRef = react_1.useRef(null);
-    const confirmButtonRef = react_1.useRef(null);
-    const anchorRef = react_1.useRef(null);
-    const closeOverlay = () => {
-        setIsOpen(false);
-        if (callback) {
-            callback();
-        }
-    };
-    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
-      <BaseStyles_1.default>
-        <__1.Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
-          <__1.Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-            open overlay
-          </__1.Button>
-          <__1.Button>outside</__1.Button>
-          {isOpen ? (<__1.Overlay initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined} returnFocusRef={buttonRef} ignoreClickRefs={[buttonRef]} onEscape={closeOverlay} onClickOutside={closeOverlay} width="small">
-              <__1.Box display="flex" flexDirection="column" p={2}>
-                <__1.Text>Are you sure?</__1.Text>
-                <__1.ButtonDanger onClick={closeOverlay}>Cancel</__1.ButtonDanger>
-                <__1.Button onClick={closeOverlay} ref={confirmButtonRef}>
-                  Confirm
-                </__1.Button>
-              </__1.Box>
-            </__1.Overlay>) : null}
-        </__1.Box>
-      </BaseStyles_1.default>
-    </ThemeProvider_1.ThemeProvider>);
-};
-describe('Overlay', () => {
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<TestComponent />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('should focus element passed into function', async () => {
-        const { getByText } = react_2.render(<TestComponent initialFocus="button"/>);
-        user_event_1.default.click(getByText('open overlay'));
-        await react_2.waitFor(() => getByText('Confirm'));
-        const confirmButton = getByText('Confirm');
-        expect(document.activeElement).toEqual(confirmButton);
-    });
-    it('should focus first element when nothing is passed', async () => {
-        const { getByText } = react_2.render(<TestComponent />);
-        user_event_1.default.click(getByText('open overlay'));
-        await react_2.waitFor(() => getByText('Cancel'));
-        const cancelButton = getByText('Cancel');
-        expect(document.activeElement).toEqual(cancelButton);
-    });
-    it('should call function when user clicks outside container', () => {
-        const mockFunction = jest.fn();
-        const { getByText, queryAllByText } = react_2.render(<TestComponent callback={mockFunction}/>);
-        react_2.act(() => user_event_1.default.click(getByText('open overlay')));
-        react_2.act(() => user_event_1.default.click(getByText('outside')));
-        expect(mockFunction).toHaveBeenCalledTimes(1);
-        const cancelButtons = queryAllByText('Cancel');
-        expect(cancelButtons).toHaveLength(0);
-    });
-    it('should call function when user presses escape', () => {
-        const mockFunction = jest.fn();
-        const { getByText, queryAllByText } = react_2.render(<TestComponent callback={mockFunction}/>);
-        react_2.act(() => user_event_1.default.click(getByText('open overlay')));
-        const domNode = getByText('Are you sure?');
-        react_2.fireEvent.keyDown(domNode, { key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27 });
-        expect(mockFunction).toHaveBeenCalledTimes(1);
-        const cancelButtons = queryAllByText('Cancel');
-        expect(cancelButtons).toHaveLength(0);
-    });
-});

package/lib/__tests__/Pagehead.test.jsx

@@ -1,25 +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 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('Pagehead', () => {
-    testing_1.behavesAsComponent({ Component: __1.Pagehead });
-    testing_1.checkExports('Pagehead', {
-        default: __1.Pagehead
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<__1.Pagehead theme={theme_1.default}>Pagehead</__1.Pagehead>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-});

package/lib/__tests__/Pagination/Pagination.test.jsx

@@ -1,32 +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 Pagination_1 = __importDefault(require("../../Pagination"));
-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 reqProps = { pageCount: 10, currentPage: 1 };
-const comp = <Pagination_1.default {...reqProps}/>;
-describe('Pagination', () => {
-    testing_1.behavesAsComponent({ Component: Pagination_1.default, toRender: () => comp });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(comp);
-        const results = await jest_axe_1.axe(container, {
-            rules: {
-                // The skip-link rule has to do with entire documents
-                // and is not relevant to this component.
-                // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
-                'skip-link': {
-                    enabled: false
-                }
-            }
-        });
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-});

package/lib/__tests__/Pagination/PaginationModel.test.jsx

@@ -1,118 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("babel-polyfill");
-const model_1 = require("../../Pagination/model");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function first(array, count = 1) {
-    const slice = array.slice(0, count);
-    return count === 1 ? slice[0] : slice;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function last(array, count = 1) {
-    const len = array.length;
-    const slice = array.slice(len - count, len);
-    return count === 1 ? slice[0] : slice;
-}
-describe('Pagination model', () => {
-    it('sets disabled on prev links', () => {
-        const model1 = model_1.buildPaginationModel(10, 1, true, 1, 2);
-        expect(first(model1).type).toEqual('PREV');
-        expect(first(model1).disabled).toBe(true);
-        const model2 = model_1.buildPaginationModel(10, 2, true, 1, 2);
-        expect(first(model2).type).toEqual('PREV');
-        expect(first(model2).disabled).toBe(false);
-    });
-    it('sets disabled on next links', () => {
-        const model1 = model_1.buildPaginationModel(10, 10, true, 1, 2);
-        expect(last(model1).type).toEqual('NEXT');
-        expect(last(model1).disabled).toBe(true);
-        const model2 = model_1.buildPaginationModel(10, 9, true, 1, 2);
-        expect(last(model2).type).toEqual('NEXT');
-        expect(last(model2).disabled).toBe(false);
-    });
-    it('sets the page number for prev and next links', () => {
-        const model = model_1.buildPaginationModel(10, 5, true, 1, 2);
-        expect(first(model).num).toEqual(4);
-        expect(last(model).num).toEqual(6);
-    });
-    it('ensures margin pages on the left', () => {
-        const model = model_1.buildPaginationModel(10, 10, true, 2, 0);
-        const slice = first(model, 5);
-        const expected = [
-            { type: 'PREV', num: 9 },
-            { type: 'NUM', num: 1 },
-            { type: 'NUM', num: 2 },
-            { type: 'BREAK' },
-            { type: 'NUM' }
-        ];
-        expect(slice).toMatchObject(expected);
-    });
-    it('ensures margin pages on the right', () => {
-        const model = model_1.buildPaginationModel(10, 1, true, 2, 0);
-        const slice = last(model, 5);
-        const expected = [
-            { type: 'NUM' },
-            { type: 'BREAK' },
-            { type: 'NUM', num: 9 },
-            { type: 'NUM', num: 10 },
-            { type: 'NEXT', num: 2 }
-        ];
-        expect(slice).toMatchObject(expected);
-    });
-    it('ensures that the current page is surrounded by the right number of pages', () => {
-        const model = model_1.buildPaginationModel(10, 5, true, 1, 1);
-        const expected = [
-            { type: 'PREV', num: 4 },
-            { type: 'NUM', num: 1 },
-            { type: 'BREAK' },
-            { type: 'NUM', num: 4 },
-            { type: 'NUM', num: 5, selected: true },
-            { type: 'NUM', num: 6 },
-            { type: 'BREAK' },
-            { type: 'NUM', num: 10 },
-            { type: 'NEXT', num: 6 }
-        ];
-        expect(model).toMatchObject(expected);
-    });
-    it('adds items to the right if it hits bounds to the left', () => {
-        const model = model_1.buildPaginationModel(15, 2, true, 1, 1);
-        const expected = [
-            { type: 'PREV', num: 1 },
-            { type: 'NUM', num: 1 },
-            { type: 'NUM', num: 2, selected: true },
-            { type: 'NUM', num: 3 },
-            // normally with a surround of 1, only 1 and 3 would be shown
-            // however, since 1 was already shown, we extend to 4
-            { type: 'NUM', num: 4 },
-            { type: 'BREAK' }
-        ];
-        expect(first(model, 6)).toMatchObject(expected);
-    });
-    it('adds items to the left if it hits bounds to the right', () => {
-        const model = model_1.buildPaginationModel(15, 14, true, 1, 1);
-        const expected = [
-            // normally with a surround of 1, only 13 and 15 would be shown
-            // however, since 15 was already shown, we extend to 12
-            { type: 'BREAK' },
-            { type: 'NUM', num: 12 },
-            { type: 'NUM', num: 13 },
-            { type: 'NUM', num: 14, selected: true },
-            { type: 'NUM', num: 15 },
-            { type: 'NEXT', num: 15 }
-        ];
-        expect(last(model, 6)).toMatchObject(expected);
-    });
-    it('correctly creates breaks next to the next/prev links when margin is 0', () => {
-        const model = model_1.buildPaginationModel(10, 5, true, 0, 1);
-        const expected = [
-            { type: 'PREV' },
-            { type: 'BREAK', num: 1 },
-            { type: 'NUM', num: 4 },
-            { type: 'NUM', num: 5, selected: true },
-            { type: 'NUM', num: 6 },
-            { type: 'BREAK', num: 10 },
-            { type: 'NEXT' }
-        ];
-        expect(model).toMatchObject(expected);
-    });
-});

package/lib/__tests__/PointerBox.test.jsx

@@ -1,33 +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('PointerBox', () => {
-    testing_1.behavesAsComponent({ Component: __1.PointerBox });
-    testing_1.checkExports('PointerBox', {
-        default: __1.PointerBox
-    });
-    it('renders a <Caret> in <BorderBox> with relative positioning', () => {
-        expect(testing_1.render(<__1.PointerBox />)).toMatchSnapshot();
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<__1.PointerBox />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
-        expect(testing_1.render(<__1.PointerBox borderColor="danger.emphasis"/>)).toMatchSnapshot();
-    });
-    it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-        expect(testing_1.render(<__1.PointerBox bg="danger.subtle"/>)).toMatchSnapshot();
-    });
-});

package/lib/__tests__/Popover.test.jsx

@@ -1,58 +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 Popover_1 = __importDefault(require("../Popover"));
-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 comp = (<Popover_1.default caret="top" open>
-    <Popover_1.default.Content>Hello!</Popover_1.default.Content>
-  </Popover_1.default>);
-describe('Popover', () => {
-    testing_1.behavesAsComponent({ Component: Popover_1.default, toRender: () => comp });
-    testing_1.checkExports('Popover', {
-        default: Popover_1.default
-    });
-    describe('Popover.Content', () => {
-        testing_1.behavesAsComponent({ Component: Popover_1.default.Content, toRender: () => comp });
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_2.render(<Popover_1.default caret="top" open>
-        <Popover_1.default.Content>Hello!</Popover_1.default.Content>
-      </Popover_1.default>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    const CARET_POSITIONS = [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'bottom-left',
-        'bottom-right',
-        'top-left',
-        'top-right',
-        'left-bottom',
-        'left-top',
-        'right-bottom',
-        'right-top'
-    ];
-    for (const pos of CARET_POSITIONS) {
-        it(`renders correctly for a caret position of ${pos}`, () => {
-            const element = (<Popover_1.default caret={pos} open>
-          <Popover_1.default.Content>Hello!</Popover_1.default.Content>
-        </Popover_1.default>);
-            expect(testing_1.render(element)).toMatchSnapshot();
-        });
-    }
-    it('renders both elements as a <div>', () => {
-        expect(testing_1.render(<Popover_1.default />).type).toEqual('div');
-        expect(testing_1.render(<Popover_1.default.Content />).type).toEqual('div');
-    });
-});

package/lib/__tests__/Portal.test.jsx

@@ -1,102 +0,0 @@
-"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 });
-const index_1 = __importStar(require("../Portal/index"));
-const react_1 = require("@testing-library/react");
-const react_2 = __importDefault(require("react"));
-const BaseStyles_1 = __importDefault(require("../BaseStyles"));
-describe('Portal', () => {
-    it('renders a default portal into document.body (no BaseStyles present)', () => {
-        const { baseElement } = react_1.render(<index_1.default>123test123</index_1.default>);
-        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
-        expect(generatedRoot).toBeInstanceOf(HTMLElement);
-        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
-        baseElement.innerHTML = '';
-    });
-    it('renders a default portal into nearest BaseStyles element', () => {
-        const toRender = (<div id="renderedRoot">
-        <BaseStyles_1.default>
-          <div id="baseStylesRoot">
-            <index_1.default>123test123</index_1.default>
-          </div>
-        </BaseStyles_1.default>
-      </div>);
-        const { baseElement } = react_1.render(toRender);
-        const baseStylesRoot = baseElement.querySelector('#baseStylesRoot');
-        const baseStylesElement = baseStylesRoot?.parentElement;
-        const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__');
-        expect(baseStylesRoot).toBeInstanceOf(HTMLElement);
-        expect(baseStylesElement).toBeInstanceOf(HTMLElement);
-        expect(generatedRoot).toBeInstanceOf(HTMLElement);
-        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
-        baseElement.innerHTML = '';
-    });
-    it('renders into the custom portal root (default root name - declarative)', () => {
-        const toRender = (<div id="renderedRoot">
-        <div id="__primerPortalRoot__"></div>
-        <index_1.default>123test123</index_1.default>
-      </div>);
-        const { baseElement } = react_1.render(toRender);
-        const renderedRoot = baseElement.querySelector('#renderedRoot');
-        const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeInstanceOf(HTMLElement);
-        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
-        baseElement.innerHTML = '';
-    });
-    it('renders into the custom portal root (default root name - imperative)', () => {
-        const portalRootJSX = <div id="myPortalRoot"></div>;
-        let { baseElement } = react_1.render(portalRootJSX);
-        const portalRoot = baseElement.querySelector('#myPortalRoot');
-        expect(portalRoot).toBeInstanceOf(HTMLElement);
-        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot'));
-        const toRender = <index_1.default>123test123</index_1.default>;
-        ({ baseElement } = react_1.render(toRender));
-        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
-        baseElement.innerHTML = '';
-    });
-    it('renders into multiple custom portal roots (named)', () => {
-        const portalRootJSX = (<main>
-        <div id="myPortalRoot1"></div>
-        <div id="myPortalRoot2"></div>
-      </main>);
-        let { baseElement } = react_1.render(portalRootJSX);
-        const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1');
-        const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2');
-        expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement);
-        expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement);
-        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot1'), 'fancyPortal1');
-        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot2'), 'fancyPortal2');
-        const toRender = (<>
-        <index_1.default>123test123</index_1.default>
-        <index_1.default containerName="fancyPortal1">456test456</index_1.default>
-        <index_1.default containerName="fancyPortal2">789test789</index_1.default>
-      </>);
-        ({ baseElement } = react_1.render(toRender));
-        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
-        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
-        expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456');
-        expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789');
-        baseElement.innerHTML = '';
-    });
-});

package/lib/__tests__/Position.test.jsx

@@ -1,96 +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('position components', () => {
-    describe('Absolute', () => {
-        testing_1.behavesAsComponent({ Component: __1.Absolute });
-        testing_1.checkExports('Position', {
-            default: __1.Position,
-            Absolute: __1.Absolute,
-            Fixed: __1.Fixed,
-            Relative: __1.Relative,
-            Sticky: __1.Sticky
-        });
-        it('should have no axe violations', async () => {
-            const { container } = react_2.render(<__1.Absolute />);
-            const results = await jest_axe_1.axe(container);
-            expect(results).toHaveNoViolations();
-            react_2.cleanup();
-        });
-        it('sets position: absolute', () => {
-            expect(testing_1.render(<__1.Absolute />)).toHaveStyleRule('position', 'absolute');
-        });
-        it('can render other components with the as prop', () => {
-            const result = testing_1.render(<__1.Absolute as={__1.Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}/>);
-            expect(result).toHaveStyleRule('position', 'absolute');
-            expect(result).toHaveStyleRule('border-width', '1px');
-            expect(result).toHaveStyleRule('border-style', 'solid');
-        });
-    });
-    describe('Fixed', () => {
-        testing_1.behavesAsComponent({ Component: __1.Fixed });
-        it('respects the "as" prop', () => {
-            expect(testing_1.render(<__1.Fixed as="span"/>).type).toEqual('span');
-        });
-        it('should have no axe violations', async () => {
-            const { container } = react_2.render(<__1.Fixed />);
-            const results = await jest_axe_1.axe(container);
-            expect(results).toHaveNoViolations();
-            react_2.cleanup();
-        });
-        it('sets position: fixed', () => {
-            expect(testing_1.render(<__1.Fixed />)).toHaveStyleRule('position', 'fixed');
-        });
-        it('can render other components with the as prop', () => {
-            const result = testing_1.render(<__1.Fixed as={__1.Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}/>);
-            expect(result).toHaveStyleRule('position', 'fixed');
-            expect(result).toHaveStyleRule('border-width', '1px');
-            expect(result).toHaveStyleRule('border-style', 'solid');
-        });
-    });
-    describe('Relative', () => {
-        testing_1.behavesAsComponent({ Component: __1.Relative });
-        it('should have no axe violations', async () => {
-            const { container } = react_2.render(<__1.Relative />);
-            const results = await jest_axe_1.axe(container);
-            expect(results).toHaveNoViolations();
-            react_2.cleanup();
-        });
-        it('sets position: relative', () => {
-            expect(testing_1.render(<__1.Relative />)).toHaveStyleRule('position', 'relative');
-        });
-        it('can render other components with the as prop', () => {
-            const result = testing_1.render(<__1.Relative as={__1.Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}/>);
-            expect(result).toHaveStyleRule('position', 'relative');
-            expect(result).toHaveStyleRule('border-width', '1px');
-            expect(result).toHaveStyleRule('border-style', 'solid');
-        });
-    });
-    describe('Sticky', () => {
-        testing_1.behavesAsComponent({ Component: __1.Sticky });
-        it('should have no axe violations', async () => {
-            const { container } = react_2.render(<__1.Sticky />);
-            const results = await jest_axe_1.axe(container);
-            expect(results).toHaveNoViolations();
-            react_2.cleanup();
-        });
-        it('sets position: sticky', () => {
-            expect(testing_1.render(<__1.Sticky />)).toHaveStyleRule('position', 'sticky');
-        });
-        it('can render other components with the as prop', () => {
-            const result = testing_1.render(<__1.Sticky as={__1.Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}/>);
-            expect(result).toHaveStyleRule('position', 'sticky');
-            expect(result).toHaveStyleRule('border-width', '1px');
-            expect(result).toHaveStyleRule('border-style', 'solid');
-        });
-    });
-});