Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: multiple tab #8304

Open
wants to merge 2 commits into
base: feat/multiple-tab
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -99,22 +99,22 @@ test.describe('Dashboard', async () => {
await page.getByTestId('project').click();

// Rename document
await page.getByLabel('my-spec.yaml').getByRole('button').click();
await page.getByLabel('Files').getByLabel('my-spec.yaml').getByRole('button').click();
await page.getByRole('menuitem', { name: 'Rename' }).click();
await page.locator('text=Rename DocumentName Rename >> input[type="text"]').fill('test123');
await page.click('#root button:has-text("Rename")');
await expect(page.locator('.app')).toContainText('test123');

// Duplicate document
await page.getByLabel('test123').getByRole('button').click();
await page.getByLabel('Files').getByLabel('test123').getByRole('button').click();
await page.getByRole('menuitem', { name: 'Duplicate' }).click();
await page.locator('input[name="name"]').fill('test123-duplicate');
await page.click('[role="dialog"] button:has-text("Duplicate")');

await page.getByTestId('project').click();

// Delete document
await page.getByLabel('test123-duplicate').getByRole('button').click();
await page.getByLabel('Files').getByLabel('test123-duplicate').getByRole('button').click();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Delete' }).click();
// @TODO: Re-enable - Requires mocking VCS operations
Expand All @@ -141,15 +141,15 @@ test.describe('Dashboard', async () => {
await expect(page.locator('.app')).toContainText('test123');

// Duplicate collection
await page.getByLabel('test123').getByRole('button').click();
await page.getByLabel('Files').getByLabel('test123').getByRole('button').click();
await page.getByRole('menuitem', { name: 'Duplicate' }).click();
await page.locator('input[name="name"]').fill('test123-duplicate');
await page.click('[role="dialog"] button:has-text("Duplicate")');

await page.getByTestId('project').click();

// Delete collection
await page.getByLabel('test123-duplicate').getByRole('button').click();
await page.getByLabel('Files').getByLabel('test123-duplicate').getByRole('button').click();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Delete' }).click();
// @TODO: Re-enable - Requires mocking VCS operations
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ test.describe('design document operations', async () => {
await page.getByPlaceholder('my-spec.yaml').fill('jurassic park');
await page.getByPlaceholder('my-spec.yaml').press('Enter');
await page.getByTestId('project').click();
await page.getByLabel('jurassic park').click();
await page.getByLabel('Files').getByLabel('jurassic park').click();
});

test('can delete a test suite with confirmation modal', async ({ page }) => {
Expand Down
88 changes: 88 additions & 0 deletions packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { expect } from '@playwright/test';

import { test } from '../../playwright/test';

const DEFAULT_REQUEST_NAME = 'New Request';

test.describe('multiple-tab feature test', () => {
test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');

test.beforeEach(async ({ page }) => {
await page.getByLabel('Create in project').click();
await page.getByLabel('Request collection', { exact: true }).click();
await page.getByRole('button', { name: 'Create', exact: true }).click();
});

test('add tab & close tab', async ({ page }) => {
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
const tab = await page.getByLabel('Insomnia Tabs').getByLabel(`tab-${DEFAULT_REQUEST_NAME}`, { exact: true });
expect(tab).toBeVisible();
expect(await tab.getAttribute('data-selected')).toBe('true');
await tab.getByRole('button').click();
await expect(tab).toBeHidden();
});

test('active tab sync with the sidebar active request', async ({ page }) => {
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
await page.getByTestId('New Request').dblclick();
await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request A');
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
await page.getByTestId('New Request').dblclick();
await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request B');
await page.getByTestId('New Request A').click();
await page.waitForTimeout(1000);
const tabA = await page.getByLabel('Insomnia Tabs').getByLabel('tab-New Request A', { exact: true });
expect(await tabA.getAttribute('data-selected')).toBe('true');
await page.getByTestId('New Request B').click();
await page.waitForTimeout(1000);
const tabB = await page.getByLabel('Insomnia Tabs').getByLabel('tab-New Request B', { exact: true });
expect(await tabB.getAttribute('data-selected')).toBe('true');
});

test('close tab after delete a request', async ({ page }) => {
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
const tab = await page.getByLabel('Insomnia Tabs').getByLabel(`tab-${DEFAULT_REQUEST_NAME}`, { exact: true });
expect(tab).toBeVisible();
await page.getByTestId('Dropdown-New-Request').click();
await page.getByLabel('Delete').click();
await page.getByRole('button', { name: 'Delete', exact: true }).click();
await expect(tab).toBeHidden();
});

test('change icon after change request method', async ({ page }) => {
await page.getByLabel('Create in collection').click();
await page.getByLabel('HTTP Request').click();
await page.waitForTimeout(1000);
Copy link
Contributor

@jackkav jackkav Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

waits are a test smell and should always be avoided at al costs as they do not scale.

They also often also indicated an underlying issue. Its worth getting to the bottom of whats happening to cause your action to to result in an immediate change to the ui you're interested in.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could be remedied by dealing with the refs, ideally the test would also be scoped into the first PR, so its cool to merge this one in sooner rather than later

expect(await page.getByLabel('Insomnia Tabs').getByLabel('Tab Tag').innerText()).toEqual('GET');
await page.getByLabel('Request Method').click();
await page.getByRole('button', { name: 'POST' }).click();
await page.waitForTimeout(1000);
expect(await page.getByLabel('Insomnia Tabs').getByLabel('Tab Tag').innerText()).toEqual('POST');
});

test('click + button to add a new request', async ({ page }) => {
await page.getByLabel('Tab Plus').click();
await page.getByRole('menuitem', { name: 'add request to current' }).click();
await page.getByTestId(DEFAULT_REQUEST_NAME).click();
await page.getByTestId(DEFAULT_REQUEST_NAME).dblclick();
await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request A');
await page.getByTestId('project').click();
await page.getByLabel('Create in project').click();
await page.getByLabel('Request collection', { exact: true }).click();
await page.getByPlaceholder('My Collection').fill('Test add tab collection');
await page.getByRole('button', { name: 'Create', exact: true }).click();
await page.waitForTimeout(1000);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

await page.getByLabel('Tab Plus').click();
await page.getByRole('menuitem', { name: 'add request to other' }).click();
await page.getByLabel('Select Workspace').selectOption({ label: 'My Collection' });
await page.getByRole('dialog').getByRole('button', { name: 'Add' }).click();
await page.waitForTimeout(1000);
expect(await page.getByTestId('workspace-context-dropdown').innerText()).toEqual('My Collection');
await page.getByTestId(DEFAULT_REQUEST_NAME).click();
});

});
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const MethodDropdown = forwardRef<DropdownHandle, Props>(({
<Dropdown
ref={ref}
triggerButton={
<Button className='pl-2'>
<Button className='pl-2' aria-label='Request Method'>
<span className={`http-method-${method}`}>{method}</span>{' '}
<i className="fa fa-caret-down space-left" />
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,9 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
<div className="form-control form-control--outlined">
<label>
{strings.collection.plural}:
<select name="workspaceId" value={selectedWorkspaceId} onChange={e => setSelectedWorkspaceId(e.target.value)}>
<select aria-label='Select Workspace' name="workspaceId" value={selectedWorkspaceId} onChange={e => setSelectedWorkspaceId(e.target.value)}>
{workspaceOptions.map(workspace => (
<option key={workspace._id} value={workspace._id}>
<option aria-label={workspace.name} key={workspace._id} value={workspace._id}>
{workspace.name}{workspace._id === currentWorkspaceId && ' (current)'}
</option>
))}
Expand Down
4 changes: 2 additions & 2 deletions packages/insomnia/src/ui/components/tabs/tab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {

if (type === 'request' || type === 'mockRoute') {
return (
<span className={`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center ${REQUEST_METHOD_STYLE_MAP[tab?.method || tab?.tag || '']}`}>{tab.tag}</span>
<span aria-label='Tab Tag' className={`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center ${REQUEST_METHOD_STYLE_MAP[tab?.method || tab?.tag || '']}`}>{tab.tag}</span>
);
}

Expand Down Expand Up @@ -123,7 +123,7 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {

return (
<GridListItem
textValue='tab'
textValue={`tab-${tab.name}`}
id={tab.id}
className="outline-none aria-selected:text-[--color-font] aria-selected:bg-[--hl-sm] hover:bg-[--hl-xs]"
ref={scrollIntoView}
Expand Down
2 changes: 1 addition & 1 deletion packages/insomnia/src/ui/components/tabs/tabList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
</Button>
<div className='flex items-center justify-start flex-shrink-0 flex-grow border-b border-solid border-[--hl-sm]'>
<MenuTrigger>
<Button aria-label="Menu" className="w-[40px] text-center">
<Button aria-label="Tab Plus" className="w-[40px] text-center">
<Icon icon="plus" className='cursor-pointer' />
</Button>
<Popover>
Expand Down
Loading