diff --git a/demo/src/methods/methods06.html b/demo/src/methods/methods06.html index a825d144..73f85d33 100644 --- a/demo/src/methods/methods06.html +++ b/demo/src/methods/methods06.html @@ -38,7 +38,7 @@

- @@ -49,7 +49,7 @@

- @@ -60,7 +60,7 @@

- diff --git a/demo/src/methods/methods07.html b/demo/src/methods/methods07.html index 3f8d3d96..af31af3c 100644 --- a/demo/src/methods/methods07.html +++ b/demo/src/methods/methods07.html @@ -38,7 +38,7 @@

- @@ -59,7 +59,7 @@

- diff --git a/demo/src/methods/methods08.html b/demo/src/methods/methods08.html index b87d6ff6..f681886a 100644 --- a/demo/src/methods/methods08.html +++ b/demo/src/methods/methods08.html @@ -34,7 +34,7 @@

- @@ -55,7 +55,7 @@

- diff --git a/playwright/e2e/events.spec.ts b/playwright/e2e/events.spec.ts new file mode 100644 index 00000000..3cff1a08 --- /dev/null +++ b/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') + ); + }); +}); diff --git a/playwright/e2e/i18n.spec.ts b/playwright/e2e/i18n.spec.ts new file mode 100644 index 00000000..bcefb738 --- /dev/null +++ b/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'); + }); +}); diff --git a/playwright/e2e/methods01.spec.ts b/playwright/e2e/methods01.spec.ts new file mode 100644 index 00000000..69a74ed2 --- /dev/null +++ b/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); + }); +}); diff --git a/playwright/e2e/methods02.spec.ts b/playwright/e2e/methods02.spec.ts new file mode 100644 index 00000000..89140736 --- /dev/null +++ b/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); + }); +}); diff --git a/playwright/e2e/methods03.spec.ts b/playwright/e2e/methods03.spec.ts new file mode 100644 index 00000000..10d5255a --- /dev/null +++ b/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'); + }); +}); diff --git a/playwright/e2e/methods04.spec.ts b/playwright/e2e/methods04.spec.ts new file mode 100644 index 00000000..1aa5876e --- /dev/null +++ b/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(); + }); +}); diff --git a/playwright/e2e/methods06.spec.ts b/playwright/e2e/methods06.spec.ts new file mode 100644 index 00000000..bfe18251 --- /dev/null +++ b/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' + ); + }); +}); diff --git a/playwright/e2e/methods07.spec.ts b/playwright/e2e/methods07.spec.ts new file mode 100644 index 00000000..12e337a6 --- /dev/null +++ b/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(); + }); +}); diff --git a/playwright/e2e/methods08.spec.ts b/playwright/e2e/methods08.spec.ts new file mode 100644 index 00000000..adac570a --- /dev/null +++ b/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(); + }); +}); diff --git a/playwright/e2e/methods09.spec.ts b/playwright/e2e/methods09.spec.ts new file mode 100644 index 00000000..f8c55901 --- /dev/null +++ b/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(); + }); +}); diff --git a/playwright/e2e/methods10.spec.ts b/playwright/e2e/methods10.spec.ts new file mode 100644 index 00000000..fe9863be --- /dev/null +++ b/playwright/e2e/methods10.spec.ts @@ -0,0 +1,34 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Methods 10 - refresh() method', () => { + test('adding new options with disabled or selected in select drop', async ({ page }) => { + await page.goto('#/methods10'); + await page.locator('.ms-parent').click(); + await expect(await page.locator('.ms-drop li label input[type=checkbox]')).toHaveCount(3); + await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText(''); + + await page.getByPlaceholder('Enter text').click(); + await page.getByPlaceholder('Enter text').fill('new disabled option'); + await page.locator('#refreshDisabled').check(); + await page.locator('#refreshSelected').check(); + await page.getByRole('button', { name: 'Add + Refresh' }).click(); + + await page.locator('.ms-parent').click(); + await expect(await page.locator('.ms-drop li label input[type=checkbox]')).toHaveCount(4); + let selectedLoc = await page.locator('.ms-drop li.selected'); + await expect(selectedLoc).toHaveCount(1); + await expect(await selectedLoc.locator('label')).toHaveClass('disabled'); + await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('new disabled option'); + + await page.getByPlaceholder('Enter text').click(); + await page.getByPlaceholder('Enter text').fill('enabled & unselected option'); + await page.locator('#refreshDisabled').uncheck(); + await page.locator('#refreshSelected').uncheck(); + await page.getByRole('button', { name: 'Add + Refresh' }).click(); + await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('new disabled option'); + await page.locator('.ms-parent').click(); + await expect(await page.locator('.ms-drop li label input[type=checkbox]')).toHaveCount(5); + selectedLoc = await page.locator('.ms-drop li.selected'); + await expect(selectedLoc).toHaveCount(1); + }); +}); diff --git a/playwright/e2e/methods11.spec.ts b/playwright/e2e/methods11.spec.ts new file mode 100644 index 00000000..f81da370 --- /dev/null +++ b/playwright/e2e/methods11.spec.ts @@ -0,0 +1,21 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Methods 11 - Destroy() method', () => { + test('destroy & recreating the ms-select could be called multiple times', async ({ page }) => { + await page.goto('#/methods11'); + await page.locator('.ms-parent').click(); + await page.getByRole('button', { name: 'Destroy' }).click(); + await expect(await page.locator('.ms-drop li input[type=checkbox]')).toHaveCount(0); + + await page.getByRole('button', { name: 'Build' }).click(); + await expect(await page.locator('.ms-drop li input[type=checkbox]')).toHaveCount(12); + await page.locator('.ms-parent').click(); + + await page.getByRole('button', { name: 'Destroy' }).click(); + await expect(await page.locator('.ms-drop li input[type=checkbox]')).toHaveCount(0); + + await page.getByRole('button', { name: 'Build' }).click(); + await page.locator('.ms-parent').click(); + await expect(await page.locator('.ms-drop li input[type=checkbox]')).toHaveCount(12); + }); +});