@patternfly/react-core 4.200.0 → 4.201.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts +1 -1
  3. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  4. package/dist/esm/components/CalendarMonth/CalendarMonth.js +13 -8
  5. package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
  6. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts +1 -1
  7. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  8. package/dist/js/components/CalendarMonth/CalendarMonth.js +13 -8
  9. package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
  10. package/dist/umd/react-core.css +804 -804
  11. package/dist/umd/react-core.js +13 -8
  12. package/dist/umd/react-core.min.js +1 -1
  13. package/package.json +5 -5
  14. package/src/components/CalendarMonth/CalendarMonth.tsx +15 -9
  15. package/src/components/ChipGroup/__tests__/ChipGroup.test.tsx +14 -9
  16. package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx +28 -19
  17. package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap +1 -1
  18. package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx +21 -14
  19. package/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx +49 -34
  20. package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap +2 -169
  21. package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap +5 -247
  22. package/src/components/DataList/__tests__/DataList.test.tsx +49 -40
  23. package/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +1 -9
  24. package/src/components/Dropdown/__tests__/Dropdown.test.tsx +54 -42
  25. package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx +179 -177
  26. package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx +51 -55
  27. package/src/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx +28 -26
  28. package/src/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx +14 -15
  29. package/src/components/Dropdown/__tests__/Generated/InternalDropdownItem.test.tsx +39 -36
  30. package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap +6 -4
  31. package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap +11 -4
  32. package/src/components/Dropdown/__tests__/Generated/__snapshots__/InternalDropdownItem.test.tsx.snap +7 -4
  33. package/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx +66 -69
  34. package/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +15 -816
  35. package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap +9 -454
  36. package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap +7 -141
  37. package/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap +10 -163
  38. package/src/components/Nav/__tests__/Generated/NavList.test.tsx +28 -18
  39. package/src/components/Nav/__tests__/Generated/__snapshots__/NavList.test.tsx.snap +8 -4
  40. package/src/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx +21 -19
  41. package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap +20 -11
  42. package/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx +14 -10
  43. package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap +18 -4
  44. package/src/components/Select/__tests__/Generated/SelectGroup.test.tsx +22 -10
  45. package/src/components/Select/__tests__/Generated/SelectMenu.test.tsx +22 -26
  46. package/src/components/Select/__tests__/Generated/__snapshots__/SelectGroup.test.tsx.snap +15 -4
  47. package/src/components/Select/__tests__/Generated/__snapshots__/SelectMenu.test.tsx.snap +7 -19
  48. package/src/components/Select/__tests__/SelectGroup.test.tsx +14 -7
  49. package/src/components/Select/__tests__/SelectOption.test.tsx +51 -30
  50. package/src/components/Select/__tests__/__snapshots__/SelectGroup.test.tsx.snap +1 -5
  51. package/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap +10 -272
  52. package/src/components/Toolbar/__tests__/Generated/ToolbarToggleGroup.test.tsx +25 -11
  53. package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarToggleGroup.test.tsx.snap +26 -4
  54. package/src/components/Toolbar/__tests__/Toolbar.test.tsx +129 -0
  55. package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx +19 -0
  56. package/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx +12 -135
  57. package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +7 -0
  58. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap +3 -0
  59. package/src/components/Tooltip/examples/Tooltip.md +9 -1
  60. package/src/components/Tooltip/examples/TooltipExamples.css +4 -4
  61. package/src/components/Select/__tests__/Generated/SelectOption.test.tsx +0 -29
  62. package/src/components/Select/__tests__/Generated/__snapshots__/SelectOption.test.tsx.snap +0 -7
  63. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarToggleGroup.test.tsx.snap +0 -516
  64. package/src/components/Wizard/__tests__/Generated/Wizard.test.tsx +0 -43
  65. package/src/components/Wizard/__tests__/Generated/__snapshots__/Wizard.test.tsx.snap +0 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.200.0",
3
+ "version": "4.201.0",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
34
34
  "generate": "node scripts/copyStyles.js"
35
35
  },
