test: multiple tab

Kong · Jan 22, 2025 · 2e66788 · 2e66788
1 parent 4ab08e7
commit 2e66788
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 6 deletions.
diff --git a/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts b/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts
@@ -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);
+    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);
+    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();
+  });
+
+});
diff --git a/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx
@@ -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>

diff --git a/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx b/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx
@@ -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>
                 ))}

diff --git a/packages/insomnia/src/ui/components/tabs/tab.tsx b/packages/insomnia/src/ui/components/tabs/tab.tsx
@@ -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>
       );
     }
 
@@ -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}

diff --git a/packages/insomnia/src/ui/components/tabs/tabList.tsx b/packages/insomnia/src/ui/components/tabs/tabList.tsx
@@ -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>