[FEATURE] WIP handle content length (#20)

Author: Lemick

.github/workflows/build-and-deploy-preview-web-ui.yml

@@ -0,0 +1,50 @@
+name: Build and Deploy Preview Web UI
+concurrency: preview-${{ github.ref }}
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+    paths:
+      - 'ui/**'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+defaults:
+  run:
+    working-directory: ./ui
+
+jobs:
+  build-and-deploy-preview-web-ui:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Cache node_modules
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test
+
+      - name: Build App & Run e2e tests
+        run: npm run build
+
+      - name: Deploy preview 🚀
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ui/build
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

.github/workflows/ui.yml …rkflows/build-and-deploy-prod-web-ui.yml.github/workflows/ui.yml renamed to .github/workflows/build-and-deploy-prod-web-ui.yml .github/workflows/ui.yml renamed to .github/workflows/build-and-deploy-prod-web-ui.yml

@@ -1,4 +1,4 @@
-name: Build and Deploy UI
+name: Build and Deploy Web UI
 
 on:
   workflow_dispatch:
@@ -16,7 +16,7 @@ defaults:
     working-directory: ./ui
 
 jobs:
-  build-and-deploy-ui:
+  build-and-deploy-web-ui:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
@@ -47,3 +47,4 @@ jobs:
         with:
           folder: ui/build
           branch: gh-pages
+          clean-exclude: pr-preview

ui/e2e/test-data/input/simulation-with-content-type.ts

@@ -0,0 +1,29 @@
+export const simulationWithContentType = {
+  meta: {
+    schemaVersion: 'v5',
+    hoverflyVersion: 'v1.6.0',
+    timeExported: '2023-04-10T12:00:00Z'
+  },
+  data: {
+    pairs: [
+      {
+        request: {
+          method: [
+            {
+              matcher: 'exact',
+              value: ''
+            }
+          ]
+        },
+        response: {
+          status: 200,
+          body: 'Hello World',
+          headers: {
+            'content-Length': ['11']
+          },
+          encodedBody: false
+        }
+      }
+    ]
+  }
+};

ui/e2e/test-data/output/expected-content-type-updated.ts

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+
+export const expectContentTypeUpdated = {
+  meta: expect.objectContaining({
+    schemaVersion: 'v5',
+    hoverflyVersion: 'v1.6.0',
+    timeExported: expect.stringMatching(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)
+  }),
+  data: expect.objectContaining({
+    pairs: [
+      {
+        request: {
+          method: [
+            {
+              matcher: 'exact',
+              value: ''
+            }
+          ]
+        },
+        response: {
+          status: 200,
+          body: 'Hello World, how is it going ?',
+          headers: {
+            'content-Length': ['30']
+          },
+          encodedBody: false
+        }
+      }
+    ]
+  })
+};

ui/e2e/web-ui.spec.ts

@@ -3,6 +3,8 @@ import empty from './test-data/input/empty';
 import { WebUiSimulationPage } from './utils/WebUiSimulationPage';
 import expectedComplete from './test-data/output/expected-complete';
 import expectedStartFromScratch from './test-data/output/expected-start-from-scratch';
+import { simulationWithContentType } from './test-data/input/simulation-with-content-type';
+import { expectContentTypeUpdated } from './test-data/output/expected-content-type-updated';
 
 test('should display a simulation example on first app launch', async ({ page }) => {
   const simulationPage = new WebUiSimulationPage(page);
@@ -139,3 +141,19 @@ test('should create a full simulation', async ({ page }) => {
     expect(JSON.parse(textEditorContent)).toMatchObject(expectedComplete);
   });
 });
+
+test('content-type headers should update when body change', async ({ page }) => {
+  const simulationPage = new WebUiSimulationPage(page);
+  await simulationPage.goto(JSON.stringify(simulationWithContentType));
+
+  await page.locator('.card-header').click();
+  await simulationPage.setTextEditorContent(
+    simulationPage.responseBodyEditor,
+    ', how is it going ?'
+  );
+
+  const textEditorContent = await simulationPage.getTextEditorContent(
+    simulationPage.simulationTextEditor
+  );
+  expect(JSON.parse(textEditorContent)).toMatchObject(expectContentTypeUpdated);
+});

ui/src/components/form-simulation/ResponseBodyEditor.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import MonacoEditor, { Monaco, OnMount } from '@monaco-editor/react';
 import { isJSON, prettify } from '../../services/json-service';
-import { editor, IScrollEvent } from 'monaco-editor';
+import { editor } from 'monaco-editor';
 import { Button } from 'react-bootstrap';
 
 type Props = {
@@ -15,28 +15,12 @@ const MAX_EDITOR_LINE = 50;
 const ResponseBodyEditor = ({ value = '', onChange }: Props) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor>();
   const monacoRef = useRef<Monaco>();
-  const [isBodyJson] = useState(isJSON(value));
   const [editorHeightPx, setEditorHeightPx] = useState(100);
-
-  useEffect(() => {
-    if (!editorRef.current || editorRef.current.hasTextFocus()) {
-      return;
-    }
-
-    loadPropValueIntoEditor();
-  }, [value]);
+  const isBodyJson = useMemo(() => isJSON(value), [value]);
 
   const onEditorMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
-    loadPropValueIntoEditor();
-  };
-
-  const loadPropValueIntoEditor = () => {
-    if (!editorRef.current) {
-      return;
-    }
-    editorRef.current.setValue(value);
     updateEditorHeight();
   };
 
@@ -81,8 +65,9 @@ const ResponseBodyEditor = ({ value = '', onChange }: Props) => {
         <MonacoEditor
           width="100%"
           height={`${editorHeightPx}px`}
-          defaultLanguage={isBodyJson ? 'json' : ''}
+          language={isBodyJson ? 'json' : ''}
           theme="vs-dark"
+          value={value}
           onMount={onEditorMount}
           onChange={onEditorValueChange}
           options={{

ui/src/components/form-simulation/ResponseMatcherForm.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
-import { Response } from '../../types/hoverfly';
+import { RequestHeaders, Response, ResponseHeaders } from '../../types/hoverfly';
 import ArrowCollapse from '../utilities/ArrowCollapse';
 import ResponseBodyEditor from './ResponseBodyEditor';
 import { Form } from 'react-bootstrap';
 import SelectHttpStatus from '../utilities/SelectHttpStatus';
+import { byteLengthUtf8, updateContentLengthAccordingToBody } from '../../services/headers-service';
 
 type Props = {
   response?: Response;
   onChange: (response: Response) => void;
 };
 
 const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
+  const onResponseBodyChange = (newBody: string) => {
+    const newHeaders = updateContentLengthAccordingToBody(newBody, response?.headers);
+    onChange({ ...response, body: newBody, headers: newHeaders });
+  };
+
   return (
     <div data-testid="response-form">
       <legend>Response</legend>
@@ -27,10 +33,7 @@ const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
         </Form.Group>
         <Form.Group>
           <Form.Label htmlFor="body">Body:</Form.Label>
-          <ResponseBodyEditor
-            value={response?.body}
-            onChange={(value) => onChange({ ...response, body: value })}
-          />
+          <ResponseBodyEditor value={response?.body} onChange={onResponseBodyChange} />
         </Form.Group>
         <ArrowCollapse visibleByDefault={false}>
           <>

ui/src/services/headers-service.test.ts

@@ -0,0 +1,28 @@
+import { updateContentLengthAccordingToBody } from './headers-service';
+import { ResponseHeaders } from '../types/hoverfly';
+
+describe('updateContentLengthAccordingToBody', () => {
+  it.each([
+    ['do nothing on empty headers', undefined, undefined],
+    [
+      'do nothing when no Content-Length header',
+      { 'Other-Header': ['value'] },
+      { 'Other-Header': ['value'] }
+    ],
+    [
+      'do nothing when headers are malformed (not an array)',
+      { 'content-Length': '0' },
+      { 'content-Length': '0' }
+    ],
+    ['do nothing when headers array is empty', { 'content-Length': [] }, { 'content-Length': [] }],
+    [
+      'update Content-Length header',
+      { 'Other-header': 'Value', 'content-Length': ['0'] },
+      { 'Other-header': 'Value', 'content-Length': ['13'] }
+    ]
+  ])('should %s', (_, headers, expected) => {
+    expect(updateContentLengthAccordingToBody('Hello, world!', headers as ResponseHeaders)).toEqual(
+      expected
+    );
+  });
+});

ui/src/services/headers-service.ts

@@ -0,0 +1,27 @@
+import { ResponseHeaders } from '../types/hoverfly';
+
+export const byteLengthUtf8 = (str: string) => new Blob([str]).size;
+
+export const updateContentLengthAccordingToBody = (
+  body: string,
+  headers: ResponseHeaders | undefined
+): ResponseHeaders | undefined => {
+  if (!headers) {
+    return undefined;
+  }
+
+  const contentLengthKey = Object.keys(headers).find(
+    (key) => key.toLowerCase() === 'content-length'
+  );
+  if (
+    !contentLengthKey ||
+    !Array.isArray(headers[contentLengthKey]) ||
+    headers[contentLengthKey].length == 0
+  ) {
+    return headers;
+  }
+
+  const updatedHeaders = { ...headers };
+  updatedHeaders[contentLengthKey][0] = String(byteLengthUtf8(body)); // Assume that response is UTF-8 encoded, that may not be the case, may be more precise by using Encoding header
+  return updatedHeaders;
+};

ui/src/types/hoverfly.ts

@@ -24,7 +24,7 @@ export type FieldMatcher = {
   doMatch?: FieldMatcher;
 };
 
-export type Headers = Record<string, string[]>;
+export type ResponseHeaders = Record<string, string[]>;
 
 export type RequestQueries = Record<string, FieldMatcher[]>;
 
@@ -46,7 +46,7 @@ export type Response = {
   bodyFile?: string;
   encodedBody?: boolean;
   fixedDelay?: number;
-  headers?: Headers;
+  headers?: ResponseHeaders;
   logNormalDelay?: LogNormalDelay;
   removesState?: string[];
   status?: number;