diff --git a/packages/tabs/__tests__/integrations.js b/packages/tabs/__tests__/integrations.js index 80d3e1d..17a49fd 100644 --- a/packages/tabs/__tests__/integrations.js +++ b/packages/tabs/__tests__/integrations.js @@ -49,8 +49,9 @@ const init = (mode) => { describe(`Tabs > Initialisation`, () => { beforeAll(() => {init()}); + console.log(TabSet) - it('should return array of length 1', async () => { + it('should return array of length 2', async () => { expect(TabSet.length).toEqual(2); }); @@ -66,6 +67,26 @@ describe(`Tabs > Initialisation`, () => { }); }); + +describe(`Tabs > Initialisation no panel markup`, () => { + + beforeAll(() => { + document.body.innerHTML = ` +
+ +
`; + + TabSet = tabs('[role=tablist]'); + }); + + it('should return array of length 0', async () => { + expect(TabSet.length).toEqual(0); + }); +}); + + describe(`Tabs > Accessibility > ARIA`, () => { diff --git a/packages/tabs/src/index.js b/packages/tabs/src/index.js index 005f346..05c1032 100644 --- a/packages/tabs/src/index.js +++ b/packages/tabs/src/index.js @@ -19,8 +19,15 @@ export default (selector, options) => { //return array of Objects, one for each DOM node found //each Object has a prototype consisting of the node (HTMLElement), //and a settings property composed from defaults, data-attributes on the node, and options passed to init - return nodes.map(node => Object.create(factory({ - settings: { ...defaults, ...node.dataset, ...options }, - node - }))); + return nodes.map(node => { + const instance = factory({ + settings: { ...defaults, ...node.dataset, ...options }, + node + }); + if(instance) { + return Object.create(instance); + } else { + console.warn("Tabset not initialised, required markup not found"); + } + }).filter((instance) => typeof instance !== "undefined"); }; \ No newline at end of file diff --git a/packages/tabs/src/lib/dom.js b/packages/tabs/src/lib/dom.js index a0261b4..f6c9aeb 100644 --- a/packages/tabs/src/lib/dom.js +++ b/packages/tabs/src/lib/dom.js @@ -13,7 +13,7 @@ import { KEYCODES, MODES } from './constants'; */ export const findTabsAndPanels = (node, settings) => { const tabs = [].slice.call(node.querySelectorAll(settings.tabSelector)); - const panels = tabs.map(tab => document.getElementById(tab.getAttribute('href').substr(1)) || console.warn(`Tab panel for ${tab}`)); + const panels = tabs.map(tab => document.getElementById(tab.getAttribute('href').substr(1)) || console.warn(`Tab panel not found for ${tab}`)); return { tabs, panels }; }; diff --git a/packages/tabs/src/lib/factory.js b/packages/tabs/src/lib/factory.js index 69485e7..7988f37 100644 --- a/packages/tabs/src/lib/factory.js +++ b/packages/tabs/src/lib/factory.js @@ -11,6 +11,9 @@ import { getActiveIndexOnLoad } from './utils'; export default ({ node, settings }) => { const Store = createStore(); const { tabs, panels } = findTabsAndPanels(node, settings); + + if(!tabs.length || !panels.length || panels.includes(undefined)) return false; + const activeIndex = getActiveIndexOnLoad(panels, node); Store.dispatch({ settings,