Skip to content

Commit bcfb3d3

Browse files
100stacks100stacks
committed
fix(tabset): dynamic tabs bug fixes Issue #516
* fix for dynamic tabs * fix for no id on tabset * fix for no tabpanel on render * fix for no tab on render * fix for no tabs or tabpanels on render * test for odd number of tabs and tabpanel * test for off number of tabpanels and tab
1 parent ec778a1 commit bcfb3d3

File tree

6 files changed

+244
-157
lines changed

6 files changed

+244
-157
lines changed

‎src/elements/hx-tab/index.spec.js‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ describe('<hx-tab> component tests', () => {
7171

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

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

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

111-
expect(queryId).to.not.be.null;
111+
expect(attr).to.be.true;
112+
expect(id).to.not.be.null;
112113
});
113114

114-
it('should FAIL on render with NO initial <hx-tab>s', async () => {
115+
it('should render with NO initial <hx-tab>', async () => {
115116
const mockup =`
116117
<div class="hxPanel hxTabbed">
117-
<hx-tabset id="tab-component-tests">
118-
<hx-tablist id="tablist">
118+
<hx-tabset>
119+
<hx-tablist>
119120
</hx-tablist>
120-
<hx-tabcontent id="tabcontent">
121+
<hx-tabcontent>
121122
<hx-tabpanel></hx-tabpanel>
122123
</hx-tabcontent>
123124
</hx-tabset>
124125
</div>`;
125126

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

129-
expect(currentTabId).to.be.null;
132+
expect(len).to.be.equal(0);
130133
});
131134

132-
it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
135+
it('should render with NO tabpanel', async () => {
133136
const mockup =`
134-
<div class="hxPanel hxTabbed">
135-
<hx-tabset id="tab-component-tests">
136-
<hx-tablist id="tablist">
137-
<hx-tab id="tab-1" current="true"></hx-tab>
138-
</hx-tablist>
139-
<hx-tabcontent id="tabcontent">
140-
</hx-tabcontent>
141-
</hx-tabset>
142-
</div>`;
137+
<div class="hxPanel hxTabbed">
138+
<hx-tabset>
139+
<hx-tablist>
140+
<hx-tab></hx-tab>
141+
<hx-tab></hx-tab>
142+
</hx-tablist>
143+
<hx-tabcontent>
144+
</hx-tabcontent>
145+
</hx-tabset>
146+
</div>`;
143147

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

147-
expect(queryId).to.be.null;
153+
expect(len).to.be.equal(0);
148154
});
149155

150-
it('should FAIL on render with NO tabs or tabpanels', async () => {
156+
it('should render with NO tabs or tabpanels', async () => {
151157
const mockup = `
152158
<div class="hxPanel hxTabbed">
153-
<hx-tabset id="tabTest">
159+
<hx-tabset>
154160
<hx-tablist>
155161
</hx-tablist>
156162
<hx-tabcontent>
157163
</hx-tabcontent>
158164
</hx-tabset>
159165
</div>`;
160166

167+
const elSelector = 'hx-tabset';
161168
const fragment = /** @type {HXTabElement} */ await fixture(mockup);
162-
const queryTabs = fragment.tabs.length;
169+
const tabs = fragment.querySelector(elSelector).tabs;
170+
const len = tabs.length;
163171

164-
expect(queryTabs).to.equal(0);
172+
expect(len).to.equal(0);
165173
});
166174
});
167175
});

‎src/elements/hx-tabcontent/index.spec.js‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ describe('<hx-tabcontent> component tests', () => {
7878
* elements. These tests will be skipped until we implement a solution
7979
* for dynamically adding tabs (HelixUI Issue#516).
8080
*/
81-
describe.skip('tests should FAIL until fix applied to HelixUI Issue#516', () => {
82-
it('should FAIL on render with NO ID on <hx-tabset>', async () => {
81+
describe('test fix applied to HelixUI Issue#516', () => {
82+
it('should render with NO ID on <hx-tabset>', async () => {
8383
const mockup = `
8484
<hx-tabset current-tab="0">
8585
<hx-tablist>
@@ -94,64 +94,72 @@ describe('<hx-tabcontent> component tests', () => {
9494
</hx-tabcontent>
9595
</hx-tabset>`;
9696

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

101-
expect(queryId).to.not.be.null;
101+
expect(attr).to.be.true;
102+
expect(id).to.not.be.null;
102103
});
103104

104-
it('should FAIL on render with NO initial <hx-tab>s', async () => {
105+
it('should render with NO initial <hx-tab>', async () => {
105106
const mockup =`
106107
<div class="hxPanel hxTabbed">
107-
<hx-tabset id="tab-component-tests">
108-
<hx-tablist id="tablist">
108+
<hx-tabset>
109+
<hx-tablist>
109110
</hx-tablist>
110-
<hx-tabcontent id="tabcontent">
111+
<hx-tabcontent>
111112
<hx-tabpanel></hx-tabpanel>
112113
</hx-tabcontent>
113114
</hx-tabset>
114115
</div>`;
115116

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

119-
expect(currentTabId).to.be.null;
122+
expect(len).to.be.equal(0);
120123
});
121124

122-
it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
125+
it('should render with NO tabpanel', async () => {
123126
const mockup =`
124-
<div class="hxPanel hxTabbed">
125-
<hx-tabset id="tab-component-tests">
126-
<hx-tablist id="tablist">
127-
<hx-tab id="tab-1" current="true"></hx-tab>
128-
</hx-tablist>
129-
<hx-tabcontent id="tabcontent">
130-
</hx-tabcontent>
131-
</hx-tabset>
132-
</div>`;
127+
<div class="hxPanel hxTabbed">
128+
<hx-tabset>
129+
<hx-tablist>
130+
<hx-tab></hx-tab>
131+
<hx-tab></hx-tab>
132+
</hx-tablist>
133+
<hx-tabcontent>
134+
</hx-tabcontent>
135+
</hx-tabset>
136+
</div>`;
133137

134-
const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
135-
const queryId = fragment.querySelector('hx-tabpanel').id;
138+
const elSelector = 'hx-tabset';
139+
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
140+
const tabpanels = fragment.querySelector(elSelector).tabpanels;
141+
const len = tabpanels.length;
136142

137-
expect(queryId).to.be.null;
143+
expect(len).to.be.equal(0);
138144
});
139145

140-
it('should FAIL on render with NO tabs or tabpanels', async () => {
146+
it('should render with NO tabs or tabpanels', async () => {
141147
const mockup = `
142148
<div class="hxPanel hxTabbed">
143-
<hx-tabset id="tabTest">
149+
<hx-tabset>
144150
<hx-tablist>
145151
</hx-tablist>
146152
<hx-tabcontent>
147153
</hx-tabcontent>
148154
</hx-tabset>
149155
</div>`;
150156

151-
const fragment = /** @type {HXTabcontentElement} */ await fixture(mockup);
152-
const queryTabs = fragment.tabs.length;
157+
const elSelector = 'hx-tabset';
158+
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
159+
const tabs = fragment.querySelector(elSelector).tabs;
160+
const len = tabs.length;
153161

154-
expect(queryTabs).to.equal(0);
162+
expect(len).to.equal(0);
155163
});
156164
});
157165
});

‎src/elements/hx-tablist/index.spec.js‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ describe('<hx-tablist> component tests', () => {
4848
* elements. These tests will be skipped until we implement a solution
4949
* for dynamically adding tabs (HelixUI Issue#516).
5050
*/
51-
describe.skip('tests should FAIL until fix applied to HelixUI Issue#516', () => {
52-
it('should FAIL on render with NO ID on <hx-tabset>', async () => {
51+
describe('test fix applied to HelixUI Issue#516', () => {
52+
it('should render with NO ID on <hx-tabset>', async () => {
5353
const mockup = `
5454
<hx-tabset current-tab="0">
5555
<hx-tablist>
@@ -61,67 +61,77 @@ describe('<hx-tablist> component tests', () => {
6161
<hx-tabpanel id="panel-1" open></hx-tabpanel>
6262
<hx-tabpanel id="panel-2"></hx-tabpanel>
6363
<hx-tabpanel id="panel-3"></hx-tabpanel>
64+
<hx-tabpanel></hx-tabpanel>
6465
</hx-tabcontent>
6566
</hx-tabset>`;
6667

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

71-
expect(queryId).to.not.be.null;
72+
expect(attr).to.be.true;
73+
expect(id).to.not.be.null;
7274
});
7375

74-
it('should FAIL on render with NO initial <hx-tab>s', async () => {
76+
it('should render with NO initial <hx-tab>', async () => {
7577
const mockup =`
7678
<div class="hxPanel hxTabbed">
77-
<hx-tabset id="tab-component-tests">
78-
<hx-tablist id="tablist">
79+
<hx-tabset>
80+
<hx-tablist>
7981
</hx-tablist>
80-
<hx-tabcontent id="tabcontent">
81-
<hx-tabpanel></hx-tabpanel>
82+
<hx-tabcontent>
83+
<hx-tabpanel></hx-tabpanel>
84+
<hx-tabpanel></hx-tabpanel>
8285
</hx-tabcontent>
8386
</hx-tabset>
8487
</div>`;
8588

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

89-
expect(currentTabId).to.be.null;
94+
expect(len).to.be.equal(0);
9095
});
9196

92-
it('should FAIL on render with NO initial <hx-tabpanel>s', async () => {
97+
it('should render with NO tabpanel', async () => {
9398
const mockup =`
9499
<div class="hxPanel hxTabbed">
95-
<hx-tabset id="tab-component-tests">
96-
<hx-tablist id="tablist">
97-
<hx-tab id="tab-1" current="true"></hx-tab>
100+
<hx-tabset>
101+
<hx-tablist>
102+
<hx-tab></hx-tab>
103+
<hx-tab></hx-tab>
98104
</hx-tablist>
99-
<hx-tabcontent id="tabcontent">
105+
<hx-tabcontent>
100106
</hx-tabcontent>
101107
</hx-tabset>
102108
</div>`;
103109

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

107-
expect(queryId).to.be.null;
115+
expect(len).to.be.equal(0);
108116
});
109117

110-
it('should FAIL on render with NO tabs or tabpanels', async () => {
118+
it('should render with NO tabs or tabpanels', async () => {
111119
const mockup = `
112120
<div class="hxPanel hxTabbed">
113-
<hx-tabset id="tabTest">
121+
<hx-tabset>
114122
<hx-tablist>
115123
</hx-tablist>
116124
<hx-tabcontent>
117125
</hx-tabcontent>
118126
</hx-tabset>
119127
</div>`;
120128

129+
const elSelector = 'hx-tabset';
121130
const fragment = /** @type {HXTablistElement} */ await fixture(mockup);
122-
const queryTabs = fragment.tabs.length;
131+
const tabs = fragment.querySelector(elSelector).tabs;
132+
const len = tabs.length;
123133

124-
expect(queryTabs).to.equal(0);
134+
expect(len).to.equal(0);
125135
});
126136
});
127137
});

0 commit comments

Comments
 (0)