Skip to content

Commit f1d2f44

Browse files
authored
Merge pull request #71 from codebtech/chore/step-e2e-tests
chore: Expand e2e test scenarios
2 parents 910ff40 + f44511e commit f1d2f44

File tree

3 files changed

+148
-39
lines changed

3 files changed

+148
-39
lines changed

playwright.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default defineConfig({
1212
fullyParallel: true,
1313
forbidOnly: !!process.env.CI,
1414
retries: process.env.CI ? 2 : 0,
15-
workers: process.env.CI ? 1 : undefined,
15+
workers: 4,
1616
reporter: 'html',
1717
use: {
1818
baseURL: process.env.WP_BASE_URL,

tests/e2e/feature-flags.spec.ts

Lines changed: 64 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import { test, expect } from '@wordpress/e2e-test-utils-playwright';
22
import { ERROR_FLAG_EXISTS, ERROR_FLAG_INVALID } from '../../src/constants';
3+
import {
4+
AddNewFlag,
5+
AddNewFlagAndFill,
6+
CloseSdkModal,
7+
DisableFlag,
8+
OpenSdkModal,
9+
SaveFlags,
10+
deleteLastFlag,
11+
} from './helper';
312

413
// eslint-disable-next-line
514
test.use({ storageState: process.env.WP_AUTH_STORAGE });
@@ -17,22 +26,29 @@ test.describe('Feature flags', () => {
1726
).toBeVisible();
1827
});
1928

20-
test('Create and delete flags e2e scenarios', async ({ page }) => {
21-
//Create new flag
22-
await page.getByRole('button', { name: 'Add Flag' }).click();
23-
await page.getByRole('textbox').last().fill('test');
24-
await page.getByRole('button', { name: 'Save' }).click();
25-
//Confirm save success
29+
test.afterEach(async ({ page }) => {
30+
await deleteLastFlag(page);
31+
});
32+
33+
test('Create and save new flag successfully', async ({ page }) => {
34+
await AddNewFlagAndFill(page, 'hello_test');
35+
await SaveFlags(page);
36+
2637
expect(
2738
await page.getByLabel('Dismiss this notice').innerText()
2839
).toMatch(/Saved successfully!/);
40+
});
41+
42+
test('Create new flag and disable it successfully', async ({ page }) => {
43+
await AddNewFlagAndFill(page, 'test123');
44+
await SaveFlags(page);
45+
46+
expect(
47+
await page.getByLabel('Dismiss this notice').innerText()
48+
).toMatch(/Saved successfully!/);
49+
50+
await DisableFlag(page, true);
2951

30-
//Toggle feature flag
31-
await page
32-
.locator('id=mr-feature-flag-item')
33-
.last()
34-
.getByLabel('Flag enabled')
35-
.click();
3652
expect(
3753
await page.getByLabel('Dismiss this notice').innerText()
3854
).toMatch(/Saved successfully!/);
@@ -42,60 +58,70 @@ test.describe('Feature flags', () => {
4258
.last()
4359
.getByLabel('Flag disabled')
4460
).toBeVisible();
61+
});
62+
63+
test('Check duplicate and invalid flag', async ({ page }) => {
64+
//Create new flag
65+
await AddNewFlagAndFill(page, 'testDuplicate');
66+
await SaveFlags(page);
4567

46-
//Create another flag with same name
47-
await page.getByRole('button', { name: 'Add Flag' }).click();
48-
await page.getByRole('textbox').last().fill('test');
68+
//Confirm save success
69+
expect(
70+
await page.getByLabel('Dismiss this notice').innerText()
71+
).toMatch(/Saved successfully!/);
72+
73+
//Create another flag with same name should show error
74+
await AddNewFlagAndFill(page, 'testDuplicate');
4975
expect(page.getByText(ERROR_FLAG_EXISTS)).toBeVisible();
5076
expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
5177

52-
//update flag name to be unique and check text validation.
53-
await page.getByRole('textbox').last().fill('test 2');
78+
//update flag name to be unique but still invalid
79+
await AddNewFlag(page, 'test duplicate');
5480
expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
5581
expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
5682

5783
//Delete the flag
58-
await page
59-
.locator('id=mr-feature-flag-item')
60-
.last()
61-
.getByLabel('Delete Flag')
62-
.click();
63-
await page.getByRole('button', { name: 'Yes' }).click();
64-
//Confirm delete success
84+
await deleteLastFlag(page);
85+
86+
expect(
87+
await page.getByLabel('Dismiss this notice').innerText()
88+
).toMatch(/Saved successfully!/);
89+
});
90+
91+
test('Open SDK modal and test the clipboard', async ({ page }) => {
92+
const flagName = 'testWidget';
93+
await AddNewFlagAndFill(page, flagName);
94+
await SaveFlags(page);
95+
6596
expect(
6697
await page.getByLabel('Dismiss this notice').innerText()
6798
).toMatch(/Saved successfully!/);
6899

69-
//Check SDK modal details.
70-
await page.getByLabel('Click to see SDK setting').last().click();
100+
await OpenSdkModal(page);
101+
71102
expect(
72-
page.getByRole('heading', { name: 'SDK for feature flag: test' })
103+
page.getByRole('heading', {
104+
name: `SDK for feature flag: ${flagName}`,
105+
})
73106
).toBeVisible();
74107

75108
// Check PHP Snippet clipboard details
76109
await page.getByLabel('Copy to clipboard').first().click();
77110
const phpClipboardText = await page.evaluate(
78111
'navigator.clipboard.readText()'
79112
);
80-
expect(phpClipboardText).toContain("Flag::is_enabled( 'test' )");
113+
expect(phpClipboardText).toContain(`Flag::is_enabled( '${flagName}' )`);
81114

82115
// Check JS Snippet clipboard details
83116
await page.getByLabel('Copy to clipboard').nth(1).click();
84117
const jsClipboardText: string = await page.evaluate(
85118
'navigator.clipboard.readText()'
86119
);
87120
expect(jsClipboardText).toContain(
88-
"window.mrFeatureFlags.isEnabled('test')"
121+
`window.mrFeatureFlags.isEnabled('${flagName}')`
89122
);
123+
90124
//Close SDK modal
91-
await page.locator('button[aria-label="Close"]').click();
92-
93-
//Delete the created flag
94-
await page
95-
.locator('id=mr-feature-flag-item')
96-
.last()
97-
.getByLabel('Delete Flag')
98-
.click();
99-
await page.getByRole('button', { name: 'Yes' }).click();
125+
await CloseSdkModal(page);
100126
});
101127
});

tests/e2e/helper/index.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { test } from '@wordpress/e2e-test-utils-playwright';
2+
import { Page } from '@playwright/test';
3+
4+
export async function deleteLastFlag(page: Page) {
5+
await test.step(
6+
'Delete last flag',
7+
async () => {
8+
await page
9+
.locator('id=mr-feature-flag-item')
10+
.last()
11+
.getByLabel('Delete Flag')
12+
.click();
13+
await page.getByRole('button', { name: 'Yes' }).click();
14+
},
15+
{ box: true }
16+
);
17+
}
18+
19+
export async function AddNewFlag(page: Page, text: string) {
20+
await test.step(
21+
'Add new flag',
22+
async () => {
23+
await page.getByRole('textbox').last().fill(text);
24+
},
25+
{ box: true }
26+
);
27+
}
28+
29+
export async function AddNewFlagAndFill(page: Page, text: string) {
30+
await test.step(
31+
'Add new flag and fill text',
32+
async () => {
33+
await page.getByRole('button', { name: 'Add Flag' }).click();
34+
await page.getByRole('textbox').last().fill(text);
35+
},
36+
{ box: true }
37+
);
38+
}
39+
40+
export async function SaveFlags(page: Page) {
41+
await test.step(
42+
'Save flags',
43+
async () => {
44+
await page.getByRole('button', { name: 'Save' }).click();
45+
},
46+
{ box: true }
47+
);
48+
}
49+
50+
export async function DisableFlag(page: Page, isEnabled: boolean) {
51+
await test.step(
52+
'Toggle flag',
53+
async () => {
54+
const labelText = isEnabled ? 'Flag enabled' : 'Flag disabled';
55+
await page
56+
.locator('id=mr-feature-flag-item')
57+
.last()
58+
.getByLabel(labelText)
59+
.click();
60+
},
61+
{ box: true }
62+
);
63+
}
64+
65+
export async function OpenSdkModal(page: Page) {
66+
await test.step(
67+
'Open sdk modal',
68+
async () => {
69+
await page.getByLabel('Click to see SDK setting').last().click();
70+
},
71+
{ box: true }
72+
);
73+
}
74+
75+
export async function CloseSdkModal(page: Page) {
76+
await test.step(
77+
'Close sdk modal',
78+
async () => {
79+
await page.locator('button[aria-label="Close"]').click();
80+
},
81+
{ box: true }
82+
);
83+
}

0 commit comments

Comments
 (0)