Tabs.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should call handleScrollButtons tabs with scrolls 1`] = `
<Tabs
  activeKey={0}
  aria-label={null}
  className=""
  id="handleScrollButtons"
  isFilled={true}
  isSecondary={false}
  leftScrollAriaLabel="Scroll left"
  onSelect={[Function]}
  rightScrollAriaLabel="Scroll Right"
  variant="div"
>
  <div
    aria-label={null}
    className="pf-c-tabs pf-m-fill"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleLeftIcon>
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          <TabContainer
            aria-controls="pf-tab-section-0-tab1"
            className="pf-c-tabs__button"
            eventKey={0}
            forwardRef={[Function]}
            id="tab1"
            onClick={[Function]}
            title="Tab item 1"
          >
            <Tab
              aria-controls="pf-tab-section-0-tab1"
              className="pf-c-tabs__button"
              eventKey={0}
              href={null}
              id="tab1"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 1"
            >
              <button
                aria-controls="pf-tab-section-0-tab1"
                className="pf-c-tabs__button"
                href={null}
                id="tab1"
                onClick={[Function]}
              >
                Tab item 1
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          <TabContainer
            aria-controls="pf-tab-section-1-tab2"
            className="pf-c-tabs__button"
            eventKey={1}
            forwardRef={[Function]}
            id="tab2"
            onClick={[Function]}
            title="Tab item 2"
          >
            <Tab
              aria-controls="pf-tab-section-1-tab2"
              className="pf-c-tabs__button"
              eventKey={1}
              href={null}
              id="tab2"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 2"
            >
              <button
                aria-controls="pf-tab-section-1-tab2"
                className="pf-c-tabs__button"
                href={null}
                id="tab2"
                onClick={[Function]}
              >
                Tab item 2
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          <TabContainer
            aria-controls="pf-tab-section-2-tab3"
            className="pf-c-tabs__button"
            eventKey={2}
            forwardRef={[Function]}
            id="tab3"
            onClick={[Function]}
            title="Tab item 3"
          >
            <Tab
              aria-controls="pf-tab-section-2-tab3"
              className="pf-c-tabs__button"
              eventKey={2}
              href={null}
              id="tab3"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 3"
            >
              <button
                aria-controls="pf-tab-section-2-tab3"
                className="pf-c-tabs__button"
                href={null}
                id="tab3"
                onClick={[Function]}
              >
                Tab item 3
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleRightIcon>
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={0}
          id="tab1"
          title="Tab item 1"
        >
          Tab 1 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab1"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-0-tab1"
        className="pf-c-tab-content"
        hidden={false}
        id="pf-tab-section-0-tab1"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 1 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={1}
          id="tab2"
          title="Tab item 2"
        >
          Tab 2 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab2"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-1-tab2"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-1-tab2"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 2 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={2}
          id="tab3"
          title="Tab item 3"
        >
          Tab 3 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab3"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-2-tab3"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-2-tab3"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 3 section
      </section>
    </TabContent>
  </ForwardRef>
</Tabs>
`;

exports[`should call scrollLeft tabs with scrolls 1`] = `
<Tabs
  activeKey={0}
  aria-label={null}
  className=""
  id="scrollLeft"
  isFilled={true}
  isSecondary={false}
  leftScrollAriaLabel="Scroll left"
  onSelect={[Function]}
  rightScrollAriaLabel="Scroll Right"
  variant="div"
>
  <div
    aria-label={null}
    className="pf-c-tabs pf-m-fill"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleLeftIcon>
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          <TabContainer
            aria-controls="pf-tab-section-0-tab1"
            className="pf-c-tabs__button"
            eventKey={0}
            forwardRef={[Function]}
            id="tab1"
            onClick={[Function]}
            title="Tab item 1"
          >
            <Tab
              aria-controls="pf-tab-section-0-tab1"
              className="pf-c-tabs__button"
              eventKey={0}
              href={null}
              id="tab1"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 1"
            >
              <button
                aria-controls="pf-tab-section-0-tab1"
                className="pf-c-tabs__button"
                href={null}
                id="tab1"
                onClick={[Function]}
              >
                Tab item 1
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          <TabContainer
            aria-controls="pf-tab-section-1-tab2"
            className="pf-c-tabs__button"
            eventKey={1}
            forwardRef={[Function]}
            id="tab2"
            onClick={[Function]}
            title="Tab item 2"
          >
            <Tab
              aria-controls="pf-tab-section-1-tab2"
              className="pf-c-tabs__button"
              eventKey={1}
              href={null}
              id="tab2"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 2"
            >
              <button
                aria-controls="pf-tab-section-1-tab2"
                className="pf-c-tabs__button"
                href={null}
                id="tab2"
                onClick={[Function]}
              >
                Tab item 2
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          <TabContainer
            aria-controls="pf-tab-section-2-tab3"
            className="pf-c-tabs__button"
            eventKey={2}
            forwardRef={[Function]}
            id="tab3"
            onClick={[Function]}
            title="Tab item 3"
          >
            <Tab
              aria-controls="pf-tab-section-2-tab3"
              className="pf-c-tabs__button"
              eventKey={2}
              href={null}
              id="tab3"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 3"
            >
              <button
                aria-controls="pf-tab-section-2-tab3"
                className="pf-c-tabs__button"
                href={null}
                id="tab3"
                onClick={[Function]}
              >
                Tab item 3
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleRightIcon>
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={0}
          id="tab1"
          title="Tab item 1"
        >
          Tab 1 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab1"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-0-tab1"
        className="pf-c-tab-content"
        hidden={false}
        id="pf-tab-section-0-tab1"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 1 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={1}
          id="tab2"
          title="Tab item 2"
        >
          Tab 2 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab2"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-1-tab2"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-1-tab2"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 2 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={2}
          id="tab3"
          title="Tab item 3"
        >
          Tab 3 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab3"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-2-tab3"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-2-tab3"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 3 section
      </section>
    </TabContent>
  </ForwardRef>
