chore: add Playwright full test coverage

demo/src/methods/methods06.html

@@ -38,7 +38,7 @@ <h2 class="bd-title">
     <label class="col-sm-2"> Single Select </label>
 
     <div class="col-sm-10">
-      <select>
+      <select data-test="select1">
         <option value="1">Value 1</option>
         <option value="2">Value 2</option>
       </select>
@@ -49,7 +49,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" selected>Value 1</option>
         <option value="2">Value 2</option>
       </select>
@@ -60,7 +60,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" selected>Value 1</option>
           <option value="2">Value 2</option>

demo/src/methods/methods07.html

@@ -38,7 +38,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>
@@ -59,7 +59,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="select2">
         <optgroup label="Group 1">
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>

demo/src/methods/methods08.html

@@ -34,7 +34,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>
@@ -55,7 +55,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="select2">
         <optgroup label="Group 1">
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>

playwright/e2e/events.spec.ts

@@ -0,0 +1,78 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Events Demo', () => {
+  test('executing multiple actions with ms-select should fire multiple events', async ({ page }) => {
+    await page.goto('#/events');
+    let textareaLoc = await page.locator('textarea');
+    await expect(textareaLoc).toHaveText('onAfterCreate event fire!');
+    await page.locator('.ms-parent').click();
+    await expect(textareaLoc).toHaveText(
+      'onAfterCreate event fire!\nonFocus event fire!\nonBlur event fire!\nonOpen event fire!'
+    );
+
+    // close the drop
+    await page.locator('.ms-parent').click();
+    await expect(textareaLoc).toHaveText(
+      [
+        'onAfterCreate event fire!',
+        'onFocus event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onFocus event fire!',
+        'onClose event fire!',
+      ].join('\n')
+    );
+
+    // open the drop & select 1st group
+    await page.locator('.ms-parent').click();
+    await page.getByText('Group 1').click();
+    await expect(textareaLoc).toHaveText(
+      [
+        'onAfterCreate event fire!',
+        'onFocus event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onFocus event fire!',
+        'onClose event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+      ].join('\n')
+    );
+
+    await page.locator('.ms-drop .ms-select-all input[type=checkbox]').check();
+    await expect(textareaLoc).toHaveText(
+      [
+        'onAfterCreate event fire!',
+        'onFocus event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onFocus event fire!',
+        'onClose event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onCheckAll event fire!',
+      ].join('\n')
+    );
+
+    await page.locator('.ms-search input').fill('1');
+    await page.keyboard.press('Enter');
+    await expect(textareaLoc).toHaveText(
+      [
+        'onAfterCreate event fire!',
+        'onFocus event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onFocus event fire!',
+        'onClose event fire!',
+        'onBlur event fire!',
+        'onOpen event fire!',
+        'onOptgroupClick event fire! view: {"label":"Group 1","selected":true,"children":[null,{"text":"Option 1","value":"1","selected":true,"disabled":false},null,{"text":"Option 2","value":"2","selected":true,"disabled":false},null,{"text":"Option 3","value":"3","selected":true,"disabled":false},null]}',
+        'onCheckAll event fire!',
+        'onCheckAll event fire!',
+        'onFilter event fire! text: 1',
+      ].join('\n')
+    );
+  });
+});

playwright/e2e/i18n.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('I18N Demo', () => {
+  test('select drop is using French locale', async ({ page }) => {
+    await page.goto('#/i18n');
+    await page.locator('.ms-parent').click();
+    await page.getByText('[Tout sélectionner]').click();
+    await page.locator('span').filter({ hasText: 'Février' }).click();
+    await page.locator('span').filter({ hasText: 'Janvier' }).click();
+    await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('10 de 12 sélectionnés');
+    await page.locator('.ms-search input').fill('janv');
+    await page.keyboard.press('Enter');
+    await page.locator('span').filter({ hasText: 'Janvier' }).click();
+    await page.getByText('[Tout sélectionner]').click();
+    await page.getByRole('button', { name: 'Fermer' }).click();
+    await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('10 de 12 sélectionnés');
+  });
+});

