Adding initial test for debug-sidebar (#5393)

* Adding initial test for debug-sidebar

* Add data-testids to interact with dropdowns better

Co-Authored-By: kreosus <59621250+kreosus@users.noreply.github.com>

* Rename testHandle to dataTestId

Co-authored-by: kreosus <kreosus@users.noreply.github.com>

Co-authored-by: Filipe Freire <livrofubia@gmail.com>
Co-authored-by: kreosus <kreosus@users.noreply.github.com>

packages/insomnia-smoke-test/fixtures/simple.yaml

@@ -0,0 +1,199 @@
+_type: export
+__export_format: 4
+__export_date: 2022-10-27T10:55:44.440Z
+__export_source: insomnia.desktop.app:v2022.7.0-beta.3
+resources:
+  - _id: ws-req_6fa6caf4a54c45e39b8bb9d8283a3e33
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666867647526
+    created: 1666867628351
+    name: example websocket
+    url: ws://localhost:4010
+    metaSortKey: -1666867628351
+    headers: []
+    authentication: {}
+    parameters: []
+    settingEncodeUrl: true
+    settingStoreCookies: true
+    settingSendCookies: true
+    settingFollowRedirects: global
+    description: ""
+    _type: websocket_request
+  - _id: wrk_0702a57d75d44255a8cecd2c5fa87809
+    parentId: null
+    modified: 1666867685193
+    created: 1666867357067
+    name: simple
+    description: ""
+    scope: collection
+    _type: workspace
+  - _id: greq_3604a6e6344949eaac23a8b13a762072
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666868125350
+    created: 1666867483974
+    url: localhost:50051
+    name: example grpc
+    description: ""
+    protoFileId: pf_f5ad699127fc42c09832ac85f40e1c4e
+    protoMethodName: /hello.HelloService/SayHello
+    metadata: []
+    body:
+      text: |-
+        {
+        	"greeting":"test"
+        }
+    metaSortKey: -1666867483974
+    isPrivate: false
+    _type: grpc_request
+  - _id: req_bb79457efa9d4d18bd30adef0463b3b0
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666868124102
+    created: 1666867366390
+    url: http://localhost:4010/graphql
+    name: example graphql
+    description: ""
+    method: POST
+    body:
+      mimeType: application/graphql
+      text: '{"query":"query {\n\thello,\n\tbearer\n}"}'
+    parameters: []
+    headers:
+      - name: Content-Type
+        value: application/json
+    authentication: {}
+    metaSortKey: -1666867366390
+    isPrivate: false
+    settingStoreCookies: true
+    settingSendCookies: true
+    settingDisableRenderRequestBody: false
+    settingEncodeUrl: true
+    settingRebuildPath: true
+    settingFollowRedirects: global
+    _type: request
+  - _id: req_579daeabc7534a52b242bdaaaf6ca4dc
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666867670885
+    created: 1666867365377
+    url: http://localhost:4010/pets/1
+    name: example http
+    description: ""
+    method: GET
+    body: {}
+    parameters: []
+    headers: []
+    authentication: {}
+    metaSortKey: -1666867365377
+    isPrivate: false
+    settingStoreCookies: true
+    settingSendCookies: true
+    settingDisableRenderRequestBody: false
+    settingEncodeUrl: true
+    settingRebuildPath: true
+    settingFollowRedirects: global
+    _type: request
+  - _id: env_42a94488fcd6106a75fb3ededd6bb4fbd267aa95
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666867924188
+    created: 1666867357072
+    name: Base Environment
+    data:
+      foo: bar
+      current-env: base
+    dataPropertyOrder:
+      "&":
+        - foo
+        - current-env
+    color: null
+    isPrivate: false
+    metaSortKey: 1666867357072
+    _type: environment
+  - _id: jar_42a94488fcd6106a75fb3ededd6bb4fbd267aa95
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666868115288
+    created: 1666867357074
+    name: Default Jar
+    cookies:
+      - id: bc6e6a71-1290-4334-8662-a49c1c58b037
+        key: foo
+        value: bar
+        domain: localhost
+        expires: 2038-01-19T03:14:07.000Z
+        path: /
+        secure: false
+        httpOnly: false
+    _type: cookie_jar
+  - _id: spc_415df832b325480d940760e04412c629
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666867357068
+    created: 1666867357068
+    fileName: My Collection
+    contents: ""
+    contentType: yaml
+    _type: api_spec
+  - _id: pf_f5ad699127fc42c09832ac85f40e1c4e
+    parentId: wrk_0702a57d75d44255a8cecd2c5fa87809
+    modified: 1666867482366
+    created: 1666867482366
+    name: hello.proto
+    protoText: |
+      // based on https://grpc.io/docs/guides/concepts.html
+
+      syntax = "proto2";
+
+      package hello;
+
+      service HelloService {
+        rpc SayHello(HelloRequest) returns (HelloResponse);
+        rpc LotsOfReplies(HelloRequest) returns (stream HelloResponse);
+        rpc LotsOfGreetings(stream HelloRequest) returns (HelloResponse);
+        rpc BidiHello(stream HelloRequest) returns (stream HelloResponse);
+      }
+
+      message HelloRequest {
+        optional string greeting = 1;
+      }
+
+      message HelloResponse {
+        required string reply = 1;
+      }
+    _type: proto_file
+  - _id: env_2eecf85b7fbb4edf8d296b16f4bc0aa6
+    parentId: env_42a94488fcd6106a75fb3ededd6bb4fbd267aa95
+    modified: 1666867928920
+    created: 1666867721814
+    name: production
+    data:
+      foo: bar
+      current-env: production
+    dataPropertyOrder:
+      "&":
+        - foo
+        - current-env
+    color: null
+    isPrivate: false
+    metaSortKey: 1666867721814
+    _type: environment
+  - _id: env_f9ddd2764c8f4fd688901d20360105d8
+    parentId: env_42a94488fcd6106a75fb3ededd6bb4fbd267aa95
+    modified: 1666867933395
+    created: 1666867735110
+    name: staging
+    data:
+      foo: bar
+      current-env: staging
+    dataPropertyOrder:
+      "&":
+        - foo
+        - current-env
+    color: null
+    isPrivate: false
+    metaSortKey: 1666867735110
+    _type: environment
+  - _id: ws-payload_03cf8eb441f449b9bc7f64f9e9ab74fb
+    parentId: ws-req_6fa6caf4a54c45e39b8bb9d8283a3e33
+    modified: 1666868133315
+    created: 1666867635967
+    name: New Payload
+    value: test
+    mode: text/plain
+    _type: websocket_payload

packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts

@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test';
+
+import { loadFixture } from '../../playwright/paths';
+import { test } from '../../playwright/test';
+
+test.describe('Debug-Sidebar', async () => {
+
+  test.beforeEach(async ({ app, page }) => {
+    await page.click('[data-testid="project"] >> text=Insomnia');
+    await page.click('text=Create');
+    const text = await loadFixture('simple.yaml');
+    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+    await page.click('button:has-text("Clipboard")');
+    await page.click('text=Collectionsimplejust now');
+  });
+
+  test.describe('Interact with sidebar', async () => {
+    test('Open Properties of an HTTP Request', async ({ page }) => {
+      await page.locator('button:has-text("example http")').click();
+      await page.locator('[data-testid="Dropdown-example-http"]').click();
+      await page.locator('[data-testid="DropdownItemSettings-example-http"]').click();
+      await expect(page.locator('.app')).toContainText('Request Settings req');
+      // Close settings modal
+      await page.locator('.app').press('Escape');
+    });
+
+    test('Open properties of a grpc request', async ({ page }) => {
+      await page.locator('button:has-text("example grpc")').click();
+      await page.locator('[data-testid="Dropdown-example-grpc"]').click();
+      await page.locator('[data-testid="DropdownItemSettings-example-grpc"]').click();
+      await expect(page.locator('.app')).toContainText('Request Settings greq');
+      // Close settings modal
+      await page.locator('.app').press('Escape');
+    });
+
+    test('Open properties of a websocket request', async ({ page }) => {
+      await page.locator('button:has-text("example websocket")').click();
+      await page.locator('[data-testid="Dropdown-example-websocket"]').click();
+      await page.locator('[data-testid="DropdownItemSettings-example-websocket"]').click();
+      await expect(page.locator('.app')).toContainText('Request Settings ws-req');
+      // Close settings modal
+      await page.locator('.app').press('Escape');
+    });
+
+    test('Open properties of a graphql request', async ({ page }) => {
+      await page.locator('button:has-text("example graphql")').click();
+      await page.locator('[data-testid="Dropdown-example-graphql"]').click();
+      await page.locator('[data-testid="DropdownItemSettings-example-graphql"]').click();
+      await expect(page.locator('.app')).toContainText('Request Settings req');
+      // Close settings modal
+      await page.locator('.app').press('Escape');
+    });
+
+    test.fixme('Open properties of a folder', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Open properties of the collection', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Filter by request name', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Filter by a folder name', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Open Generate code and copy as curl', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Pin a Request', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Delete Request', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Rename a request', async () => {
+      // TODO implement
+    });
+
+    test.fixme('Create a new HTTP request', async () => {
+      // TODO implement
+    });
+  });
+
+  // TODO: more scenarios will be added in follow-up iterations of increasing test coverage
+});

