chore: fix playwright tests

This commit is contained in:
Bijin A B
2025-12-27 13:26:16 +05:30
parent 073117aa1b
commit 10bb2de301
6 changed files with 17 additions and 14 deletions

View File

@@ -30,7 +30,7 @@ const MessageToolbar = ({
return (
<div className="message-toolbar">
<span className="message-label">Message {index + 1}</span>
<div className="toolbar-actions">
<div className="toolbar-actions mr-2">
<ToolHint text="Format JSON" toolhintId={`prettify-msg-${index}`}>
<button onClick={onPrettify} className="toolbar-btn">
<IconWand size={16} strokeWidth={1.5} />
@@ -49,6 +49,7 @@ const MessageToolbar = ({
onClick={onSend}
disabled={!isConnectionActive}
className={`toolbar-btn ${!isConnectionActive ? 'disabled' : ''}`}
data-testid={`grpc-send-message-${index}`}
>
<IconSend size={16} strokeWidth={1.5} />
</button>
@@ -266,6 +267,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
<StyledWrapper>
<div
ref={messagesContainerRef}
data-testid="grpc-messages-container"
className={`messages-container ${canClientSendMultipleMessages && messagesToShow.length > 1 ? 'multi' : 'single'}`}
>
{messagesToShow.map((message, index) => (
@@ -292,6 +294,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
size="sm"
fullWidth
icon={<IconPlus size={14} strokeWidth={1.5} />}
data-testid="grpc-add-message-button"
>
Add Message
</Button>

View File

@@ -27,7 +27,7 @@ const StyledWrapper = styled.div`
&:has(.tag-remove:hover) {
background-color: ${(props) => props.theme.background.surface2};
border-color: ${(props) => props.theme.requestTabs.active.border || props.theme.requestTabs.bottomBorder};
border-color: ${(props) => props.theme.requestTabs.bottomBorder};
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}

View File

@@ -88,7 +88,7 @@ test.describe('make grpc requests', () => {
await test.step('verify response items are rendered', async () => {
await expect(locators.response.content()).toBeVisible();
await expect(locators.response.container()).toBeVisible();
await expect(locators.response.accordion()).toBeVisible();
await expect(locators.response.list()).toBeVisible();
await expect(locators.response.responseItems()).toHaveCount(10);
});
@@ -190,7 +190,7 @@ test.describe('make grpc requests', () => {
await test.step('verify response items are rendered', async () => {
await expect(locators.response.content()).toBeVisible();
await expect(locators.response.container()).toBeVisible();
await expect(locators.response.accordion()).toBeVisible();
await expect(locators.response.list()).toBeVisible();
await expect(locators.response.responseItems()).toHaveCount(2);
});

View File

@@ -4,8 +4,8 @@ import { buildCommonLocators } from '../../utils/page/locators';
import { waitForPredicate } from '../../utils/wait';
const isRequestSaved = async (saveButton: Locator) => {
const savedColor = '#9f9f9f';
return (await saveButton.evaluate((d) => d.querySelector('svg')?.getAttribute('stroke') ?? '#invalid')) === savedColor;
// Saved state uses the className cursor-default; unsaved uses cursor-pointer.
return await saveButton.locator('svg').evaluate((node) => (node as HTMLElement).classList.contains('cursor-default'));
};
const setup = async (page: Page, createTmpDir: (tag?: string | undefined) => Promise<string>) => {
@@ -61,13 +61,13 @@ test.describe.serial('save requests', () => {
await page.keyboard.insertText(replacementUrl);
// check if the request is now unsaved
expect(await isRequestSaved(locators.saveButton())).toBe(false);
await expect(await isRequestSaved(locators.saveButton())).toBe(false);
// trigger a save
locators.saveButton().click();
// Wait for it to be saved
const result = await waitForPredicate(() => isRequestSaved(locators.saveButton()));
expect(result).toBe(true);
await expect(result).toBe(true);
});
});

View File

@@ -195,7 +195,7 @@ export const buildGrpcCommonLocators = (page: Page) => ({
content: () => page.getByTestId('grpc-response-content'),
container: () => page.getByTestId('grpc-responses-container'),
singleResponse: () => page.getByTestId('grpc-single-response'),
accordion: () => page.getByTestId('grpc-responses-accordion'),
list: () => page.getByTestId('grpc-responses-list'),
responseItem: (index: number) => page.getByTestId(`grpc-response-item-${index}`),
responseItems: () => page.locator('[data-testid^="grpc-response-item-"]'),
tabCount: () => page.getByTestId('tab-response-count')

View File

@@ -8,8 +8,8 @@ const BRU_REQ_NAME = /^base$/;
// TODO: reaper move to someplace common
const isRequestSaved = async (saveButton: Locator) => {
const savedColor = '#9f9f9f';
return (await saveButton.evaluate((d) => d.querySelector('svg')?.getAttribute('stroke') ?? '#invalid')) === savedColor;
// Saved state uses the className cursor-default; unsaved uses cursor-pointer.
return await saveButton.locator('svg').evaluate((node) => (node as HTMLElement).classList.contains('cursor-default'));
};
test.describe.serial('persistence', () => {
@@ -55,14 +55,14 @@ test.describe.serial('persistence', () => {
await page.keyboard.insertText(replacementUrl);
// check if the request is now unsaved
expect(await isRequestSaved(locators.saveButton())).toBe(false);
await expect(await isRequestSaved(locators.saveButton())).toBe(false);
await locators.saveButton().click();
const result = await waitForPredicate(() => isRequestSaved(locators.saveButton()));
expect(result).toBe(true);
await expect(result).toBe(true);
// check if the replacementUrl is now visually available
expect(page.locator('.input-container').filter({ hasText: replacementUrl }).first()).toBeAttached();
await expect(page.locator('.input-container').filter({ hasText: replacementUrl }).first()).toBeAttached();
});
});