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

exports[`<Tabs /> child props should reset ids correctly 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Tab1
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> child props should reset ids correctly 2`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Tab1
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> performance should render all tabs if forceRenderTabPanel is true 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Tab1
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  >
    Hello Tab2
  </div>
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  >
    Hello Tab3
  </div>
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  >
    Hello Tab4
  </div>
</div>
`;

exports[`<Tabs /> props should accept className 1`] = `
<div
  class="foobar"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Tab1
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> props should have sane defaults 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Tab1
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> props should honor negative defaultIndex prop 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> props should honor positive defaultIndex prop 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab1"
      id="react-tabs-0"
      role="tab"
    >
      Tab1
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      data-testid="tab2"
      id="react-tabs-2"
      role="tab"
      tabindex="0"
    >
      Tab2
    </li>
    <li
      aria-controls="react-tabs-5"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      data-testid="tab3"
      id="react-tabs-4"
      role="tab"
    >
      <a
        href="a"
      >
        Tab3
      </a>
    </li>
    <li
      aria-controls="react-tabs-7"
      aria-disabled="true"
      aria-selected="false"
      class="react-tabs__tab react-tabs__tab--disabled"
      data-rttab="true"
      data-testid="tab4"
      id="react-tabs-6"
      role="tab"
    >
      Tab4
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel"
    data-testid="panel1"
    id="react-tabs-1"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    data-testid="panel2"
    id="react-tabs-3"
    role="tabpanel"
  >
    Hello Tab2
  </div>
  <div
    aria-labelledby="react-tabs-4"
    class="react-tabs__tab-panel"
    data-testid="panel3"
    id="react-tabs-5"
    role="tabpanel"
  />
  <div
    aria-labelledby="react-tabs-6"
    class="react-tabs__tab-panel"
    data-testid="panel4"
    id="react-tabs-7"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> should allow for higher order components 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Foo
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      id="react-tabs-2"
      role="tab"
    >
      Bar
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    id="react-tabs-1"
    role="tabpanel"
  >
    Foo
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    id="react-tabs-3"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> should allow string children 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  Foo
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    Foo
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Foo
    </li>
    Foo
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      id="react-tabs-2"
      role="tab"
    >
      Bar
    </li>
    Foo
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    id="react-tabs-1"
    role="tabpanel"
  >
    Bar
  </div>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    id="react-tabs-3"
    role="tabpanel"
  />
  Foo
</div>
`;

exports[`<Tabs /> should not add known props to dom 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
/>
`;

exports[`<Tabs /> should pass through custom properties 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
  data-tooltip="Tooltip contents"
/>
`;

exports[`<Tabs /> validation should allow other DOM nodes 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <div
    id="tabs-nav-wrapper"
  >
    <button
      type="button"
    >
      Left
    </button>
    <div
      class="tabs-container"
    >
      <ul
        class="react-tabs__tab-list"
        role="tablist"
      >
        <li
          aria-controls="react-tabs-1"
          aria-disabled="false"
          aria-selected="true"
          class="react-tabs__tab react-tabs__tab--selected"
          data-rttab="true"
          id="react-tabs-0"
          role="tab"
          tabindex="0"
        />
        <li
          aria-controls="react-tabs-3"
          aria-disabled="false"
          aria-selected="false"
          class="react-tabs__tab"
          data-rttab="true"
          id="react-tabs-2"
          role="tab"
        />
      </ul>
    </div>
    <button
      type="button"
    >
      Right
    </button>
  </div>
  <div
    class="tab-panels"
  >
    <div
      aria-labelledby="react-tabs-0"
      class="react-tabs__tab-panel react-tabs__tab-panel--selected"
      id="react-tabs-1"
      role="tabpanel"
    />
    <div
      aria-labelledby="react-tabs-2"
      class="react-tabs__tab-panel"
      id="react-tabs-3"
      role="tabpanel"
    />
  </div>
</div>
`;

exports[`<Tabs /> validation should allow random order for elements 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    id="react-tabs-1"
    role="tabpanel"
  >
    Hello Foo
  </div>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Foo
    </li>
    <li
      aria-controls="react-tabs-3"
      aria-disabled="false"
      aria-selected="false"
      class="react-tabs__tab"
      data-rttab="true"
      id="react-tabs-2"
      role="tab"
    >
      Bar
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-2"
    class="react-tabs__tab-panel"
    id="react-tabs-3"
    role="tabpanel"
  >
    Hello Bar
  </div>
</div>
`;

exports[`<Tabs /> validation should be okay with rendering just TabList 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  />
</div>
`;

exports[`<Tabs /> validation should be okay with rendering without any children 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
/>
`;

exports[`<Tabs /> validation should gracefully render null 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    >
      Tab A
    </li>
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    id="react-tabs-1"
    role="tabpanel"
  >
    Content A
  </div>
</div>
`;

exports[`<Tabs /> validation should not throw a warning when wrong element is found 1`] = `
<div
  class="react-tabs"
  data-rttabs="true"
>
  <ul
    class="react-tabs__tab-list"
    role="tablist"
  >
    <li
      aria-controls="react-tabs-1"
      aria-disabled="false"
      aria-selected="true"
      class="react-tabs__tab react-tabs__tab--selected"
      data-rttab="true"
      id="react-tabs-0"
      role="tab"
      tabindex="0"
    />
    <div />
  </ul>
  <div
    aria-labelledby="react-tabs-0"
    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
    id="react-tabs-1"
    role="tabpanel"
  />
</div>
`;

exports[`<Tabs /> validation should result with warning when defaultIndex and selectedIndex set 1`] = `
"Warning: Failed prop type: The prop \`selectedIndex\` cannot be used together with \`defaultIndex\` in \`Tabs\`.
Either remove \`selectedIndex\` to let \`Tabs\` handle the selected tab internally or remove \`defaultIndex\` to handle it yourself."
`;

exports[`<Tabs /> validation should result with warning when multiple tablist components exist 1`] = `"Warning: Failed prop type: Found multiple 'TabList' components inside 'Tabs'. Only one is allowed."`;

exports[`<Tabs /> validation should result with warning when onSelect missing when selectedIndex set 1`] = `
"Warning: Failed prop type: The prop \`onSelect\` is marked as required in \`Tabs\`, but its value is \`undefined\` or \`null\`.
\`onSelect\` is required when \`selectedIndex\` is also set. Not doing so will make the tabs not do anything, as \`selectedIndex\` indicates that you want to handle the selected tab yourself.
If you only want to set the inital tab replace \`selectedIndex\` with \`defaultIndex\`."
`;

exports[`<Tabs /> validation should result with warning when tab outside of tablist 1`] = `"Warning: Failed prop type: Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component."`;

exports[`<Tabs /> validation should result with warning when tabs/panels are imbalanced 1`] = `"Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in \`Tabs\`. Received 1 'Tab' and 0 'TabPanel'."`;

exports[`<Tabs /> validation should result with warning when tabs/panels are imbalanced and it should ignore non tab children 1`] = `"Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in \`Tabs\`. Received 1 'Tab' and 2 'TabPanel'."`;