packages/insomnia/src/ui/components/base/dropdown/dropdown-item.tsx

@@ -12,6 +12,7 @@ interface Props {
   className?: string;
   color?: string;
   unsetStyles?: boolean;
+  dataTestId?: string;
 }
 
 export const DropdownItem = (props: Props) => {
@@ -25,6 +26,7 @@ export const DropdownItem = (props: Props) => {
     selected,
     disabled,
     stayOpenAfterClick,
+    dataTestId,
     ...otherProps
   } = props;
 
@@ -33,8 +35,10 @@ export const DropdownItem = (props: Props) => {
       color,
     }
     : {};
+
+  const _dataTestId = dataTestId ? dataTestId : 'DropDownItem';
   const inner = (
-    <div className={classnames('dropdown__inner', className)}>
+    <div className={classnames('dropdown__inner', className)} data-testid={_dataTestId}>
       <div className="dropdown__text" style={styles}>
         {children}
       </div>

packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx

@@ -32,6 +32,7 @@ export interface DropdownProps {
   className?: string;
   style?: CSSProperties;
   beside?: boolean;
+  dataTestId?: string;
 }
 
 export const dropdownsContainerId = 'dropdowns-container';
@@ -94,6 +95,7 @@ export const Dropdown = forwardRef<DropdownHandle, DropdownProps>(
       onOpen,
       onHide,
       wide,
+      dataTestId,
     },
     ref
   ) => {
@@ -109,6 +111,8 @@ export const Dropdown = forwardRef<DropdownHandle, DropdownProps>(
     const dropdownListRef = useRef<HTMLDivElement>(null);
     const filterInputRef = useRef<HTMLInputElement>(null);
 
+    const _dataTestId = dataTestId ? dataTestId : 'DropdownButton';
+
     const _handleCheckFilterSubmit = useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
@@ -571,6 +575,7 @@ export const Dropdown = forwardRef<DropdownHandle, DropdownProps>(
         onClick={_handleClick}
         tabIndex={-1}
         onMouseDown={_handleMouseDown}
+        data-testid={_dataTestId}
       >
         {dropdownChildren}
       </div>

packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx

@@ -5,6 +5,7 @@ import React, { forwardRef, useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { exportHarRequest } from '../../../common/har';
+import { toKebabCase } from '../../../common/misc';
 import { RENDER_PURPOSE_NO_RENDER } from '../../../common/render';
 import type { Environment } from '../../../models/environment';
 import { GrpcRequest } from '../../../models/grpc-request';
@@ -138,7 +139,7 @@ export const RequestActionsDropdown = forwardRef<DropdownHandle, Props>(({
   // Can only generate code for regular requests, not gRPC requests
   const canGenerateCode = isRequest(request);
   return (
-    <Dropdown right={right} ref={ref} onOpen={onOpen}>
+    <Dropdown right={right} ref={ref} onOpen={onOpen} dataTestId={`Dropdown-${toKebabCase(request.name)}`}>
       <DropdownButton>
         <i className="fa fa-caret-down" />
       </DropdownButton>
@@ -200,7 +201,7 @@ export const RequestActionsDropdown = forwardRef<DropdownHandle, Props>(({
 
       <DropdownDivider />
 
-      <DropdownItem onClick={handleShowSettings}>
+      <DropdownItem onClick={handleShowSettings} dataTestId={`DropdownItemSettings-${toKebabCase(request.name)}`}>
         <i className="fa fa-wrench" /> Settings
         <DropdownHint keyBindings={hotKeyRegistry.request_showSettings} />
       </DropdownItem>

packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+import { toKebabCase } from '../../../common/misc';
 import { RENDER_PURPOSE_NO_RENDER } from '../../../common/render';
 import * as models from '../../../models';
 import * as requestOperations from '../../../models/helpers/request-operations';
@@ -137,7 +138,7 @@ export const RequestGroupActionsDropdown = forwardRef<RequestGroupActionsDropdow
   }, [dropdownRef, loadingActions,  activeEnvironment, requestGroup, activeProject]);
 
   return (
-    <Dropdown ref={dropdownRef} onOpen={onOpen} {...other}>
+    <Dropdown ref={dropdownRef} onOpen={onOpen} dataTestId={`Dropdown-${toKebabCase(requestGroup.name)}`} {...other}>
       <DropdownButton>
         <i className="fa fa-caret-down" />
       </DropdownButton>
@@ -194,7 +195,7 @@ export const RequestGroupActionsDropdown = forwardRef<RequestGroupActionsDropdow
         </DropdownItem>
       ))}
       <DropdownDivider />
-      <DropdownItem onClick={() => handleShowSettings(requestGroup)}>
+      <DropdownItem onClick={() => handleShowSettings(requestGroup)} dataTestId={`DropdownItemSettings-${toKebabCase(requestGroup.name)}`}>
         <i className="fa fa-wrench" /> Settings
       </DropdownItem>
     </Dropdown>

packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
+import { toKebabCase } from '../../../common/misc';
 import * as requestOperations from '../../../models/helpers/request-operations';
 import { incrementDeletedRequests } from '../../../models/stats';
 import { WebSocketRequest } from '../../../models/websocket-request';
@@ -57,7 +58,7 @@ export const WebSocketRequestActionsDropdown = forwardRef<DropdownHandle, Props>
   }, [request]);
 
   return (
-    <Dropdown right={right} ref={ref}>
+    <Dropdown right={right} ref={ref} dataTestId={`Dropdown-${toKebabCase(request.name)}`}>
       <DropdownButton>
         <i className="fa fa-caret-down" />
       </DropdownButton>
@@ -88,7 +89,7 @@ export const WebSocketRequestActionsDropdown = forwardRef<DropdownHandle, Props>
 
       <DropdownDivider />
 
-      <DropdownItem onClick={handleShowSettings}>
+      <DropdownItem onClick={handleShowSettings} dataTestId={`DropdownItemSettings-${toKebabCase(request.name)}`}>
         <i className="fa fa-wrench" /> Settings
         <DropdownHint keyBindings={hotKeyRegistry.request_showSettings} />
       </DropdownItem>