8000 test: migrate to vitest and playwright (#203) · reidmore-online/makeup-js@67343d9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 67343d9

Browse files
saiponnadasaiponnada
authored
test: migrate to vitest and playwright (makeup#203)
1 parent a1f2b4f commit 67343d9

File tree

60 files changed

+5580
-2209
lines changed

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Tests
2+
3+
on:
4+
push:
5+
branches: [master]
6+
pull_request:
7+
branches: [master]
8+
9+
jobs:
10+
test:
11+
timeout-minutes: 60
12+
runs-on: ubuntu-latest
13+
steps:
14+
- name: Clone repository
15+
uses: actions/checkout@v4
16+
17+
- name: Set Node.js version
18+
uses: actions/setup-node@v4
19+
with:
20+
node-version: lts/*
21+
22+
- name: Install npm dependencies
23+
run: npm install
24+
25+
- name: Install Playwright Browsers
26+
run: npx playwright install --with-deps
27+
28+
- name: Run core unit tests
29+
run: npm run test:coverage
30+
31+
- name: Run browser tests
32+
run: npx playwright test
33+
34+
- name: Coveralls
35+
uses: coverallsapp/github-action@master
36+
with:
37+
github-token: ${{ secrets.GITHUB_TOKEN }}

Original file line numberDiff line numberDiff line change
@@ -6,3 +6,9 @@ node_modules
66
coverage
77
.DS_Store
88
.idea/
9+
10+
# Playwright
11+
/test-results/
12+
/playwright-report/
13+
/blob-report/
14+
/playwright/.cache/

Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ <h3>Unselected, Floating label</h3>
329329

330330
<h3>Unselected - with descripton</h3>
331331

332-
<div class="listbox-button" data-makeup-auto-select="false">
332+
<div class="listbox-button" data-makeup-auto-select="true">
333333
<button
334334
class="btn btn--form"
335335
style="min-width: 175px"

Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ <h2 id="menu-button-2A">Single-Select Menu Button (no default)</h2>
6060
<div class="menu-button__items" role="menu">
6161
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
6262
<span>Menu Item 1</span>
63-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
63+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
6464
<use href="../../icons.svg#icon-tick-16"></use>
6565
</svg>
6666
</div>
6767
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
6868
<span>Menu Item 2</span>
69-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
69+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
7070
<use href="../../icons.svg#icon-tick-16"></use>
7171
</svg>
7272
</div>
@@ -78,13 +78,13 @@ <h2 id="menu-button-2A">Single-Select Menu Button (no default)</h2>
7878
aria-disabled="true"
7979
>
8080
<span>Menu Item 3</span>
81-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
81+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
8282
<use href="../../icons.svg#icon-tick-16"></use>
8383
</svg>
8484
</div>
8585
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
8686
<span>Menu Item 4</span>
87-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
87+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
8888
<use href="../../icons.svg#icon-tick-16"></use>
8989
</svg>
9090
</div>
@@ -108,13 +108,13 @@ <h2 id="menu-button-2B">Single-Select Menu Button</h2>
108108
<div class="menu-button__items" role="menu">
109109
<div class="menu-button__item" role="menuitemradio" aria-checked="true" data-makeup-group="sort">
110110
<span>Menu Item 1</span>
111-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
111+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
112112
<use href="../../icons.svg#icon-tick-16"></use>
113113
</svg>
114114
</div>
115115
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
116116
<span>Menu Item 2</span>
117-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
117+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
118118
<use href="../../icons.svg#icon-tick-16"></use>
119119
</svg>
120120
</div>
@@ -126,13 +126,13 @@ <h2 id="menu-button-2B">Single-Select Menu Button</h2>
126126
aria-disabled="true"
127127
>
128128
<span>Menu Item 3</span>
129-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
129+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
130130
<use href="../../icons.svg#icon-tick-16"></use>
131131
</svg>
132132
</div>
133133
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
134134
<span>Menu Item 4</span>
135-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
135+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
136136
<use href="../../icons.svg#icon-tick-16"></use>
137137
</svg>
138138
</div>
@@ -155,13 +155,13 @@ <h2 id="menu-button-2C">Single-Select Menu Button with Stateful Label</h2>
155155
<div class="menu-button__items" role="menu">
156156
<div class="menu-button__item" role="menuitemradio" data-makeup-group="sort" aria-checked="true">
157157
<span>Name</span>
158-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
158+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
159159
<use href="../../icons.svg#icon-tick-16"></use>
160160
</svg>
161161
</div>
162162
<div class="menu-button__item" role="menuitemradio" data-makeup-group="sort" aria-checked="false">
163163
<span>Date</span>
164-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
164+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
165165
<use href="../../icons.svg#icon-tick-16"></use>
166166
</svg>
167167
</div>
@@ -173,13 +173,13 @@ <h2 id="menu-button-2C">Single-Select Menu Button with Stateful Label</h2>
173173
aria-disabled="true"
174174
>
175175
<span>Price</span>
176-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
176+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
177177
<use href="../../icons.svg#icon-tick-16"></use>
178178
</svg>
179179
</div>
180180
<div class="menu-button__item" role="menuitemradio" data-makeup-group="sort" aria-checked="false">
181181
<span>Time Left</span>
182-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
182+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
183183
<use href="../../icons.svg#icon-tick-16"></use>
184184
</svg>
185185
</div>
@@ -211,7 +211,7 @@ <h2 id="menu-button-2D">Single-Select Menu Button with Icons</h2>
211211
</svg>
212212
<span>AMEX</span>
213213
</div>
214-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
214+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
215215< 384B code class="diff-text syntax-highlighted-line">
<use href="../../icons.svg#icon-tick-16"></use>
216216
</svg>
217217
</div>
@@ -222,7 +222,7 @@ <h2 id="menu-button-2D">Single-Select Menu Button with Icons</h2>
222222
</svg>
223223
<span>VISA</span>
224224
</div>
225-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
225+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
226226
<use href="../../icons.svg#icon-tick-16"></use>
227227
</svg>
228228
</div>
@@ -239,7 +239,7 @@ <h2 id="menu-button-2D">Single-Select Menu Button with Icons</h2>
239239
</svg>
240240
<span>Master Card</span>
241241
</div>
242-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
242+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
243243
<use href="../../icons.svg#icon-tick-16"></use>
244244
</svg>
245245
</div>
@@ -272,7 +272,7 @@ <h2 id="menu-button-2E">Single-Select Menu Button with Icon and custom aria-Labe
272272
<span>AMEX</span>
273273
<span>Extra Info</span>
274274
</div>
275-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
275+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
276276
<use href="../../icons.svg#icon-tick-16"></use>
277277
</svg>
278278
</div>
@@ -284,7 +284,7 @@ <h2 id="menu-button-2E">Single-Select Menu Button with Icon and custom aria-Labe
284284
<span>VISA</span>
285285
<span>Extra Info</span>
286286
</div>
287-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
287+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
288288
<use href="../../icons.svg#icon-tick-16"></use>
289289
</svg>
290290
</div>
@@ -302,7 +302,7 @@ <h2 id="menu-button-2E">Single-Select Menu Button with Icon and custom aria-Labe
302302
<span>Master Card</span>
303303
<span>Extra Info</span>
304304
</div>
305-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
305+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
306306
<use href="../../icons.svg#icon-tick-16"></use>
307307
</svg>
308308
</div>
@@ -335,7 +335,7 @@ <h2 id="menu-button-2F">Single-Select Menu Button with Icons and Text</h2>
335335
</svg>
336336
<span>AMEX</span>
337337
</div>
338-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
338+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
339339
<use href="../../icons.svg#icon-tick-16"></use>
340340
</svg>
341341
</div>
@@ -346,7 +346,7 @@ <h2 id="menu-button-2F">Single-Select Menu Button with Icons and Text</h2>
346346
</svg>
347347
<span>VISA</span>
348348
</div>
349-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
349+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
350350
<use href="../../icons.svg#icon-tick-16"></use>
351351
</svg>
352352
</div>
@@ -363,7 +363,7 @@ <h2 id="menu-button-2F">Single-Select Menu Button with Icons and Text</h2>
363363
</svg>
364364
<span>Master Card</span>
365365
</div>
366-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
366+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
367367
<use href="../../icons.svg#icon-tick-16"></use>
368368
</svg>
369369
</div>
@@ -387,13 +387,13 @@ <h2 id="menu-button-3">Multi-Select Menu Button</h2>
387387
<div class="menu-button__items" role="menu">
388388
<div class="menu-button__item" role="menuitemcheckbox" data-makeup-group="filter" aria-checked="true">
389389
<span>Menu Item 1</span>
390-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
390+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
391391
<use href="../../icons.svg#icon-tick-16"></use>
392392
</svg>
393393
</div>
394394
<div class="menu-button__item" role="menuitemcheckbox" data-makeup-group="filter" aria-checked="true">
395395
<span>Menu Item 2</span>
396-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
396+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
397397
<use href="../../icons.svg#icon-tick-16"></use>
398398
</svg>
399399
</div>
@@ -405,13 +405,13 @@ <h2 id="menu-button-3">Multi-Select Menu Button</h2>
405405
aria-disabled="true"
406406
>
407407
<span>Menu Item 3</span>
408-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
408+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
409409
<use href="../../icons.svg#icon-tick-16"></use>
410410
</svg>
411411
</div>
412412
<div class="menu-button__item" role="menuitemcheckbox" data-makeup-group="filter" aria-checked="false">
413413
<span>Menu Item 4</span>
414-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
414+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
415415
<use href="../../icons.svg#icon-tick-16"></use>
416416
</svg>
417417
</div>
@@ -441,7 +441,7 @@ <h2 id="menu-button-4">Grouped Menu Button</h2>
441441

442442
<div class="menu-button__item" role="menuitemradio" aria-checked="true" data-makeup-group="sort">
443443
<span>Menu Item B1</span>
444-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
444+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
445445
<use href="../../icons.svg#icon-tick-16"></use>
446446
</svg>
447447
</div>
@@ -453,13 +453,13 @@ <h2 id="menu-button-4">Grouped Menu Button</h2>
453453
aria-disabled="true"
454454
>
455455
<span>Menu Item B2</span>
456-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
456+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
457457
<use href="../../icons.svg#icon-tick-16"></use>
458458
</svg>
459459
</div>
460460
<div class="menu-button__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
461461
<span>Menu Item B3</span>
462-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
462+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
463463
<use href="../../icons.svg#icon-tick-16"></use>
464464
</svg>
465465
</div>
@@ -468,13 +468,13 @@ <h2 id="menu-button-4">Grouped Menu Button</h2>
468468

469469
<div class="menu-button__item" role="menuitemcheckbox" data-makeup-group="filter" aria-checked="true">
470470
<span>Menu Item C1</span>
471-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
471+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
472472
<use href="../../icons.svg#icon-tick-16"></use>
473473
</svg>
474474
</div>
475475
<div class="menu-button__item" role="menuitemcheckbox" data-makeup-group="filter" aria-checked="true">
476476
<span>Menu Item C2</span>
477-
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
477+
<svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
478478
<use href="../../icons.svg#icon-tick-16"></use>
479479
</svg>
480480
</div>