feat: Java script editor , snippet and AI added [SPRW-2607] [SPRW-2606]

packages/@sparrow-workspaces/src/features/testflow-explorer/components/index.ts

@@ -22,4 +22,5 @@ export { default as ScheduleRow } from "./schedule-row/ScheduleRow.svelte";
 export { default as TestflowNavigator } from "./testflow-navigator/TestflowNavigator.svelte";
 export { default as TestDataRow } from "./test-data-row/TestDataRow.svelte";
 export { default as RequestAssertionsTestFlow } from "./request-tests/RequestAssertionsTestFlow.svelte";
+export { default as RequestTestsTestFlow } from "./request-tests/RequestTestsTestFlow.svelte";
 export { default as ResponseTestResults } from "./test-results-panel/ResponseTestResults.svelte";

packages/@sparrow-workspaces/src/features/testflow-explorer/components/request-navigator/RequestNavigatorTestFlow.svelte

@@ -55,6 +55,11 @@
         id: RequestSectionEnum.AUTHORIZATION,
         count: 0,
       },
+      {
+        name: "Scripts",
+        id: RequestSectionEnum.TESTS,
+        count: 0,
+      },
       {
         name: "Assertions",
         id: RequestSectionEnum.ASSERTIONS,

packages/@sparrow-workspaces/src/features/testflow-explorer/components/request-tests/RequestTestsTestFlow.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { TestCaseModeEnum } from "@sparrow/common/types/workspace";
+  import { Button } from "@sparrow/library/ui";
+  import { Script, PreScript } from "./sub-components";
+
+  export let tests;
+  export let onTestsChange;
+  export let tabSplitDirection = "horizontal";
+  export let onGenerateTestCases = undefined;
+  export let onGeneratePreScript = undefined;
+  export let isTestCasesGenerating = false;
+  export let isPreScriptGenerating = false;
+</script>
+
+<div
+  class="d-flex flex-column w-100 h-100"
+  style="position: relative;"
+  id="request-tab-test"
+>
+  <div
+    class="d-flex flex-column align-items-center justify-content-between w-100"
+  >
+    <div
+      class="response-container d-flex align-items-center pb-1 px-0 justify-content-between w-100 z-1"
+    >
+      <div class="d-flex gap-1 align-items-center justify-content-center">
+        <div
+          class="position-relative d-flex align-items-center rounded mb-0 py-1"
+          style="position: relative;"
+        >
+          <span
+            role="button"
+            class="rounded text-fs-12 border-radius-2 px-2 py-1 btn-formatter"
+            style="position: relative; z-index: 2; background-color: {tests?.testCaseMode ===
+            TestCaseModeEnum.NO_CODE
+              ? 'var(--bg-ds-surface-400)'
+              : 'transparent'}"
+            id="request-tab-nocode"
+            on:click={() => {
+              onTestsChange({
+                ...tests,
+                testCaseMode: TestCaseModeEnum.NO_CODE,
+              });
+            }}
+          >
+            Pre-Request Script
+          </span>
+
+          <span
+            role="button"
+            on:click={() => {
+              onTestsChange({
+                ...tests,
+                testCaseMode: TestCaseModeEnum.SCRIPT,
+              });
+            }}
+            id="request-tab-test-script"
+            class="rounded px-2 text-fs-12 py-1 btn-formatter"
+            style="position: relative; z-index: 2; background-color: {tests?.testCaseMode ===
+            TestCaseModeEnum.SCRIPT
+              ? 'var(--bg-ds-surface-400)'
+              : 'transparent'}"
+          >
+            Post-Request Script
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="border rounded-top">
+    {#if tests?.testCaseMode === TestCaseModeEnum.SCRIPT}
+      <div class="px-3 py-2">
+        <p class="text-fs-12 mb-0 text-muted">JavaScript Code</p>
+      </div>
+    {:else if tests?.testCaseMode === TestCaseModeEnum.NO_CODE}
+      <div class="d-flex align-items-center justify-content-between px-3 py-2">
+        <p class="text-fs-12 mb-0 text-muted">JavaScript Code</p>
+        <Button
+          title="Read Documentation"
+          size={"extra-small"}
+          type="link-secondary"
+          onClick={() => {
+            window.open(
+              "https://docs.sparrowapp.dev/api-testing/rest/pre-request-script",
+              "_blank",
+            );
+          }}
+        />
+      </div>
+    {/if}
+  </div>
+
+  <div style="flex:1; overflow:auto;">
+    {#if tests?.testCaseMode === TestCaseModeEnum.SCRIPT}
+      <Script
+        {tabSplitDirection}
+        {tests}
+        {onTestsChange}
+        {onGenerateTestCases}
+        {isTestCasesGenerating}
+      />
+    {:else}
+      <PreScript
+        {tabSplitDirection}
+        {tests}
+        {onTestsChange}
+        {onGeneratePreScript}
+        {isPreScriptGenerating}
+      />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .btn-formatter {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-family: "Inter", sans-serif;
+    font-weight: 500;
+    color: var(--text-ds-neutral-50);
+    transition: background-color 0.2s ease;
+  }
+
+  .btn-formatter:hover {
+    background-color: var(--bg-ds-surface-500);
+  }
+
+  .text-muted {
+    color: var(--text-ds-neutral-500);
+  }
+</style>

packages/@sparrow-workspaces/src/features/testflow-explorer/components/request-tests/sub-components/index.ts

@@ -1 +1,3 @@
 export { default as NoCode } from "./no-code/NoCode.svelte";
+export { default as PreScript } from "./pre-script/PreScript.svelte";
+export { default as Script } from "./script/Script.svelte";