Skip to content

Commit a72269d

Browse files
ghiscodingghiscoding
authored
chore: add Playwright full test coverage (#34)
- this PR adds E2E tests for all demos
1 parent c36cf45 commit a72269d

15 files changed

+376
-7
lines changed

‎demo/src/methods/methods06.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h2 class="bd-title">
3838
<label class="col-sm-2"> Single Select </label>
3939

4040
<div class="col-sm-10">
41-
<select>
41+
<select data-test="select1">
4242
<option value="1">Value 1</option>
4343
<option value="2">Value 2</option>
4444
</select>
@@ -49,7 +49,7 @@ <h2 class="bd-title">
4949
<label class="col-sm-2"> Multiple Select </label>
5050

5151
<div class="col-sm-10">
52-
<select multiple="multiple" class="full-width">
52+
<select multiple="multiple" class="full-width" data-test="select2">
5353
<option value="1" selected>Value 1</option>
5454
<option value="2">Value 2</option>
5555
</select>
@@ -60,7 +60,7 @@ <h2 class="bd-title">
6060
<label class="col-sm-2"> Group Select </label>
6161

6262
<div class="col-sm-10">
63-
<select multiple="multiple" class="full-width">
63+
<select multiple="multiple" class="full-width" data-test="select3">
6464
<optgroup label="Group 1">
6565
<option value="1" selected>Value 1</option>
6666
<option value="2">Value 2</option>

‎demo/src/methods/methods07.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h2 class="bd-title">
3838
<label class="col-sm-2"> Basic Select </label>
3939

4040
<div class="col-sm-10">
41-
<select multiple="multiple" class="full-width">
41+
<select multiple="multiple" class="full-width" data-test="select1">
4242
<option value="1">January</option>
4343
<option value="2">February</option>
4444
<option value="3">March</option>
@@ -59,7 +59,7 @@ <h2 class="bd-title">
5959
<label class="col-sm-2"> Group Select </label>
6060

6161
<div class="col-sm-10">
62-
<select multiple="multiple" class="full-width">
62+
<select multiple="multiple" class="full-width" data-test="select2">
6363
<optgroup label="Group 1">
6464
<option value="1">Option 1</option>
6565
<option value="2">Option 2</option>

‎demo/src/methods/methods08.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h2 class="bd-title">
3434
<label class="col-sm-2"> Basic Select </label>
3535

3636
<div class="col-sm-10">
37-
<select multiple="multiple" class="full-width">
37+
<select multiple="multiple" class="full-width" data-test="select1">
3838
<option value="1">January</option>
3939
<option value="2">February</option>
4040
<option value="3">March</option>
@@ -55,7 +55,7 @@ <h2 class="bd-title">
5555
<label class="col-sm-2"> Group Select </label>
5656

5757
<div class="col-sm-10">
58-
<select multiple="multiple" class="full-width">
58+
<select multiple="multiple" class="full-width" data-test="select2">
5959
<optgroup label="Group 1">
6060
<option value="1">Option 1</option>
6161
<option value="2">Option 2</option>

‎playwright/e2e/events.spec.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Events Demo', () => {
4+
test('executing multiple actions with ms-select should fire multiple events', async ({ page }) => {
5+
await page.goto('#/events');
6+
let textareaLoc = await page.locator('textarea');
7+
await expect(textareaLoc).toHaveText('onAfterCreate event fire!');
8+
await page.locator('.ms-parent').click();
9+
await expect(textareaLoc).toHaveText(
10+
'onAfterCreate event fire!\nonFocus event fire!\nonBlur event fire!\nonOpen event fire!'
11+
);
12+
13+
// close the drop
14+
await page.locator('.ms-parent').click();
15+
await expect(textareaLoc).toHaveText(
16+
[
17+
'onAfterCreate event fire!',
18+
'onFocus event fire!',
19+
'onBlur event fire!',
20+
'onOpen event fire!',
21+
'onFocus event fire!',
22+
'onClose event fire!',
23+
].join('\n')
24+
);
25+
26+
// open the drop & select 1st group
27+
await page.locator('.ms-parent').click();
28+
await page.getByText('Group 1').click();
29+
await expect(textareaLoc).toHaveText(
30+
[
31+
'onAfterCreate event fire!',
32+
'onFocus event fire!',
33+
'onBlur event fire!',
34+
'onOpen event fire!',
35+
'onFocus event fire!',
36+
'onClose event fire!',
37+
'onBlur event fire!',
38+
'onOpen event fire!',
39+
'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]}',
40+
].join('\n')
41+
);
42+
43+
await page.locator('.ms-drop .ms-select-all input[type=checkbox]').check();
44+
await expect(textareaLoc).toHaveText(
45+
[
46+
'onAfterCreate event fire!',
47+
'onFocus event fire!',
48+
'onBlur event fire!',
49+
'onOpen event fire!',
50+
'onFocus event fire!',
51+
'onClose event fire!',
52+
'onBlur event fire!',
53+
'onOpen event fire!',
54+
'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]}',
55+
'onCheckAll event fire!',
56+
].join('\n')
57+
);
58+
59+
await page.locator('.ms-search input').fill('1');
60+
await page.keyboard.press('Enter');
61+
await expect(textareaLoc).toHaveText(
62+
[
63+
'onAfterCreate event fire!',
64+
'onFocus event fire!',
65+
'onBlur event fire!',
66+
'onOpen event fire!',
67+
'onFocus event fire!',
68+
'onClose event fire!',
69+
'onBlur event fire!',
70+
'onOpen event fire!',
71+
'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]}',
72+
'onCheckAll event fire!',
73+
'onCheckAll event fire!',
74+
'onFilter event fire! text: 1',
75+
].join('\n')
76+
);
77+
});
78+
});

