fix(tabs): Correctly handle children of type string (#211)

reactjs · Oct 4, 2017 · 6fd4002 · 6fd4002
1 parent cd3ac28
commit 6fd4002
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
@@ -485,7 +485,7 @@ describe('<Tabs />', () => {
     assertTabSelected(wrapper, 2);
   });
 
-  it('should allow for higher order components', () => {
+  test('should allow for higher order components', () => {
     expectToMatchSnapshot(
       <Tabs>
         <TabListWrapper>
@@ -497,4 +497,22 @@ describe('<Tabs />', () => {
       </Tabs>,
     );
   });
+
+  test('should allow string children', () => {
+    expectToMatchSnapshot(
+      <Tabs>
+        Foo
+        <TabList>
+          Foo
+          <Tab>Foo</Tab>
+          Foo
+          <Tab>Bar</Tab>
+          Foo
+        </TabList>
+        <TabPanel>Bar</TabPanel>
+        <TabPanel>Foo</TabPanel>
+        Foo
+      </Tabs>,
+    );
+  });
 });
diff --git a/src/components/__tests__/__snapshots__/Tabs-test.js.snap b/src/components/__tests__/__snapshots__/Tabs-test.js.snap
@@ -694,6 +694,64 @@ exports[`<Tabs /> should allow for higher order components 1`] = `
 </div>
 `;
 
+exports[`<Tabs /> should allow string children 1`] = `
+<div
+  className="react-tabs"
+  data-tabs={true}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+>
+  Foo
+  <ul
+    className="react-tabs__tab-list"
+    role="tablist"
+  >
+    Foo
+    <li
+      aria-controls="react-tabs-1"
+      aria-disabled="false"
+      aria-selected="true"
+      className="react-tabs__tab react-tabs__tab--selected"
+      id="react-tabs-0"
+      role="tab"
+      tabIndex="0"
+    >
+      Foo
+    </li>
+    Foo
+    <li
+      aria-controls="react-tabs-3"
+      aria-disabled="false"
+      aria-selected="false"
+      className="react-tabs__tab"
+      id="react-tabs-2"
+      role="tab"
+      tabIndex={null}
+    >
+      Bar
+    </li>
+    Foo
+  </ul>
+  <div
+    aria-labelledby="react-tabs-0"
+    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    id="react-tabs-1"
+    role="tabpanel"
+    style={Object {}}
+  >
+    Bar
+  </div>
+  <div
+    aria-labelledby="react-tabs-2"
+    className="react-tabs__tab-panel"
+    id="react-tabs-3"
+    role="tabpanel"
+    style={Object {}}
+  />
+  Foo
+</div>
+`;
+
 exports[`<Tabs /> should not add known props to dom 1`] = `
 <div
   className="react-tabs"

diff --git a/src/helpers/elementTypes.js b/src/helpers/elementTypes.js
@@ -1,11 +1,11 @@
 export function isTab(el) {
-  return el.type.tabsRole === 'Tab';
+  return el.type && el.type.tabsRole === 'Tab';
 }
 
 export function isTabPanel(el) {
-  return el.type.tabsRole === 'TabPanel';
+  return el.type && el.type.tabsRole === 'TabPanel';
 }
 
 export function isTabList(el) {
-  return el.type.tabsRole === 'TabList';
+  return el.type && el.type.tabsRole === 'TabList';
 }