From dba5846ee4e26f0b1ea2dea610b136fef1f33d62 Mon Sep 17 00:00:00 2001
From: Nishchit Dhanani <dnishchit@gmail.com>
Date: Mon, 14 Aug 2023 15:48:43 +0530
Subject: [PATCH] test: basic jest errors are resolved and store facade created

---
 .../components/activity-bar/ActionItem.tsx    |  2 +-
 .../src/components/auth-panel/AuthPanel.tsx   | 16 ++--
 .../components/auth-panel/auths/Atlassion.tsx | 18 +++--
 .../components/auth-panel/auths/OAuth1.tsx    |  2 +-
 .../components/auth-panel/auths/OAuth2.tsx    |  2 +-
 .../editors/cm-gql-editor/CMGQueryEditor.tsx  |  4 +-
 .../quick-selection/QuickSelection.tsx        |  2 +-
 .../firecamp-ui/src/components/tabs/Tab.tsx   |  2 +-
 playgrounds/firecamp-graphql/package.json     |  2 +-
 .../common/urlbar/UrlBarContainer.test.tsx    | 81 +++++++++++++++++++
 .../common/urlbar/useUrlBarFacade.ts          | 23 ++++++
 playgrounds/firecamp-graphql/tsconfig.json    |  2 +-
 12 files changed, 132 insertions(+), 24 deletions(-)
 create mode 100644 playgrounds/firecamp-graphql/src/components/common/urlbar/UrlBarContainer.test.tsx
 create mode 100644 playgrounds/firecamp-graphql/src/components/common/urlbar/useUrlBarFacade.ts

diff --git a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
index 589a9d02..e480c9c9 100644
--- a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FC } from 'react';
+import { FC } from 'react';
 import cx from 'classnames';
 import { UserCircle2 } from 'lucide-react';
 // import ReactTooltip from 'react-tooltip';
diff --git a/platform/firecamp-ui/src/components/auth-panel/AuthPanel.tsx b/platform/firecamp-ui/src/components/auth-panel/AuthPanel.tsx
index d76de6cd..0578ea5f 100644
--- a/platform/firecamp-ui/src/components/auth-panel/AuthPanel.tsx
+++ b/platform/firecamp-ui/src/components/auth-panel/AuthPanel.tsx
@@ -1,7 +1,7 @@
 import { FC, useState, useEffect } from 'react';
 import _compact from 'lodash/compact';
 import cx from 'classnames';
