From f50c5bd20604a85078cf31110bca3aa5718ff3df Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Thu, 16 May 2024 22:20:21 -0600 Subject: [PATCH 1/8] - introduce getCodeMirrorValue util function - add tests for all the toolbar buttons --- package-lock.json | 4 +- tests/e2e/specs/toolbar-buttons.spec.js | 242 +++++++++++++++++++----- tests/e2e/utils.js | 15 +- 3 files changed, 214 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4fc69e5..8c8d94e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wpgraphql-ide", - "version": "1.1.8", + "version": "1.1.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wpgraphql-ide", - "version": "1.1.8", + "version": "1.1.9", "dependencies": { "@changesets/cli": "^2.27.1", "@graphiql/plugin-explorer": "^1.0.3", diff --git a/tests/e2e/specs/toolbar-buttons.spec.js b/tests/e2e/specs/toolbar-buttons.spec.js index 56f048e..6933f74 100644 --- a/tests/e2e/specs/toolbar-buttons.spec.js +++ b/tests/e2e/specs/toolbar-buttons.spec.js @@ -1,5 +1,6 @@ -import {loginToWordPressAdmin, openDrawer, typeQuery, visitAdminFacingPage} from "../utils"; -import {expect, test } from "@wordpress/e2e-test-utils-playwright"; +import { describe, test, beforeEach } from '@playwright/test'; +import {getCodeMirrorValue, loginToWordPressAdmin, openDrawer, typeQuery} from "../utils"; +import { expect } from '@playwright/test'; export const selectors = { graphiqlContainer: '.graphiql-container', @@ -9,66 +10,219 @@ export const selectors = { executeQueryButton: '.graphiql-execute-button', queryInput: '[aria-label="Query Editor"] .CodeMirror', variablesInput: '[aria-label="Variables"] .CodeMirror', + prettifyButton: '.graphiql-prettify-button', + authButton: '.graphiql-toggle-auth-button', }; // Login to WordPress before each test -test.beforeEach( async ( { page } ) => { - await loginToWordPressAdmin( page ); -} ); - -async function openGraphiQL({ page }) { - await expect( page.locator( '.graphiql-container' ) ).toBeHidden(); - await openDrawer( page ); +beforeEach(async ({ page, context }) => { + await loginToWordPressAdmin(page); + await context.grantPermissions(['clipboard-read', 'clipboard-write']); +}); + +async function openGraphiQL(page) { + await expect(page.locator(selectors.graphiqlContainer)).toBeHidden(); + await openDrawer(page); } -test.describe( 'Toolbar Buttons', () => { +describe('Toolbar Buttons', () => { + + beforeEach(async ({ page }) => { + await openGraphiQL(page); + }); + + test('Clicking the Execute button executes a query', async ({ page }) => { + await typeQuery(page, 'query { posts { nodes { title } } }'); + const response = page.locator(selectors.graphiqlResponse); + await expect(response).not.toContainText('posts'); + await page.click(selectors.executeQueryButton); + await expect(response).toContainText('posts'); + await expect(response).toContainText('nodes'); + }); + + describe('Auth button', () => { + + beforeEach(async ({ page }) => { + await typeQuery(page, 'query { viewer { name } }'); + }); + + test('Default state is authenticated', async ({ page }) => { + // const authButton = page.locator(selectors.authButton); + + // select the 2nd button in the .graphiql-toolbar + const authButton = await page.locator( `.graphiql-toolbar button:nth-child(2)` ) + await expect(authButton).not.toHaveClass(/is-public/); + await expect(authButton).toHaveClass(/is-authenticated/); + }); + + test('Private data is returned when authenticated', async ({ page }) => { + const response = page.locator(selectors.graphiqlResponse); + await expect(response).not.toContainText('viewer'); + await expect(response).not.toContainText('admin'); + await page.click(selectors.executeQueryButton); + await expect(response).toContainText('viewer'); + await expect(response).toContainText('admin'); + }); + + test('Auth button is not grayscale when authenticated', async ({ page }) => { + // const authButton = page.locator(selectors.authButton); + const authButton = await page.locator( `.graphiql-toolbar button:nth-child(2)` ); + const filterValue = await authButton.evaluate(node => window.getComputedStyle(node).filter); + expect(filterValue).not.toBe('grayscale(1)'); + }); + + describe('Toggling auth state to public', () => { + + beforeEach(async ({ page }) => { + // const authButton = page.locator(selectors.authButton); + const authButton = await page.locator( `.graphiql-toolbar button:nth-child(2)` ); + await authButton.click(); + }); + + test('Auth button is in public state', async ({ page }) => { + // const authButton = page.locator(selectors.authButton); + const authButton = await page.locator( `.graphiql-toolbar button:nth-child(2)` ); + await expect(authButton).not.toHaveClass(/is-authenticated/); + await expect(authButton).toHaveClass(/is-public/); + }); + + test('Private data is not returned when public', async ({ page }) => { + const response = page.locator(selectors.graphiqlResponse); + await page.click(selectors.executeQueryButton); + await expect(response).toContainText('viewer'); + await expect(response).not.toContainText('admin'); + }); + + test('Auth button is grayscale when public', async ({ page }) => { + // const authButton = page.locator(selectors.authButton); + const authButton = await page.locator( `.graphiql-toolbar button:nth-child(2)` ); + const filterValue = await authButton.evaluate(node => window.getComputedStyle(node).filter); + expect(filterValue).toBe('grayscale(1)'); + }); + }); + }); + + describe('Prettify button', () => { + + beforeEach(async ({ page }) => { + await typeQuery(page, 'query{viewer{name} }'); // poorly formatted query + }); - test( 'Clicking the Execute button executes a query', async ( { page } ) => { - await openGraphiQL( { page } ); - await typeQuery( page, 'query { posts { nodes { title } } }' ); - const response = await page.locator( selectors.graphiqlResponse ); - await expect( response ).not.toContainText( 'posts' ); - await page.click( '.graphiql-execute-button' ); - await expect( response ).toContainText( 'posts' ); - await expect( response ).toContainText( 'nodes' ); + test('Misformatted query is prettified when button is clicked', async ({ page }) => { + // const prettifyButton = page.locator(selectors.prettifyButton); + const prettifyButton = await page.locator( `.graphiql-toolbar button:nth-child(3)` ); + const queryEditorLocator = page.locator(selectors.queryInput); + + // Get the value from the CodeMirror instance + const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); + + // Ensure the query is initially poorly formatted + await expect(codeMirrorValue).toBe('query{viewer{name} }'); + + // Make sure the prettify button is visible and interactable + await expect(prettifyButton).toBeVisible(); + await expect(prettifyButton).toBeEnabled(); + + // Click the prettify button + await prettifyButton.click(); + + const codeMirrorValleAfterClick = await getCodeMirrorValue( queryEditorLocator ); + + await expect(codeMirrorValleAfterClick).toBe(`{ + viewer { + name + } +}` + ); + + }); }); - test( 'Clicking the auth button toggles the auth state and allows queries to be executed public or authenticated', async ( { page } ) => { - await openGraphiQL( { page } ); + describe('Copy button', () => { - // auth button is in an authenticated state by default - await expect( page.locator( '.graphiql-auth-button' ) ).not.toHaveClass( /is-public/ ); - await expect( page.locator( '.graphiql-auth-button' ) ).toHaveClass( /is-authenticated/ ); + beforeEach(async ({ page }) => { + await typeQuery(page, '{ posts { nodes { id } } }' ); // poorly formatted query + }); - // type a query that asks for the viewer (which requires auth) - await typeQuery( page, 'query { viewer { name } }' ); - const response = await page.locator( selectors.graphiqlResponse ); + test( 'Clicking the copy button copies the query to the clipboard', async ({ page }) => { - // Assert that the response does not contain the viewer field or admin username - await expect( response ).not.toContainText( 'viewer' ); - await expect( response ).not.toContainText( 'admin' ); + // clear the clipboard + await page.evaluate( () => navigator.clipboard.writeText('') ); - // Execute the query and assert that the response contains the viewer field and admin username - await page.click( '.graphiql-execute-button' ); - await expect( response ).toContainText( 'viewer' ); - await expect( response ).toContainText( 'admin' ); + // assert the clipboard is empty + const clipboardTextBefore = await page.evaluate( () => navigator.clipboard.readText() ); + expect( clipboardTextBefore ).toBe( '' ); - // Toggle the auth state to public - await page.click( '.graphiql-auth-button' ); + // Click the copy button + const copyButton = await page.locator( `.graphiql-toolbar button:nth-child(4)` ); - // Assert that the auth button is now in a public state - await expect( page.locator( '.graphiql-auth-button' ) ).not.toHaveClass( /is-authenticated/ ); - await expect( page.locator( '.graphiql-auth-button' ) ).toHaveClass( /is-public/ ); + await copyButton.click(); + const clipboardText = await page.evaluate( () => navigator.clipboard.readText() ); - // Execute the viewer query again - await page.click( '.graphiql-execute-button' ); + expect( clipboardText ).not.toBe( '' ); + }); - // The viewer field should exist in the response, but the admin username should not because a public request gets null for the viewer query - await expect( response ).toContainText( 'viewer' ); - await expect( response ).not.toContainText( 'admin' ); }); + describe('Merge Fragments button', () => { + + test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { + + await typeQuery(page, '{ posts { nodes { ...Post } } } ' + + 'fragment Post on Post { id }' ); // query with fragment + // Click the merge button + const mergeButton = await page.locator( `.graphiql-toolbar button:nth-child(5)` ); + await mergeButton.click(); + + const queryEditorLocator = page.locator(selectors.queryInput); + + // Get the value from the CodeMirror instance + const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); + + console.log({ + codeMirrorValue + }) + + // Verify that the query is now formatted properly (with newlines and indentation...this is the playwright way of checking for the line breaks 🤷‍♂️) + await expect(codeMirrorValue).toBe('{\n' + + ' posts {\n' + + ' nodes {\n' + + ' id\n' + + ' }\n' + + ' }\n' + + '}'); + }); + + + }) + + describe('Share button', () => { + + beforeEach(async ({ page }) => { + await typeQuery(page, '{ posts { nodes { id } } }' ); // poorly formatted query + }); + + test( 'Clicking the share button copies the query to the clipboard', async ({ page }) => { + + // clear the clipboard + await page.evaluate( () => navigator.clipboard.writeText('') ); + + // assert the clipboard is empty + const clipboardTextBefore = await page.evaluate( () => navigator.clipboard.readText() ); + expect( clipboardTextBefore ).toBe( '' ); + + // Click the copy button + const copyButton = await page.locator( `.graphiql-toolbar button:nth-child(4)` ); + + await copyButton.click(); + const clipboardText = await page.evaluate( () => navigator.clipboard.readText() ); + + expect( clipboardText ).not.toBe( '' ); + }); + + + }); -} ); +}); diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 982fce5..59dfbe3 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -51,6 +51,19 @@ export async function loginToWordPressAdmin( page ) { await page.waitForSelector( '#wpadminbar' ); // Confirm login by waiting for the admin bar } +/** + * Returns the value of a CodeMirror editor. + * @param locator The Playwright locator for the CodeMirror editor. + * @return {Promise<*>} + */ +export async function getCodeMirrorValue( locator ) { + return await locator.evaluate((queryEditorElement) => { + // Access the CodeMirror instance and get its value + const codeMirrorInstance = queryEditorElement.CodeMirror; + return codeMirrorInstance.getValue(); + }); +} + /** * Types a GraphQL query into the CodeMirror editor. * @param {import('@playwright/test').Page} page The Playwright page object. @@ -212,4 +225,4 @@ export async function simulateHeavyJSLoad(page) { } }, 10); }); -} \ No newline at end of file +} From 866fff69bd3b52f66b940292c4a0e1e2f57092b1 Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Thu, 16 May 2024 22:23:22 -0600 Subject: [PATCH 2/8] - change file name --- .../{toolbar-buttons.spec.js => editor-toolbar-buttons.spec.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename tests/e2e/specs/{toolbar-buttons.spec.js => editor-toolbar-buttons.spec.js} (100%) diff --git a/tests/e2e/specs/toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js similarity index 100% rename from tests/e2e/specs/toolbar-buttons.spec.js rename to tests/e2e/specs/editor-toolbar-buttons.spec.js From 1e3e8f36e2ae88f2f5f30202955fdc6d64fd859f Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Thu, 16 May 2024 23:11:09 -0600 Subject: [PATCH 3/8] - update merge button test --- .../e2e/specs/editor-toolbar-buttons.spec.js | 38 ++++++++++++------- tests/e2e/utils.js | 14 +++++++ 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js index 6933f74..e70d023 100644 --- a/tests/e2e/specs/editor-toolbar-buttons.spec.js +++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js @@ -1,5 +1,11 @@ import { describe, test, beforeEach } from '@playwright/test'; -import {getCodeMirrorValue, loginToWordPressAdmin, openDrawer, typeQuery} from "../utils"; +import { + getCodeMirrorValue, + loginToWordPressAdmin, + openDrawer, + setCodeMirrorValue, + typeQuery +} from "../utils"; import { expect } from '@playwright/test'; export const selectors = { @@ -167,32 +173,36 @@ describe('Toolbar Buttons', () => { describe('Merge Fragments button', () => { - test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { + beforeEach(async ({ page }) => { + const queryEditorLocator = page.locator(selectors.queryInput); - await typeQuery(page, '{ posts { nodes { ...Post } } } ' + - 'fragment Post on Post { id }' ); // query with fragment + await typeQuery(page, `{ ...TestFragment } fragment TestFragment on RootQuery { viewer { name } }`);// query with fragment + }); + + test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { // Click the merge button const mergeButton = await page.locator( `.graphiql-toolbar button:nth-child(5)` ); await mergeButton.click(); - const queryEditorLocator = page.locator(selectors.queryInput); + // wait for the merge to complete + await page.waitForTimeout( 1000 ); // Get the value from the CodeMirror instance - const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); + const queryEditorLocator = page.locator(selectors.queryInput); + const mergedValue = await getCodeMirrorValue(queryEditorLocator); console.log({ - codeMirrorValue + mergedValue }) // Verify that the query is now formatted properly (with newlines and indentation...this is the playwright way of checking for the line breaks 🤷‍♂️) - await expect(codeMirrorValue).toBe('{\n' + - ' posts {\n' + - ' nodes {\n' + - ' id\n' + - ' }\n' + - ' }\n' + - '}'); + await expect(mergedValue).toBe(`{ + viewer { + name + } +}` + ); }); diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 59dfbe3..ce019b2 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -64,6 +64,20 @@ export async function getCodeMirrorValue( locator ) { }); } +/** + * Returns the value of a CodeMirror editor. + * @param locator The Playwright locator for the CodeMirror editor. + * @param string The value to set in the CodeMirror editor. + * @return {Promise<*>} + */ +export async function setCodeMirrorValue( locator, value ) { + return await locator.evaluate((queryEditorElement, val) => { + // Access the CodeMirror instance and get its value + const codeMirrorInstance = queryEditorElement.CodeMirror; + codeMirrorInstance.setValue( val ); + }, value ); +} + /** * Types a GraphQL query into the CodeMirror editor. * @param {import('@playwright/test').Page} page The Playwright page object. From 7698fea0e2c716bbe5509b4e91fe55e32bbb7e45 Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Thu, 16 May 2024 23:22:14 -0600 Subject: [PATCH 4/8] - update merge button test --- tests/e2e/specs/editor-toolbar-buttons.spec.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js index e70d023..2383272 100644 --- a/tests/e2e/specs/editor-toolbar-buttons.spec.js +++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js @@ -176,7 +176,7 @@ describe('Toolbar Buttons', () => { beforeEach(async ({ page }) => { const queryEditorLocator = page.locator(selectors.queryInput); - await typeQuery(page, `{ ...TestFragment } fragment TestFragment on RootQuery { viewer { name } }`);// query with fragment + await typeQuery(page, `query { ...TestFragment } fragment TestFragment on RootQuery { viewer { name } }`);// query with fragment }); test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { @@ -192,10 +192,6 @@ describe('Toolbar Buttons', () => { const queryEditorLocator = page.locator(selectors.queryInput); const mergedValue = await getCodeMirrorValue(queryEditorLocator); - console.log({ - mergedValue - }) - // Verify that the query is now formatted properly (with newlines and indentation...this is the playwright way of checking for the line breaks 🤷‍♂️) await expect(mergedValue).toBe(`{ viewer { From 8a73b0ddcf498c52a1faa18f316ad59d978489fc Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Thu, 16 May 2024 23:32:33 -0600 Subject: [PATCH 5/8] - skip merge test --- .../e2e/specs/editor-toolbar-buttons.spec.js | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js index 2383272..2ec93a9 100644 --- a/tests/e2e/specs/editor-toolbar-buttons.spec.js +++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js @@ -179,21 +179,33 @@ describe('Toolbar Buttons', () => { await typeQuery(page, `query { ...TestFragment } fragment TestFragment on RootQuery { viewer { name } }`);// query with fragment }); - test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { + test.skip( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { - // Click the merge button + const queryEditorLocator = page.locator(selectors.queryInput); + const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); + + // Ensure the query is initially poorly formatted + await expect(codeMirrorValue).toBe('query{viewer{name} }'); + + + // Make sure the prettify button is visible and interactable const mergeButton = await page.locator( `.graphiql-toolbar button:nth-child(5)` ); + await expect(mergeButton).toBeVisible(); + await expect(mergeButton).toBeEnabled(); + + + // Click the merge button await mergeButton.click(); // wait for the merge to complete await page.waitForTimeout( 1000 ); // Get the value from the CodeMirror instance - const queryEditorLocator = page.locator(selectors.queryInput); - const mergedValue = await getCodeMirrorValue(queryEditorLocator); + + // Verify that the query is now formatted properly (with newlines and indentation...this is the playwright way of checking for the line breaks 🤷‍♂️) - await expect(mergedValue).toBe(`{ + await expect(codeMirrorValue).toBe(`{ viewer { name } From 54ffd1b8498a37ba3c0c1a261dd6ea45cb0d538b Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Fri, 17 May 2024 12:54:57 -0400 Subject: [PATCH 6/8] Fix merge button tests --- .../e2e/specs/editor-toolbar-buttons.spec.js | 59 +++++++++++-------- tests/e2e/utils.js | 23 ++++++++ 2 files changed, 58 insertions(+), 24 deletions(-) diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js index 2ec93a9..b0caa4f 100644 --- a/tests/e2e/specs/editor-toolbar-buttons.spec.js +++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js @@ -1,9 +1,10 @@ import { describe, test, beforeEach } from '@playwright/test'; import { getCodeMirrorValue, + getQueryFromLocalStorage, loginToWordPressAdmin, openDrawer, - setCodeMirrorValue, + setQueryInLocalStorage, typeQuery } from "../utils"; import { expect } from '@playwright/test'; @@ -173,44 +174,54 @@ describe('Toolbar Buttons', () => { describe('Merge Fragments button', () => { - beforeEach(async ({ page }) => { - const queryEditorLocator = page.locator(selectors.queryInput); + const queryWithFragment = `{ + ...TestFragment + } + fragment TestFragment on RootQuery { + viewer { + name + } + }`; - await typeQuery(page, `query { ...TestFragment } fragment TestFragment on RootQuery { viewer { name } }`);// query with fragment + beforeEach(async ({ page }) => { + await setQueryInLocalStorage(page, queryWithFragment);// query with fragment + await page.reload({ waitUntil: 'networkidle' }); // reload page to initialize with localStorage + await openDrawer(page); }); - test.skip( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { - - const queryEditorLocator = page.locator(selectors.queryInput); - const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); - - // Ensure the query is initially poorly formatted - await expect(codeMirrorValue).toBe('query{viewer{name} }'); - - + test( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => { // Make sure the prettify button is visible and interactable - const mergeButton = await page.locator( `.graphiql-toolbar button:nth-child(5)` ); + const mergeButton = page.locator( `.graphiql-toolbar button:nth-child(5)` ); await expect(mergeButton).toBeVisible(); await expect(mergeButton).toBeEnabled(); - - // Click the merge button await mergeButton.click(); + const queryEditorLocator = page.locator(selectors.queryInput); + // wait for the merge to complete await page.waitForTimeout( 1000 ); // Get the value from the CodeMirror instance + const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator); - - - // Verify that the query is now formatted properly (with newlines and indentation...this is the playwright way of checking for the line breaks 🤷‍♂️) - await expect(codeMirrorValue).toBe(`{ - viewer { - name + // Log the output for debugging purposes + console.log('Merged Query:', codeMirrorValue); + + // Verify that the query is now merged properly and formatted +// const expectedMergedQuery = `{ +// viewer { +// name +// } +// }`; +const expectedMergedQueryFromTestsThatIsNotWhatWeGetInBrowserButItsTechnicallyStillValid = `{ + ... on RootQuery { + viewer { + name + } } -}` - ); +}`; + expect(codeMirrorValue).toBe(expectedMergedQueryFromTestsThatIsNotWhatWeGetInBrowserButItsTechnicallyStillValid); }); diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index ce019b2..27f3af6 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -240,3 +240,26 @@ export async function simulateHeavyJSLoad(page) { }, 10); }); } + +/** + * Sets the value of the 'graphiql:query' key in local storage. + * @param {import('@playwright/test').Page} page The Playwright page object. + * @param {string} value The value to set for the 'graphiql:query' key in local storage. + * @returns {Promise} + */ +export async function setQueryInLocalStorage(page, value) { + await page.evaluate((val) => { + localStorage.setItem('graphiql:query', val); + }, value); +} + +/** + * Retrieves the value of the 'graphiql:query' key from local storage. + * @param {import('@playwright/test').Page} page The Playwright page object. + * @returns {Promise} The value of the 'graphiql:query' key from local storage. + */ +export async function getQueryFromLocalStorage(page) { + return await page.evaluate(() => { + return localStorage.getItem('graphiql:query'); + }); +} From eb62290620c69795cfb435f53a4552a878d2f79b Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Fri, 17 May 2024 13:03:34 -0400 Subject: [PATCH 7/8] Update ACTIONS_AND_FILTERS.md --- ACTIONS_AND_FILTERS.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ACTIONS_AND_FILTERS.md b/ACTIONS_AND_FILTERS.md index f7e64f6..478b6ec 100644 --- a/ACTIONS_AND_FILTERS.md +++ b/ACTIONS_AND_FILTERS.md @@ -2,30 +2,30 @@ -> [Original documentation](https://www.wpgraphql.com/docs/customizing-wpgraphiql) -_legend_ 🎉 = new functionality - ## PHP Actions - `wpgraphqlide_enqueue_script` ([enqueue_graphiql_extension](https://www.wpgraphql.com/docs/customizing-wpgraphiql#enqueue_graphiql_extension)) ## PHP Filters -- `wpgraphqlide_capability_required` 🎉 -- `wpgraphqlide_context` 🎉 +- `wpgraphqlide_capability_required` +- `wpgraphqlide_context` - `wpgraphqlide_external_fragments` ([graphiql_external_fragments](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_external_fragments)) +- `wpgraphqlide_drawer_button_label` +- `wpgraphqlide_drawer_button_loading_label` ## JavaScript Actions -- `wpgraphqlide_destroyed` 🎉 +- `wpgraphqlide_destroyed` - `wpgraphqlide_rendered` ([graphiql_rendered](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_rendered)) ## JavaScript Filters -- `wpgraphqlide_toolbar_buttons` ([graphiql_toolbar_buttons](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_toolbar_buttons)) +TBD ## Legacy Hooks Not all actions/filters were ported over from the legacy WPGraphQL IDE. -- `graphiql_toolbar_before_buttons` -- `graphiql_toolbar_after_buttons` +- [`graphiql_toolbar_before_buttons`](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_toolbar_before_buttons) +- [`graphiql_toolbar_after_buttons`](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_toolbar_before_buttons) From 2e15e53aff558bedc97e00872c546fd743d239dd Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Fri, 17 May 2024 13:05:38 -0400 Subject: [PATCH 8/8] CI/CD consistency --- .../e2e/specs/editor-toolbar-buttons.spec.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js index b0caa4f..1a4ba96 100644 --- a/tests/e2e/specs/editor-toolbar-buttons.spec.js +++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js @@ -209,19 +209,19 @@ describe('Toolbar Buttons', () => { console.log('Merged Query:', codeMirrorValue); // Verify that the query is now merged properly and formatted -// const expectedMergedQuery = `{ -// viewer { -// name -// } -// }`; -const expectedMergedQueryFromTestsThatIsNotWhatWeGetInBrowserButItsTechnicallyStillValid = `{ - ... on RootQuery { - viewer { - name - } + const expectedMergedQuery = `{ + viewer { + name } }`; - expect(codeMirrorValue).toBe(expectedMergedQueryFromTestsThatIsNotWhatWeGetInBrowserButItsTechnicallyStillValid); +// const expectedMergedQueryFromTestsThatIsNotWhatWeGetInBrowserButItsTechnicallyStillValid = `{ +// ... on RootQuery { +// viewer { +// name +// } +// } +// }`; + expect(codeMirrorValue).toBe(expectedMergedQuery); });