Skip to content

Commit

Permalink
Merge pull request #743 from HelixDesignSystem/surf-1756-bug-fix-dyna…
Browse files Browse the repository at this point in the history 
…mic-tabs-on-connect

fix(tabset): dynamic tabs bug fixes Issue #516
  • Loading branch information
@100stacks
100stacks authored Jul 31, 2020
2 parents ec778a1 + bcfb3d3 commit d86663e
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 157 deletions.
64 changes: 36 additions & 28 deletions src/elements/hx-tab/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('<hx-tab> component tests', () => {

describe('test for click event listener', () => {
it('should fire a click event', async () => {
const component = /** @type { HXTabElement } */ await fixture(template);
const component = /** @type {HXTabElement} */ await fixture(template);
const detail = { evt: 'clicked!'};
const customEvent = new CustomEvent('click', { detail });

Expand All @@ -88,8 +88,8 @@ describe('<hx-tab> component tests', () => {
* elements. These tests will be skipped until we implement a solution
* for dynamically adding tabs (HelixUI Issue#516).
*/
describe.skip('tests should FAIL until fix applied to HelixUI Issue#516', () => {
it('should FAIL on render with NO ID on <hx-tabset>', async () => {
describe('test fix applied to HelixUI Issue#516', () => {
it('should render with NO ID on <hx-tabset>', async () => {
const mockup = `
<hx-tabset current-tab="0">
<hx-tablist>
Expand All @@ -104,64 +104,72 @@ describe('<hx-tab> component tests', () => {
</hx-tabcontent>
</hx-tabset>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTabElement} */ await fixture(mockup);
const queryId = fragment.querySelector(elSelector).id;
const attr = fragment.hasAttribute('id');
const id = fragment.getAttribute('id');

expect(queryId).to.not.be.null;
expect(attr).to.be.true;
expect(id).to.not.be.null;
});

it('should FAIL on render with NO initial <hx-tab>s', async () => {
it('should render with NO initial <hx-tab>', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent id="tabcontent">
<hx-tabcontent>
<hx-tabpanel></hx-tabpanel>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTabElement} */ await fixture(mockup);
const currentTabId = fragment.querySelector('hx-tab').id;
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(currentTabId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
it('should render with NO tabpanel', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tab id="tab-1" current="true"></hx-tab>
</hx-tablist>
<hx-tabcontent id="tabcontent">
</hx-tabcontent>
</hx-tabset>
</div>`;
<div class="hxPanel hxTabbed">
<hx-tabset>
<hx-tablist>
<hx-tab></hx-tab>
<hx-tab></hx-tab>
</hx-tablist>
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTabElement} */ await fixture(mockup);
const queryId = fragment.querySelector('hx-tabpanel').id;
const tabpanels = fragment.querySelector(elSelector).tabpanels;
const len = tabpanels.length;

expect(queryId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO tabs or tabpanels', async () => {
it('should render with NO tabs or tabpanels', async () => {
const mockup = `
<div class="hxPanel hxTabbed">
<hx-tabset id="tabTest">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTabElement} */ await fixture(mockup);
const queryTabs = fragment.tabs.length;
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(queryTabs).to.equal(0);
expect(len).to.equal(0);
});
});
});
70 changes: 39 additions & 31 deletions src/elements/hx-tabcontent/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ describe('<hx-tabcontent> component tests', () => {
* elements. These tests will be skipped until we implement a solution
* for dynamically adding tabs (HelixUI Issue#516).
*/
describe.skip('tests should FAIL until fix applied to HelixUI Issue#516', () => {
it('should FAIL on render with NO ID on <hx-tabset>', async () => {
describe('test fix applied to HelixUI Issue#516', () => {
it('should render with NO ID on <hx-tabset>', async () => {
const mockup = `
<hx-tabset current-tab="0">
<hx-tablist>
Expand All @@ -94,64 +94,72 @@ describe('<hx-tabcontent> component tests', () => {
</hx-tabcontent>
</hx-tabset>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
const queryId = fragment.querySelector(elSelector).id;
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const attr = fragment.hasAttribute('id');
const id = fragment.getAttribute('id');

expect(queryId).to.not.be.null;
expect(attr).to.be.true;
expect(id).to.not.be.null;
});

it('should FAIL on render with NO initial <hx-tab>s', async () => {
it('should render with NO initial <hx-tab>', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent id="tabcontent">
<hx-tabcontent>
<hx-tabpanel></hx-tabpanel>
</hx-tabcontent>
</hx-tabset>
</div>`;

const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
const currentTabId = fragment.querySelector('hx-tab').id;
const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(currentTabId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
it('should render with NO tabpanel', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tab id="tab-1" current="true"></hx-tab>
</hx-tablist>
<hx-tabcontent id="tabcontent">
</hx-tabcontent>
</hx-tabset>
</div>`;
<div class="hxPanel hxTabbed">
<hx-tabset>
<hx-tablist>
<hx-tab></hx-tab>
<hx-tab></hx-tab>
</hx-tablist>
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
const queryId = fragment.querySelector('hx-tabpanel').id;
const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const tabpanels = fragment.querySelector(elSelector).tabpanels;
const len = tabpanels.length;

expect(queryId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO tabs or tabpanels', async () => {
it('should render with NO tabs or tabpanels', async () => {
const mockup = `
<div class="hxPanel hxTabbed">
<hx-tabset id="tabTest">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
const queryTabs = fragment.tabs.length;
const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(queryTabs).to.equal(0);
expect(len).to.equal(0);
});
});
});
56 changes: 33 additions & 23 deletions src/elements/hx-tablist/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ describe('<hx-tablist> component tests', () => {
* elements. These tests will be skipped until we implement a solution
* for dynamically adding tabs (HelixUI Issue#516).
*/
describe.skip('tests should FAIL until fix applied to HelixUI Issue#516', () => {
it('should FAIL on render with NO ID on <hx-tabset>', async () => {
describe('test fix applied to HelixUI Issue#516', () => {
it('should render with NO ID on <hx-tabset>', async () => {
const mockup = `
<hx-tabset current-tab="0">
<hx-tablist>
Expand All @@ -61,67 +61,77 @@ describe('<hx-tablist> component tests', () => {
<hx-tabpanel id="panel-1" open></hx-tabpanel>
<hx-tabpanel id="panel-2"></hx-tabpanel>
<hx-tabpanel id="panel-3"></hx-tabpanel>
<hx-tabpanel></hx-tabpanel>
</hx-tabcontent>
</hx-tabset>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const queryId = fragment.querySelector(elSelector).id;
const attr = fragment.hasAttribute('id');
const id = fragment.getAttribute('id');

expect(queryId).to.not.be.null;
expect(attr).to.be.true;
expect(id).to.not.be.null;
});

it('should FAIL on render with NO initial <hx-tab>s', async () => {
it('should render with NO initial <hx-tab>', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent id="tabcontent">
<hx-tabpanel></hx-tabpanel>
<hx-tabcontent>
<hx-tabpanel></hx-tabpanel>
<hx-tabpanel></hx-tabpanel>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const currentTabId = fragment.querySelector('hx-tab').id;
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(currentTabId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
it('should render with NO tabpanel', async () => {
const mockup =`
<div class="hxPanel hxTabbed">
<hx-tabset id="tab-component-tests">
<hx-tablist id="tablist">
<hx-tab id="tab-1" current="true"></hx-tab>
<hx-tabset>
<hx-tablist>
<hx-tab></hx-tab>
<hx-tab></hx-tab>
</hx-tablist>
<hx-tabcontent id="tabcontent">
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const queryId = fragment.querySelector('hx-tabpanel').id;
const tabpanels = fragment.querySelector(elSelector).tabpanels;
const len = tabpanels.length;

expect(queryId).to.be.null;
expect(len).to.be.equal(0);
});

it('should FAIL on render with NO tabs or tabpanels', async () => {
it('should render with NO tabs or tabpanels', async () => {
const mockup = `
<div class="hxPanel hxTabbed">
<hx-tabset id="tabTest">
<hx-tabset>
<hx-tablist>
</hx-tablist>
<hx-tabcontent>
</hx-tabcontent>
</hx-tabset>
</div>`;

const elSelector = 'hx-tabset';
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
const queryTabs = fragment.tabs.length;
const tabs = fragment.querySelector(elSelector).tabs;
const len = tabs.length;

expect(queryTabs).to.equal(0);
expect(len).to.equal(0);
});
});
});
Loading

0 comments on commit d86663e

Please sign in to comment.