@patternfly/react-core 4.202.33 → 4.202.36

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -1543,6 +1543,159 @@ exports[`should render tabs with eventKey Strings 1`] = `
 </div>
 `;
 
+exports[`should render tabs with no bottom border 1`] = `
+<div>
+  <div
+    class="pf-c-tabs pf-m-no-border-bottom"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-type="PF4/Tabs"
+    data-ouia-safe="true"
+    id="noBottomBorderTabs"
+  >
+    <button
+      aria-hidden="true"
+      aria-label="Scroll left"
+      class="pf-c-tabs__scroll-button"
+      disabled=""
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+        />
+      </svg>
+    </button>
+    <ul
+      class="pf-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-c-tabs__link"
+          data-ouia-component-type="PF4/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+        >
+          <span
+            class="pf-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-c-tabs__link"
+          data-ouia-component-type="PF4/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+        >
+          <span
+            class="pf-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-2-tab3"
+          aria-selected="false"
+          class="pf-c-tabs__link"
+          data-ouia-component-type="PF4/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-2-tab3"
+          role="tab"
+        >
+          <span
+            class="pf-c-tabs__item-text"
+          >
+            "Tab item 3"
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-hidden="true"
+      aria-label="Scroll right"
+      class="pf-c-tabs__scroll-button"
+      disabled=""
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </button>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-c-tab-content"
+    data-ouia-component-type="PF4/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-c-tab-content"
+    data-ouia-component-type="PF4/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-2-tab3"
+    class="pf-c-tab-content"
+    data-ouia-component-type="PF4/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-2-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>
+</div>
+`;
+
 exports[`should render tabs with separate content 1`] = `
 <div>
   <div

package/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx

@@ -1,192 +1,93 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { TextInputGroup, TextInputGroupContext } from '../TextInputGroup';
-import { TextInputGroupMain } from '../TextInputGroupMain';
-import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 describe('TextInputGroup', () => {
-  test('renders content', () => {
-    const { asFragment } = render(
-      <TextInputGroup>
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('gets custom class and id', () => {
-    const { asFragment } = render(
-      <TextInputGroup className="custom-class" id="test-id">
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  it('renders without children', () => {
+    render(<TextInputGroup data-testid="TextInputGroup" />);
 
-  test('renders with the proper stying when disabled', () => {
-    const { asFragment } = render(
-      <TextInputGroup isDisabled>
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('TextInputGroup')).toBeVisible();
   });
 
-  test('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
-    const TestComponent: React.FunctionComponent = () => {
-      const context = React.useContext(TextInputGroupContext);
+  it('renders children', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-      return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
-    };
-
-    render(
-      <TextInputGroup>
-        <TestComponent />
-      </TextInputGroup>
-    );
-
-    expect(screen.queryByText('is disabled')).toBeNull();
+    expect(screen.getByText('Test')).toBeVisible();
   });
 
-  test('passes isDisabled=true to children via a context when isDisabled prop is passed', () => {
-    const TestComponent: React.FunctionComponent = () => {
-      const context = React.useContext(TextInputGroupContext);
+  it('renders with class pf-c-text-input-group', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-      return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
-    };
-
-    render(
-      <TextInputGroup isDisabled>
-        <TestComponent />
-      </TextInputGroup>
-    );
+    const inputGroup = screen.getByText('Test');
 
-    expect(screen.queryByText('not disabled')).toBeNull();
+    expect(inputGroup).toHaveClass('pf-c-text-input-group');
   });
-});
 
-describe('TextInputGroupMain', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  it('renders with custom class names provided via prop', () => {
+    render(<TextInputGroup className="custom-class">Test</TextInputGroup>);
 
-  test('renders given input icon props', () => {
-    const { asFragment } = render(<TextInputGroupMain icon={<SearchIcon />}>Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+    const inputGroup = screen.getByText('Test');
 
-  test('renders the input with custom aria label when given', () => {
-    const { asFragment } = render(<TextInputGroupMain aria-label="Foo">Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
+    expect(inputGroup).toHaveClass('custom-class');
   });
 
-  test('does not call onChange callback when the input does not change', () => {
-    const onChangeMock = jest.fn();
+  it('does not render with the pf-m-disabled class when not disabled', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
-    expect(onChangeMock).not.toHaveBeenCalled();
-  });
-
-  test('calls the onChange callback when the input changes', () => {
-    const onChangeMock = jest.fn();
+    const inputGroup = screen.getByText('Test');
 
-    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
-
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    expect(onChangeMock).toHaveBeenCalled();
+    expect(inputGroup).not.toHaveClass('pf-m-disabled');
   });
 
-  test('does not call onFocus callback when the input does not get focus', () => {
-    const onFocusMock = jest.fn();
+  it('renders with the pf-m-disabled class when disabled', () => {
+    render(<TextInputGroup isDisabled>Test</TextInputGroup>);
 
-    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
-    expect(onFocusMock).not.toHaveBeenCalled();
-  });
+    const inputGroup = screen.getByText('Test');
 
-  test('calls the onFocus callback when the input is focused', () => {
-    const onFocusMock = jest.fn();
-
-    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
-    userEvent.click(screen.getByText('Foo').querySelector('input'));
-    expect(onFocusMock).toHaveBeenCalledTimes(1);
+    expect(inputGroup).toHaveClass('pf-m-disabled');
   });
 
-  test('does not call onBlur callback when the input does not lose focus', () => {
-    const onBlurMock = jest.fn();
-
-    render(<TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>);
-
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    expect(onBlurMock).not.toHaveBeenCalled();
-  });
+  it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
+    const TestComponent: React.FunctionComponent = () => {
+      const context = React.useContext(TextInputGroupContext);
 
-  test('calls the onFocus callback when the input loses focus', () => {
-    const onBlurMock = jest.fn();
+      return <button disabled={context.isDisabled} />;
+    };
 
     render(
-      <>
-        <div>Other element</div>
-        <TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>
-      </>
+      <TextInputGroup>
+        <TestComponent />
+      </TextInputGroup>
     );
 
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    userEvent.click(screen.getByText('Other element'));
+    const testComponent = screen.getByRole('button');
 
-    expect(onBlurMock).toHaveBeenCalled();
+    expect(testComponent).not.toBeDisabled();
   });
 
-  test('input type defaults to text', () => {
-    render(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(
-      screen
-        .getByText('Foo')
-        .querySelector('input')
-        .getAttribute('type')
-    ).toEqual('text');
-  });
+  it('passes isDisabled=true to children via a context when isDisabled prop is passed', () => {
+    const TestComponent: React.FunctionComponent = () => {
+      const context = React.useContext(TextInputGroupContext);
 
-  test('input type is updated when a different type is passed', () => {
-    render(<TextInputGroupMain type="search">Foo</TextInputGroupMain>);
-    expect(
-      screen
-        .getByText('Foo')
-        .querySelector('input')
-        .getAttribute('type')
-    ).toEqual('search');
-  });
+      return <button disabled={context.isDisabled} />;
+    };
 
-  test('input is not disabled when TextInputGroupContext isDisabled is false', () => {
-    const { asFragment } = render(
-      <TextInputGroupContext.Provider value={{ isDisabled: false }}>
-        <TextInputGroupMain />
-      </TextInputGroupContext.Provider>
+    render(
+      <TextInputGroup isDisabled>
+        <TestComponent />
+      </TextInputGroup>
     );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+    const testComponent = screen.getByRole('button');
 
-  test('input is disabled when TextInputGroupContext isDisabled is true', () => {
-    const { asFragment } = render(
-      <TextInputGroupContext.Provider value={{ isDisabled: true }}>
-        <TextInputGroupMain />
-      </TextInputGroupContext.Provider>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(testComponent).toBeDisabled();
   });
-});
 
-describe('TextInputGroupUtilities', () => {
-  test('renders the content', () => {
-    const { asFragment } = render(<TextInputGroupUtilities>{<button>Foo</button>}</TextInputGroupUtilities>);
+  it('matches the snapshot', () => {
+    const { asFragment } = render(<TextInputGroup>Test</TextInputGroup>);
+
     expect(asFragment()).toMatchSnapshot();
   });
 });