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

package/lib/__tests__/ThemeProvider.test.jsx

@@ -0,0 +1,314 @@
+"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 = require("@testing-library/react");
+require("jest-styled-components");
+const react_2 = __importDefault(require("react"));
+const __1 = require("..");
+// window.matchMedia() is not implmented by JSDOM so we have to create a mock:
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn()
+    }))
+});
+const exampleTheme = {
+    colors: {
+        text: '#f00'
+    },
+    colorSchemes: {
+        light: {
+            colors: {
+                text: 'black'
+            }
+        },
+        dark: {
+            colors: {
+                text: 'white'
+            }
+        },
+        dark_dimmed: {
+            colors: {
+                text: 'gray'
+            }
+        }
+    }
+};
+it('respects theme prop', () => {
+    const theme = {
+        colors: {
+            text: '#f00'
+        },
+        space: ['0', '0.25rem']
+    };
+    react_1.render(<__1.ThemeProvider theme={theme}>
+      <__1.Text color="text" mb={1}>
+        Hello
+      </__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', '#f00');
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('margin-bottom', '0.25rem');
+});
+it('has default theme', () => {
+    react_1.render(<__1.ThemeProvider>
+      <__1.Text color="fg.default" mb={1}>
+        Hello
+      </__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toMatchSnapshot();
+});
+it('inherits theme from parent', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+      <__1.ThemeProvider>
+        <__1.Text color="text">Hello</__1.Text>
+      </__1.ThemeProvider>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to light color scheme', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to dark color scheme in night mode', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} dayScheme="foo">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('respects nightScheme prop', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+});
+it('respects dayScheme prop', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('works in auto mode', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="auto">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('works in auto mode (dark)', () => {
+    const matchMediaSpy = jest.spyOn(window, 'matchMedia').mockImplementation(query => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn()
+    }));
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="auto">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    matchMediaSpy.mockRestore();
+});
+it('updates when colorMode prop changes', async () => {
+    function App() {
+        const [colorMode, setColorMode] = react_2.default.useState('day');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+        <__1.Text color="text">{colorMode}</__1.Text>
+        <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in day mode (light scheme)
+    expect(react_1.screen.getByText('day')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(react_1.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('updates when dayScheme prop changes', async () => {
+    function App() {
+        const [dayScheme, setDayScheme] = react_2.default.useState('light');
+        return (<__1.ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
+        <__1.Text color="text">{dayScheme}</__1.Text>
+        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in day mode (light scheme)
+    expect(react_1.screen.getByText('light')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle sets the day scheme to dark_dimmed
+    expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('updates when nightScheme prop changes', async () => {
+    function App() {
+        const [nightScheme, setNightScheme] = react_2.default.useState('dark');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
+        <__1.Text color="text">{nightScheme}</__1.Text>
+        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in night mode (dark scheme)
+    expect(react_1.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle button sets the night scheme to dark_dimmed
+    expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits colorMode from parent', async () => {
+    function App() {
+        const [colorMode, setcolorMode] = react_2.default.useState('day');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+        <button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+        <__1.ThemeProvider>
+          <__1.Text color="text">{colorMode}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('day')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('inherits dayScheme from parent', async () => {
+    function App() {
+        const [dayScheme, setDayScheme] = react_2.default.useState('light');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
+        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+        <__1.ThemeProvider colorMode="day">
+          <__1.Text color="text">{dayScheme}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('light')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits nightScheme from parent', async () => {
+    function App() {
+        const [nightScheme, setNightScheme] = react_2.default.useState('dark');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+        <__1.ThemeProvider colorMode="night">
+          <__1.Text color="text">{nightScheme}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+describe('setColorMode', () => {
+    it('changes the color mode', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        // starts in day mode (light scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button enables night mode (dark scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    });
+});
+describe('setDayScheme', () => {
+    it('changes the day scheme', () => {
+        function ToggleDayScheme() {
+            const { dayScheme, setDayScheme } = __1.useTheme();
+            return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleDayScheme />
+      </__1.ThemeProvider>);
+        // starts in day mode (light scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button sets day scheme to dark
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    });
+});
+describe('setNightScheme', () => {
+    it('changes the night scheme', () => {
+        function ToggleNightScheme() {
+            const { nightScheme, setNightScheme } = __1.useTheme();
+            return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleNightScheme />
+      </__1.ThemeProvider>);
+        // starts in night mode (dark scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button sets night scheme to dark_dimmed
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+    });
+});
+describe('useColorSchemeVar', () => {
+    it('updates value when scheme changes', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        function CustomBg() {
+            const customBg = __1.useColorSchemeVar({
+                light: 'red',
+                dark: 'blue',
+                dark_dimmed: 'green'
+            }, 'inherit');
+            return <__1.Text bg={customBg}>Hello</__1.Text>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+        <CustomBg />
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+        react_1.screen.getByRole('button').click();
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'green');
+    });
+    it('supports fallback value', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        function CustomBg() {
+            const customBg = __1.useColorSchemeVar({ dark: 'blue' }, 'red');
+            return <__1.Text bg={customBg}>Hello</__1.Text>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+        <CustomBg />
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+        react_1.screen.getByRole('button').click();
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
+    });
+});

package/lib/__tests__/Timeline.test.jsx

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("babel-polyfill");
+const react_1 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+const testing_1 = require("../utils/testing");
+const react_2 = __importDefault(require("react"));
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Timeline', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline });
+    testing_1.checkExports('Timeline', {
+        default: __1.Timeline
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('renders with clipSidebar prop', () => {
+        expect(testing_1.render(<__1.Timeline clipSidebar/>)).toMatchSnapshot();
+    });
+});
+describe('Timeline.Item', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline.Item });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline.Item />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('renders with condensed prop', () => {
+        expect(testing_1.render(<__1.Timeline.Item condensed/>)).toMatchSnapshot();
+    });
+    it('adds the Timeline-Item class', () => {
+        expect(testing_1.rendersClass(<__1.Timeline.Item />, 'Timeline-Item')).toEqual(true);
+    });
+});
+describe('Timeline.Badge', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline.Badge, options: { skipAs: true } });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline.Badge />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+});

package/lib/__tests__/Token.test.jsx

@@ -0,0 +1,93 @@
+"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

@@ -0,0 +1,46 @@
+"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

@@ -0,0 +1,41 @@
+"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

@@ -0,0 +1,53 @@
+"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

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