feat(elements-core): use a maintained version of httpsnippet (stoplig…

…htio#2341) * feat(elements-core): use a maintained version of httpsnippet * test: remove obsolete snapshot * chore: use a better fork * chore: use correct Cypress docker image
porotkin · Mar 22, 2023 · 66ee7e6 · 66ee7e6
1 parent 7015a1b
commit 66ee7e6
Show file tree

Hide file tree

Showing 11 changed files with 256 additions and 252 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 executors:
   cypress-default:
     docker:
-      - image: cypress/base:16.13.2
+      - image: cypress/base:16.18.1
         environment:
           ## this enables colors in the output
           TERM: xterm

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "style-loader": "3.2.1",
     "ts-jest": "^26.4.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "4.3.5",
+    "typescript": "4.7.4",
     "webpack": "5.46.0",
     "webpack-cli": "4.7.2",
     "webpack-dev-server": "3.11.2"

diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -71,7 +71,7 @@
     "@stoplight/types": "^13.7.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
-    "httpsnippet": "^2.0.0",
+    "httpsnippet-lite": "^3.0.1",
     "jotai": "1.3.9",
     "json-schema": "^0.4.0",
     "lodash": "^4.17.19",
@@ -96,8 +96,6 @@
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "3.x.x",
     "@types/enzyme-adapter-react-16": "1.x.x",
-    "@types/har-format": "^1.2.5",
-    "@types/httpsnippet": "^1.23.0",
     "@types/json-schema": "^7.0.11",
     "@types/lodash": "^4.14.181",
     "@types/prop-types": "^15.7.5",

diff --git a/packages/elements-core/src/components/RequestSamples/RequestSamples.tsx b/packages/elements-core/src/components/RequestSamples/RequestSamples.tsx
@@ -38,7 +38,25 @@ export const RequestSamples = React.memo<RequestSamplesProps>(({ request, embedd
     selectedLibrary,
   );
 
-  const requestSample = convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request);
+  const [requestSample, setRequestSample] = React.useState<string | null>(null);
+  React.useEffect(() => {
+    let isStale = false;
+    convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
+      .then(example => {
+        if (!isStale) {
+          setRequestSample(example);
+        }
+      })
+      .catch(() => {
+        if (!isStale) {
+          setRequestSample(fallbackText);
+        }
+      });
+
+    return () => {
+      isStale = true;
+    };
+  }, [request, httpSnippetLanguage, httpSnippetLibrary]);
 
   const menuItems = useMemo(() => {
     const items: MenuItems = Object.entries(requestSampleConfigs).map(([language, config]) => {
@@ -88,22 +106,24 @@ export const RequestSamples = React.memo<RequestSamplesProps>(({ request, embedd
       </Panel.Titlebar>
 
       <Panel.Content p={0}>
-        <CodeViewer
-          aria-label={requestSample ?? fallbackText}
-          noCopyButton
-          maxHeight="400px"
-          language={mosaicCodeViewerLanguage}
-          value={requestSample || fallbackText}
-          style={
-            embeddedInMd
-              ? undefined
-              : // when not rendering in prose (markdown), reduce font size to be consistent with base UI
-                {
-                  // @ts-expect-error react css typings do not allow for css variables...
-                  '--fs-code': 12,
-                }
-          }
-        />
+        {requestSample !== null && (
+          <CodeViewer
+            aria-label={requestSample}
+            noCopyButton
+            maxHeight="400px"
+            language={mosaicCodeViewerLanguage}
+            value={requestSample}
+            style={
+              embeddedInMd
+                ? undefined
+                : // when not rendering in prose (markdown), reduce font size to be consistent with base UI
+                  {
+                    // @ts-expect-error react css typings do not allow for css variables...
+                    '--fs-code': 12,
+                  }
+            }
+          />
+        )}
       </Panel.Content>
     </Panel>
   );

diff --git a/packages/elements-core/src/components/RequestSamples/__tests__/RequestSamples.test.tsx b/packages/elements-core/src/components/RequestSamples/__tests__/RequestSamples.test.tsx
@@ -1,9 +1,10 @@
 import '@testing-library/jest-dom';
 
 import { screen } from '@testing-library/dom';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
+import { TextDecoder, TextEncoder } from 'util';
 
 import { withPersistenceBoundary } from '../../../context/Persistence';
 import { withMosaicProvider } from '../../../hoc/withMosaicProvider';
@@ -37,15 +38,19 @@ const sampleRequest = {
   bodySize: -1,
 };
 
+globalThis.TextEncoder = TextEncoder;
+// @ts-ignore
+globalThis.TextDecoder = TextDecoder;
+
 describe('RequestSend', () => {
   beforeEach(() => {
     localStorage.clear();
   });
 
-  it('Displays basic CURL request', () => {
+  it('Displays basic CURL request', async () => {
     const { container } = render(<RequestSamples request={sampleRequest} />);
 
-    expect(container).toHaveTextContent('curl');
+    await waitFor(() => expect(container).toHaveTextContent('curl'));
     expect(container).toHaveTextContent('POST');
     expect(container).toHaveTextContent('https://google.com');
     expect(container).toHaveTextContent('max-age=0');
@@ -55,7 +60,7 @@ describe('RequestSend', () => {
     const { container } = render(<RequestSamples request={sampleRequest} />);
     await chooseLanguage('JavaScript', 'Axios');
 
-    expect(container).toHaveTextContent('axios');
+    await waitFor(() => expect(container).toHaveTextContent('axios'));
     expect(container).toHaveTextContent('POST');
     expect(container).toHaveTextContent('https://google.com');
     expect(container).toHaveTextContent('max-age=0');
@@ -70,7 +75,7 @@ describe('RequestSend', () => {
     const { container } = render(<RequestSamples request={sampleRequest} />);
     const langSelector = getLanguageSelectorButton();
     expect(langSelector).toHaveTextContent(/axios/i);
-    expect(container).toHaveTextContent('axios');
+    await waitFor(() => expect(container).toHaveTextContent('axios'));
   });
 
   it('allows to change lang/lib after rerender', async () => {
@@ -93,7 +98,7 @@ describe('RequestSend', () => {
     await chooseLanguage('Obj-C');
 
     expect(langSelector).toHaveTextContent(/obj-c/i);
-    expect(container).toHaveTextContent('#import <Foundation/Foundation.h>');
+    await waitFor(() => expect(container).toHaveTextContent('#import <Foundation/Foundation.h>'));
   });
 
   it('adds multipart form data to js/fetch request', async () => {
@@ -103,7 +108,7 @@ describe('RequestSend', () => {
 
     expect(langSelector).toHaveTextContent(/javascript/i);
     expect(langSelector).toHaveTextContent(/fetch/i);
-    expect(container).toHaveTextContent('options.body = form;');
+    await waitFor(() => expect(container).toHaveTextContent('options.body = form;'));
   });
 });