playwright/e2e/methods01.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+function jsonNewLine(input) {
+  input.replace('');
+  return '\n    ';
+}
+
+test.describe('Methods 01 - getOptions()', () => {
+  test('method returns default options when calling the method', async ({ page }) => {
+    let dialogText = '';
+    page.on('dialog', async (alert) => {
+      dialogText = alert.message();
+      await alert.dismiss();
+    });
+
+    await page.goto('#/methods01');
+    await page.getByRole('button', { name: 'getOptions' }).click();
+    const strArray = [
+      `{`,
+      `"name": "",`,
+      `"placeholder": "",`,
+      `"selectAll": true,`,
+      `"single": false,`,
+      `"singleRadio": false,`,
+      `"multiple": false,`,
+      `"hideOptgroupCheckboxes": false,`,
+      `"multipleWidth": 80,`,
+      `"maxHeight": 250,`,
+      `"maxHeightUnit": "px",`,
+      `"position": "bottom",`,
+      `"displayValues": false,`,
+      `"displayTitle": false,`,
+      `"displayDelimiter": ", ",`,
+      `"minimumCountSelected": 3,`,
+      `"ellipsis": false,`,
+      `"isOpen": false,`,
+      `"keepOpen": false,`,
+      `"openOnHover": false,`,
+      `"container": null,`,
+      `"filter": true,`,
+      `"filterGroup": false,`,
+      `"filterPlaceholder": "",`,
+      `"filterAcceptOnEnter": false,`,
+      `"showClear": false,`,
+      `"autoAdjustDropHeight": false,`,
+      `"autoAdjustDropPosition": false,`,
+      `"autoAdjustDropWidthByTextSize": false,`,
+      `"adjustedHeightPadding": 10,`,
+      `"useSelectOptionLabel": false,`,
+      `"useSelectOptionLabelToHtml": false\n}`,
+    ].join('\n    ');
+    await expect(dialogText).toContain(strArray);
+  });
+});

playwright/e2e/methods02.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 02 - refreshOtions()', () => {
+  test('calling the method will remove the search filter', async ({ page }) => {
+    await page.goto('#/methods02');
+    await page.locator('.ms-parent').click();
+    let searchLoc = await page.locator('.ms-drop .ms-search input');
+    expect(searchLoc).toHaveCount(1);
+    await searchLoc.focus();
+    await searchLoc.fill('1');
+    await page.locator('label').filter({ hasText: 'text1' }).click();
+
+    await page.getByRole('button', { name: 'refreshOptions' }).click();
+    searchLoc = await page.locator('.ms-drop .ms-search input');
+    expect(searchLoc).toHaveCount(0);
+  });
+});

playwright/e2e/methods03.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 03 - setSelects() / getSelects()', () => {
+  test('calling setSelects(1,3) and expect values & options to be displayed in alert', async ({ page }) => {
+    let dialogTexts: string[] = [];
+    page.on('dialog', async (alert) => {
+      dialogTexts.push(alert.message());
+      await alert.dismiss();
+    });
+
+    await page.goto('#/methods03');
+    await page.getByRole('button', { name: 'SetSelects' }).click();
+    await page.getByRole('button', { name: 'GetSelects' }).click();
+    expect(dialogTexts[0]).toBe('Selected values: 1,3');
+    expect(dialogTexts[1]).toBe('Selected texts: January,March');
+  });
+});

playwright/e2e/methods04.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 04 - enable/disable', () => {
+  test('disabling & enabling drop dynamically', async ({ page }) => {
+    await page.goto('#/methods04');
+    await page.locator('.ms-parent').click();
+    await expect(await page.locator('.ms-drop')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Disable' }).click();
+    await expect(await page.locator('.ms-choice')).toHaveClass('ms-choice disabled');
+    await page.locator('.ms-parent').click();
+    await expect(await page.locator('.ms-drop')).not.toBeVisible();
+
+    await page.getByRole('button', { name: 'Enable' }).click();
+    await expect(await page.locator('.ms-choice')).toHaveClass('ms-choice');
+    await page.locator('.ms-parent').click();
+    await expect(await page.locator('.ms-drop')).toBeVisible();
+  });
+});

