Skip to content

Commit 6c5e060

Browse files
CITguyCITguy
authored
Merge pull request #132 from rackerlabs/tabs-tests
Tabs tests
2 parents e4f4dfa + dd19fc8 commit 6c5e060

File tree

8 files changed

+243
-12
lines changed

8 files changed

+243
-12
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ before_script:
1818
- sh -e /etc/init.d/xvfb start
1919
- jdk_switcher use oraclejdk8
2020
- yarn start > /dev/null 2>&1 &
21-
- sleep 10
21+
- while ! curl --silent http://localhost:4444/wd/hub > /dev/null 2>&1; do sleep 1; done
2222
script:
2323
- yarn test

‎docs/components/tabs/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
{% block content %}
1212
<section>
1313
<h2 class="hxSectionTitle" id="basic-tabs">Basic Tabs</h2>
14-
<div class="demo tabs-demo">
15-
<hx-tabset>
14+
<div class="demo tabs-demo" data-visreg="tabs">
15+
<hx-tabset id="android-desserts">
1616
<hx-tablist>
1717
<hx-tab>Cupcake Ipsum</hx-tab>
18-
<hx-tab>Biscuit Marshmallow</hx-tab>
18+
<hx-tab id="marshmallow">Biscuit Marshmallow</hx-tab>
1919
<hx-tab>Caramels Marzipan</hx-tab>
2020
</hx-tablist>
2121
<hx-tabcontent>
@@ -72,7 +72,7 @@ <h3 class="hxSubSectionTitle">Second Panel</h3>
7272
topping chocolate. Cake sugar plum fruitcake brownie.
7373
</p>
7474
</hx-tabpanel>
75-
<hx-tabpanel>
75+
<hx-tabpanel id="id-should-not-be-overwritten">
7676
<h3 class="hxSubSectionTitle">Third Panel</h3>
7777
<img src="http://via.placeholder.com/200x150" />
7878
<img src="http://via.placeholder.com/200x150" />

