Skip to content

Commit c9208aa

Browse files
josephfuscojosephfusco
committed
Test settings page w/ tabs
1 parent 5a0f707 commit c9208aa

File tree

5 files changed

+198
-22
lines changed

5 files changed

+198
-22
lines changed

‎.wp-env.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"core": "WordPress/WordPress",
3-
"plugins": [ "." ],
3+
"plugins": [
4+
"./tests/e2e/plugins/settings-page-spec/",
5+
"."
6+
],
47
"themes": [],
58
"port": 8888,
69
"config": {

‎tests/e2e/plugins/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# WordPress Plugins
2+
3+
These are custom WordPress plugins specifically designed for end-to-end (e2e) testing of the WPGraphQL plugin. They are not intended for production use but serve to facilitate testing by adding mock functionalities and settings.

‎tests/e2e/plugins/settings-page-spec/settings-page-spec.php‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?php
2+
/**
3+
* Plugin Name: Settings Page Spec
4+
* Description: This plugin is specifically used for end-to-end (e2e) testing of the WPGraphQL plugin. It registers settings sections and fields for testing purposes.
5+
*/
6+
7+
// Register settings sections and fields for testing.
8+
add_action(
9+
'graphql_register_settings',
10+
function() {
11+
register_graphql_settings_section(
12+
'graphql_section_a_settings',
13+
array(
14+
'title' => __( 'Section A Settings', 'settings-page-spec' ),
15+
'desc' => __( 'Settings for section A', 'settings-page-spec' ),
16+
)
17+
);
18+
19+
register_graphql_settings_field(
20+
'graphql_section_a_settings',
21+
array(
22+
'name' => 'graphql_section_a_checkbox',
23+
'label' => __( 'Section A Checkbox Option', 'settings-page-spec' ),
24+
'desc' => __( 'This is a checkbox option for section A', 'settings-page-spec' ),
25+
'type' => 'checkbox',
26+
)
27+
);
28+
29+
register_graphql_settings_section(
30+
'graphql_section_b_settings',
31+
array(
32+
'title' => __( 'Section B Settings', 'settings-page-spec' ),
33+
'desc' => __( 'Settings for section B', 'settings-page-spec' ),
34+
)
35+
);
36+
37+
register_graphql_settings_field(
38+
'graphql_section_b_settings',
39+
array(
40+
'name' => 'graphql_section_b_checkbox',
41+
'label' => __( 'Section B Checkbox Option', 'settings-page-spec' ),
42+
'desc' => __( 'This is a checkbox option for section B', 'settings-page-spec' ),
43+
'type' => 'checkbox',
44+
)
45+
);
46+
}
47+
);

‎tests/e2e/specs/settings-page.spec.js‎

Lines changed: 112 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,125 @@
1-
import { describe, test, expect, beforeEach } from '@playwright/test'
2-
import { loginToWordPressAdmin, visitAdminFacingPage, wpAdminUrl } from '../utils'
1+
import { describe, test, expect, beforeEach, afterEach } from '@playwright/test';
2+
import { loginToWordPressAdmin, visitAdminFacingPage, wpAdminUrl } from '../utils';
3+
import { activatePlugin, deactivatePlugin } from '../utils';
4+
5+
/**
6+
* @file settings-page.spec.js
7+
* @description End-to-end tests for the WPGraphQL settings page. This spec relies on a custom WordPress plugin
8+
* located at `./tests/e2e/plugins/settings-page-spec/` that registers additional settings sections and fields
9+
* for testing purposes.
10+
*/
311

412
const selectors = {
5-
graphiqlEnabledCheckbox: '#wpuf-graphql_general_settings\\[graphiql_enabled\\]',
6-
}
13+
navTabGeneral: '#graphql_general_settings-tab',
14+
navTabA: '#graphql_section_a_settings-tab',
15+
navTabB: '#graphql_section_b_settings-tab',
16+
sectionA: '#graphql_section_a_settings',
17+
sectionB: '#graphql_section_b_settings',
18+
generalSettings: '#graphql_general_settings',
19+
checkboxA: '#wpuf-graphql_section_a_settings\\[graphql_section_a_checkbox\\]',
20+
checkboxB: '#wpuf-graphql_section_b_settings\\[graphql_section_b_checkbox\\]'
21+
};
22+
23+
const pluginSlug = 'settings-page-spec';
724