playwright/e2e/methods06.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 06 - check/uncheck', () => {
+  test('clicking Check(2) and Uncheck(2) should change selection on all select drops', async ({ page }) => {
+    await page.goto('#/methods06');
+    await page.locator('[data-test=select1]').getByRole('button', { name: 'Value 1' });
+    await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1' });
+    await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1], [Group 2: Value 3]' });
+
+    // click on Check(2)
+    await page.getByRole('button', { name: 'Check', exact: true }).click();
+    await page.locator('[data-test=select1]').getByRole('button', { name: 'Value 2' });
+    await expect(await page.locator('[data-test=select1].ms-drop li.selected label span')).toHaveText('Value 2');
+
+    await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1, Value 2' });
+    await expect(await page.locator('[data-test=select2].ms-drop li.selected')).toHaveCount(2);
+    await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
+      'Value 1'
+    );
+    await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
+      'Value 2'
+    );
+
+    await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1, Value 2], [Group 2: Value 3]' });
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected')).toHaveCount(4);
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(0).locator('label.optgroup')).toHaveText(
+      'Group 1'
+    );
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
+      'Value 1'
+    );
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(2).locator('label span')).toHaveText(
+      'Value 2'
+    );
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(3).locator('label span')).toHaveText(
+      'Value 3'
+    );
+
+    // click on Uncheck(2)
+    await page.getByRole('button', { name: 'Uncheck' }).click();
+    await page.locator('[data-test=select1]').getByRole('button', { name: '' });
+    await expect(await page.locator('[data-test=select1].ms-drop li.selected')).toHaveCount(0);
+
+    await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1' });
+    await expect(await page.locator('[data-test=select2].ms-drop li.selected')).toHaveCount(1);
+    await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
+      'Value 1'
+    );
+
+    await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1], [Group 2: Value 3]' });
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected')).toHaveCount(2);
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
+      'Value 1'
+    );
+    await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
+      'Value 3'
+    );
+  });
+});

playwright/e2e/methods07.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 07 - checkAll/uncheckAll', () => {
+  test('calling checkAll/uncheckAll should be reflected in the select dropdown', async ({ page }) => {
+    await page.goto('#/methods07');
+    await expect(await page.locator('[data-test=select1].ms-parent .ms-choice span')).toHaveText('');
+    await expect(await page.locator('[data-test=select2].ms-parent .ms-choice span')).toHaveText('');
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+
+    await page.getByRole('button', { name: 'Check All', exact: true }).click();
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).toBeChecked();
+
+    await page.getByRole('button', { name: 'Uncheck All' }).click();
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+  });
+});

playwright/e2e/methods08.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 08 - checkAll/uncheckAll', () => {
+  test('calling checkAll/uncheckAll should be reflected in the select dropdown', async ({ page }) => {
+    await page.goto('#/methods08');
+    await expect(await page.locator('[data-test=select1].ms-parent .ms-choice span')).toHaveText('');
+    await expect(await page.locator('[data-test=select2].ms-parent .ms-choice span')).toHaveText('');
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+
+    await page.getByRole('button', { name: 'Check Invert', exact: true }).click();
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).toBeChecked();
+
+    await page.getByRole('button', { name: 'Check Invert' }).click();
+    await expect(await page.locator('[data-test=select1].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+    await expect(await page.locator('[data-test=select2].ms-drop .ms-select-all input[type=checkbox]')).not.toBeChecked();
+  });
+});

playwright/e2e/methods09.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Methods 09 - focus/blur methods', () => {
+  test('calling focus or blur method should apply it to the input', async ({ page }) => {
+    await page.goto('#/methods09');
+    await page.getByRole('button', { name: 'Focus' }).click();
+    await page.locator('.ms-parent').press('Enter');
+    await page.getByRole('button', { name: 'Blur' }).click();
+    await page.getByRole('button', { name: 'Blur' }).press('Enter');
+    await page.getByRole('button', { name: 'Focus' }).click();
+    await page.locator('.ms-parent').press('Enter');
+    await page.getByRole('button', { name: 'Blur' }).click();
+  });
+});