‎playwright/e2e/i18n.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('I18N Demo', () => {
4+
test('select drop is using French locale', async ({ page }) => {
5+
await page.goto('#/i18n');
6+
await page.locator('.ms-parent').click();
7+
await page.getByText('[Tout sélectionner]').click();
8+
await page.locator('span').filter({ hasText: 'Février' }).click();
9+
await page.locator('span').filter({ hasText: 'Janvier' }).click();
10+
await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('10 de 12 sélectionnés');
11+
await page.locator('.ms-search input').fill('janv');
12+
await page.keyboard.press('Enter');
13+
await page.locator('span').filter({ hasText: 'Janvier' }).click();
14+
await page.getByText('[Tout sélectionner]').click();
15+
await page.getByRole('button', { name: 'Fermer' }).click();
16+
await expect(await page.locator('.ms-parent .ms-choice span')).toHaveText('10 de 12 sélectionnés');
17+
});
18+
});

‎playwright/e2e/methods01.spec.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
function jsonNewLine(input) {
4+
input.replace('');
5+
return '\n ';
6+
}
7+
8+
test.describe('Methods 01 - getOptions()', () => {
9+
test('method returns default options when calling the method', async ({ page }) => {
10+
let dialogText = '';
11+
page.on('dialog', async (alert) => {
12+
dialogText = alert.message();
13+
await alert.dismiss();
14+
});
15+
16+
await page.goto('#/methods01');
17+
await page.getByRole('button', { name: 'getOptions' }).click();
18+
const strArray = [
19+
`{`,
20+
`"name": "",`,
21+
`"placeholder": "",`,
22+
`"selectAll": true,`,
23+
`"single": false,`,
24+
`"singleRadio": false,`,
25+
`"multiple": false,`,
26+
`"hideOptgroupCheckboxes": false,`,
27+
`"multipleWidth": 80,`,
28+
`"maxHeight": 250,`,
29+
`"maxHeightUnit": "px",`,
30+
`"position": "bottom",`,
31+
`"displayValues": false,`,
32+
`"displayTitle": false,`,
33+
`"displayDelimiter": ", ",`,
34+
`"minimumCountSelected": 3,`,
35+
`"ellipsis": false,`,
36+
`"isOpen": false,`,
37+
`"keepOpen": false,`,
38+
`"openOnHover": false,`,
39+
`"container": null,`,
40+
`"filter": true,`,
41+
`"filterGroup": false,`,
42+
`"filterPlaceholder": "",`,
43+
`"filterAcceptOnEnter": false,`,
44+
`"showClear": false,`,
45+
`"autoAdjustDropHeight": false,`,
46+
`"autoAdjustDropPosition": false,`,
47+
`"autoAdjustDropWidthByTextSize": false,`,
48+
`"adjustedHeightPadding": 10,`,
49+
`"useSelectOptionLabel": false,`,
50+
`"useSelectOptionLabelToHtml": false\n}`,
51+
].join('\n ');
52+
await expect(dialogText).toContain(strArray);
53+
});
54+
});

‎playwright/e2e/methods02.spec.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Methods 02 - refreshOtions()', () => {
4+
test('calling the method will remove the search filter', async ({ page }) => {
5+
await page.goto('#/methods02');
6+
await page.locator('.ms-parent').click();
7+
let searchLoc = await page.locator('.ms-drop .ms-search input');
8+
expect(searchLoc).toHaveCount(1);
9+
await searchLoc.focus();
10+
await searchLoc.fill('1');
11+
await page.locator('label').filter({ hasText: 'text1' }).click();
12+
13+
await page.getByRole('button', { name: 'refreshOptions' }).click();
14+
searchLoc = await page.locator('.ms-drop .ms-search input');
15+
expect(searchLoc).toHaveCount(0);
16+
});
17+
});