8-
describe( 'Settings Page', () => {
25+
describe('Settings Page', () => {
926

10-
beforeEach( async ({ page }) => {
11-
await loginToWordPressAdmin( page );
27+
beforeEach(async ({ page }) => {
28+
await loginToWordPressAdmin(page);
1229
await page.evaluate(() => localStorage.clear());
30+
31+
// Activate the custom plugin for the test
32+
await activatePlugin(page, pluginSlug);
1333
});
1434

15-
test( 'GraphiQL IDE can be disabled', async ({ page }) => {
16-
await visitAdminFacingPage( page, wpAdminUrl + '/admin.php?page=graphql-settings' );
17-
// await page.goto('http://localhost:8888/wp-login.php?redirect_to=http%3A%2F%2Flocalhost%3A8888%2Fwp-admin%2F&reauth=1');
35+
afterEach(async ({ page }) => {
36+
// Deactivate the custom plugin after the test
37+
await deactivatePlugin(page, pluginSlug);
38+
});
1839

19-
await page.waitForTimeout( 500 );
20-
await expect( page.locator(selectors.graphiqlEnabledCheckbox ) ).toBeChecked();
21-
await page.locator(selectors.graphiqlEnabledCheckbox ).uncheck();
22-
await page.getByRole('button', { name: 'Save Changes' }).click();
23-
await page.waitForTimeout( 500 );
24-
await expect(page.getByText('Settings saved.')).toBeVisible();
25-
await expect( page.locator(selectors.graphiqlEnabledCheckbox ) ).not.toBeChecked();
26-
await page.locator( selectors.graphiqlEnabledCheckbox ).check();
40+
test('Verify custom plugin is active and tabs are present', async ({ page }) => {
41+
await visitAdminFacingPage(page, wpAdminUrl + '/admin.php?page=graphql-settings');
42+
await page.waitForTimeout(500);
43+
44+
await expect(page.locator(selectors.navTabGeneral)).toBeVisible();
45+
await expect(page.locator(selectors.navTabA)).toBeVisible();
46+
await expect(page.locator(selectors.navTabB)).toBeVisible();
47+
});
48+
49+
test('Switch between tabs and verify visibility', async ({ page }) => {
50+
await visitAdminFacingPage(page, wpAdminUrl + '/admin.php?page=graphql-settings');
51+
await page.waitForTimeout(500);
52+
53+
// Verify General tab is active by default
54+
await expect(page.locator(selectors.navTabGeneral)).toHaveClass(/nav-tab-active/);
55+
await expect(page.locator(selectors.generalSettings)).toBeVisible();
56+
await expect(page.locator(selectors.sectionA)).not.toBeVisible();
57+
await expect(page.locator(selectors.sectionB)).not.toBeVisible();
58+
59+
// Switch to Section A tab
60+
await page.locator(selectors.navTabA).click();
61+
await page.waitForTimeout(500);
62+
await expect(page.locator(selectors.navTabA)).toHaveClass(/nav-tab-active/);
63+
await expect(page.locator(selectors.sectionA)).toBeVisible();
64+
await expect(page.locator(selectors.generalSettings)).not.toBeVisible();
65+
await expect(page.locator(selectors.sectionB)).not.toBeVisible();
66+
67+
// Switch to Section B tab
68+
await page.locator(selectors.navTabB).click();
69+
await page.waitForTimeout(500);
70+
await expect(page.locator(selectors.navTabB)).toHaveClass(/nav-tab-active/);
71+
await expect(page.locator(selectors.sectionB)).toBeVisible();
72+
await expect(page.locator(selectors.generalSettings)).not.toBeVisible();
73+
await expect(page.locator(selectors.sectionA)).not.toBeVisible();
74+
});
75+
76+
test('Verify checkbox functionality in Section A and B', async ({ page }) => {
77+
await visitAdminFacingPage(page, wpAdminUrl + '/admin.php?page=graphql-settings');
78+
await page.waitForTimeout(500);
79+
80+
// Switch to Section A tab and check checkbox
81+
await page.locator(selectors.navTabA).click();
82+
await page.waitForTimeout(500);
83+
await page.locator(selectors.checkboxA).check();
2784
await page.getByRole('button', { name: 'Save Changes' }).click();
28-
await page.waitForTimeout( 500 );
29-
await expect(page.getByText('Settings saved.')).toBeVisible();
30-
await expect( page.locator( selectors.graphiqlEnabledCheckbox ) ).toBeChecked();
85+
await page.waitForTimeout(500);
86+
await expect(page.locator(selectors.checkboxA)).toBeChecked();
3187

88+
// Switch to Section B tab and check checkbox
89+
await page.locator(selectors.navTabB).click();
90+
await page.waitForTimeout(500);
91+
await page.locator(selectors.checkboxB).check();
92+
await page.getByRole('button', { name: 'Save Changes' }).click();
93+
await page.waitForTimeout(500);
94+
await expect(page.locator(selectors.checkboxB)).toBeChecked();
3295
});
3396

97+
test('Verify localStorage retains last active tab', async ({ page }) => {
98+
await visitAdminFacingPage(page, wpAdminUrl + '/admin.php?page=graphql-settings');
99+
await page.waitForTimeout(500);
100+
101+
// Switch to Section A tab
102+
await page.locator(selectors.navTabA).click();
103+
await page.waitForTimeout(500);
104+
await expect(page.locator(selectors.navTabA)).toHaveClass(/nav-tab-active/);
105+
await expect(page.locator(selectors.sectionA)).toBeVisible();
106+
107+
// Reload and check if Section A is still active
108+
await page.reload();
109+
await page.waitForTimeout(500);
110+
await expect(page.locator(selectors.navTabA)).toHaveClass(/nav-tab-active/);
111+
await expect(page.locator(selectors.sectionA)).toBeVisible();
112+
113+
// Switch to Section B tab
114+
await page.locator(selectors.navTabB).click();
115+
await page.waitForTimeout(500);
116+
await expect(page.locator(selectors.navTabB)).toHaveClass(/nav-tab-active/);
117+
await expect(page.locator(selectors.sectionB)).toBeVisible();
118+
119+
// Reload and check if Section B is still active
120+
await page.reload();
121+
await page.waitForTimeout(500);
122+
await expect(page.locator(selectors.navTabB)).toHaveClass(/nav-tab-active/);
123+
await expect(page.locator(selectors.sectionB)).toBeVisible();
124+
});
34125
});

‎tests/e2e/utils.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,3 +222,35 @@ export async function loadGraphiQL( page, queryParams = { query: null, variables
222222
} );
223223

224224
}
225+
226+
/**
227+
* Activates the specified plugin in WordPress admin.
228+
*
229+
* @param {import('@playwright/test').Page} page - The Playwright page object.
230+
* @param {string} slug - The slug of the plugin to activate.
231+
* @returns {Promise<void>}
232+
*/
233+
export async function activatePlugin(page, slug) {
234+
await visitAdminFacingPage(page, wpAdminUrl + '/plugins.php');
235+
const pluginRow = page.locator(`tr[data-slug="${slug}"]`);
236+
const isPluginActive = await pluginRow.locator('.deactivate').isVisible();
237+
if (!isPluginActive) {
238+
await pluginRow.locator('.activate a').click();
239+
}
240+
}
241+
242+
/**
243+
* Deactivates the specified plugin in WordPress admin.
244+
*
245+
* @param {import('@playwright/test').Page} page - The Playwright page object.
246+
* @param {string} slug - The slug of the plugin to deactivate.
247+
* @returns {Promise<void>}
248+
*/
249+
export async function deactivatePlugin(page, slug) {
250+
await visitAdminFacingPage(page, wpAdminUrl + '/plugins.php');
251+
const pluginRow = page.locator(`tr[data-slug="${slug}"]`);
252+
const isPluginActive = await pluginRow.locator('.deactivate').isVisible();
253+
if (isPluginActive) {
254+
await pluginRow.locator('.deactivate a').click();
255+
}
256+
}

0 commit comments

Comments
 (0)