Skip to content

chore: add Examples & Options Playwright E2E tests #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 21, 2023
Merged

chore: add Examples & Options Playwright E2E tests #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
91e6a0c
chore: add Examples & Options Playwright E2E tests
ghiscoding Mar 19, 2023
e9d0afe
chore: improve playwright test to avoid flacky failures
ghiscoding Mar 19, 2023
c438f68
chore: add more Options E2E tests
ghiscoding Mar 21, 2023
1e278e1
chore: add full Options demo E2E test suite
ghiscoding Mar 21, 2023
7adad7d
chore: add full Examples & Options demo E2E test suite
ghiscoding Mar 21, 2023
23d12ca
chore: increase timeout to avoid flacky E2E test failure
ghiscoding Mar 21, 2023
8fa1426
chore: improve Playwright tests to avoid flackyness failure
ghiscoding Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demo/src/examples/example10.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="bd-title">
</label>

<div class="col-sm-10">
<select multiple="multiple" id="select" class="full-width">
<select multiple="multiple" data-test="select10" id="select" class="full-width">
</div>
</div>
</div>
6 changes: 3 additions & 3 deletions demo/src/examples/example11.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 class="bd-title">
<label class="col-sm-2 col-form-label col-form-label-sm"> Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control form-control-sm" placeholder="form-control-sm">
<select multiple="multiple" class="form-control form-control-sm" data-test="select1" placeholder="form-control-sm">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -47,7 +47,7 @@ <h2 class="bd-title">
<label class="col-sm-2 col-form-label"> Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control" placeholder="form-control">
<select multiple="multiple" class="form-control" data-test="select2" placeholder="form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -68,7 +68,7 @@ <h2 class="bd-title">
<label class="col-sm-2 col-form-label col-form-label-lg"> Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control form-control-lg" placeholder="form-control-lg">
<select multiple="multiple" class="form-control form-control-lg" data-test="select3" placeholder="form-control-lg">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand Down
2 changes: 1 addition & 1 deletion demo/src/examples/example13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="bd-title">
<label class="col-sm-3 text-end">Use Select Option Label & Render HTML</label>

<div class="col-sm-9">
<select id="select1" class="full-width"></select>
<select id="select1" class="full-width" data-test="select1"></select>
</div>
</div>
</div>
10 changes: 8 additions & 2 deletions demo/src/options/options01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ <h2 class="bd-title">
<label class="col-sm-2"> Via attribute </label>

<div class="col-sm-10">
<select id="select1" class="full-width" multiple="multiple" placeholder="Here is the placeholder via attribute">
<select
id="select1"
class="full-width"
data-test="select1"
multiple="multiple"
placeholder="Here is the placeholder via attribute"
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -49,7 +55,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Via options </label>

<div class="col-sm-10">
<select id="select2" class="full-width" multiple="multiple">
<select id="select2" class="full-width" data-test="select2" multiple="multiple">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand Down
6 changes: 3 additions & 3 deletions demo/src/options/options02.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 class="bd-title">
<label class="col-sm-3">Basic Select</label>

<div class="col-sm-9">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
Expand All @@ -39,7 +39,7 @@ <h2 class="bd-title">
<label class="col-sm-3">Group Select</label>

<div class="col-sm-9">
<select class="full-width">
<select class="full-width" data-test="select2">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand All @@ -63,7 +63,7 @@ <h2 class="bd-title">
<label class="col-sm-3">Single Select with Empty Option</label>

<div class="col-sm-9">
<select class="multiple-select full-width">
<select class="multiple-select full-width" data-test="select3">
<option value=""></option>
<option value="2">Second</option>
<option value="3">Third</option>
Expand Down
4 changes: 2 additions & 2 deletions demo/src/options/options07.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Single Select </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -55,7 +55,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Multiple Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select2">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand Down
8 changes: 4 additions & 4 deletions demo/src/options/options17.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="bd-title">

<div class="col-sm-10">
<div class="parent" style="overflow: hidden">
<select multiple="multiple" class="select1 full-width">
<select multiple="multiple" class="select1 full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -52,7 +52,7 @@ <h2 class="bd-title">

<div class="col-sm-10 my-container">
<div class="parent" style="overflow: hidden">
<select multiple="multiple" data-container=".my-container" class="select2 full-width">
<select multiple="multiple" data-container=".my-container" class="select2 full-width" data-test="select2">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -75,7 +75,7 @@ <h2 class="bd-title">

<div class="col-sm-10 my-container">
<div class="parent" style="overflow: hidden">
<select multiple="multiple" class="select3 full-width">
<select multiple="multiple" class="select3 full-width" data-test="select3">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -98,7 +98,7 @@ <h2 class="bd-title">

