@@ -104,17 +112,17 @@ export const SettingsDialog = (props) => {
- {{
+ { {
success: 'Cleared data',
error: 'Failed',
- }[clearStorageStatus] || 'Clear data'}
+ }[ clearStorageStatus ] || 'Clear data' }
- ) : null}
+ ) : null }
- )
-}
+ );
+};
diff --git a/src/components/ShortKeysDialog.jsx b/src/components/ShortKeysDialog.jsx
index c969493..d1fb9e3 100644
--- a/src/components/ShortKeysDialog.jsx
+++ b/src/components/ShortKeysDialog.jsx
@@ -1,74 +1,80 @@
-import {Dialog} from "@graphiql/react";
-import React from "react";
-import { Fragment } from "@wordpress/element";
+import { Dialog } from '@graphiql/react';
+import React from 'react';
+import { Fragment } from '@wordpress/element';
const modifier =
typeof window !== 'undefined' &&
- window.navigator.platform.toLowerCase().indexOf('mac') === 0
+ window.navigator.platform.toLowerCase().indexOf( 'mac' ) === 0
? 'Cmd'
: 'Ctrl';
-const SHORT_KEYS = Object.entries({
- 'Search in editor': [modifier, 'F'],
- 'Search in documentation': [modifier, 'K'],
- 'Execute query': [modifier, 'Enter'],
- 'Prettify editors': ['Ctrl', 'Shift', 'P'],
+const SHORT_KEYS = Object.entries( {
+ 'Search in editor': [ modifier, 'F' ],
+ 'Search in documentation': [ modifier, 'K' ],
+ 'Execute query': [ modifier, 'Enter' ],
+ 'Prettify editors': [ 'Ctrl', 'Shift', 'P' ],
'Merge fragments definitions into operation definition': [
'Ctrl',
'Shift',
'M',
],
- 'Copy query': ['Ctrl', 'Shift', 'C'],
- 'Re-fetch schema using introspection': ['Ctrl', 'Shift', 'R'],
-});
+ 'Copy query': [ 'Ctrl', 'Shift', 'C' ],
+ 'Re-fetch schema using introspection': [ 'Ctrl', 'Shift', 'R' ],
+} );
-const ShortKeys = ({ keyMap }) => {
+const ShortKeys = ( { keyMap } ) => {
return (
-
- Short Key
- Function
-
+
+ Short Key
+ Function
+
- {SHORT_KEYS.map(([title, keys]) => (
-
-
- {keys.map((key, index, array) => (
-
- {key}
- {index !== array.length - 1 && ' + '}
-
- ))}
-
- {title}
-
- ))}
+ { SHORT_KEYS.map( ( [ title, keys ] ) => (
+
+
+ { keys.map( ( key, index, array ) => (
+
+
+ { key }
+
+ { index !== array.length - 1 && ' + ' }
+
+ ) ) }
+
+ { title }
+
+ ) ) }
- The editors use{' '}
+ The editors use{ ' ' }
CodeMirror Key Maps
- {' '}
- that add more short keys. This instance of Graphi QL uses{' '}
- {keyMap}.
+ { ' ' }
+ that add more short keys. This instance of Graphi QL
+ uses { keyMap }.
);
-}
+};
-export const ShortKeysDialog = ({ showDialog, handleOpenShortKeysDialog, keyMap }) => {
+export const ShortKeysDialog = ( {
+ showDialog,
+ handleOpenShortKeysDialog,
+ keyMap,
+} ) => {
return (
@@ -77,8 +83,8 @@ export const ShortKeysDialog = ({ showDialog, handleOpenShortKeysDialog, keyMap
-
- )
-}
+ );
+};
diff --git a/src/registry/editor-toolbar-buttons/toggle-auth-button.js b/src/registry/editor-toolbar-buttons/toggle-auth-button.js
index cf415b4..b7381b2 100644
--- a/src/registry/editor-toolbar-buttons/toggle-auth-button.js
+++ b/src/registry/editor-toolbar-buttons/toggle-auth-button.js
@@ -17,13 +17,11 @@ export const toggleAuthButton = () => {
),
- className: clsx(
- {
- [ styles.authAvatarPublic ]: ! isAuthenticated,
- 'is-authenticated': isAuthenticated,
- 'is-public': ! isAuthenticated,
- }
- ),
+ className: clsx( {
+ [ styles.authAvatarPublic ]: ! isAuthenticated,
+ 'is-authenticated': isAuthenticated,
+ 'is-public': ! isAuthenticated,
+ } ),
onClick: () => {
dispatch( 'wpgraphql-ide/app' ).toggleAuthentication();
},
diff --git a/src/stores/index.js b/src/stores/index.js
index 5fb96f9..f4a493a 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -4,6 +4,6 @@ import { store as appStore } from './app';
import { store as documentEditorStore } from './document-editor';
export function registerStores() {
- register( appStore );
- register( documentEditorStore );
+ register( appStore );
+ register( documentEditorStore );
}
diff --git a/tests/e2e/config/global-setup.js b/tests/e2e/config/global-setup.js
index 36fc10e..bfc473a 100644
--- a/tests/e2e/config/global-setup.js
+++ b/tests/e2e/config/global-setup.js
@@ -27,8 +27,8 @@ async function globalSetup( config ) {
} );
try {
- await requestUtils.setupRest();
- } catch (error) {
+ await requestUtils.setupRest();
+ } catch ( error ) {
console.error( '🚧 Consider checking WordPress for PHP errors.' );
throw error;
}
diff --git a/tests/e2e/specs/activity-bar-plugins.spec.js b/tests/e2e/specs/activity-bar-plugins.spec.js
index 7afc6f6..00320cf 100644
--- a/tests/e2e/specs/activity-bar-plugins.spec.js
+++ b/tests/e2e/specs/activity-bar-plugins.spec.js
@@ -1,141 +1,169 @@
import { describe, test, beforeEach, expect } from '@playwright/test';
-import {loginToWordPressAdmin, openDrawer, typeQuery} from '../utils';
+import { loginToWordPressAdmin, openDrawer, typeQuery } from '../utils';
// Hook to run before each test
-beforeEach(async ({ page, context }) => {
+beforeEach( async ( { page, context } ) => {
// Log in to WordPress Admin
- await loginToWordPressAdmin(page);
- await openDrawer(page);
+ await loginToWordPressAdmin( page );
+ await openDrawer( page );
// Grant clipboard permissions
- await context.grantPermissions(['clipboard-read', 'clipboard-write']);
-});
+ await context.grantPermissions( [ 'clipboard-read', 'clipboard-write' ] );
+} );
const selectors = {
- docsExplorerButton: '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(1)',
+ docsExplorerButton:
+ '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(1)',
docsExplorerPanel: '.graphiql-plugin .graphiql-doc-explorer',
docsExplorerSpinner: '.graphiql-doc-explorer-content .graphiql-spinner',
- historyPanelButton: '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(2)',
+ historyPanelButton:
+ '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(2)',
historyPanel: '.graphiql-plugin .graphiql-history',
- explorerButton: '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(3)',
+ explorerButton:
+ '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(3)',
explorerPanel: '.graphiql-plugin .docExplorerWrap',
- helpButton: '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(4)',
+ helpButton:
+ '.graphiql-sidebar .graphiql-sidebar-section:nth-child(1) button:nth-child(4)',
helpPanel: '.graphiql-plugin .wpgraphql-ide-help-panel',
- refetchButton: '.graphiql-sidebar .graphiql-sidebar-section:nth-child(2) button:nth-child(1)',
+ refetchButton:
+ '.graphiql-sidebar .graphiql-sidebar-section:nth-child(2) button:nth-child(1)',
executeQueryButton: '.graphiql-execute-button',
-}
+};
-describe('Activity Bar Plugins', () => {
- describe('Docs Explorer', () => {
-
- beforeEach(async ({ page }) => {
+describe( 'Activity Bar Plugins', () => {
+ describe( 'Docs Explorer', () => {
+ beforeEach( async ( { page } ) => {
// Assert that the Docs Explorer is not visible initially
- await expect(page.locator(selectors.docsExplorerPanel)).not.toBeVisible();
- await page.click(selectors.docsExplorerButton);
- });
+ await expect(
+ page.locator( selectors.docsExplorerPanel )
+ ).not.toBeVisible();
+ await page.click( selectors.docsExplorerButton );
+ } );
- test('should be visible when activated', async ({ page }) => {
+ test( 'should be visible when activated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.docsExplorerPanel)).toBeVisible();
-
- });
-
- test( 'spinner should show when schema is loading', async ({ page }) => {
-
+ await expect(
+ page.locator( selectors.docsExplorerPanel )
+ ).toBeVisible();
+ } );
+
+ test( 'spinner should show when schema is loading', async ( {
+ page,
+ } ) => {
await page.click( selectors.refetchButton );
- await expect( page.locator(selectors.docsExplorerSpinner) ).toBeVisible();
-
- });
-
- test( 'should be hidden when deactivated', async ({ page }) => {
+ await expect(
+ page.locator( selectors.docsExplorerSpinner )
+ ).toBeVisible();
+ } );
+ test( 'should be hidden when deactivated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.docsExplorerPanel)).toBeVisible();
+ await expect(
+ page.locator( selectors.docsExplorerPanel )
+ ).toBeVisible();
// Click the Docs Explorer button
- await page.click(selectors.docsExplorerButton);
+ await page.click( selectors.docsExplorerButton );
// Assert that the Docs Explorer is now hidden
- await expect(page.locator(selectors.docsExplorerPanel)).not.toBeVisible();
- });
-
-
- });
-
-
- describe('History Panel', () => {
-
- beforeEach(async ({ page }) => {
+ await expect(
+ page.locator( selectors.docsExplorerPanel )
+ ).not.toBeVisible();
+ } );
+ } );
+
+ describe( 'History Panel', () => {
+ beforeEach( async ( { page } ) => {
// Assert that the Docs Explorer is not visible initially
- await expect(page.locator(selectors.historyPanel)).not.toBeVisible();
- await page.click(selectors.historyPanelButton);
- });
+ await expect(
+ page.locator( selectors.historyPanel )
+ ).not.toBeVisible();
+ await page.click( selectors.historyPanelButton );
+ } );
- test('should be visible when activated', async ({ page }) => {
+ test( 'should be visible when activated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.historyPanel)).toBeVisible();
-
- });
-
- test( 'query should show in history panel', async ({ page }) => {
-
- await expect( page.locator( '.graphiql-history-item' ) ).not.toBeVisible();
+ await expect(
+ page.locator( selectors.historyPanel )
+ ).toBeVisible();
+ } );
+
+ test( 'query should show in history panel', async ( { page } ) => {
+ await expect(
+ page.locator( '.graphiql-history-item' )
+ ).not.toBeVisible();
await typeQuery( page, 'query { posts { nodes { id } } }' );
await page.click( selectors.executeQueryButton );
- await expect( page.locator( '.graphiql-history-item' ), 'history item shows after query is executed' ).toBeVisible();
- });
-
- test( 'should be hidden when deactivated', async ({ page }) => {
+ await expect(
+ page.locator( '.graphiql-history-item' ),
+ 'history item shows after query is executed'
+ ).toBeVisible();
+ } );
+ test( 'should be hidden when deactivated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.historyPanel)).toBeVisible();
+ await expect(
+ page.locator( selectors.historyPanel )
+ ).toBeVisible();
// Click the Docs Explorer button
- await page.click(selectors.historyPanelButton);
+ await page.click( selectors.historyPanelButton );
// Assert that the Docs Explorer is now hidden
- await expect(page.locator(selectors.historyPanel)).not.toBeVisible();
- });
-
- });
-
- describe('Explorer Panel', () => {
- beforeEach(async ({ page }) => {
+ await expect(
+ page.locator( selectors.historyPanel )
+ ).not.toBeVisible();
+ } );
+ } );
+
+ describe( 'Explorer Panel', () => {
+ beforeEach( async ( { page } ) => {
// Assert that the Docs Explorer is not visible initially
- await expect(page.locator(selectors.explorerPanel)).not.toBeVisible();
- await page.click(selectors.explorerButton);
- });
- test( 'should be visible when activated', async ({ page }) => {
+ await expect(
+ page.locator( selectors.explorerPanel )
+ ).not.toBeVisible();
+ await page.click( selectors.explorerButton );
+ } );
+ test( 'should be visible when activated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.explorerPanel)).toBeVisible();
- });
- test( 'should be hidden when deactivated', async ({ page }) => {
+ await expect(
+ page.locator( selectors.explorerPanel )
+ ).toBeVisible();
+ } );
+ test( 'should be hidden when deactivated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.explorerPanel)).toBeVisible();
+ await expect(
+ page.locator( selectors.explorerPanel )
+ ).toBeVisible();
// Click the Docs Explorer button
- await page.click(selectors.explorerButton);
+ await page.click( selectors.explorerButton );
// Assert that the Docs Explorer is now hidden
- await expect(page.locator(selectors.explorerPanel)).not.toBeVisible();
- });
- });
-
- describe('Help Panel', () => {
- beforeEach(async ({ page }) => {
+ await expect(
+ page.locator( selectors.explorerPanel )
+ ).not.toBeVisible();
+ } );
+ } );
+
+ describe( 'Help Panel', () => {
+ beforeEach( async ( { page } ) => {
// Assert that the Docs Explorer is not visible initially
- await expect(page.locator(selectors.helpPanel)).not.toBeVisible();
- await page.click(selectors.helpButton);
- });
- test( 'should be visible when activated', async ({ page }) => {
+ await expect(
+ page.locator( selectors.helpPanel )
+ ).not.toBeVisible();
+ await page.click( selectors.helpButton );
+ } );
+ test( 'should be visible when activated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.helpPanel)).toBeVisible();
- });
- test( 'should be hidden when deactivated', async ({ page }) => {
+ await expect( page.locator( selectors.helpPanel ) ).toBeVisible();
+ } );
+ test( 'should be hidden when deactivated', async ( { page } ) => {
// Assert that the Docs Explorer is now visible
- await expect(page.locator(selectors.helpPanel)).toBeVisible();
+ await expect( page.locator( selectors.helpPanel ) ).toBeVisible();
// Click the Docs Explorer button
- await page.click(selectors.helpButton);
+ await page.click( selectors.helpButton );
// Assert that the Docs Explorer is now hidden
- await expect(page.locator(selectors.helpPanel)).not.toBeVisible();
- });
- });
-
-});
+ await expect(
+ page.locator( selectors.helpPanel )
+ ).not.toBeVisible();
+ } );
+ } );
+} );
diff --git a/tests/e2e/specs/drawer.spec.js b/tests/e2e/specs/drawer.spec.js
index 1a70e33..48fa8e7 100644
--- a/tests/e2e/specs/drawer.spec.js
+++ b/tests/e2e/specs/drawer.spec.js
@@ -38,15 +38,17 @@ test( 'should open and close successfully', async ( { page } ) => {
).not.toBeVisible();
} );
-test( 'should open on JS-heavy admin page with CPU Throttling', async ( { page } ) => {
+test( 'should open on JS-heavy admin page with CPU Throttling', async ( {
+ page,
+} ) => {
await visitAdminFacingPage( page );
// Start a new CDP Session to control the browser
const context = page.context();
const session = await context.newCDPSession( page );
-
+
// Set CPU Throttling
- await session.send( 'Emulation.setCPUThrottlingRate', { rate: 4 }); // Throttles CPU to 1/4th its speed
+ await session.send( 'Emulation.setCPUThrottlingRate', { rate: 4 } ); // Throttles CPU to 1/4th its speed
// Now simulate heavy JavaScript load
await simulateHeavyJSLoad( page );
@@ -57,11 +59,10 @@ test( 'should open on JS-heavy admin page with CPU Throttling', async ( { page }
// Open the drawer and ensure it still functions under throttled conditions
await openDrawer( page );
await expect( page.locator( '.graphiql-container' ) ).toBeVisible();
-
+
// Optionally, reset CPU throttling rate after test
await session.send( 'Emulation.setCPUThrottlingRate', { rate: 1 } );
-});
-
+} );
test( 'should execute a GraphQL query successfully', async ( { page } ) => {
await page.click( selectors.editorDrawerButton );
diff --git a/tests/e2e/specs/editor-toolbar-buttons.spec.js b/tests/e2e/specs/editor-toolbar-buttons.spec.js
index 8665399..f2d4a09 100644
--- a/tests/e2e/specs/editor-toolbar-buttons.spec.js
+++ b/tests/e2e/specs/editor-toolbar-buttons.spec.js
@@ -5,8 +5,8 @@ import {
loginToWordPressAdmin,
openDrawer,
setQueryInLocalStorage,
- typeQuery
-} from "../utils";
+ typeQuery,
+} from '../utils';
import { expect } from '@playwright/test';
export const selectors = {
@@ -21,116 +21,131 @@ export const selectors = {
authButton: `.graphiql-toggle-auth-button`,
copyButton: `.graphiql-copy-query-button`,
mergeButton: `.graphiql-merge-fragments-button`,
- shareButton: `.graphiql-share-button`
+ shareButton: `.graphiql-share-button`,
};
// Login to WordPress before each test
-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);
+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 );
}
-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 }) => {
-
+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 } ) => {
// select the 2nd button in the .graphiql-toolbar
const authButton = await page.locator( selectors.authButton );
- 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 }) => {
+ 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( selectors.authButton );
- const filterValue = await authButton.evaluate(node => window.getComputedStyle(node).filter);
- expect(filterValue).not.toBe('grayscale(1)');
- });
-
- describe('Toggling auth state to public', () => {
+ const filterValue = await authButton.evaluate(
+ ( node ) => window.getComputedStyle( node ).filter
+ );
+ expect( filterValue ).not.toBe( 'grayscale(1)' );
+ } );
- beforeEach(async ({ page }) => {
+ describe( 'Toggling auth state to public', () => {
+ beforeEach( async ( { page } ) => {
// const authButton = page.locator(selectors.authButton);
const authButton = await page.locator( selectors.authButton );
await authButton.click();
- });
+ } );
- test('Auth button is in public state', async ({ page }) => {
+ test( 'Auth button is in public state', async ( { page } ) => {
// const authButton = page.locator(selectors.authButton);
const authButton = await page.locator( selectors.authButton );
- 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 }) => {
+ 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( selectors.authButton );
- const filterValue = await authButton.evaluate(node => window.getComputedStyle(node).filter);
- expect(filterValue).toBe('grayscale(1)');
- });
- });
- });
-
- describe.skip('Prettify button', () => {
-
- beforeEach(async ({ page }) => {
- await typeQuery(page, 'query{viewer{name} }'); // poorly formatted query
- });
-
- test('Misformatted query is prettified when button is clicked', async ({ page }) => {
-
- const prettifyButton = await page.locator( selectors.prettifyButton );
- const queryEditorLocator = page.locator(selectors.queryInput);
+ const filterValue = await authButton.evaluate(
+ ( node ) => window.getComputedStyle( node ).filter
+ );
+ expect( filterValue ).toBe( 'grayscale(1)' );
+ } );
+ } );
+ } );
+
+ describe.skip( 'Prettify button', () => {
+ beforeEach( async ( { page } ) => {
+ await typeQuery( page, 'query{viewer{name} }' ); // poorly formatted query
+ } );
+
+ test( 'Misformatted query is prettified when button is clicked', async ( {
+ page,
+ } ) => {
+ const prettifyButton = await page.locator(
+ selectors.prettifyButton
+ );
+ const queryEditorLocator = page.locator( selectors.queryInput );
// Get the value from the CodeMirror instance
- const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator);
+ const codeMirrorValue =
+ await getCodeMirrorValue( queryEditorLocator );
// Ensure the query is initially poorly formatted
- await expect(codeMirrorValue).toBe('query{viewer{name} }');
+ await expect( codeMirrorValue ).toBe( 'query{viewer{name} }' );
// Make sure the prettify button is visible and interactable
- await expect(prettifyButton).toBeVisible();
- await expect(prettifyButton).toBeEnabled();
+ await expect( prettifyButton ).toBeVisible();
+ await expect( prettifyButton ).toBeEnabled();
// Click the prettify button
await prettifyButton.click();
@@ -138,47 +153,47 @@ describe('Toolbar Buttons', () => {
// wait for the action to complete
await page.waitForTimeout( 1000 );
- const codeMirrorValleAfterClick = await getCodeMirrorValue( queryEditorLocator );
+ const codeMirrorValleAfterClick =
+ await getCodeMirrorValue( queryEditorLocator );
- await expect(codeMirrorValleAfterClick).toContain(`{
+ await expect( codeMirrorValleAfterClick ).toContain( `{
viewer {
name
}
-}`
- );
-
- });
- });
-
- describe.skip('Copy button', () => {
-
- beforeEach(async ({ page }) => {
- await typeQuery(page, '{ posts { nodes { id } } }' ); // poorly formatted query
- });
-
- test( 'Clicking the copy button copies the query to the clipboard', async ({ page }) => {
-
+}` );
+ } );
+ } );
+
+ describe.skip( 'Copy button', () => {
+ beforeEach( async ( { page } ) => {
+ await typeQuery( page, '{ posts { nodes { id } } }' ); // poorly formatted query
+ } );
+
+ test( 'Clicking the copy button copies the query to the clipboard', async ( {
+ page,
+ } ) => {
// clear the clipboard
- await page.evaluate( () => navigator.clipboard.writeText('' ) );
+ await page.evaluate( () => navigator.clipboard.writeText( '' ) );
// assert the clipboard is empty
- const clipboardTextBefore = await page.evaluate( () => navigator.clipboard.readText() );
+ const clipboardTextBefore = await page.evaluate( () =>
+ navigator.clipboard.readText()
+ );
expect( clipboardTextBefore ).toBe( '' );
// Click the copy button
const copyButton = await page.locator( selectors.copyButton );
await copyButton.click();
- const clipboardText = await page.evaluate( () => navigator.clipboard.readText() );
+ const clipboardText = await page.evaluate( () =>
+ navigator.clipboard.readText()
+ );
await expect( clipboardText ).toBe( '{ posts { nodes { id } } }' );
- });
-
-
- });
-
- describe('Merge Fragments button', () => {
+ } );
+ } );
+ describe( 'Merge Fragments button', () => {
const queryWithFragment = `{
...TestFragment
}
@@ -188,29 +203,34 @@ describe('Toolbar Buttons', () => {
}
}`;
- beforeEach(async ({ page }) => {
- await setQueryInLocalStorage(page, queryWithFragment);// query with fragment
- await page.reload({ waitUntil: 'networkidle' }); // reload page to initialize with localStorage
- await openDrawer(page);
- });
+ 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( 'Clicking the merge fragments button merges the fragment into the query', async ({ page }) => {
+ 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 = page.locator( selectors.mergeButton );
- await expect(mergeButton).toBeVisible();
- await expect(mergeButton).toBeEnabled();
+ await expect( mergeButton ).toBeVisible();
+ await expect( mergeButton ).toBeEnabled();
await mergeButton.click();
- const queryEditorLocator = page.locator(selectors.queryInput);
+ const queryEditorLocator = page.locator( selectors.queryInput );
- const queryEditorTextContent = await queryEditorLocator.evaluate( node => node.textContent );
+ const queryEditorTextContent = await queryEditorLocator.evaluate(
+ ( node ) => node.textContent
+ );
// wait for the merge to complete
await page.waitForTimeout( 1000 );
// Get the value from the CodeMirror instance
- const codeMirrorValue = await getCodeMirrorValue(queryEditorLocator);
+ const codeMirrorValue =
+ await getCodeMirrorValue( queryEditorLocator );
// Verify that the query is now merged properly and formatted
const expectedMergedQueryOnGithub = `{
@@ -219,7 +239,7 @@ describe('Toolbar Buttons', () => {
}
}`;
-const expectedMergedQueryForLocalhostTestsButWeDontFullyUnderstandWhyItsDifferentThanGithub = `{
+ const expectedMergedQueryForLocalhostTestsButWeDontFullyUnderstandWhyItsDifferentThanGithub = `{
... on RootQuery {
viewer {
name
@@ -227,38 +247,41 @@ const expectedMergedQueryForLocalhostTestsButWeDontFullyUnderstandWhyItsDifferen
}
}`;
- expect(codeMirrorValue === expectedMergedQueryOnGithub || codeMirrorValue === expectedMergedQueryForLocalhostTestsButWeDontFullyUnderstandWhyItsDifferentThanGithub).toBeTruthy();
-
- });
-
-
- })
-
- 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 }) => {
+ expect(
+ codeMirrorValue === expectedMergedQueryOnGithub ||
+ codeMirrorValue ===
+ expectedMergedQueryForLocalhostTestsButWeDontFullyUnderstandWhyItsDifferentThanGithub
+ ).toBeTruthy();
+ } );
+ } );
+
+ 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(''));
+ await page.evaluate( () => navigator.clipboard.writeText( '' ) );
// Assert the clipboard is empty
- const clipboardTextBefore = await page.evaluate(() => navigator.clipboard.readText());
- expect(clipboardTextBefore).toBe('');
+ const clipboardTextBefore = await page.evaluate( () =>
+ navigator.clipboard.readText()
+ );
+ expect( clipboardTextBefore ).toBe( '' );
// Click the copy button
- const shareButton = await page.locator(selectors.shareButton);
+ const shareButton = await page.locator( selectors.shareButton );
await shareButton.click();
// Wait for the clipboard to be updated
- const clipboardText = await page.evaluate( () => navigator.clipboard.readText() );
-
- await expect(clipboardText).toContain( '&wpgraphql_ide' );
- });
-
-
- });
+ const clipboardText = await page.evaluate( () =>
+ navigator.clipboard.readText()
+ );
-});
+ await expect( clipboardText ).toContain( '&wpgraphql_ide' );
+ } );
+ } );
+} );
diff --git a/tests/e2e/specs/environment.spec.js b/tests/e2e/specs/environment.spec.js
index 699ff3a..dfb8e5a 100644
--- a/tests/e2e/specs/environment.spec.js
+++ b/tests/e2e/specs/environment.spec.js
@@ -1,20 +1,24 @@
import { test, expect } from '@playwright/test';
import { loginToWordPressAdmin, visitPluginsPage } from '../utils';
-test.beforeEach(async ({ page }) => {
- await loginToWordPressAdmin(page);
-});
+test.beforeEach( async ( { page } ) => {
+ await loginToWordPressAdmin( page );
+} );
-test( 'expect the enqueued wpgraphql-ide script to have the defer attribute', async ( { page } ) => {
- await visitPluginsPage( page );
+test( 'expect the enqueued wpgraphql-ide script to have the defer attribute', async ( {
+ page,
+} ) => {
+ await visitPluginsPage( page );
- // Retrieve the script tags and check for the defer attribute
- const hasDeferAttribute = await page.evaluate( () => {
- const scripts = Array.from( document.querySelectorAll( 'script' ) );
- const targetScript = scripts.find( script => script.src.includes( 'wpgraphql-ide' ) );
- return targetScript?.hasAttribute( 'defer' );
- });
+ // Retrieve the script tags and check for the defer attribute
+ const hasDeferAttribute = await page.evaluate( () => {
+ const scripts = Array.from( document.querySelectorAll( 'script' ) );
+ const targetScript = scripts.find( ( script ) =>
+ script.src.includes( 'wpgraphql-ide' )
+ );
+ return targetScript?.hasAttribute( 'defer' );
+ } );
- // Assert that the defer attribute is present
- expect( hasDeferAttribute ).toBe( true );
-});
+ // Assert that the defer attribute is present
+ expect( hasDeferAttribute ).toBe( true );
+} );
diff --git a/tests/e2e/specs/query-composer.spec.js b/tests/e2e/specs/query-composer.spec.js
index a08bbe9..48212ca 100644
--- a/tests/e2e/specs/query-composer.spec.js
+++ b/tests/e2e/specs/query-composer.spec.js
@@ -1,12 +1,17 @@
-import {loginToWordPressAdmin, openDrawer, typeQuery, visitAdminFacingPage} from "../utils";
-import {expect, test } from "@wordpress/e2e-test-utils-playwright";
+import {
+ loginToWordPressAdmin,
+ openDrawer,
+ typeQuery,
+ visitAdminFacingPage,
+} from '../utils';
+import { expect, test } from '@wordpress/e2e-test-utils-playwright';
// Login to WordPress before each test
test.beforeEach( async ( { page } ) => {
await loginToWordPressAdmin( page );
} );
-async function navigateToGraphiQLAndOpenQueryExplorer({ page }) {
+async function navigateToGraphiQLAndOpenQueryExplorer( { page } ) {
await expect( page.locator( '.graphiql-container' ) ).toBeHidden();
await openDrawer( page );
await page.click( '[aria-label="Show GraphiQL Explorer"]' );
@@ -14,8 +19,9 @@ async function navigateToGraphiQLAndOpenQueryExplorer({ page }) {
}
test.describe( 'GraphiQL Query Composer', () => {
-
- test( 'Clicking the Query Composer button opens and closes the Query Composer', async ( { page } ) => {
+ test( 'Clicking the Query Composer button opens and closes the Query Composer', async ( {
+ page,
+ } ) => {
await visitAdminFacingPage( page );
await expect( page.locator( '.graphiql-container' ) ).toBeHidden();
await openDrawer( page );
@@ -31,109 +37,136 @@ test.describe( 'GraphiQL Query Composer', () => {
// close query composer and check if it is hidden
await page.click( '[aria-label="Hide GraphiQL Explorer"]' );
await expect( page.locator( '.docExplorerWrap' ) ).toBeHidden();
+ } );
- });
-
- test( 'Changing the name of an operation in the explorer updates the query editor', async ( { page } ) => {
- await navigateToGraphiQLAndOpenQueryExplorer( { page });
+ test( 'Changing the name of an operation in the explorer updates the query editor', async ( {
+ page,
+ } ) => {
+ await navigateToGraphiQLAndOpenQueryExplorer( { page } );
- const firstQueryOperationNameInput = await page.locator( '.graphiql-explorer-root>div>div:first-of-type input' );
+ const firstQueryOperationNameInput = await page.locator(
+ '.graphiql-explorer-root>div>div:first-of-type input'
+ );
- const queryEditor = await page.locator('[aria-label="Query Editor"] .CodeMirror' );
+ const queryEditor = await page.locator(
+ '[aria-label="Query Editor"] .CodeMirror'
+ );
await expect( queryEditor ).not.toContainText( 'NewQueryName' );
// focus on the input field
await firstQueryOperationNameInput.fill( 'NewQueryName' );
await expect( queryEditor ).toContainText( 'NewQueryName' );
+ } );
- });
-
- test( 'Selecting a field in the explorer adds that field to the query', async ( { page } ) => {
-
- await navigateToGraphiQLAndOpenQueryExplorer( { page });
+ test( 'Selecting a field in the explorer adds that field to the query', async ( {
+ page,
+ } ) => {
+ await navigateToGraphiQLAndOpenQueryExplorer( { page } );
- const firstFieldSelector = '.graphiql-explorer-root>div>div>div.graphiql-explorer-node:nth-of-type(2) > span';
+ const firstFieldSelector =
+ '.graphiql-explorer-root>div>div>div.graphiql-explorer-node:nth-of-type(2) > span';
const firstField = await page.locator( firstFieldSelector );
await expect( firstField ).toBeVisible();
- const fieldName = await page.locator( firstFieldSelector ).getAttribute( 'data-field-name' );
+ const fieldName = await page
+ .locator( firstFieldSelector )
+ .getAttribute( 'data-field-name' );
- const queryEditor = await page.locator('[aria-label="Query Editor"] .CodeMirror' );
+ const queryEditor = await page.locator(
+ '[aria-label="Query Editor"] .CodeMirror'
+ );
await expect( queryEditor ).not.toContainText( fieldName );
await firstField.click();
await expect( queryEditor ).toContainText( fieldName );
+ } );
- });
+ test( 'Selecting a field in the explorer that has arguments and filling in arguments updates the query', async ( {
+ page,
+ } ) => {
+ await navigateToGraphiQLAndOpenQueryExplorer( { page } );
- test( 'Selecting a field in the explorer that has arguments and filling in arguments updates the query', async ( { page } ) => {
-
- await navigateToGraphiQLAndOpenQueryExplorer( { page });
-
- const fieldSelector = '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
- const field = await page.locator( `${fieldSelector}>span` );
+ const fieldSelector =
+ '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
+ const field = await page.locator( `${ fieldSelector }>span` );
await expect( field ).toBeVisible();
const fieldName = await field.getAttribute( 'data-field-name' );
- const queryEditor = await page.locator('[aria-label="Query Editor"] .CodeMirror' );
+ const queryEditor = await page.locator(
+ '[aria-label="Query Editor"] .CodeMirror'
+ );
await expect( queryEditor ).not.toContainText( fieldName );
await expect( queryEditor ).not.toContainText( 'id:' );
await expect( queryEditor ).not.toContainText( '123' );
await field.click();
await expect( queryEditor ).toContainText( fieldName );
-
- const idArgumentField = await page.locator( `${fieldSelector}>div.graphiql-explorer-contentNode div[data-arg-name="id"]` );
+ const idArgumentField = await page.locator(
+ `${ fieldSelector }>div.graphiql-explorer-contentNode div[data-arg-name="id"]`
+ );
await idArgumentField.click();
- const idArgumentFieldInput = await page.locator( `${fieldSelector}>div.graphiql-explorer-contentNode div[data-arg-name="id"] input` );
+ const idArgumentFieldInput = await page.locator(
+ `${ fieldSelector }>div.graphiql-explorer-contentNode div[data-arg-name="id"] input`
+ );
await idArgumentFieldInput.fill( '123' );
await expect( queryEditor ).toContainText( 'id: "123"' );
+ } );
+ test( 'Deleting a query from the explorer removes it from the document', async ( {
+ page,
+ } ) => {
+ await navigateToGraphiQLAndOpenQueryExplorer( { page } );
- });
-
- test( 'Deleting a query from the explorer removes it from the document', async ( { page } ) => {
-
- await navigateToGraphiQLAndOpenQueryExplorer( { page });
-
- const fieldSelector = '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
- const field = await page.locator( `${fieldSelector}>span` );
+ const fieldSelector =
+ '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
+ const field = await page.locator( `${ fieldSelector }>span` );
await expect( field ).toBeVisible();
const fieldName = await field.getAttribute( 'data-field-name' );
- const queryEditor = await page.locator('[aria-label="Query Editor"] .CodeMirror' );
+ const queryEditor = await page.locator(
+ '[aria-label="Query Editor"] .CodeMirror'
+ );
await expect( queryEditor ).not.toContainText( fieldName );
await field.click();
await expect( queryEditor ).toContainText( fieldName );
- const firstQueryOperationTitleBar = await page.locator( '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar' );
+ const firstQueryOperationTitleBar = await page.locator(
+ '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar'
+ );
await firstQueryOperationTitleBar.hover();
- const deleteButton = await page.locator( '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar button:first-of-type' );
+ const deleteButton = await page.locator(
+ '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar button:first-of-type'
+ );
await deleteButton.click();
await expect( queryEditor ).not.toContainText( fieldName );
+ } );
- });
-
- test( 'Copying a query from the explorer adds a copy to the document', async ( { page } ) => {
-
- await navigateToGraphiQLAndOpenQueryExplorer( { page });
+ test( 'Copying a query from the explorer adds a copy to the document', async ( {
+ page,
+ } ) => {
+ await navigateToGraphiQLAndOpenQueryExplorer( { page } );
- const fieldSelector = '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
- const field = await page.locator( `${fieldSelector}>span` );
+ const fieldSelector =
+ '.graphiql-explorer-root>div>div>div.graphiql-explorer-contentNode';
+ const field = await page.locator( `${ fieldSelector }>span` );
await expect( field ).toBeVisible();
const fieldName = await field.getAttribute( 'data-field-name' );
- const queryEditor = await page.locator('[aria-label="Query Editor"] .CodeMirror' );
+ const queryEditor = await page.locator(
+ '[aria-label="Query Editor"] .CodeMirror'
+ );
await expect( queryEditor ).not.toContainText( fieldName );
await field.click();
await expect( queryEditor ).toContainText( fieldName );
- const firstQueryOperationTitleBar = await page.locator( '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar' );
+ const firstQueryOperationTitleBar = await page.locator(
+ '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar'
+ );
await firstQueryOperationTitleBar.hover();
- const copyButton = await page.locator( '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar button:nth-of-type(2)' );
+ const copyButton = await page.locator(
+ '.graphiql-explorer-root>div>div>div.graphiql-operation-title-bar button:nth-of-type(2)'
+ );
await copyButton.click();
await expect( queryEditor ).toContainText( `MyQuery` );
await expect( queryEditor ).toContainText( `MyQueryCopy` );
-
- });
-
-});
+ } );
+} );
diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js
index 27f3af6..10f91ca 100644
--- a/tests/e2e/utils.js
+++ b/tests/e2e/utils.js
@@ -53,25 +53,26 @@ export async function loginToWordPressAdmin( page ) {
/**
* Returns the value of a CodeMirror editor.
- * @param locator The Playwright locator for the CodeMirror editor.
+ * @param locator The Playwright locator for the CodeMirror editor.
* @return {Promise<*>}
*/
export async function getCodeMirrorValue( locator ) {
- return await locator.evaluate((queryEditorElement) => {
+ return await locator.evaluate( ( queryEditorElement ) => {
// Access the CodeMirror instance and get its value
const codeMirrorInstance = queryEditorElement.CodeMirror;
return codeMirrorInstance.getValue();
- });
+ } );
}
/**
* 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.
+ * @param locator The Playwright locator for the CodeMirror editor.
+ * @param string The value to set in the CodeMirror editor.
+ * @param value
* @return {Promise<*>}
*/
export async function setCodeMirrorValue( locator, value ) {
- return await locator.evaluate((queryEditorElement, val) => {
+ return await locator.evaluate( ( queryEditorElement, val ) => {
// Access the CodeMirror instance and get its value
const codeMirrorInstance = queryEditorElement.CodeMirror;
codeMirrorInstance.setValue( val );
@@ -214,52 +215,61 @@ async function selectAndClearTextUsingKeyboard( page, selector ) {
await page.keyboard.press( 'Backspace' ); // Clear selected text
}
-export async function simulateHeavyJSLoad(page) {
- await page.evaluate(() => {
- // Simulate heavy DOM manipulations
- for (let i = 0; i < 500; i++) {
- const div = document.createElement('div');
- div.textContent = `Heavy content ${i}`;
- div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
- document.body.appendChild(div);
- }
+export async function simulateHeavyJSLoad( page ) {
+ await page.evaluate( () => {
+ // Simulate heavy DOM manipulations
+ for ( let i = 0; i < 500; i++ ) {
+ const div = document.createElement( 'div' );
+ div.textContent = `Heavy content ${ i }`;
+ div.style.backgroundColor =
+ '#' + Math.floor( Math.random() * 16777215 ).toString( 16 );
+ document.body.appendChild( div );
+ }
- // Simulate heavy computations
- const heavyComputation = Array.from({ length: 50000 }, (_, i) => i ** 2).reduce((a, b) => a + b);
- console.log('Heavy computation result:', heavyComputation);
+ // Simulate heavy computations
+ const heavyComputation = Array.from(
+ { length: 50000 },
+ ( _, i ) => i ** 2
+ ).reduce( ( a, b ) => a + b );
+ console.log( 'Heavy computation result:', heavyComputation );
- // Simulate asynchronous operations
- new Promise(resolve => setTimeout(resolve, 5000)).then(() => console.log('Delayed operation completed'));
+ // Simulate asynchronous operations
+ new Promise( ( resolve ) => setTimeout( resolve, 5000 ) ).then( () =>
+ console.log( 'Delayed operation completed' )
+ );
- // Simulate frequent DOM updates
- setInterval(() => {
- const randomDiv = document.querySelector(`div:nth-child(${Math.floor(Math.random() * 500) + 1})`);
- if (randomDiv) {
- randomDiv.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
- }
- }, 10);
- });
+ // Simulate frequent DOM updates
+ setInterval( () => {
+ const randomDiv = document.querySelector(
+ `div:nth-child(${ Math.floor( Math.random() * 500 ) + 1 })`
+ );
+ if ( randomDiv ) {
+ randomDiv.style.backgroundColor =
+ '#' + Math.floor( Math.random() * 16777215 ).toString( 16 );
+ }
+ }, 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
}
+ * @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.
+ * @return {Promise}
*/
-export async function setQueryInLocalStorage(page, value) {
- await page.evaluate((val) => {
- localStorage.setItem('graphiql:query', val);
- }, value);
+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.
+ * @return {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');
- });
+export async function getQueryFromLocalStorage( page ) {
+ return await page.evaluate( () => {
+ return localStorage.getItem( 'graphiql:query' );
+ } );
}