</Tabs>
`;

exports[`should call scrollRight tabs with scrolls 1`] = `
<Tabs
  activeKey={0}
  aria-label={null}
  className=""
  id="scrollRight"
  isFilled={true}
  isSecondary={false}
  leftScrollAriaLabel="Scroll left"
  onSelect={[Function]}
  rightScrollAriaLabel="Scroll Right"
  variant="div"
>
  <div
    aria-label={null}
    className="pf-c-tabs pf-m-fill"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleLeftIcon>
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          <TabContainer
            aria-controls="pf-tab-section-0-tab1"
            className="pf-c-tabs__button"
            eventKey={0}
            forwardRef={[Function]}
            id="tab1"
            onClick={[Function]}
            title="Tab item 1"
          >
            <Tab
              aria-controls="pf-tab-section-0-tab1"
              className="pf-c-tabs__button"
              eventKey={0}
              href={null}
              id="tab1"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 1"
            >
              <button
                aria-controls="pf-tab-section-0-tab1"
                className="pf-c-tabs__button"
                href={null}
                id="tab1"
                onClick={[Function]}
              >
                Tab item 1
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          <TabContainer
            aria-controls="pf-tab-section-1-tab2"
            className="pf-c-tabs__button"
            eventKey={1}
            forwardRef={[Function]}
            id="tab2"
            onClick={[Function]}
            title="Tab item 2"
          >
            <Tab
              aria-controls="pf-tab-section-1-tab2"
              className="pf-c-tabs__button"
              eventKey={1}
              href={null}
              id="tab2"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 2"
            >
              <button
                aria-controls="pf-tab-section-1-tab2"
                className="pf-c-tabs__button"
                href={null}
                id="tab2"
                onClick={[Function]}
              >
                Tab item 2
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          <TabContainer
            aria-controls="pf-tab-section-2-tab3"
            className="pf-c-tabs__button"
            eventKey={2}
            forwardRef={[Function]}
            id="tab3"
            onClick={[Function]}
            title="Tab item 3"
          >
            <Tab
              aria-controls="pf-tab-section-2-tab3"
              className="pf-c-tabs__button"
              eventKey={2}
              href={null}
              id="tab3"
              onClick={[Function]}
              tabContentId={null}
              tabContentRef={null}
              title="Tab item 3"
            >
              <button
                aria-controls="pf-tab-section-2-tab3"
                className="pf-c-tabs__button"
                href={null}
                id="tab3"
                onClick={[Function]}
              >
                Tab item 3
              </button>
            </Tab>
          </TabContainer>
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      >
        <svg
          aria-hidden={true}
          aria-labelledby={null}
          fill="currentColor"
          height="1em"
          role="img"
          style={
            Object {
              "verticalAlign": "-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"
            transform=""
          />
        </svg>
      </AngleRightIcon>
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={0}
          id="tab1"
          title="Tab item 1"
        >
          Tab 1 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab1"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-0-tab1"
        className="pf-c-tab-content"
        hidden={false}
        id="pf-tab-section-0-tab1"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 1 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={1}
          id="tab2"
          title="Tab item 2"
        >
          Tab 2 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab2"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-1-tab2"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-1-tab2"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 2 section
      </section>
    </TabContent>
  </ForwardRef>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  >
    <TabContent
      activeKey={0}
      aria-label={null}
      child={
        <ForwardRef
          eventKey={2}
          id="tab3"
          title="Tab item 3"
        >
          Tab 3 section
        </ForwardRef>
      }
      className={null}
      eventKey={null}
      id="tab3"
      innerRef={null}
    >
      <section
        aria-label={null}
        aria-labelledby="pf-tab-2-tab3"
        className="pf-c-tab-content"
        hidden={true}
        id="pf-tab-section-2-tab3"
        index={null}
        role="tabpanel"
        tabIndex="0"
      >
        Tab 3 section
      </section>
    </TabContent>
  </ForwardRef>
</Tabs>
`;

exports[`should render accessible tabs 1`] = `
<Fragment>
  <nav
    aria-label="accessible Tabs example"
    className="pf-c-tabs"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          href="#/items/1"
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          Tab item 1
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          href="#/items/2"
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          Tab item 2
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          href="#/items/3"
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          Tab item 3
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
  </nav>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        href="#/items/1"
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        href="#/items/2"
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        href="#/items/3"
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  />
</Fragment>
`;

exports[`should render filled tabs 1`] = `
<Fragment>
  <div
    aria-label={null}
    className="pf-c-tabs pf-m-fill"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          Tab item 1
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          Tab item 2
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          Tab item 3
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  />
</Fragment>
`;

exports[`should render secondary tabs 1`] = `
<Fragment>
  <div
    aria-label={null}
    className="pf-c-tabs"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-primaryTabs"
          className="pf-c-tabs__button"
          eventKey={0}
          id="pf-tab-0-primaryTabs"
          onClick={[Function]}
          title="Tab item 1"
        >
          Tab item 1
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          Tab item 2
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          Tab item 3
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        title="Tab item 1"
      >
        <Tabs
          activeKey={0}
          aria-label={null}
          className=""
          id="secondaryTabs"
          isFilled={false}
          isSecondary={false}
          leftScrollAriaLabel="Scroll left"
          onSelect={[Function]}
          rightScrollAriaLabel="Scroll Right"
          variant="div"
        >
          <ForwardRef
            eventKey={10}
            id="secondary tab1"
            title="Secondary Tab 1"
          >
            Secondary Tab 1 section
          </ForwardRef>
          <ForwardRef
            eventKey={11}
            id="secondary tab2"
            title="Secondary Tab 2"
          >
            Secondary Tab 2 section
          </ForwardRef>
          <ForwardRef
            eventKey={12}
            id="secondary tab3"
            title="Secondary Tab 3"
          >
            Secondary Tab 3 section
          </ForwardRef>
        </Tabs>
      </ForwardRef>
    }
    id="primaryTabs"
    key="0/.0"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  />
</Fragment>
`;

exports[`should render simple tabs 1`] = `
<Fragment>
  <div
    aria-label={null}
    className="pf-c-tabs"
    onSelect={[Function]}
  >
    <button
      aria-label="Scroll left"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleLeftIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
    <ul
      className="pf-c-tabs__list"
      onScroll={[Function]}
    >
      <li
        className="pf-c-tabs__item pf-m-current"
        key="0/.0"
      >
        <ForwardRef
          aria-controls="pf-tab-section-0-tab1"
          className="pf-c-tabs__button"
          eventKey={0}
          id="tab1"
          onClick={[Function]}
          title="Tab item 1"
        >
          Tab item 1
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="1/.1"
      >
        <ForwardRef
          aria-controls="pf-tab-section-1-tab2"
          className="pf-c-tabs__button"
          eventKey={1}
          id="tab2"
          onClick={[Function]}
          title="Tab item 2"
        >
          Tab item 2
        </ForwardRef>
      </li>
      <li
        className="pf-c-tabs__item"
        key="2/.2"
      >
        <ForwardRef
          aria-controls="pf-tab-section-2-tab3"
          className="pf-c-tabs__button"
          eventKey={2}
          id="tab3"
          onClick={[Function]}
          title="Tab item 3"
        >
          Tab item 3
        </ForwardRef>
      </li>
    </ul>
    <button
      aria-label="Scroll Right"
      className="pf-c-tabs__scroll-button"
      onClick={[Function]}
      variant="plain"
    >
      <AngleRightIcon
        color="currentColor"
        size="sm"
        title={null}
      />
    </button>
  </div>
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={0}
        id="tab1"
        title="Tab item 1"
      >
        Tab 1 section
      </ForwardRef>
    }
    id="tab1"
    key="0/.0"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={1}
        id="tab2"
        title="Tab item 2"
      >
        Tab 2 section
      </ForwardRef>
    }
    id="tab2"
    key="1/.1"
  />
  <ForwardRef
    activeKey={0}
    child={
      <ForwardRef
        eventKey={2}
        id="tab3"
        title="Tab item 3"
      >
        Tab 3 section
      </ForwardRef>
    }
    id="tab3"
    key="2/.2"
  />
</Fragment>
`;