36
36
  "dependencies": {
37
- "@patternfly/react-icons": "^4.51.0",
38
- "@patternfly/react-styles": "^4.50.0",
39
- "@patternfly/react-tokens": "^4.52.0",
37
+ "@patternfly/react-icons": "^4.52.0",
38
+ "@patternfly/react-styles": "^4.51.0",
39
+ "@patternfly/react-tokens": "^4.53.0",
40
40
  "focus-trap": "6.2.2",
41
41
  "react-dropzone": "9.0.0",
42
42
  "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
60
60
  "react": "^16.8.0 || ^17.0.0",
61
61
  "react-dom": "^16.8.0 || ^17.0.0"
62
62
  },
63
- "gitHead": "ece8d3daaff4df670618823e159fa5eea1b95490"
63
+ "gitHead": "0d60b35858f995deab44e2ede3e013114e495b5e"
64
64
  }
package/src/components/CalendarMonth/CalendarMonth.tsx CHANGED
@@ -45,7 +45,7 @@ export interface CalendarFormat {
45
45
 
46
46
  export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
47
47
  /** Month/year to base other dates around */
48
- date: Date;
48
+ date?: Date;
49
49
  /** Callback when date is selected */
50
50
  onChange?: (date: Date) => void;
51
51
  /** Functions that returns if a date is valid and selectable */
@@ -60,8 +60,8 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
60
60
  const yearFormat = (date: Date) => date.getFullYear();
61
61
 
62
62
  const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
63
- const selectedDate = new Date(year, month);
64
- const firstDayOfWeek = new Date(selectedDate);
63
+ const defaultDate = new Date(year, month);
64
+ const firstDayOfWeek = new Date(defaultDate);
65
65
  firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
66
66
  // We will always show 6 weeks like google calendar
67
67
  // Assume we just want the numbers for now...
@@ -90,7 +90,7 @@ export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
90
90
  const today = new Date();
91
91
 
92
92
  export const CalendarMonth = ({
93
- date: dateProp = today,
93
+ date: dateProp,
94
94
  locale = undefined,
95
95
  monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }),
96
96
  weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }),
