From 95babda62ed42f8cdb2fa2f1bbe075d2dd71a36f Mon Sep 17 00:00:00 2001 From: kreosus <59621250+kreosus@users.noreply.github.com> Date: Wed, 9 Nov 2022 08:34:34 -0600 Subject: [PATCH] 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 Co-authored-by: Filipe Freire Co-authored-by: kreosus --- .../insomnia-smoke-test/fixtures/simple.yaml | 199 ++++++++++++++++++ .../debug-sidebar-interactions.test.ts | 92 ++++++++ .../base/dropdown/dropdown-item.tsx | 6 +- .../ui/components/base/dropdown/dropdown.tsx | 5 + .../dropdowns/request-actions-dropdown.tsx | 5 +- .../request-group-actions-dropdown.tsx | 5 +- .../websocket-request-actions-dropdown.tsx | 5 +- 7 files changed, 310 insertions(+), 7 deletions(-) create mode 100644 packages/insomnia-smoke-test/fixtures/simple.yaml create mode 100644 packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts diff --git a/packages/insomnia-smoke-test/fixtures/simple.yaml b/packages/insomnia-smoke-test/fixtures/simple.yaml new file mode 100644 index 000000000..6ba561e5d --- /dev/null +++ b/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 diff --git a/packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts b/packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts new file mode 100644 index 000000000..b5fb93410 --- /dev/null +++ b/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 +}); diff --git a/packages/insomnia/src/ui/components/base/dropdown/dropdown-item.tsx b/packages/insomnia/src/ui/components/base/dropdown/dropdown-item.tsx index 561819c64..ef42aecf9 100644 --- a/packages/insomnia/src/ui/components/base/dropdown/dropdown-item.tsx +++ b/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 = ( -
+
{children}
diff --git a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx b/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx index 4f4de0088..531a4d3d2 100644 --- a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx +++ b/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( onOpen, onHide, wide, + dataTestId, }, ref ) => { @@ -109,6 +111,8 @@ export const Dropdown = forwardRef( const dropdownListRef = useRef(null); const filterInputRef = useRef(null); + const _dataTestId = dataTestId ? dataTestId : 'DropdownButton'; + const _handleCheckFilterSubmit = useCallback( (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -571,6 +575,7 @@ export const Dropdown = forwardRef( onClick={_handleClick} tabIndex={-1} onMouseDown={_handleMouseDown} + data-testid={_dataTestId} > {dropdownChildren}
diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx index 861528d30..df74054e4 100644 --- a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx +++ b/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(({ // Can only generate code for regular requests, not gRPC requests const canGenerateCode = isRequest(request); return ( - + @@ -200,7 +201,7 @@ export const RequestActionsDropdown = forwardRef(({ - + Settings diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx index 3dc08cb21..1d5550d60 100644 --- a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx +++ b/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 + @@ -194,7 +195,7 @@ export const RequestGroupActionsDropdown = forwardRef ))} - handleShowSettings(requestGroup)}> + handleShowSettings(requestGroup)} dataTestId={`DropdownItemSettings-${toKebabCase(requestGroup.name)}`}> Settings diff --git a/packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx index 8ac1e15e8..d6b85c2fc 100644 --- a/packages/insomnia/src/ui/components/dropdowns/websocket-request-actions-dropdown.tsx +++ b/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 }, [request]); return ( - + @@ -88,7 +89,7 @@ export const WebSocketRequestActionsDropdown = forwardRef - + Settings