chore: add Examples & Options Playwright E2E tests (#32)

* chore: add Examples & Options Playwright E2E tests suite
* fix: add new `renderOptionLabelAsHtml` option to render selected options as html
* feat: add `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing

Author: ghiscoding

demo/src/examples/example10.html

@@ -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>

demo/src/examples/example11.html

@@ -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>
@@ -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>
@@ -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>

demo/src/examples/example13.html

@@ -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>

demo/src/options/options01.html

@@ -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>
@@ -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>

demo/src/options/options02.html

@@ -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>
@@ -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>
@@ -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>

demo/src/options/options07.html

@@ -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>
@@ -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>

demo/src/options/options17.html

@@ -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>
@@ -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>
@@ -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>
@@ -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>

demo/src/options/options18.html

@@ -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>
@@ -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>
@@ -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>
@@ -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>

demo/src/options/options19.html

@@ -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>

demo/src/options/options21.html

@@ -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>
@@ -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>