@@ -110,6 +110,7 @@ export const CalendarMonth = ({
110
110
  }: CalendarProps) => {
111
111
  const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
112
112
  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
113
+ const [selectedDate, setSelectedDate] = React.useState(new Date(dateProp));
113
114
  // eslint-disable-next-line prefer-const
114
115
  let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
115
116
  if (!isValidDate(focusedDate)) {
@@ -118,7 +119,7 @@ export const CalendarMonth = ({
118
119
  const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
119
120
  const focusRef = React.useRef<HTMLButtonElement>();
120
121
  const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
121
- const [shouldFocus, setShouldFocus] = React.useState(true);
122
+ const [shouldFocus, setShouldFocus] = React.useState(false);
122
123
 
123
124
  const isValidated = (date: Date) => validators.every(validator => validator(date));
124
125
  const focusedDateValidated = isValidated(focusedDate);
@@ -126,7 +127,8 @@ export const CalendarMonth = ({
126
127
  if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
127
128
  setFocusedDate(dateProp);
128
129
  }
129
- }, [dateProp, focusedDate]);
130
+ }, [dateProp]);
131
+
130
132
  useEffect(() => {
131
133
  // When using header controls don't move focus
132
134
  if (shouldFocus) {
@@ -136,7 +138,7 @@ export const CalendarMonth = ({
136
138
  } else {
137
139
  setShouldFocus(true);
138
140
  }
139
- }, [focusedDate, focusedDateValidated, shouldFocus]);
141
+ }, [focusedDate]);
140
142
 
141
143
  const onMonthClick = (newDate: Date) => {
142
144
  setFocusedDate(newDate);
@@ -275,7 +277,7 @@ export const CalendarMonth = ({
275
277
  {week.map(({ date, isValid }, index) => {
276
278
  const dayFormatted = dayFormat(date);
277
279
  const isToday = isSameDate(date, today);
278
- const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
280
+ const isSelected = isValidDate(selectedDate) && isSameDate(date, selectedDate);
279
281
  const isFocused = isSameDate(date, focusedDate);
280
282
  const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
281
283
  let isInRange = false;
@@ -312,7 +314,11 @@ export const CalendarMonth = ({
312
314
  !isValid && styles.modifiers.disabled
313
315
  )}
314
316
  type="button"
315
- onClick={() => onChange(date)}
317
+ onClick={() => {
318
+ setSelectedDate(date);
319
+ setFocusedDate(date);
320
+ onChange(date);
321
+ }}
316
322
  onMouseOver={() => setHoveredDate(date)}
317
323
  tabIndex={isFocused ? 0 : -1}
318
324
  disabled={!isValid}
package/src/components/ChipGroup/__tests__/ChipGroup.test.tsx CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import { mount } from 'enzyme';
2
+
3
+ import { render, screen } from '@testing-library/react';
4
+ import userEvent from '@testing-library/user-event';
5
+ import '@testing-library/jest-dom';
6
+
4
7
  import { ChipGroup } from '../index';
5
8
  import { Chip } from '../../Chip';
6
9
 
@@ -34,7 +37,7 @@ describe('ChipGroup', () => {
34
37
  });
35
38
 
36
39
  test('chip group expanded', () => {
37
- const view = mount(
40
+ render(
38
41
  <ChipGroup>
39
42
  <Chip>1</Chip>
40
43
  <Chip>2</Chip>
@@ -42,15 +45,17 @@ describe('ChipGroup', () => {
42
45
  <Chip>4</Chip>
43
46
  </ChipGroup>
44
47
  );
45
- const overflowButton = view.find('.pf-m-overflow .pf-c-chip__text');
46
- expect(overflowButton.text()).toBe('1 more');
47
- overflowButton.simulate('click');
48
- expect(overflowButton.text()).toBe('Show Less');
48
+
49
+ const moreText = screen.getByText('1 more');
50
+ expect(moreText).toBeInTheDocument();
51
+
52
+ userEvent.click(moreText);
53
+ expect(screen.getByText('Show Less')).toBeInTheDocument();
49
54
  });
50
55
 
51
56
  test('chip group will not render if no children passed', () => {
52
- const view = mount(<ChipGroup />);
53
- expect(view.html()).toBeNull();
57
+ render(<ChipGroup />);
58
+ expect(screen.queryByRole('group')).toBeNull();
54
59
  });
55
60
 
56
61
  test('chip group with category and tooltip', () => {
package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx CHANGED
@@ -1,10 +1,9 @@
1
1
  import React from 'react';
2
2
  import { render, screen } from '@testing-library/react';
3
3
  import userEvent from '@testing-library/user-event';
4
- import { shallow } from 'enzyme';
5
- import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
4
+ import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
6
5
 
7
- const props = {
6
+ const props: ClipboardCopyToggleProps = {
8
7
  id: 'my-id',
9
8
  textId: 'my-text-id',
10
9
  contentId: 'my-content-id',
@@ -13,23 +12,33 @@ const props = {
13
12
  onClick: jest.fn()
14
13
  };
15
14
 
16
- test('toggle button render', () => {
17
- const desc = 'toggle content';
18
- const view = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
19
- expect(view.container).toMatchSnapshot();
20
- });
15
+ describe('ClipboardCopyToggle', () => {
16
+ test('toggle button render', () => {
17
+ const desc = 'toggle content';
18
+ const view = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
21
19
 
22
- test('toggle button onClick', () => {
23
- const onclick = jest.fn();
24
- render(<ClipboardCopyToggle {...props} onClick={onclick} />);
20
+ expect(view.container).toMatchSnapshot();
21
+ });
25
22
 
26
- userEvent.click(screen.getByRole('button'));
27
- expect(onclick).toBeCalled();
28
- });
23
+ test('toggle button onClick', () => {
24
+ const onclick = jest.fn();
25
+ render(<ClipboardCopyToggle {...props} onClick={onclick} />);
26
+
27
+ userEvent.click(screen.getByRole('button'));
28
+ expect(onclick).toBeCalled();
29
+ });
30
+
31
+ test('has aria-expanded set to true when isExpanded is true', () => {
32
+ render(<ClipboardCopyToggle {...props} isExpanded />);
33
+
34
+ const toggleButton = screen.getByRole('button');
35
+ expect(toggleButton.getAttribute('aria-expanded')).toEqual('true');
36
+ });
37
+
38
+ test('has aria-expanded set to false when isExpanded is false', () => {
39
+ render(<ClipboardCopyToggle {...props} />);
29
40
 
30
- test('toggle button is on expanded mode', () => {
31
- let view = shallow(<ClipboardCopyToggle {...props} isExpanded />);
32
- expect(view.props()['aria-expanded']).toBe(true);
33
- view = shallow(<ClipboardCopyToggle {...props} isExpanded={false} />);
34
- expect(view.props()['aria-expanded']).toBe(false);
41
+ const toggleButton = screen.getByRole('button');
42
+ expect(toggleButton.getAttribute('aria-expanded')).toEqual('false');
43
+ });
35
44
  });
package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`toggle button render 1`] = `
3
+ exports[`ClipboardCopyToggle toggle button render 1`] = `
4
4
  <div>
5
5
  <button
6
6
  aria-controls="my-id my-content-id"
package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
+
2
3
  import { render, screen } from '@testing-library/react';
3
4
  import userEvent from '@testing-library/user-event';
4
- import { shallow } from 'enzyme';
5
+
5
6
  import { ContextSelector } from '../ContextSelector';
6
7
  import { ContextSelectorItem } from '../ContextSelectorItem';
7
8
 
@@ -13,20 +14,26 @@ const items = [
13
14
  <ContextSelectorItem key="4">Azure</ContextSelectorItem>
14
15
  ];
15
16
 
16
- test('Renders ContextSelector', () => {
17
- const view = render(<ContextSelector> {items} </ContextSelector>);
18
- expect(view.container).toMatchSnapshot();
19
- });
17
+ describe('ContextSelector', () => {
18
+ test('Renders ContextSelector', () => {
19
+ render(<ContextSelector data-testid="context-test-id">{items}</ContextSelector>);
20
+ expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
21
+ });
20
22
 
21
- test('Renders ContextSelector open', () => {
22
- const view = shallow(<ContextSelector isOpen> {items} </ContextSelector>);
23
- expect(view).toMatchSnapshot();
24
- });
23
+ test('Renders ContextSelector open', () => {
24
+ render(
25
+ <ContextSelector isOpen data-testid="context-test-id">
26
+ {items}
27
+ </ContextSelector>
28
+ );
29
+ expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
30
+ });
25
31
 
26
- test('Verify onToggle is called ', () => {
27
- const mockfn = jest.fn();
28
- render(<ContextSelector onToggle={mockfn}> {items} </ContextSelector>);
32
+ test('Verify onToggle is called ', () => {
33
+ const mockfn = jest.fn();
34
+ render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
29
35
 
30
- userEvent.click(screen.getByRole('button'));
31
- expect(mockfn.mock.calls).toHaveLength(1);
36
+ userEvent.click(screen.getByRole('button'));
37
+ expect(mockfn.mock.calls).toHaveLength(1);
38
+ });
32
39
  });
package/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx CHANGED
@@ -1,43 +1,58 @@
1
1
  import React from 'react';
2
- import { render } from '@testing-library/react';
3
- import { mount } from 'enzyme';
2
+
3
+ import { render, screen } from '@testing-library/react';
4
+ import userEvent from '@testing-library/user-event';
5
+
4
6
  import { ContextSelectorToggle } from '../ContextSelectorToggle';
5
7
 
6
- test('Renders ContextSelectorToggle', () => {
7
- const view = render(<ContextSelectorToggle id="toggle-id" />);
8
- expect(view.container).toMatchSnapshot();
9
- });
8
+ describe('ContextSelectorToggle', () => {
9
+ test('Renders ContextSelectorToggle', () => {
10
+ render(<ContextSelectorToggle id="toggle-id" />);
11
+ expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
12
+ });
10
13
 
11
- test('Verify onToggle is called ', () => {
12
- const mockfnOnToggle = jest.fn();
13
- const view = mount(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
14
- view
15
- .find('button')
16
- .at(0)
17
- .simulate('click');
18
- expect(mockfnOnToggle.mock.calls).toHaveLength(1);
19
- });
14
+ test('Verify onToggle is called ', () => {
15
+ const mockfnOnToggle = jest.fn();
20
16
 
21
- test('Verify ESC press ', () => {
22
- const view = mount(<ContextSelectorToggle isOpen id="toggle-id" />);
23
- view.simulate('keyDown', { key: 'Escape' });
24
- expect(view).toMatchSnapshot();
25
- });
17
+ render(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
26
18
 
27
- test('Verify ESC press with not isOpen', () => {
28
- const view = mount(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
29
- view.simulate('keyDown', { key: 'Escape' });
30
- expect(view).toMatchSnapshot();
31
- });
19
+ userEvent.click(screen.getByRole('button'));
20
+ expect(mockfnOnToggle.mock.calls).toHaveLength(1);
21
+ });
32
22
 
33
- test('Verify keydown tab ', () => {
34
- const view = mount(<ContextSelectorToggle isOpen id="toggle-id" />);
35
- view.simulate('keyDown', { key: 'Tab' });
36
- expect(view).toMatchSnapshot();
37
- });
23
+ test('Verify ESC press', () => {
24
+ render(<ContextSelectorToggle isOpen id="toggle-id" />);
25
+
26
+ const toggleButton = screen.getByRole('button');
27
+
28
+ userEvent.type(toggleButton, '{esc}');
29
+ expect(toggleButton.outerHTML).toMatchSnapshot();
30
+ });
31
+
32
+ test('Verify ESC press with not isOpen', () => {
33
+ render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
34
+
35
+ const toggleButton = screen.getByRole('button');
36
+
37
+ userEvent.type(screen.getByRole('button'), '{esc}');
38
+ expect(toggleButton.outerHTML).toMatchSnapshot();
39
+ });
40
+
41
+ test('Verify keydown tab ', () => {
42
+ render(<ContextSelectorToggle isOpen id="toggle-id" />);
43
+
44
+ const toggleButton = screen.getByRole('button');
45
+
46
+ userEvent.type(screen.getByRole('button'), '{tab}');
47
+ expect(toggleButton.outerHTML).toMatchSnapshot();
48
+ });
49
+
50
+ test('Verify keydown enter ', () => {
51
+ render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
52
+
53
+ const toggleButton = screen.getByRole('button');
38
54
 
39
- test('Verify keydown enter ', () => {
40
- const view = mount(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
41
- view.simulate('keyDown', { key: 'Enter' });
42
- expect(view).toMatchSnapshot();
55
+ userEvent.type(screen.getByRole('button'), '{enter}');
56
+ expect(toggleButton.outerHTML).toMatchSnapshot();
57
+ });
43
58
  });
package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap CHANGED
@@ -1,172 +1,5 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Renders ContextSelector 1`] = `
4
- <div>
5
- <div
6
- class="pf-c-context-selector"
7
- data-ouia-component-id="OUIA-Generated-ContextSelector-1"
8
- data-ouia-component-type="PF4/ContextSelector"
9
- data-ouia-safe="true"
10
- >
11
-
12
- <button
13
- aria-expanded="false"
14
- aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
15
- class="pf-c-context-selector__toggle"
16
- id="pf-context-selector-toggle-id-0"
17
- type="button"
18
- >
19
- <span
20
- class="pf-c-context-selector__toggle-text"
21
- />
22
- <span
23
- class="pf-c-context-selector__toggle-icon"
24
- >
25
- <svg
26
- aria-hidden="true"
27
- fill="currentColor"
28
- height="1em"
29
- role="img"
30
- style="vertical-align: -0.125em;"
31
- viewBox="0 0 320 512"
32
- width="1em"
33
- >
34
- <path
35
- d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
36
- />
37
- </svg>
38
- </span>
39
- </button>
40
- </div>
41
- </div>
42
- `;
3
+ exports[`ContextSelector Renders ContextSelector 1`] = `"<div class=\\"pf-c-context-selector\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-1\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button></div>"`;
43
4
 
44
- exports[`Renders ContextSelector open 1`] = `
45
- <div
46
- className="pf-c-context-selector pf-m-expanded"
47
- data-ouia-component-id="OUIA-Generated-ContextSelector-2"
48
- data-ouia-component-type="PF4/ContextSelector"
49
- data-ouia-safe={true}
50
- >
51
- <ContextSelectorToggle
52
- aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
53
- className=""
54
- id="pf-context-selector-toggle-id-0"
55
- isActive={false}
56
- isOpen={true}
57
- isPlain={false}
58
- isText={false}
59
- onEnter={[Function]}
60
- onToggle={[Function]}
61
- parentRef={null}
62
- toggleText=""
63
- />
64
- <div
65
- className="pf-c-context-selector__menu"
66
- >
67
- <FocusTrap
68
- active={true}
69
- focusTrapOptions={
70
- Object {
71
- "clickOutsideDeactivates": true,
72
- }
73
- }
74
- paused={false}
75
- preventScrollOnDeactivate={false}
76
- >
77
- <div
78
- className="pf-c-context-selector__menu-search"
79
- >
80
- <InputGroup>
81
- <TextInput
82
- aria-labelledby="pf-context-selector-search-button-id-0"
83
- onChange={[Function]}
84
- onKeyPress={[Function]}
85
- placeholder="Search"
86
- type="search"
87
- value=""
88
- />
89
- <Button
90
- aria-label="Search menu items"
91
- id="pf-context-selector-search-button-id-0"
92
- onClick={[Function]}
93
- variant="control"
94
- >
95
- <SearchIcon
96
- aria-hidden="true"
97
- color="currentColor"
98
- noVerticalAlign={false}
99
- size="sm"
100
- />
101
- </Button>
102
- </InputGroup>
103
- </div>
104
- <ContextProvider
105
- value={
106
- Object {
107
- "onSelect": [Function],
108
- }
109
- }
110
- >
111
- <ContextSelectorMenuList
112
- className=""
113
- isOpen={true}
114
- >
115
-
116
- <ContextSelectorItem
117
- className=""
118
- href={null}
119
- isDisabled={false}
120
- key="0"
121
- onClick={[Function]}
122
- sendRef={[Function]}
123
- >
124
- My Project
125
- </ContextSelectorItem>
126
- <ContextSelectorItem
127
- className=""
128
- href={null}
129
- isDisabled={false}
130
- key="1"
131
- onClick={[Function]}
132
- sendRef={[Function]}
133
- >
134
- OpenShift Cluster
135
- </ContextSelectorItem>
136
- <ContextSelectorItem
137
- className=""
138
- href={null}
139
- isDisabled={false}
140
- key="2"
141
- onClick={[Function]}
142
- sendRef={[Function]}
143
- >
144
- Production Ansible
145
- </ContextSelectorItem>
146
- <ContextSelectorItem
147
- className=""
148
- href={null}
149
- isDisabled={false}
150
- key="3"
151
- onClick={[Function]}
152
- sendRef={[Function]}
153
- >
154
- AWS
155
- </ContextSelectorItem>
156
- <ContextSelectorItem
157
- className=""
158
- href={null}
159
- isDisabled={false}
160
- key="4"
161
- onClick={[Function]}
162
- sendRef={[Function]}
163
- >
164
- Azure
165
- </ContextSelectorItem>
166
-
167
- </ContextSelectorMenuList>
168
- </ContextProvider>
169
- </FocusTrap>
170
- </div>
171
- </div>
172
- `;
5
+ exports[`ContextSelector Renders ContextSelector open 1`] = `"<div class=\\"pf-c-context-selector pf-m-expanded\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-2\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button><div class=\\"pf-c-context-selector__menu\\"><div><div class=\\"pf-c-context-selector__menu-search\\"><div class=\\"pf-c-input-group\\"><input placeholder=\\"Search\\" aria-labelledby=\\"pf-context-selector-search-button-id-0\\" aria-describedby=\\"pf-context-selector-search-button-id-0\\" class=\\"pf-c-form-control\\" type=\\"search\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/TextInput\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-TextInputBase-1\\" value=\\"\\"><button id=\\"pf-context-selector-search-button-id-0\\" aria-disabled=\\"false\\" aria-label=\\"Search menu items\\" class=\\"pf-c-button pf-m-control\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-control-1\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"></path></svg></button></div></div><ul class=\\"pf-c-context-selector__menu-list\\" role=\\"menu\\"><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">My Project</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">OpenShift Cluster</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Production Ansible</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">AWS</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Azure</button></li></ul></div></div></div>"`;