‎src/helix-ui/elements/HXTabsetElement.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export class HXTabsetElement extends HXElement {
1919

2020
connectedCallback () {
2121
this.$upgradeProperty('current-tab');
22+
this.$defaultAttribute('id', this.$generateId());
2223
this._setupIds();
2324
this.currentTab = Number(this.getAttribute('current-tab')) || 0;
2425
this.$tablist.addEventListener('keyup', this._onKeyUp);
@@ -121,11 +122,12 @@ export class HXTabsetElement extends HXElement {
121122
}
122123

123124
_setupIds () {
125+
let tabsetId = this.getAttribute('id');
124126
this.tabs.forEach((tab, idx) => {
125127
let tabpanel = this.tabpanels[idx];
126128
// Default tab and panel ID
127-
let tabId = `hxTab-${this.$generateId()}`;
128-
let tabpanelId = `hxTabPanel-${this.$generateId()}`;
129+
let tabId = `${tabsetId}-tab-${idx}`;
130+
let tabpanelId = `${tabsetId}-panel-${idx}`;
129131

130132
// Set or keep tab ID
131133
if (tab.hasAttribute('id')) {

‎test/common/util.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,6 @@ export function $x(
4747
*/
4848
export var selectors = {
4949
nav: "#stage > #nav",
50+
tab: "//hx-tablist/hx-tab",
5051
visreg: "*[data-visreg]",
5152
}

‎test/regression/generateRegressionTests.js.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,90 @@ Generated by [AVA](https://ava.li).
7979
</table>␊
8080
</section>`
8181

82+
## chrome auto-generated regression case: components/tabs
83+
84+
> Snapshot 1
85+
86+
`<div class="demo tabs-demo" data-visreg="tabs">␊
87+
<hx-tabset id="android-desserts">␊
88+
<hx-tablist role="tablist">␊
89+
<hx-tab role="tab" aria-selected="true" id="android-desserts-tab-0" aria-controls="android-desserts-panel-0" current="true" tabindex="0">Cupcake Ipsum</hx-tab>␊
90+
<hx-tab id="marshmallow" role="tab" aria-selected="false" aria-controls="android-desserts-panel-1" tabindex="-1">Biscuit Marshmallow</hx-tab>␊
91+
<hx-tab role="tab" aria-selected="false" id="android-desserts-tab-2" aria-controls="id-should-not-be-overwritten" tabindex="-1">Caramels Marzipan</hx-tab>␊
92+
</hx-tablist>␊
93+
<hx-tabcontent role="presentation">␊
94+
<hx-tabpanel aria-expanded="false" role="tabpanel" id="android-desserts-panel-0" aria-labelledby="android-desserts-tab-0" open="" tabindex="0">␊
95+
<h3 class="hxSubSectionTitle">First Panel</h3>␊
96+
<div class="hxRow">␊
97+
<div class="hxCol hxSpan-6">␊
98+
<p>␊
99+
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps␊
100+
gummi bears liquorice cookie chupa chups fruitcake croissant␊
101+
chocolate topping. Brownie biscuit wafer marshmallow liquorice␊
102+
soufflé powder jelly.␊
103+
</p>␊
104+
</div>␊
105+
<div class="hxCol hxSpan-6">␊
106+
<p>␊
107+
Sweet roll sesame snaps danish I love jelly wafer dragée soufflé␊
108+
cake. Cookie chocolate cake gingerbread powder icing. Ice cream␊
109+
cotton candy gummi bears oat cake sweet pastry.␊
110+
</p>␊
111+
</div>␊
112+
</div>␊
113+
</hx-tabpanel>␊
114+
<hx-tabpanel aria-expanded="false" role="tabpanel" id="android-desserts-panel-1" aria-labelledby="marshmallow">␊
115+
<h3 class="hxSubSectionTitle">Second Panel</h3>␊
116+
<p>␊
117+
Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish␊
118+
caramels danish candy canes macaroon donut icing. Cupcake tiramisu␊
119+
soufflé fruitcake. Caramels muffin tootsie roll lemon drops bear claw␊
120+
cotton candy tootsie roll tootsie roll chupa chups. Pudding fruitcake␊
121+
ice cream marshmallow. Candy sugar plum chupa chups cotton candy␊
122+
gingerbread pastry gingerbread marshmallow wafer. Jelly-o bonbon␊
123+
dessert donut.␊
124+
</p>␊
125+
<p><a href="#">Link inside the panel</a></p>␊
126+
<p>␊
127+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie␊
128+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie␊
129+
apple pie chupa chups. Lemon drops caramels sugar plum. Sweet oat cake␊
130+
chocolate pudding cake toffee chocolate topping. Caramels caramels␊
131+
candy muffin topping toffee. Topping candy canes sesame snaps carrot␊
132+
cake dragée wafer jelly beans. Macaroon gummies tootsie roll cookie␊
133+
chocolate cake chocolate cake dragée cupcake. Wafer bonbon sweet roll␊
134+
sweet roll.␊
135+
</p>␊
136+
<p>␊
137+
Sugar plum bonbon tiramisu tart candy canes sesame snaps tiramisu.␊
138+
Soufflé chocolate bar macaroon sweet bear claw dragée muffin dragée␊
139+
jelly. Apple pie gummies cake tiramisu dessert ice cream sweet roll.␊
140+
Pie fruitcake dragée. Gummi bears pudding muffin tart. Cake liquorice␊
141+
cheesecake donut. Cake chocolate marshmallow marshmallow dragée cupcake␊
142+
chocolate cake chocolate. Candy canes chocolate sweet roll apple pie␊
143+
icing danish chocolate bar. Jujubes toffee gummies powder cupcake␊
144+
topping chocolate. Cake sugar plum fruitcake brownie.␊
145+
</p>␊
146+
</hx-tabpanel>␊
147+
<hx-tabpanel id="id-should-not-be-overwritten" aria-expanded="false" role="tabpanel" aria-labelledby="android-desserts-tab-2">␊
148+
<h3 class="hxSubSectionTitle">Third Panel</h3>␊
149+
<img src="http://via.placeholder.com/200x150">␊
150+
<img src="http://via.placeholder.com/200x150">␊
151+
<img src="http://via.placeholder.com/200x150">␊
152+
<img src="http://via.placeholder.com/200x150">␊
153+
<img src="http://via.placeholder.com/200x150">␊
154+
<img src="http://via.placeholder.com/200x150">␊
155+
<img src="http://via.placeholder.com/200x150">␊
156+
<img src="http://via.placeholder.com/200x150">␊
157+
<img src="http://via.placeholder.com/200x150">␊
158+
<img src="http://via.placeholder.com/200x150">␊
159+
<img src="http://via.placeholder.com/200x150">␊
160+
<img src="http://via.placeholder.com/200x150">␊
161+
</hx-tabpanel>␊
162+
</hx-tabcontent>␊
163+
</hx-tabset>␊
164+
</div>`
165+
82166
## firefox auto-generated regression case: components/buttons
83167

84168
> Snapshot 1
@@ -225,3 +309,87 @@ Generated by [AVA](https://ava.li).
225309
</tbody>␊
226310
</table>␊
227311
</section>`
312+
313+
## firefox auto-generated regression case: components/tabs
314+
315+
> Snapshot 1
316+
317+
`<div class="demo tabs-demo" data-visreg="tabs">␊
318+
<hx-tabset id="android-desserts">␊
319+
<hx-tablist role="tablist">␊
320+
<hx-tab role="tab" aria-selected="true" id="android-desserts-tab-0" aria-controls="android-desserts-panel-0" current="true" tabindex="0">Cupcake Ipsum</hx-tab>␊
321+
<hx-tab id="marshmallow" role="tab" aria-selected="false" aria-controls="android-desserts-panel-1" tabindex="-1">Biscuit Marshmallow</hx-tab>␊
322+
<hx-tab role="tab" aria-selected="false" id="android-desserts-tab-2" aria-controls="id-should-not-be-overwritten" tabindex="-1">Caramels Marzipan</hx-tab>␊
323+
</hx-tablist>␊
324+
<hx-tabcontent role="presentation">␊
325+
<hx-tabpanel aria-expanded="false" role="tabpanel" id="android-desserts-panel-0" aria-labelledby="android-desserts-tab-0" open="" tabindex="0">␊
326+
<h3 class="hxSubSectionTitle">First Panel</h3>␊
327+
<div class="hxRow">␊
328+
<div class="hxCol hxSpan-6">␊
329+
<p>␊
330+
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps␊
331+
gummi bears liquorice cookie chupa chups fruitcake croissant␊
332+
chocolate topping. Brownie biscuit wafer marshmallow liquorice␊
333+
soufflé powder jelly.␊
334+
</p>␊
335+
</div>␊
336+
<div class="hxCol hxSpan-6">␊
337+
<p>␊
338+
Sweet roll sesame snaps danish I love jelly wafer dragée soufflé␊
339+
cake. Cookie chocolate cake gingerbread powder icing. Ice cream␊
340+
cotton candy gummi bears oat cake sweet pastry.␊
341+
</p>␊
342+
</div>␊
343+
</div>␊
344+
</hx-tabpanel>␊
345+
<hx-tabpanel aria-expanded="false" role="tabpanel" id="android-desserts-panel-1" aria-labelledby="marshmallow">␊
346+
<h3 class="hxSubSectionTitle">Second Panel</h3>␊
347+
<p>␊
348+
Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish␊
349+
caramels danish candy canes macaroon donut icing. Cupcake tiramisu␊
350+
soufflé fruitcake. Caramels muffin tootsie roll lemon drops bear claw␊
351+
cotton candy tootsie roll tootsie roll chupa chups. Pudding fruitcake␊
352+
ice cream marshmallow. Candy sugar plum chupa chups cotton candy␊
353+
gingerbread pastry gingerbread marshmallow wafer. Jelly-o bonbon␊
354+
dessert donut.␊
355+
</p>␊
356+
<p><a href="#">Link inside the panel</a></p>␊
357+
<p>␊
358+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie␊
359+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie␊
360+
apple pie chupa chups. Lemon drops caramels sugar plum. Sweet oat cake␊
361+
chocolate pudding cake toffee chocolate topping. Caramels caramels␊
362+
candy muffin topping toffee. Topping candy canes sesame snaps carrot␊
363+
cake dragée wafer jelly beans. Macaroon gummies tootsie roll cookie␊
364+
chocolate cake chocolate cake dragée cupcake. Wafer bonbon sweet roll␊
365+
sweet roll.␊
366+
</p>␊
367+
<p>␊
368+
Sugar plum bonbon tiramisu tart candy canes sesame snaps tiramisu.␊
369+
Soufflé chocolate bar macaroon sweet bear claw dragée muffin dragée␊
370+
jelly. Apple pie gummies cake tiramisu dessert ice cream sweet roll.␊
371+
Pie fruitcake dragée. Gummi bears pudding muffin tart. Cake liquorice␊
372+
cheesecake donut. Cake chocolate marshmallow marshmallow dragée cupcake␊
373+
chocolate cake chocolate. Candy canes chocolate sweet roll apple pie␊
374+
icing danish chocolate bar. Jujubes toffee gummies powder cupcake␊
375+
topping chocolate. Cake sugar plum fruitcake brownie.␊
376+
</p>␊
377+
</hx-tabpanel>␊
378+
<hx-tabpanel id="id-should-not-be-overwritten" aria-expanded="false" role="tabpanel" aria-labelledby="android-desserts-tab-2">␊
379+
<h3 class="hxSubSectionTitle">Third Panel</h3>␊
380+
<img src="http://via.placeholder.com/200x150">␊
381+
<img src="http://via.placeholder.com/200x150">␊
382+
<img src="http://via.placeholder.com/200x150">␊
383+
<img src="http://via.placeholder.com/200x150">␊
384+
<img src="http://via.placeholder.com/200x150">␊
385+
<img src="http://via.placeholder.com/200x150">␊
386+
<img src="http://via.placeholder.com/200x150">␊
387+
<img src="http://via.placeholder.com/200x150">␊
388+
<img src="http://via.placeholder.com/200x150">␊
389+
<img src="http://via.placeholder.com/200x150">␊
390+
<img src="http://via.placeholder.com/200x150">␊
391+
<img src="http://via.placeholder.com/200x150">␊
392+
</hx-tabpanel>␊
393+
</hx-tabcontent>␊
394+
</hx-tabset>␊
395+
</div>`

‎test/regression/generateRegressionTests.js.snap‎

1.26 KB
Binary file not shown.

‎test/visreg/tests/tabs.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {Snappit, WebDriver, Key} from "snappit-visual-regression";
2+
import {test, TestContext} from "ava";
3+
import * as util from "../../common/util";
4+
5+
const getTab = async (
6+
driver: WebDriver,
7+
tabName: string
8+
) => {
9+
const tab = await util.$x(driver, util.selectors.tab, tabName);
10+
return tab;
11+
}
12+
13+
const cycleLeft = async (driver: WebDriver) => {
14+
for (const _ of [0, 1, 2]) {
15+
await driver.actions().sendKeys(Key.ARROW_LEFT).perform();
16+
}
17+
}
18+
19+
const cycleRight = async (driver: WebDriver) => {
20+
for (const _ of [0, 1, 2]) {
21+
await driver.actions().sendKeys(Key.ARROW_RIGHT).perform();
22+
}
23+
}
24+
25+
export default async (
26+
t: TestContext,
27+
snappit: Snappit,
28+
driver: WebDriver,
29+
tabName: string
30+
) => {
31+
const tab = await getTab(driver, tabName);
32+
await tab.click();
33+
t.is(await tab.getText(), tabName);
34+
await cycleLeft(driver);
35+
t.is(await tab.getText(), tabName);
36+
await cycleRight(driver);
37+
t.is(await tab.getText(), tabName);
38+
await snappit.snap(`{browserName}/tabs/${tabName}`, snappit.$(util.selectors.visreg));
39+
}

‎test/visreg/visreg.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {$, snap, Snappit, IConfig, WebDriver} from "snappit-visual-regression";
1+
import {$, Snappit, IConfig, WebDriver} from "snappit-visual-regression";
22

33
import * as util from "../common/util";
4+
import tabTest from "./tests/tabs";
45
import {test} from "ava";
56

67
export function suite(browserName: string) {
@@ -27,24 +28,44 @@ export function suite(browserName: string) {
2728
});
2829

2930
test("nav", async () => {
30-
await snap("{browserName}/nav", $(util.selectors.nav));
31+
await snappit.snap("{browserName}/nav", $(util.selectors.nav));
3132
});
3233

3334
test("nav/guides", async () => {
3435
await util.$x(driver, "//nav//hx-disclosure", "Guides").click();
35-
await snap("{browserName}/nav/guides", $(util.selectors.nav));
36+
await snappit.snap("{browserName}/nav/guides", $(util.selectors.nav));
3637
});
3738

3839
test("nav/components", async () => {
3940
await util.$x(driver, "//nav//hx-disclosure", "Components").click();
40-
await snap("{browserName}/nav/components", $(util.selectors.nav));
41+
await snappit.snap("{browserName}/nav/components", $(util.selectors.nav));
4142
});
4243

4344
test("nav/custom-elements", async () => {
4445
await util.$x(driver, "//nav//hx-disclosure", "Custom Elements").click();
45-
await snap("{browserName}/nav/custom-elements", $(util.selectors.nav));
46+
await snappit.snap("{browserName}/nav/custom-elements", $(util.selectors.nav));
4647
});
4748

49+
/**
50+
* This is here because of https://github.com/SeleniumHQ/selenium/issues/3882
51+
* For the mean time, don't attempt to use keyboard navigation (in tabs) when
52+
* testing with Firefox. Chrome works just fine, however.
53+
*/
54+
if (browserName === "chrome") {
55+
test("tabs/first", async t => {
56+
await util.go(driver, "components/tabs");
57+
await tabTest(t, snappit, driver, "Cupcake Ipsum");
58+
});
59+
60+
test("tabs/second", async t => {
61+
await tabTest(t, snappit, driver, "Biscuit Marshmallow");
62+
});
63+
64+
test("tabs/third", async t => {
65+
await tabTest(t, snappit, driver, "Caramels Marzipan");
66+
});
67+
}
68+
4869
test.after.always(async () => {
4970
await snappit.stop();
5071
});

0 commit comments

Comments
 (0)