@patternfly/react-core 4.202.28 → 4.202.31

package/src/helpers/Popper/Popper.tsx

@@ -149,13 +149,11 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const [popperElement, setPopperElement] = React.useState(null);
   const [ready, setReady] = React.useState(false);
   const refOrTrigger = refElement || triggerElement;
-  const onDocumentClickCallback = React.useCallback(event => onDocumentClick(event, refOrTrigger, popperElement), [
-    isVisible,
-    triggerElement,
-    refElement,
-    popperElement,
-    onDocumentClick
-  ]);
+  const onDocumentClickCallback = React.useCallback(
+    (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement),
+    [isVisible, triggerElement, refElement, popperElement, onDocumentClick]
+  );
+
   React.useEffect(() => {
     setReady(true);
   }, []);

package/src/helpers/__tests__/util.test.ts

@@ -0,0 +1,113 @@
+import {
+  capitalize,
+  getUniqueId,
+  debounce,
+  isElementInView,
+  sideElementIsOutOfView,
+  fillTemplate,
+  pluralize,
+  formatBreakpointMods
+} from '../util';
+import { SIDE } from '../constants';
+import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
+
+const createMockHtmlElement = bounds =>
+  ({
+    getBoundingClientRect: () => bounds
+  } as HTMLElement);
+
+test('capitalize', () => {
+  expect(capitalize('foo')).toBe('Foo');
+});
+
+test('getUniqueId', () => {
+  expect(getUniqueId()).not.toBe(getUniqueId());
+});
+
+test('getUniqueId prefixed', () => {
+  expect(getUniqueId().substring(0, 3)).toBe('pf-');
+  expect(getUniqueId('pf-switch').substring(0, 10)).toBe('pf-switch-');
+});
+
+test('debounce', () => {
+  jest.useFakeTimers();
+  const callback = jest.fn();
+  const debouncedFunction = debounce(callback, 50);
+
+  debouncedFunction();
+  // At this point in time, the callback should not have been called yet
+  expect(callback).toHaveBeenCalledTimes(0);
+
+  for (let i = 0; i < 10; i++) {
+    jest.advanceTimersByTime(50);
+    debouncedFunction();
+  }
+
+  expect(callback).toBeCalledTimes(10);
+});
+
+test('isElementInView should be true when partial out of view and with partial true', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 10, right: 210 });
+  expect(isElementInView(container, element, true)).toBe(true);
+});
+
+test('isElementInView should be false when partial out of view and with partial false ', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 10, right: 210 });
+  expect(isElementInView(container, element, false)).toBe(false);
+});
+
+test('isElementInView should be false completely out of view ', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 200, right: 300 });
+  expect(isElementInView(container, element, true)).toBe(false);
+});
+
+test('isElementInView should be false completely out of view when partial false ', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 200, right: 300 });
+  expect(isElementInView(container, element, false)).toBe(false);
+});
+
+test('sideElementIsOutOfView Returns left when off on left side', () => {
+  const container = createMockHtmlElement({ left: 20, right: 220 });
+  const element = createMockHtmlElement({ left: 10, right: 210 });
+  expect(sideElementIsOutOfView(container, element)).toBe(SIDE.LEFT);
+});
+
+test('sideElementIsOutOfView Returns right when off on right side', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 210, right: 410 });
+  expect(sideElementIsOutOfView(container, element)).toBe(SIDE.RIGHT);
+});
+
+test('sideElementIsOutOfView Returns NONE when in view', () => {
+  const container = createMockHtmlElement({ left: 0, right: 200 });
+  const element = createMockHtmlElement({ left: 10, right: 110 });
+  expect(sideElementIsOutOfView(container, element)).toBe(SIDE.NONE);
+});
+
+test('fillTemplate interpolates strings correctly', () => {
+  // eslint-disable-next-line no-template-curly-in-string
+  const templateString = 'My name is ${firstName} ${lastName}';
+  const expected = 'My name is Jon Dough';
+  const templatVars = {
+    firstName: 'Jon',
+    lastName: 'Dough'
+  };
+  const actual = fillTemplate(templateString, templatVars);
+  expect(actual).toEqual(expected);
+});
+
+test('text pluralize', () => {
+  expect(pluralize(1, 'dog')).toEqual('1 dog');
+  expect(pluralize(2, 'dog')).toEqual('2 dogs');
+  expect(pluralize(2, 'finch', 'finches')).toEqual('2 finches');
+});
+
+test('formatBreakpointMods', () => {
+  expect(formatBreakpointMods({ default: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none');
+  expect(formatBreakpointMods({ md: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none-on-md');
+  expect(formatBreakpointMods({ default: 'column', lg: 'row' }, styles)).toEqual('pf-m-column pf-m-row-on-lg');
+});

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -1,32 +1,32 @@
-import * as React from 'react';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Bullseye } from '../Bullseye';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<Bullseye />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('Bullseye', () => {
+  test('renders with PatternFly Core styles', () => {
+    const { asFragment } = render(<Bullseye />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<Bullseye className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<Bullseye className="extra-class" data-testid='test-id' />);
+    expect(screen.getByTestId('test-id')).toHaveClass('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'bullseye';
-  const view = shallow(<Bullseye data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('allows passing in a string as the component', () => {
+    const component = 'button';
 
-test('allows passing in a string as the component', () => {
-  const component = 'div';
-  const view = shallow(<Bullseye component={component} />);
-  expect(view.type()).toBe(component);
-});
+    render(<Bullseye component={component} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  test('allows passing in a React Component as the component', () => {
+    const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-test('allows passing in a React Component as the component', () => {
-  const Component: React.FunctionComponent = () => null;
-  const view = shallow(<Bullseye component={Component as unknown as (keyof JSX.IntrinsicElements)} />);
-  expect(view.type()).toBe(Component);
+    render(<Bullseye component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('Some text')).toBeInTheDocument();
+  });
 });

package/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap

@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-l-bullseye extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
+exports[`Bullseye renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
   <div
     class="pf-l-bullseye"
   />
-</div>
+</DocumentFragment>
 `;

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -1,110 +1,173 @@
 import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-
-test('Simple flex with single item', () => {
-  const view = render(
-    <Flex>
-      <FlexItem>Test</FlexItem>
-    </Flex>
-  );
-  expect(view.container).toMatchSnapshot();
-});
 
-test('Nested flex', () => {
-  const view = render(
-    <Flex>
+describe('Flex', () => {
+  test('Simple flex with single item', () => {
+    const { asFragment } = render(
       <Flex>
         <FlexItem>Test</FlexItem>
       </Flex>
-    </Flex>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = render(<Flex className="extra-class" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('Nested flex', () => {
+    const { asFragment } = render(
+      <Flex>
+        <Flex>
+          <FlexItem>Test</FlexItem>
+        </Flex>
+      </Flex>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-const flexModifiers = {
-  spacer: ['spacerNone', 'spacerXs', 'spacerSm', 'spacerMd', 'spacerLg', 'spacerXl', 'spacer2xl', 'spacer3xl', 'spacer4xl'],
-  spaceItems: ['spaceItemsNone', 'spaceItemsXs', 'spaceItemsSm', 'spaceItemsMd', 'spaceItemsLg', 'spaceItemsXl', 'spaceItems2xl', 'spaceItems3xl', 'spaceItems4xl'],
-  grow: ['grow'],
-  shrink: ['shrink'],
-  flex: ['flexDefault', 'flexNone', 'flex_1', 'flex_2', 'flex_3', 'flex_4'],
-  direction: ['column', 'columnReverse', 'row', 'rowReverse'],
-  alignItems: ['alignItemsFlexStart', 'alignItemsFlexEnd', 'alignItemsCenter', 'alignItemsStretch', 'alignItemsBaseline'],
-  alignContent: ['alignContentFlexStart', 'alignContentFlexEnd', 'alignContentCenter', 'alignContentStretch', 'alignContentSpaceBetween', 'alignContentSpaceAround'],
-  alignSelf: ['alignSelfFlexStart', 'alignSelfFlexEnd', 'alignSelfCenter', 'alignSelfStretch', 'alignSelfBaseline'],
-  align: ['alignLeft', 'alignRight'],
-  justifyContent: ['justifyContentFlexStart', 'justifyContentFlexEnd', 'justifyContentCenter', 'justifyContentSpaceBetween', 'justifyContentSpaceAround', 'justifyContentSpaceEvenly'],
-  display: ['inlineFlex'],
-  fullWidth: ['fullWidth'],
-  flexWrap: ['wrap', 'wrapReverse', 'nowrap']
-};
+  test('className is added to the root element', () => {
+    render(<Flex className="extra-class" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id')).toHaveClass('extra-class');
+  });
 
-describe('flex modifiers', () => {
-  Object.entries(flexModifiers)
-    .map(([mod, values]) => values.map(value => ({
-      [mod]: {
-        default: value,
-        sm: value,
-        lg: value,
-        xl: value,
-        '2xl': value
-      }
-    })))
-    .reduce((acc, val) => acc.concat(val), [])
-    .forEach(props =>
-      test(`${JSON.stringify(props)} add valid classes to Flex`, () => {
-        const view = mount(<Flex {...props}>{JSON.stringify(props)}</Flex>);
-        const className = view.find('div').prop('className').replace('pf-l-flex', '').trim();
-        expect(className).not.toBe("''");
-        expect(className).not.toBe("");
-      })
-    );
-});
+  const flexModifiers = {
+    spacer: [
+      'spacerNone',
+      'spacerXs',
+      'spacerSm',
+      'spacerMd',
+      'spacerLg',
+      'spacerXl',
+      'spacer2xl',
+      'spacer3xl',
+      'spacer4xl'
+    ],
+    spaceItems: [
+      'spaceItemsNone',
+      'spaceItemsXs',
+      'spaceItemsSm',
+      'spaceItemsMd',
+      'spaceItemsLg',
+      'spaceItemsXl',
+      'spaceItems2xl',
+      'spaceItems3xl',
+      'spaceItems4xl'
+    ],
+    grow: ['grow'],
+    shrink: ['shrink'],
+    flex: ['flexDefault', 'flexNone', 'flex_1', 'flex_2', 'flex_3', 'flex_4'],
+    direction: ['column', 'columnReverse', 'row', 'rowReverse'],
+    alignItems: [
+      'alignItemsFlexStart',
+      'alignItemsFlexEnd',
+      'alignItemsCenter',
+      'alignItemsStretch',
+      'alignItemsBaseline'
+    ],
+    alignContent: [
+      'alignContentFlexStart',
+      'alignContentFlexEnd',
+      'alignContentCenter',
+      'alignContentStretch',
+      'alignContentSpaceBetween',
+      'alignContentSpaceAround'
+    ],
+    alignSelf: ['alignSelfFlexStart', 'alignSelfFlexEnd', 'alignSelfCenter', 'alignSelfStretch', 'alignSelfBaseline'],
+    align: ['alignLeft', 'alignRight'],
+    justifyContent: [
+      'justifyContentFlexStart',
+      'justifyContentFlexEnd',
+      'justifyContentCenter',
+      'justifyContentSpaceBetween',
+      'justifyContentSpaceAround',
+      'justifyContentSpaceEvenly'
+    ],
+    display: ['inlineFlex'],
+    fullWidth: ['fullWidth'],
+    flexWrap: ['wrap', 'wrapReverse', 'nowrap']
+  };
 
-const flexItemModifiers = {
-  spacer: flexModifiers.spacer,
-  grow: flexModifiers.grow,
-  shrink: flexModifiers.shrink,
-  flex: flexModifiers.flex,
-  alignSelf: flexModifiers.alignSelf,
-  align: flexModifiers.align,
-  fullWidth: flexModifiers.fullWidth
-};
+  describe('flex modifiers', () => {
+    Object.entries(flexModifiers)
+      .map(([mod, values]) =>
+        values.map(value => ({
+          [mod]: {
+            default: value,
+            sm: value,
+            lg: value,
+            xl: value,
+            '2xl': value
+          }
+        }))
+      )
+      .reduce((acc, val) => acc.concat(val), [])
+      .forEach(props =>
+        test(`${JSON.stringify(props)} add valid classes to Flex`, () => {
+          render(
+            <Flex {...props} data-testid="test-id">
+              {JSON.stringify(props)}
+            </Flex>
+          );
 
-describe('flexItem modifiers', () => {
-  Object.entries(flexItemModifiers)
-    .map(([mod, values]) => values.map(value => ({
-      [mod]: {
-        default: value,
-        sm: value,
-        lg: value,
-        xl: value,
-        '2xl': value
-      }
-    })))
-    .reduce((acc, val) => acc.concat(val), [])
-    .forEach(props =>
-      test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => {
-        const view = mount(<FlexItem {...props}>{JSON.stringify(props)}</FlexItem>);
-        const className = view.find('div').prop('className').trim();
-        expect(className).not.toBe("''");
-        expect(className).not.toBe("");
-      })
-    );
-});
+          const className = screen
+            .getByTestId('test-id')
+            .className.replace('pf-l-flex', '')
+            .trim();
+
+          expect(className).not.toBe("''");
+          expect(className).not.toBe('');
+        })
+      );
+  });
+
+  const flexItemModifiers = {
+    spacer: flexModifiers.spacer,
+    grow: flexModifiers.grow,
+    shrink: flexModifiers.shrink,
+    flex: flexModifiers.flex,
+    alignSelf: flexModifiers.alignSelf,
+    align: flexModifiers.align,
+    fullWidth: flexModifiers.fullWidth
+  };
 
-test('alternative component', () => {
-  const view = render(
-    <Flex component='ul'>
-      <FlexItem component='li'>Test</FlexItem>
-    </Flex>
-  );
-  expect(view.container).toMatchSnapshot();
+  describe('flexItem modifiers', () => {
+    Object.entries(flexItemModifiers)
+      .map(([mod, values]) =>
+        values.map(value => ({
+          [mod]: {
+            default: value,
+            sm: value,
+            lg: value,
+            xl: value,
+            '2xl': value
+          }
+        }))
+      )
+      .reduce((acc, val) => acc.concat(val), [])
+      .forEach(props =>
+        test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => {
+          render(
+            <FlexItem {...props} data-testid="test-id">
+              {JSON.stringify(props)}
+            </FlexItem>
+          );
+
+          const className = screen.getByTestId('test-id').className.trim();
+
+          expect(className).not.toBe("''");
+          expect(className).not.toBe('');
+        })
+      );
+  });
+
+  test('alternative component', () => {
+    const { asFragment } = render(
+      <Flex component="ul">
+        <FlexItem component="li">Test</FlexItem>
+      </Flex>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Nested flex 1`] = `
-<div>
+exports[`Flex Nested flex 1`] = `
+<DocumentFragment>
   <div
     class="pf-l-flex"
   >
@@ -15,11 +15,11 @@ exports[`Nested flex 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Simple flex with single item 1`] = `
-<div>
+exports[`Flex Simple flex with single item 1`] = `
+<DocumentFragment>
   <div
     class="pf-l-flex"
   >
@@ -29,11 +29,11 @@ exports[`Simple flex with single item 1`] = `
       Test
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`alternative component 1`] = `
-<div>
+exports[`Flex alternative component 1`] = `
+<DocumentFragment>
   <ul
     class="pf-l-flex"
   >
@@ -43,13 +43,5 @@ exports[`alternative component 1`] = `
       Test
     </li>
   </ul>
-</div>
-`;
-
-exports[`className is added to the root element 1`] = `
-<div>
-  <div
-    class="pf-l-flex extra-class"
-  />
-</div>
+</DocumentFragment>
 `;

package/src/components/Page/__tests__/Generated/Page.test.tsx

@@ -1,28 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Page } from '../../Page';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('Page should match snapshot (auto-generated)', () => {
-  const view = render(
-    <Page
-      children={<>ReactNode</>}
-      className={"''"}
-      header={null}
-      sidebar={null}
-      skipToContent={null}
-      role={'string'}
-      mainContainerId={'null'}
-      isManagedSidebar={false}
-      defaultManagedSidebarIsOpen={true}
-      onPageResize={(): void => null}
-      breadcrumb={null}
-      mainAriaLabel={'string'}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Page should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default ''"
-  >
-    <main
-      aria-label="string"
-      class="pf-c-page__main"
-      id="null"
-      role="string"
-      tabindex="-1"
-    >
-      ReactNode
-    </main>
-  </div>
-</div>
-`;

package/src/components/Pagination/__tests__/Generated/Pagination.test.tsx

@@ -1,58 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Pagination } from '../../Pagination';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('Pagination should match snapshot (auto-generated)', () => {
-  const view = render(
-    <Pagination
-      children={<>ReactNode</>}
-      className={"''"}
-      itemCount={42}
-      variant={'top'}
-      isDisabled={false}
-      isCompact={false}
-      perPage={42}
-      perPageOptions={[
-        {
-          title: '10',
-          value: 10
-        },
-        {
-          title: '20',
-          value: 20
-        },
-        {
-          title: '50',
-          value: 50
-        },
-        {
-          title: '100',
-          value: 100
-        }
-      ]}
-      defaultToFullPage={false}
-      firstPage={1}
-      page={0}
-      offset={0}
-      itemsStart={null}
-      itemsEnd={null}
-      widgetId={"'pagination-options-menu'"}
-      dropDirection={'up'}
-      titles={undefined}
-      toggleTemplate={'string'}
-      onSetPage={() => undefined}
-      onFirstClick={() => undefined}
-      onPreviousClick={() => undefined}
-      onNextClick={() => undefined}
-      onLastClick={() => undefined}
-      onPageInput={() => undefined}
-      onPerPageSelect={() => undefined}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});