@patternfly/react-core 5.0.0-alpha.4 → 5.0.0-alpha.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.0.0-alpha.5...@patternfly/react-core@5.0.0-alpha.6) (2023-02-02)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+# [5.0.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.0.0-alpha.4...@patternfly/react-core@5.0.0-alpha.5) (2023-02-02)
+
+**Note:** Version bump only for package @patternfly/react-core
+
 # 5.0.0-alpha.4 (2023-01-18)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -50,7 +50,6 @@
     "@patternfly/react-tokens": "^5.0.0-alpha.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "^14.2.3",
-    "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
@@ -71,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "e10574726614bbe29582d3212d04f2d3d28be6ca"
+  "gitHead": "7597ae3651b5d51db280629c663950dd7fa40feb"
 }

package/src/components/Menu/__mocks__/Menu.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuProps } from '../Menu';
+
+export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => (
+  <>
+    <div className={className} data-testid="menu-mock" {...props}></div>
+    <div onClick={onSelect}>{'Mock item'}</div>
+    <p>{`isPlain: ${isPlain}`}</p>
+    <p>{`isScrollable: ${isScrollable}`}</p>
+    <p>{`minWidth: ${style?.['--pf-c-menu--MinWidth']}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuContent.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const MenuContent = ({ children }) => <div>{children}</div>;

package/src/components/Menu/__mocks__/MenuGroup.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuGroupProps } from '../MenuGroup';
+
+export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => (
+  <>
+    <div className={className} data-testid="menu-group-mock">
+      {children}
+    </div>
+    <p>{`label: ${label}`}</p>
+    <p>{`labelHeadingLevel: ${labelHeadingLevel}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuItem.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuItemProps } from '../MenuItem';
+
+export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => (
+  <>
+    <div className={className} data-testid="menu-item-mock">
+      {children}
+    </div>
+    <p>{`description: ${description}`}</p>
+    <p>{`itemId: ${itemId}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuListProps } from '../MenuList';
+
+export const MenuList = ({ className, children }: MenuListProps) => (
+  <>
+    <div className={className} data-testid="menu-list-mock">
+      {children}
+    </div>
+  </>
+);

package/src/components/Menu/__mocks__/index.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './MenuContent';
+export * from './MenuGroup';
+export * from './MenuItem';
+export * from './MenuList';

package/src/helpers/Popper/__mocks__/Popper.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PopperProps } from '../Popper';
+
+export const Popper = ({ popper, zIndex, isVisible, trigger }: PopperProps) => (
+  <>
+    <div>{popper}</div>
+    <p>{`zIndex: ${zIndex}`}</p>
+    <p>{`isOpen: ${isVisible}`}</p>
+    <div>{trigger}</div>
+  </>
+);

package/src/helpers/Popper/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from './Popper';

package/src/next/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { Dropdown } from '../../Dropdown';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../../../../components/Menu');
+
+jest.mock('../../../../helpers/Popper/Popper');
+
+const toggle = (ref: React.RefObject<any>) => <button ref={ref}>Dropdown</button>;
+
+const dropdownChildren = <div>Dropdown children</div>;
+
+test('renders dropdown', () => {
+  render(
+    <div data-testid="dropdown">
+      <Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('Dropdown children')).toBeVisible();
+});
+
+test('renders passed toggle element', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).not.toHaveClass();
+});
+
+test('passes custom class name', () => {
+  render(
+    <Dropdown className="custom-class" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).toHaveClass('custom-class');
+});
+
+test('does not pass isPlain to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: undefined')).toBeVisible();
+});
+
+test('passes isPlain to Menu', () => {
+  render(
+    <Dropdown isPlain isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: true')).toBeVisible();
+});
+
+test('does not pass isScrollable to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: undefined')).toBeVisible();
+});
+
+test('passes isScrollable to Menu', () => {
+  render(
+    <Dropdown isScrollable isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: true')).toBeVisible();
+});
+
+test('does not pass minWidth to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('minWidth: undefined')).toBeVisible();
+});
+
+test('passes minWidth to Menu', () => {
+  render(
+    <Dropdown minWidth="100px" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('minWidth: 100px')).toBeVisible();
+});
+
+test('passes default zIndex to popper', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('zIndex: 9999')).toBeVisible();
+});
+
+test('passes zIndex to popper', () => {
+  render(
+    <Dropdown zIndex={100} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('zIndex: 100')).toBeVisible();
+});
+
+test('does not pass isOpen to popper by default', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+});
+
+test('passes isOpen to popper', () => {
+  render(
+    <Dropdown isOpen toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isOpen: true')).toBeVisible();
+});
+
+/* no default tests for callback props
+since there is no way to test that the 
+function doesn`t get passed */
+
+test('passes onSelect callback', async () => {
+  const user = userEvent.setup();
+
+  const onSelect = jest.fn();
+  render(
+    <Dropdown onSelect={onSelect} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const trigger = await screen.findByText('Mock item');
+  await user.click(trigger);
+
+  expect(onSelect).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user clicks outside of dropdown', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.click(document.body);
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses tab key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Tab}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses esc key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Escape}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('match snapshot', () => {
+  const { asFragment } = render(
+    <Dropdown
+      ouiaId={'dropdown'}
+      isOpen
+      isScrollable
+      isPlain
+      className={'customClass'}
+      toggle={toggleRef => toggle(toggleRef)}
+    >
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx

@@ -0,0 +1,69 @@
+import { DropdownGroup } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownGroupChildren = <div>Dropdown Group children</div>;
+
+test('renders dropdown group', () => {
+  render(
+    <div data-testid="dropdown-group">
+      <DropdownGroup>{dropdownGroupChildren}</DropdownGroup>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('Dropdown Group children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuGroup', () => {
+  render(<DropdownGroup className="custom-class">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class');
+});
+
+test('passes no label by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: undefined')).toBeVisible();
+});
+
+test('passes custom label to MenuGroup', () => {
+  render(<DropdownGroup label="Test label">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: Test label')).toBeVisible();
+});
+
+test('passes h1 as labelHeadingLevel to MenuGroup by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible();
+});
+
+test('passes custom labelHeadingLevel to MenuGroup', () => {
+  render(<DropdownGroup labelHeadingLevel="h2">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible();
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(
+    <DropdownGroup className="custom-class" label="Test label" labelHeadingLevel="h2">
+      {dropdownGroupChildren}
+    </DropdownGroup>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx

@@ -0,0 +1,73 @@
+import { DropdownItem } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownItemChildren = <div>Dropdown Item children</div>;
+
+test('renders dropdown item', () => {
+  render(
+    <div data-testid="dropdown-item">
+      <DropdownItem>{dropdownItemChildren}</DropdownItem>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-item').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('Dropdown Item children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByTestId('menu-item-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuItem', () => {
+  render(<DropdownItem className="custom-class">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByTestId('menu-item-mock')).toHaveClass('custom-class');
+});
+
+test('passes no description by default', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('description: undefined')).toBeVisible();
+});
+
+test('passes custom description to MenuItem', () => {
+  render(<DropdownItem description="Test description">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('description: Test description')).toBeVisible();
+});
+
+test('passes no itemId by default', () => {
+  render(<DropdownItem description="Test description">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('itemId: undefined'));
+});
+
+test('passes itemId to MenuItem', () => {
+  render(
+    <DropdownItem itemId="dropdown item" description="Test description">
+      {dropdownItemChildren}
+    </DropdownItem>
+  );
+
+  expect(screen.getByText('itemId: dropdown item'));
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(
+    <DropdownItem ouiaId="dropdown item" className="custom-class" description="Test description">
+      {dropdownItemChildren}
+    </DropdownItem>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/DropdownList.test.tsx

@@ -0,0 +1,41 @@
+import { DropdownList } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownListChildren = <div>Dropdown List children</div>;
+
+test('renders dropdown list', () => {
+  render(
+    <div data-testid="dropdown-list">
+      <DropdownList>{dropdownListChildren}</DropdownList>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-list').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownList>{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByText('Dropdown List children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownList>{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByTestId('menu-list-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuList', () => {
+  render(<DropdownList className="custom-class">{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByTestId('menu-list-mock')).toHaveClass('custom-class');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<DropdownList className="custom-class">{dropdownListChildren}</DropdownList>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    data-ouia-component-id="dropdown"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <div>
+      <div
+        class="customClass"
+        data-testid="menu-mock"
+      >
+        <div>
+          <div>
+            Dropdown children
+          </div>
+        </div>
+      </div>
+      <div>
+        Mock item
+      </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
+    </div>
+    <p>
+      zIndex: 9999
+    </p>
+    <p>
+      isOpen: true
+    </p>
+    <div>
+      <button>
+        Dropdown
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-group-mock"
+  >
+    <div>
+      Dropdown Group children
+    </div>
+  </div>
+  <p>
+    label: Test label
+  </p>
+  <p>
+    labelHeadingLevel: h2
+  </p>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-item-mock"
+  >
+    <div>
+      Dropdown Item children
+    </div>
+  </div>
+  <p>
+    description: Test description
+  </p>
+  <p>
+    itemId: undefined
+  </p>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-list-mock"
+  >
+    <div>
+      Dropdown List children
+    </div>
+  </div>
+</DocumentFragment>
+`;