<div class="col-sm-10">
<div class="parent" style="overflow: hidden">
<select multiple="multiple" class="select4 full-width">
<select multiple="multiple" class="select4 full-width" data-test="select4">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand Down
8 changes: 4 additions & 4 deletions demo/src/options/options18.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Single Select </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand Down Expand Up @@ -66,7 +66,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Single Group </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select2">
<optgroup label="Group 10">
<option value="1">000</option>
<option value="2">111</option>
Expand Down Expand Up @@ -121,7 +121,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select3">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand Down Expand Up @@ -161,7 +161,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select4">
<optgroup label="Group 10">
<option value="1">000</option>
<option value="2">111</option>
Expand Down
2 changes: 1 addition & 1 deletion demo/src/options/options19.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2 class="bd-title">
<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<optgroup label="Group A">
<option value="1">000</option>
<option value="1" disabled>000</option>
<option value="2">111</option>
<option value="3">222</option>
<option value="4">333</option>
Expand Down
4 changes: 2 additions & 2 deletions demo/src/options/options21.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Single Select </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand Down Expand Up @@ -69,7 +69,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Multiple Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select2">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand Down
8 changes: 4 additions & 4 deletions demo/src/options/options22.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand All @@ -47,7 +47,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Multiple Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select2">
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
Expand Down Expand Up @@ -80,7 +80,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select3">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand All @@ -105,7 +105,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select2 </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select4">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand Down
8 changes: 4 additions & 4 deletions demo/src/options/options24.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Single Select </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -47,7 +47,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Single </label>

<div class="col-sm-10">
<select class="full-width">
<select class="full-width" data-test="select2">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand All @@ -71,7 +71,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select3">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -92,7 +92,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select4">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand Down
8 changes: 4 additions & 4 deletions demo/src/options/options25.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Multiple Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="select1 full-width">
<select multiple="multiple" class="select1 full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -50,7 +50,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="select2 full-width">
<select multiple="multiple" class="select2 full-width" data-test="select2">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand All @@ -74,7 +74,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Multiple Select with Filter </label>

<div class="col-sm-10">
<select multiple="multiple" class="select3 full-width">
<select multiple="multiple" class="select3 full-width" data-test="select3">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -95,7 +95,7 @@ <h2 class="bd-title">
<label class="col-sm-2">Single Select</label>

<div class="col-sm-10">
<select class="select4 full-width">
<select class="select4 full-width" data-test="select4">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
Expand Down
4 changes: 2 additions & 2 deletions demo/src/options/options26.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select id="basic" multiple="multiple" class="full-width">
<select id="basic" multiple="multiple" class="full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -47,7 +47,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Group Select </label>

<div class="col-sm-10">
<select id="group" multiple="multiple" class="full-width">
<select id="group" multiple="multiple" class="full-width" data-test="select2">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
Expand Down
5 changes: 4 additions & 1 deletion demo/src/options/options27.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ <h2 class="bd-title">
</span>
</span>
</h2>
<div class="demo-subtitle">Use <code>textTemplate</code> to customize the text template.</div>
<div class="demo-subtitle">
Use <code>textTemplate</code> to customize the text template and <code>renderOptionLabelAsHtml</code> to render selected
labels as HTML.
</div>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions demo/src/options/options27.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default class Example {

mount() {
this.ms1 = multipleSelect('select', {
renderOptionLabelAsHtml: true, // without this flag, html code will be showing as plain text
textTemplate: (el) => {
return '<i class="fa fa-star"></i>' + el.innerHTML;
},
Expand Down
5 changes: 4 additions & 1 deletion demo/src/options/options28.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ <h2 class="bd-title">
</span>
</span>
</h2>
<div class="demo-subtitle">Use <code>labelTemplate</code> to custom the optgroup label template.</div>
<div class="demo-subtitle">
Use <code>labelTemplate</code> to custom the optgroup label template and <code>renderOptionLabelAsHtml</code> to render
selected labels as HTML.
</div>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions demo/src/options/options28.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default class Example {

mount() {
this.ms1 = multipleSelect('select', {
renderOptionLabelAsHtml: true, // without this flag, html code will be showing as plain text
labelTemplate: (el) => {
return '<i class="fa fa-star"></i>' + el.getAttribute('label');
},
Expand Down
4 changes: 2 additions & 2 deletions demo/src/options/options29.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -49,7 +49,7 @@ <h2 class="bd-title">
<label class="col-sm-2"> Basic Select </label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<select multiple="multiple" class="full-width" data-test="select2">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand Down
Loading