From 86b9022b51a150586004abca6bb799e15a4c2086 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 14 Feb 2024 14:35:58 -0500 Subject: [PATCH] Test Signed-off-by: Joe Fusco --- tests/drawer.spec.js | 184 ++++++++++++++++++++----------------------- 1 file changed, 85 insertions(+), 99 deletions(-) diff --git a/tests/drawer.spec.js b/tests/drawer.spec.js index e29b0e1..d8aca32 100644 --- a/tests/drawer.spec.js +++ b/tests/drawer.spec.js @@ -30,107 +30,93 @@ test.beforeEach(async ({ page }) => { } }); -test('drawer opens on an admin page', async ({ page }) => { - await visitAdminFacingPage(page); - await expect(page.locator('.graphiql-container')).toBeHidden(); - await toggleDrawer(page); - await expect(page.locator('.graphiql-container')).toBeVisible(); -}); - -test('drawer opens on a public page', async ({ page }) => { +// test('drawer opens on an admin page', async ({ page }) => { +// await visitAdminFacingPage(page); +// await expect(page.locator('.graphiql-container')).toBeHidden(); +// await toggleDrawer(page); +// await expect(page.locator('.graphiql-container')).toBeVisible(); +// }); + +// test('drawer opens on a public page', async ({ page }) => { +// await visitPublicFacingPage(page); +// const overlay = await page.$('[vaul-overlay]'); +// if (overlay) { +// await overlay.click(); +// } +// await expect(page.locator('.graphiql-container')).toBeHidden(); +// await toggleDrawer(page); +// const isVisible = await page.locator('.graphiql-container').isVisible(); +// if (!isVisible) { +// await toggleDrawer(page); +// } +// await expect(page.locator('.graphiql-container')).toBeVisible(); +// }); + +// test('loads with the documentation explorer closed', async ({ page }) => { +// await visitAdminFacingPage(page); +// await expect(page.locator('.graphiql-container')).toBeHidden(); +// await toggleDrawer(page); +// await expect(page.locator('.graphiql-container')).toBeVisible(); +// await expect(page.locator('.graphiql-doc-explorer')).toBeHidden(); +// }); + +// test('documentation explorer can be toggled open and closed', async ({ page }) => { +// await visitAdminFacingPage(page); +// await expect(page.locator('.graphiql-container')).toBeHidden(); +// await toggleDrawer(page); +// await expect(page.locator('.graphiql-container')).toBeVisible(); +// await page.click('[aria-label="Show Documentation Explorer"]'); +// await expect(page.locator('.graphiql-doc-explorer')).toBeVisible(); +// await page.click('[aria-label="Hide Documentation Explorer"]'); +// await expect(page.locator('.graphiql-doc-explorer')).toBeHidden(); +// }); + +// test('executes query', async ({ page }) => { +// await visitAdminFacingPage(page); +// await toggleDrawer(page); +// await typeQuery(page, `{posts{nodes{id}}}`); +// await typeVariables(page, { first: 10 }); +// await executeQuery(page); +// await page.waitForTimeout(1000); +// const responseContent = await page.textContent('.graphiql-response'); // Adjust the selector as needed +// expect(responseContent).toContain('posts'); +// expect(responseContent).toContain('nodes'); +// }); + +test('drawer functionality test', async ({ page }) => { await visitPublicFacingPage(page); - await expect(page.locator('.graphiql-container')).toBeHidden(); - await toggleDrawer(page); - await expect(page.locator('.graphiql-container')).toBeVisible(); -}); - -test('loads with the documentation explorer closed', async ({ page }) => { - await visitAdminFacingPage(page); - await expect(page.locator('.graphiql-container')).toBeHidden(); - await toggleDrawer(page); - await expect(page.locator('.graphiql-container')).toBeVisible(); - await expect(page.locator('.graphiql-doc-explorer')).toBeHidden(); -}); - -test('documentation explorer can be toggled open and closed', async ({ page }) => { - await visitAdminFacingPage(page); - await expect(page.locator('.graphiql-container')).toBeHidden(); - await toggleDrawer(page); - await expect(page.locator('.graphiql-container')).toBeVisible(); - await page.click('[aria-label="Show Documentation Explorer"]'); - await expect(page.locator('.graphiql-doc-explorer')).toBeVisible(); - await page.click('[aria-label="Hide Documentation Explorer"]'); - await expect(page.locator('.graphiql-doc-explorer')).toBeHidden(); -}); - -test('executes query', async ({ page }) => { - await visitAdminFacingPage(page); - await toggleDrawer(page); - await typeQuery(page, `{posts{nodes{id}}}`); - await typeVariables(page, { first: 10 }); - await executeQuery(page); - await page.waitForTimeout(1000); - const responseContent = await page.textContent('.graphiql-response'); // Adjust the selector as needed - expect(responseContent).toContain('posts'); - expect(responseContent).toContain('nodes'); + await openDrawer(page); + await closeDrawer(page); }); // Helper methods -/** - * Toggles the drawer on the page. - * - * @param {import('playwright').Page} page - The Playwright page object. - */ -export async function toggleDrawer(page) { +export async function clickDrawerButton(page) { await page.click('.EditorDrawerButton'); } -/** - * Navigates to the admin-facing page. - * - * @param {import('playwright').Page} page - The Playwright page object. - */ +export async function clickDrawerCloseButton(page) { + await page.click('.EditorDrawerCloseButton'); +} + export async function visitAdminFacingPage(page) { await page.goto(wpAdminUrl); } -/** - * Navigates to the public-facing page. - * - * @param {import('playwright').Page} page - The Playwright page object. - */ export async function visitPublicFacingPage(page) { await page.goto(wpHomeUrl); } -/** - * Navigates to the plugins page in the admin dashboard. - * - * @param {import('playwright').Page} page - The Playwright page object. - */ export async function visitPluginsPage(page) { await page.goto(`${wpAdminUrl}/plugins.php`); } -/** - * Sets the GraphQL query in the local storage of the page. - * - * @param {import('playwright').Page} page - The Playwright page object. - * @param {string} query - The GraphQL query string. - */ async function setQuery(page, query) { await page.evaluate((query) => { localStorage.setItem('graphiql:query', query); }, query); } -/** - * Sets the GraphQL query variables in the local storage of the page. - * - * @param {import('playwright').Page} page - The Playwright page object. - * @param {Object} variables - The GraphQL query variables. - */ async function setVariables(page, variables) { const variablesString = JSON.stringify(variables); await page.evaluate((variablesString) => { @@ -138,33 +124,16 @@ async function setVariables(page, variables) { }, variablesString); } -/** - * Executes the GraphQL query. - * - * @param {import('playwright').Page} page - The Playwright page object. - */ export async function executeQuery(page) { await page.click('.graphiql-execute-button'); } -/** - * Types a GraphQL query into the query editor. - * - * @param {import('playwright').Page} page - The Playwright page object. - * @param {string} query - The GraphQL query string to type. - */ async function typeQuery(page, query) { const querySelector = '[aria-label="Query Editor"] .graphiql-editor .cm-s-graphiql'; await selectAndClearTextUsingKeyboard(page, querySelector); await page.type(querySelector, query); } -/** - * Types GraphQL variables into the variables editor. - * - * @param {import('playwright').Page} page - The Playwright page object. - * @param {Object} variables - The GraphQL query variables to type. - */ async function typeVariables(page, variables) { await page.click('[data-name="variables"]'); const variablesString = JSON.stringify(variables); @@ -173,13 +142,6 @@ async function typeVariables(page, variables) { await page.type(variablesSelector, variablesString); } -/** - * Selects all text within an element specified by a selector and clears it using keyboard shortcuts, - * adjusting for the operating system's specific shortcut for "Select All". - * - * @param {import('playwright').Page} page - The Playwright page object. - * @param {string} selector - The CSS selector for the element to interact with. - */ async function selectAndClearTextUsingKeyboard(page, selector) { await page.click(selector); // Focus the element @@ -187,4 +149,28 @@ async function selectAndClearTextUsingKeyboard(page, selector) { const selectAllCommand = process.platform === 'darwin' ? 'Meta+A' : 'Control+A'; await page.keyboard.press(selectAllCommand); // Select all text using OS-specific shortcut await page.keyboard.press('Backspace'); // Clear selected text +} + +export async function openDrawer(page) { + const isDrawerVisible = await page.locator('.graphiql-container').isVisible(); + if (!isDrawerVisible) { + await page.waitForSelector('.EditorDrawerButton', { state: 'visible' }); + await clickDrawerButton(page); + await page.waitForSelector('.graphiql-container', { state: 'visible' }); + } +} + +export async function closeDrawer(page) { + const isDrawerVisible = await page.locator('.graphiql-container').isVisible(); + + if (isDrawerVisible) { + const overlay = await page.locator('[vaul-overlay]'); + if (overlay) { + await overlay.click(); + } + await expect(page.locator('.graphiql-container')).toBeHidden(); + await page.waitForSelector('.EditorDrawerButton', { state: 'visible' }); + await clickDrawerCloseButton(page); + await page.waitForSelector('.graphiql-container', { state: 'hidden' }); + } } \ No newline at end of file