-import isEqual from 'react-fast-compare';
+// import isEqual from 'react-fast-compare';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import { _misc, _object } from '@firecamp/utils';
 import {
@@ -30,7 +30,7 @@ import {
   Digest,
   // Hawk,
   Netrc,
-  Ntlm,
+  // Ntlm,
   OAuth1,
   OAuth2,
   NoAuth,
@@ -42,11 +42,11 @@ const AuthPanel: FC<IProps> = ({
   value,
   activeAuthType = EAuthTypes.None,
   allowInherit = true,
-  onChangeAuthType = () => {},
-  onChangeAuthValue = () => {},
-  onChangeOAuth2Value = () => {},
-  fetchTokenOnChangeOAuth2 = (authPayload: any) => {},
-  fetchInheritedAuth = () => {},
+  onChangeAuthType = () => { },
+  onChangeAuthValue = () => { },
+  onChangeOAuth2Value = () => { },
+  fetchTokenOnChangeOAuth2 = (authPayload: any) => { },
+  fetchInheritedAuth = () => { },
   oauth2LastToken = '',
 }) => {
   const _authTypeList = allowInherit
@@ -174,7 +174,7 @@ const AuthTypesDD: FC<any> = ({ types, name, onSelect }) => {
         handler={() => (
           <Button
             text={name || ''}
-            classNames={{root: "font-bold"}}
+            classNames={{ root: "font-bold" }}
             rightIcon={
               <VscTriangleDown
                 size={12}
diff --git a/platform/firecamp-ui/src/components/auth-panel/auths/Atlassion.tsx b/platform/firecamp-ui/src/components/auth-panel/auths/Atlassion.tsx
index 6b34d090..4ce141b2 100644
--- a/platform/firecamp-ui/src/components/auth-panel/auths/Atlassion.tsx
+++ b/platform/firecamp-ui/src/components/auth-panel/auths/Atlassion.tsx
@@ -84,16 +84,20 @@ const Atlassion = () => {
     });
   };
 
-  const _onKeyDown = ({ key }: { key: string }) => {
-    if (key == 'Enter') {
-      setState(initialState);
-    }
-  };
+  // const _onKeyDown = ({ key }: { key: string }) => {
+  //   if (key == 'Enter') {
+  //     setState(initialState);
+  //   }
+  // };
 
   return (
     <form className="fc-form grid">
       {(inputList || []).map((input, i) => {
-        const { id, labelFor, label, type, placeholder, value } = input;
+        const { id,
+          // labelFor, 
+          label, type,
+          // placeholder,
+          value } = input;
         return (
           <div
             className={
@@ -117,7 +121,7 @@ const Atlassion = () => {
                 height="21px"
                 language={EEditorLanguage.FcText}
                 onChange={(e) => _handleChange(e)}
-                // onKeyDown={_onKeyDown}
+              // onKeyDown={_onKeyDown}
               />
             </div>
           </div>
diff --git a/platform/firecamp-ui/src/components/auth-panel/auths/OAuth1.tsx b/platform/firecamp-ui/src/components/auth-panel/auths/OAuth1.tsx
index ecff25b3..b57d0d4b 100644
--- a/platform/firecamp-ui/src/components/auth-panel/auths/OAuth1.tsx
+++ b/platform/firecamp-ui/src/components/auth-panel/auths/OAuth1.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import {
   Button,
-  CheckboxInGrid,
+  // CheckboxInGrid,
   DropdownMenu,
   SingleLineEditor,
 } from '@firecamp/ui';
diff --git a/platform/firecamp-ui/src/components/auth-panel/auths/OAuth2.tsx b/platform/firecamp-ui/src/components/auth-panel/auths/OAuth2.tsx
index 63cb0f1b..34310990 100644
--- a/platform/firecamp-ui/src/components/auth-panel/auths/OAuth2.tsx
+++ b/platform/firecamp-ui/src/components/auth-panel/auths/OAuth2.tsx
@@ -29,7 +29,7 @@ const OAuth2: FC<IOAuth2Comp> = ({
       return { ...p, [n.id]: false };
     }, {})
   );
-  const [isDDOpen, toggleDD] = useState(false);
+  // const [isDDOpen, toggleDD] = useState(false);
 
   useEffect(() => {
     setDirtyInputs({}); //TODO: check this later
diff --git a/platform/firecamp-ui/src/components/editors/cm-gql-editor/CMGQueryEditor.tsx b/platform/firecamp-ui/src/components/editors/cm-gql-editor/CMGQueryEditor.tsx
index 7f912c22..849d3558 100644
--- a/platform/firecamp-ui/src/components/editors/cm-gql-editor/CMGQueryEditor.tsx
+++ b/platform/firecamp-ui/src/components/editors/cm-gql-editor/CMGQueryEditor.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
-import MD from 'markdown-it';
-const md = new MD();
+// import MD from 'markdown-it';
+// const md = new MD();
 
 import { Controlled as CodeMirror } from 'react-codemirror2';
 
diff --git a/platform/firecamp-ui/src/components/quick-selection/QuickSelection.tsx b/platform/firecamp-ui/src/components/quick-selection/QuickSelection.tsx
index f0005079..d6f9244e 100644
--- a/platform/firecamp-ui/src/components/quick-selection/QuickSelection.tsx
+++ b/platform/firecamp-ui/src/components/quick-selection/QuickSelection.tsx
@@ -1,4 +1,4 @@
-import { FC, Key, ReactChild, ReactFragment, ReactPortal } from 'react';
+import { FC, ReactChild, ReactFragment, ReactPortal } from 'react';
 import classnames from 'classnames';
 import { IQuickSelection } from './interfaces/QuickSelection.interface';
 
diff --git a/platform/firecamp-ui/src/components/tabs/Tab.tsx b/platform/firecamp-ui/src/components/tabs/Tab.tsx
index 5941ac16..39a482e1 100644
--- a/platform/firecamp-ui/src/components/tabs/Tab.tsx
+++ b/platform/firecamp-ui/src/components/tabs/Tab.tsx
@@ -54,7 +54,7 @@ const CloseIconPlacement = ({
     </div>
   );
 
-const ReorderType = 'tab';
+// const ReorderType = 'tab';
 
 const Tab: FC<ITab> = ({
   id = '',
diff --git a/playgrounds/firecamp-graphql/package.json b/playgrounds/firecamp-graphql/package.json
index 8b43204b..4cbe9374 100644
--- a/playgrounds/firecamp-graphql/package.json
+++ b/playgrounds/firecamp-graphql/package.json
@@ -13,7 +13,7 @@
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.ts\" --write",
     "fix:lint": "eslint src --ext .ts --fix",
-    "test": "npx jest --bail --silent --verbose",
+    "test": "npx jest --verbose",
     "test:lint": "eslint src --ext .ts",
     "test:prettier": "prettier \"src/**/*.ts\" --list-different",
     "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.ts}\"",
diff --git a/playgrounds/firecamp-graphql/src/components/common/urlbar/UrlBarContainer.test.tsx b/playgrounds/firecamp-graphql/src/components/common/urlbar/UrlBarContainer.test.tsx
new file mode 100644
index 00000000..30b037ea
--- /dev/null
+++ b/playgrounds/firecamp-graphql/src/components/common/urlbar/UrlBarContainer.test.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react"
+import UrlBarContainer from "./UrlBarContainer"
+// import useUrlBarFacade, { useUrlBarSuffixButtonsFacade } from "./useUrlBarFacade"
+import useUrlBarFacade from "./useUrlBarFacade"
+
+jest.mock("./useUrlBarFacade", () => {
+  const originalModule = jest.requireActual('./useUrlBarFacade');
+  return {
+    __esModule: true,
+    ...originalModule,
+    default: jest.fn(),
+    // useUrlBarSuffixButtonsFacade: jest.fn(),
+  };
+});
+
+describe("UrlBarContainer render", () => {
+
+  const prepareStore = (a = {}, b = {}) => {
+    //@ts-ignore
+    useUrlBarFacade.mockImplementationOnce(() => (a));
+    //@ts-ignore
+    useUrlBarSuffixButtonsFacade.mockImplementationOnce(() => (b))
+  }
+  test("should have default ui: path, copy button, method dropdown, url value, send and save buttons", () => {
+    prepareStore({
+      url: { raw: "https://firecamp.io" },
+      method: "GET"
+    });
+    render(<UrlBarContainer />);
+
+    const urlInput = screen.getByTestId("single-line-editor");
+    expect(urlInput).toBeInTheDocument();
+    expect(urlInput).toHaveTextContent('https://firecamp.io');
+
+    const reqPath = screen.getByTestId("request-path");
+    expect(reqPath).toBeInTheDocument();
+    expect(reqPath).toHaveTextContent('Untitled Request');
+
+    const copyBtn = screen.getByTestId("copy-button")
+    expect(copyBtn).toBeInTheDocument();
+
+    const methodBtn = screen.getByTestId("http-method-label")
+    expect(methodBtn).toBeInTheDocument();
+    expect(methodBtn).toHaveAttribute('title', 'HTTP Method');
+    expect(methodBtn).toHaveTextContent('GET');
+
+    const sendBtn = screen.getByTestId("send-request")
+    expect(sendBtn).toBeInTheDocument();
+    expect(sendBtn).toHaveAttribute('title', 'Send Request');
+    expect(sendBtn).toHaveTextContent('Send');
+
+    const saveBtn = screen.getByTestId("save-request")
+    expect(saveBtn).toBeInTheDocument();
+    expect(saveBtn).toHaveAttribute('title', 'Save Request');
+    expect(saveBtn).toHaveTextContent('Save');
+  });
+
+  test("should have POST method selected", () => {
+    prepareStore({
+      url: { raw: "https://firecamp.io" },
+      method: "POST"
+    });
+    render(<UrlBarContainer />);
+    const methodBtn = screen.getByTestId("http-method-label")
+    expect(methodBtn).toBeInTheDocument();
+    expect(methodBtn).toHaveAttribute('title', 'HTTP Method');
+    expect(methodBtn).toHaveTextContent('POST');
+  });
+
+
+  test("should have request path shown", () => {
+    prepareStore({
+      url: { raw: "https://firecamp.io" },
+      requestPath: { path: "Firecamp Collection > Create Request" }
+    });
+    render(<UrlBarContainer />);
+    const reqPath = screen.getByTestId("request-path")
+    expect(reqPath).toBeInTheDocument();
+    expect(reqPath).toHaveTextContent('Firecamp Collection > Create Request');
+  });
+})
diff --git a/playgrounds/firecamp-graphql/src/components/common/urlbar/useUrlBarFacade.ts b/playgrounds/firecamp-graphql/src/components/common/urlbar/useUrlBarFacade.ts
new file mode 100644
index 00000000..a404b7d9
--- /dev/null
+++ b/playgrounds/firecamp-graphql/src/components/common/urlbar/useUrlBarFacade.ts
@@ -0,0 +1,23 @@
+import { shallow } from 'zustand/shallow';
+import { IStore, useStore } from '../../../store';
+
+const useUrlBarFacade = () => {
+  return useStore(
+    (s: IStore) => ({
+      tabId: s.runtime.tabId,
+      url: s.request.url,
+      method: s.request.method,
+      __meta: s.request.__meta,
+      __ref: s.request.__ref,
+      requestPath: s.runtime.requestPath,
+      isRequestSaved: s.runtime.isRequestSaved,
+      context: s.context,
+      changeUrl: s.changeUrl,
+      changeMethod: s.changeMethod,
+      fetchIntrospectionSchema: s.fetchIntrospectionSchema,
+    }),
+    shallow
+  );
+};
+
+export default useUrlBarFacade;
diff --git a/playgrounds/firecamp-graphql/tsconfig.json b/playgrounds/firecamp-graphql/tsconfig.json
index 1080e086..bcf98be6 100644
--- a/playgrounds/firecamp-graphql/tsconfig.json
+++ b/playgrounds/firecamp-graphql/tsconfig.json
@@ -11,7 +11,7 @@
     "inlineSourceMap": true,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     "resolveJsonModule": true /* Include modules imported with .json extension. */,
-    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedLocals": false /* Report errors on unused locals. */,
     "noUnusedParameters": false /* Report errors on unused parameters. */,
     "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
     "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,