rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-11 09:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: graphql doc close button (#7667)

Browse Source 
* fix: graphql doc close button

* fix

* fix
This commit is contained in:
Pooja
2026-04-03 13:57:39 +05:30
committed by GitHub
parent f112c4fdd8
commit 5086ac4b8c
2 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/bruno-app/src/components/RequestTabPanel/index.js
View File

@@ -106,8 +106,9 @@ const RequestTabPanel = () => {
const showGqlDocs = focusedTab?.gqlDocsOpen || false;
const onSchemaLoad = useCallback((schema) => setSchema(schema), []);
const toggleDocs = useCallback(() => {
dispatch(updateGqlDocsOpen({ uid: activeTabUid, gqlDocsOpen: !showGqlDocs }));
const toggleDocs = useCallback((value = null) => {
const newValue = value !== null ? !!value : !showGqlDocs;
dispatch(updateGqlDocsOpen({ uid: activeTabUid, gqlDocsOpen: newValue }));
}, [dispatch, activeTabUid, showGqlDocs]);
const handleGqlClickReference = useCallback((reference) => {
@@ -398,7 +399,7 @@ const RequestTabPanel = () => {
{item.type === 'graphql-request' ? (
<div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
<DocExplorer schema={schema} ref={(r) => (docExplorerRef.current = r)}>
<button className="mr-2" onClick={toggleDocs} aria-label="Close Documentation Explorer">
<button className="mr-2" data-testid="graphql-docs-close-button" onClick={() => toggleDocs(false)} aria-label="Close Documentation Explorer">
{'\u2715'}
</button>
</DocExplorer>

49
tests/graphql/docs-explorer/docs-explorer.spec.ts Normal file
View File

@@ -0,0 +1,49 @@
import { test, expect } from '../../../playwright';
import { createCollection, closeAllCollections } from '../../utils/page';
import { buildCommonLocators } from '../../utils/page/locators';
test.describe('GraphQL Docs Explorer', () => {
test.afterEach(async ({ page }) => {
await closeAllCollections(page);
});
test('Can open and close the docs explorer', async ({ page, createTmpDir }) => {
const collectionName = 'test-docs-explorer';
const locators = buildCommonLocators(page);
const docsContainer = page.locator('.graphql-docs-explorer-container');
await test.step('Create collection and GraphQL request', async () => {
await createCollection(page, collectionName, await createTmpDir());
// Create a GraphQL request
await locators.sidebar.collection(collectionName).hover();
await locators.actions.collectionActions(collectionName).click();
await locators.dropdown.item('New Request').click();
await page.getByTestId('graphql-request').click();
await page.getByTestId('request-name').fill('test-graphql');
await page.getByTestId('new-request-url').locator('.CodeMirror').click();
await page.keyboard.type('https://graphql.anilist.co');
await locators.modal.button('Create').click();
});
await test.step('Open docs explorer via menu', async () => {
const dotsMenu = page.getByRole('tablist').locator('button[title="More actions"]');
await dotsMenu.click();
const docsItem = page.locator('[data-testid="menu-dropdown-docs"]');
await docsItem.waitFor({ state: 'visible' });
await docsItem.click();
await expect(docsContainer).toBeVisible();
await expect(docsContainer.locator('.doc-explorer-title')).toContainText('Documentation Explorer');
});
await test.step('Close docs explorer with the close button', async () => {
const closeButton = docsContainer.getByTestId('graphql-docs-close-button');
await expect(closeButton).toBeVisible();
await closeButton.click();
await expect(docsContainer).toBeHidden();
});
});
});