Skip to content

Commit 55453ec

Browse files
jasonbahljasonbahl
committed
- modify test that checks for the visibility of the docs explorer for initial load vs when it's toggled open and closed again
1 parent 0d8e682 commit 55453ec

File tree

1 file changed

+59
-45
lines changed

1 file changed

+59
-45
lines changed

‎tests/e2e/specs/graphiql.spec.js‎

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,33 @@ const selectors = {
2020
};
2121

2222
// Login to WordPress before each test
23-
test.beforeEach( async ( { page } ) => {
24-
await loginToWordPressAdmin( page );
23+
test.beforeEach(async ({ page }) => {
24+
await loginToWordPressAdmin(page);
2525
await page.evaluate(() => localStorage.clear());
26-
} );
26+
});
2727

2828
test.describe('GraphiQL', () => {
2929

3030
test('it executes query', async ({ page }) => {
3131

32-
await loadGraphiQL( page );
33-
await typeQuery( page, `{posts{nodes{id}}}` );
34-
await page.click( selectors.executeQueryButton );
32+
await loadGraphiQL(page);
33+
await typeQuery(page, `{posts{nodes{id}}}`);
34+
await page.click(selectors.executeQueryButton);
3535
await page.waitForLoadState('networkidle');
36-
const response = await page.locator( selectors.graphiqlResponse );
37-
await expect( response ).not.toContainText( 'errors' );
38-
await expect( response ).toContainText( "posts" );
36+
const response = await page.locator(selectors.graphiqlResponse);
37+
await expect(response).not.toContainText('errors');
38+
await expect(response).toContainText("posts");
3939

4040
});
4141

4242

4343
test('it renders errors when errors are expected', async ({ page }) => {
44-
await loadGraphiQL( page );
45-
await typeQuery( page, `{nonExistentFieldThatShouldError}` );
46-
await page.click( selectors.executeQueryButton );
44+
await loadGraphiQL(page);
45+
await typeQuery(page, `{nonExistentFieldThatShouldError}`);
46+
await page.click(selectors.executeQueryButton);
4747
await page.waitForLoadState('networkidle');
48-
const response = await page.locator( selectors.graphiqlResponse );
49-
await expect( response ).toContainText( 'errors' );
48+
const response = await page.locator(selectors.graphiqlResponse);
49+
await expect(response).toContainText('errors');
5050
});
5151

5252
test('it loads with custom query from url query params', async ({ page }) => {
@@ -56,66 +56,80 @@ test.describe('GraphiQL', () => {
5656
// when it loads
5757
const alias = 'alias' + Math.random().toString(36).substring(7);
5858

59-
await loadGraphiQL( page, { query: `query TestFromUri { posts { nodes { id ${alias}:title } } }`} );
59+
await loadGraphiQL(page, { query: `query TestFromUri { posts { nodes { id ${alias}:title } } }` });
6060
await page.waitForLoadState('networkidle');
61-
const editor = await page.locator( selectors.graphiqlContainer );
62-
await expect( editor ).toContainText( 'TestFromUri' );
63-
await expect( editor ).toContainText( 'posts' );
64-
await expect( editor ).toContainText( 'nodes' );
65-
await expect( editor ).toContainText( 'id' );
66-
await expect( editor ).toContainText( alias );
61+
const editor = await page.locator(selectors.graphiqlContainer);
62+
await expect(editor).toContainText('TestFromUri');
63+
await expect(editor).toContainText('posts');
64+
await expect(editor).toContainText('nodes');
65+
await expect(editor).toContainText('id');
66+
await expect(editor).toContainText(alias);
6767
});
6868

6969
test('it loads with the query composer hidden by default', async ({ page }) => {
70-
await loadGraphiQL( page, { query: `{posts{nodes{id}}}`} );
71-
const queryComposer = await page.locator( '.query-composer-wrap' );
72-
await expect( queryComposer ).not.toBeVisible();
70+
await loadGraphiQL(page, { query: `{posts{nodes{id}}}` });
71+
const queryComposer = await page.locator('.query-composer-wrap');
72+
await expect(queryComposer).not.toBeVisible();
7373
});
7474

7575
test.skip('it loads with query composer open if queryParam says to', async ({ page }) => {
76-
await loadGraphiQL( page, { query: `{posts{nodes{id}}}`, isQueryComposerOpen: "true" } );
77-
const queryComposer = await page.locator( '.query-composer-wrap' );
78-
await expect( queryComposer ).toBeVisible();
76+
await loadGraphiQL(page, { query: `{posts{nodes{id}}}`, isQueryComposerOpen: "true" });
77+
const queryComposer = await page.locator('.query-composer-wrap');
78+
await expect(queryComposer).toBeVisible();
7979
});
8080

8181
test('opens query composer on click', async ({ page }) => {
82-
await loadGraphiQL( page );
83-
const button = page.locator( "xpath=//button[contains(text(), 'Query Composer')]" );
84-
const queryComposer = await page.locator( '.query-composer-wrap' );
82+
await loadGraphiQL(page);
83+
const button = page.locator("xpath=//button[contains(text(), 'Query Composer')]");
84+
const queryComposer = await page.locator('.query-composer-wrap');
8585

8686
// composer should be closed by default
87-
await expect( queryComposer ).not.toBeVisible();
87+
await expect(queryComposer).not.toBeVisible();
8888

8989
// clicking the button should open it
9090
await button.click();
91-
await page.waitForTimeout( 1000 );
92-
await expect( queryComposer ).toBeVisible();
91+
await page.waitForTimeout(1000);
92+
await expect(queryComposer).toBeVisible();
9393

9494
// clicking again should close it
9595
await button.click();
96-
await page.waitForTimeout( 1000 );
97-
await expect( queryComposer ).not.toBeVisible();
96+
await page.waitForTimeout(1000);
97+
await expect(queryComposer).not.toBeVisible();
9898
});
9999

100100

101101
test('documentation explorer can be toggled open and closed', async ({ page }) => {
102-
await loadGraphiQL( page );
103-
const openButton = page.locator( "button.docExplorerShow" );
104-
const docExplorerWrap = await page.locator( '.doc-explorer' );
102+
await loadGraphiQL(page);
103+
const openButton = page.locator("button.docExplorerShow");
104+
const docExplorerWrap = await page.locator('.docExplorerWrap');
105105

106-
// docs should be closed by default
107-
await expect( docExplorerWrap ).not.toBeVisible();
106+
// Check if the wrapper is hidden by its parent's styles
107+
const isInitiallyHidden = await page.evaluate(() => {
108+
const wrapper = document.querySelector('.docExplorerWrap')?.parentElement;
109+
return wrapper ? window.getComputedStyle(wrapper).opacity === '0' : true;
110+
});
111+
expect(isInitiallyHidden).toBeTruthy();
108112

109113
// clicking the openButton should open it
110114
await openButton.click();
111-
await page.waitForTimeout( 1000 );
112-
await expect( docExplorerWrap ).toBeVisible();
115+
await page.waitForTimeout(1000);
116+
117+
const isVisible = await page.evaluate(() => {
118+
const wrapper = document.querySelector('.docExplorerWrap')?.parentElement;
119+
return wrapper ? window.getComputedStyle(wrapper).opacity === '1' : false;
120+
});
121+
expect(isVisible).toBeTruthy();
113122

114123
// clicking the close button should close it
115-
const closeButton = page.locator( "button.docExplorerHide" );
124+
const closeButton = page.locator("button.docExplorerHide");
116125
await closeButton.click();
117-
await page.waitForTimeout( 1000 );
118-
await expect( docExplorerWrap ).not.toBeVisible();
126+
await page.waitForTimeout(1000);
127+
128+
const isHiddenAgain = await page.evaluate(() => {
129+
const wrapper = document.querySelector('.docExplorerWrap')?.parentElement;
130+
return wrapper ? window.getComputedStyle(wrapper).opacity === '0' : true;
131+
});
132+
expect(isHiddenAgain).toBeTruthy();
119133
});
120134

121135
});

0 commit comments

Comments
 (0)