‎playwright/e2e/methods03.spec.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Methods 03 - setSelects() / getSelects()', () => {
4+
test('calling setSelects(1,3) and expect values & options to be displayed in alert', async ({ page }) => {
5+
let dialogTexts: string[] = [];
6+
page.on('dialog', async (alert) => {
7+
dialogTexts.push(alert.message());
8+
await alert.dismiss();
9+
});
10+
11+
await page.goto('#/methods03');
12+
await page.getByRole('button', { name: 'SetSelects' }).click();
13+
await page.getByRole('button', { name: 'GetSelects' }).click();
14+
expect(dialogTexts[0]).toBe('Selected values: 1,3');
15+
expect(dialogTexts[1]).toBe('Selected texts: January,March');
16+
});
17+
});

‎playwright/e2e/methods04.spec.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Methods 04 - enable/disable', () => {
4+
test('disabling & enabling drop dynamically', async ({ page }) => {
5+
await page.goto('#/methods04');
6+
await page.locator('.ms-parent').click();
7+
await expect(await page.locator('.ms-drop')).toBeVisible();
8+
9+
await page.getByRole('button', { name: 'Disable' }).click();
10+
await expect(await page.locator('.ms-choice')).toHaveClass('ms-choice disabled');
11+
await page.locator('.ms-parent').click();
12+
await expect(await page.locator('.ms-drop')).not.toBeVisible();
13+
14+
await page.getByRole('button', { name: 'Enable' }).click();
15+
await expect(await page.locator('.ms-choice')).toHaveClass('ms-choice');
16+
await page.locator('.ms-parent').click();
17+
await expect(await page.locator('.ms-drop')).toBeVisible();
18+
});
19+
});

‎playwright/e2e/methods06.spec.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Methods 06 - check/uncheck', () => {
4+
test('clicking Check(2) and Uncheck(2) should change selection on all select drops', async ({ page }) => {
5+
await page.goto('#/methods06');
6+
await page.locator('[data-test=select1]').getByRole('button', { name: 'Value 1' });
7+
await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1' });
8+
await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1], [Group 2: Value 3]' });
9+
10+
// click on Check(2)
11+
await page.getByRole('button', { name: 'Check', exact: true }).click();
12+
await page.locator('[data-test=select1]').getByRole('button', { name: 'Value 2' });
13+
await expect(await page.locator('[data-test=select1].ms-drop li.selected label span')).toHaveText('Value 2');
14+
15+
await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1, Value 2' });
16+
await expect(await page.locator('[data-test=select2].ms-drop li.selected')).toHaveCount(2);
17+
await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
18+
'Value 1'
19+
);
20+
await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
21+
'Value 2'
22+
);
23+
24+
await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1, Value 2], [Group 2: Value 3]' });
25+
await expect(await page.locator('[data-test=select3].ms-drop li.selected')).toHaveCount(4);
26+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(0).locator('label.optgroup')).toHaveText(
27+
'Group 1'
28+
);
29+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
30+
'Value 1'
31+
);
32+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(2).locator('label span')).toHaveText(
33+
'Value 2'
34+
);
35+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(3).locator('label span')).toHaveText(
36+
'Value 3'
37+
);
38+
39+
// click on Uncheck(2)
40+
await page.getByRole('button', { name: 'Uncheck' }).click();
41+
await page.locator('[data-test=select1]').getByRole('button', { name: '' });
42+
await expect(await page.locator('[data-test=select1].ms-drop li.selected')).toHaveCount(0);
43+
44+
await page.locator('[data-test=select2]').getByRole('button', { name: 'Value 1' });
45+
await expect(await page.locator('[data-test=select2].ms-drop li.selected')).toHaveCount(1);
46+
await expect(await page.locator('[data-test=select2].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
47+
'Value 1'
48+
);
49+
50+
await page.locator('[data-test=select3]').getByRole('button', { name: '[Group 1: Value 1], [Group 2: Value 3]' });
51+
await expect(await page.locator('[data-test=select3].ms-drop li.selected')).toHaveCount(2);
52+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(0).locator('label span')).toHaveText(
53+
'Value 1'
54+
);
55+
await expect(await page.locator('[data-test=select3].ms-drop li.selected').nth(1).locator('label span')).toHaveText(
56+
'Value 3'
57+
);
58+
});
59+
});

0 commit comments

Comments
 (0)