feat: e2e test

kobakazu0429 · Nov 30, 2023 · 0720009 · 0720009
1 parent 787d8ea
commit 0720009
Show file tree

Hide file tree

Showing 10 changed files with 417 additions and 148 deletions.
diff --git a/src/components/Admin/CreatedUrl.svelte b/src/components/Admin/CreatedUrl.svelte
@@ -5,7 +5,7 @@
   import { buildUrlParams } from "../../url";
   import { get } from "svelte/store";
   import { buildingTests } from "../../stores/admin";
-  import { testsSchema, testForModalToTestConverter } from "../../test";
+  import { testsSchemaStrip, testForModalToTestConverter } from "../../test";
 
   let url = "";
 
@@ -18,8 +18,8 @@
 
     if (tests) {
       try {
-        testsSchema.parse(tests);
-        obj.tests = tests;
+        const stripedTests = testsSchemaStrip.parse(tests);
+        obj.tests = stripedTests;
       } catch (error) {
         console.log(error);
       }

diff --git a/src/components/Admin/TestBuilderModal/Arguments.svelte b/src/components/Admin/TestBuilderModal/Arguments.svelte
@@ -2,10 +2,13 @@
   import { _ } from "svelte-i18n";
   import Argument from "./CTypeValue.svelte";
   import { argumentsValueDeleter, currentModal } from "../../../stores/admin";
+
+  // @ts-expect-error
+  $: argumentsValues = $currentModal?.argumentsValues ?? [];
 </script>
 
 <div class="arguments">
-  {#each $currentModal.argumentsValues as arg, i}
+  {#each argumentsValues as arg, i}
     <Argument
       bind:type={arg.type}
       bind:value={arg.value}

diff --git a/src/components/Admin/TestBuilderModal/index.svelte b/src/components/Admin/TestBuilderModal/index.svelte
@@ -12,20 +12,23 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { Modal } from "carbon-components-svelte";
-  import { TextInput, Button } from "carbon-components-svelte";
+  import { TextInput, Button, Toggle, TextArea } from "carbon-components-svelte";
   import AddAlt from "carbon-icons-svelte/lib/AddAlt.svelte";
   import Arguments from "./Arguments.svelte";
   import ReturnValue from "./CTypeValue.svelte";
 
   import {
     buildingTestsAdder,
     currentModal,
-    resetCurrentModal,
+    resetCurrentModalTypeFunction,
+    resetCurrentModalTypeMain,
     argumentsValueAdder,
     buildingTestsDeleter
   } from "../../../stores/admin";
   import { ulid } from "ulid";
 
+  let isTestTypeAsFunction = $currentModal.type === "function";
+
   const buildingTestsAdd = () => {
     buildingTestsAdder({
       ...$currentModal,
@@ -40,12 +43,16 @@
       buildingTestsDeleter(id);
     }
     buildingTestsAdd();
-    resetCurrentModal();
+    $currentModal.type === "function"
+      ? resetCurrentModalTypeFunction()
+      : resetCurrentModalTypeMain();
     closeTestBuilderModal();
   };
 
   const cancel = () => {
-    resetCurrentModal();
+    $currentModal.type === "function"
+      ? resetCurrentModalTypeFunction()
+      : resetCurrentModalTypeMain();
     closeTestBuilderModal();
   };
 </script>
@@ -55,68 +62,115 @@
   modalHeading={$_("admin.form.tests.builder.create_test")}
   primaryButtonText={$_("admin.modal.primary_button_text")}
   secondaryButtonText={$_("admin.modal.secondary_button_text")}
+  shouldSubmitOnEnter={false}
   on:click:button--primary={confirm}
   on:click:button--secondary={cancel}
   on:close={closeTestBuilderModal}
 >
   <div style="margin-bottom:30px;">
-    <TextInput
-      labelText={$_("admin.form.tests.test_name.label_text")}
-      bind:value={$currentModal.testName}
+    <Toggle
+      labelText="test type"
+      labelA="main"
+      labelB="function"
+      bind:toggled={isTestTypeAsFunction}
+      on:toggle={(e) => {
+        if (e.detail.toggled) {
+          resetCurrentModalTypeFunction();
+        } else {
+          resetCurrentModalTypeMain();
+        }
+      }}
     />
   </div>
-  <div style="margin-bottom:30px;">
-    <TextInput
-      labelText={$_("admin.form.tests.function_name.label_text")}
-      bind:value={$currentModal.functionName}
-    />
-  </div>
-  <!-- <div style="margin-bottom:30px;">
+  {#if $currentModal.type === "function"}
+    <div style="margin-bottom:30px;">
+      <TextInput
+        labelText={$_("admin.form.tests.test_name.label_text")}
+        bind:value={$currentModal.testName}
+      />
+    </div>
+    <div style="margin-bottom:30px;">
+      <TextInput
+        labelText={$_("admin.form.tests.function_name.label_text")}
+        bind:value={$currentModal.functionName}
+      />
+    </div>
+    <!-- <div style="margin-bottom:30px;">
     <TextInput
       labelText={$_("admin.form.tests.arguments_value.label_text")}
       placeholder={$_("admin.form.tests.arguments_value.placeholder")}
       helperText={$_("admin.form.tests.arguments_value.helper_text")}
       bind:value={$currentModal.argumentsValue}
     />
   </div> -->
-  <div style="margin-bottom:30px;">
-    <label for="arguments-value" class="bx--label"
-      >{$_("admin.form.tests.arguments_value.label_text")}{$_(
-        "admin.form.tests.arguments_value.helper_text"
-      )}</label
-    >
-    <Arguments />
-    <Button
-      iconDescription={$_("setting_modal.add")}
-      tooltipPosition="right"
-      icon={AddAlt}
-      on:click={argumentsValueAdder}
-    />
-  </div>
-  <div style="margin-bottom:30px;">
-    <label for="return-value" class="bx--label"
-      >{$_("admin.form.tests.return_value.label_text")}{$_(
-        "admin.form.tests.return_value.helper_text"
-      )}</label
-    >
-    <!-- <TextInput
+    <div style="margin-bottom:30px;">
+      <label for="arguments-value" class="bx--label"
+        >{$_("admin.form.tests.arguments_value.label_text")}{$_(
+          "admin.form.tests.arguments_value.helper_text"
+        )}</label
+      >
+      <Arguments />
+      <Button
+        iconDescription={$_("setting_modal.add")}
+        tooltipPosition="right"
+        icon={AddAlt}
+        on:click={argumentsValueAdder}
+      />
+    </div>
+    <div style="margin-bottom:30px;">
+      <label for="return-value" class="bx--label"
+        >{$_("admin.form.tests.return_value.label_text")}{$_(
+          "admin.form.tests.return_value.helper_text"
+        )}</label
+      >
+      <!-- <TextInput
       labelText={$_("admin.form.tests.return_value.label_text")}
       bind:value={$currentModal.returnValue}
       helperText={$_("admin.form.tests.return_value.helper_text")}
     /> -->
-    <ReturnValue
-      bind:value={$currentModal.returnValue.value}
-      bind:type={$currentModal.returnValue.type}
-    />
-  </div>
-  <div style="margin-bottom:30px;">
-    <TextInput
-      labelText={$_("admin.form.tests.return_precision.label_text")}
-      bind:value={$currentModal.returnPrecision}
-      placeholder={$_("admin.form.tests.return_precision.placeholder")}
-      helperText={$_("admin.form.tests.return_precision.helper_text")}
-    />
-  </div>
+      <ReturnValue
+        bind:value={$currentModal.returnValue.value}
+        bind:type={$currentModal.returnValue.type}
+      />
+    </div>
+    <div style="margin-bottom:30px;">
+      <TextInput
+        labelText={$_("admin.form.tests.return_precision.label_text")}
+        bind:value={$currentModal.returnPrecision}
+        placeholder={$_("admin.form.tests.return_precision.placeholder")}
+        helperText={$_("admin.form.tests.return_precision.helper_text")}
+      />
+    </div>
+  {:else}
+    <div style="margin-bottom:30px;">
+      <TextInput
+        labelText={$_("admin.form.tests.test_name.label_text")}
+        bind:value={$currentModal.testName}
+      />
+    </div>
+
+    <div style="margin-bottom:30px;">
+      <TextInput
+        labelText={$_("admin.form.tests.function_name.label_text")}
+        value="main"
+        readonly
+      />
+    </div>
+    <div style="margin-bottom:30px;">
+      <TextArea
+        labelText="stdin"
+        placeholder="Enter a stdin text"
+        bind:value={$currentModal.stdin}
+      />
+    </div>
+    <div style="margin-bottom:30px;">
+      <TextArea
+        labelText="stdout"
+        placeholder="Enter a stdout text"
+        bind:value={$currentModal.stdout}
+      />
+    </div>
+  {/if}
 </Modal>
 
 <style>

diff --git a/src/components/Admin/TestsBuildTable/index.svelte b/src/components/Admin/TestsBuildTable/index.svelte
@@ -15,15 +15,14 @@
     buildingTestsDeleter,
     displayBuildingTestsTable,
     currentModal,
-    resetCurrentModal
+    resetCurrentModalTypeFunction,
+    resetCurrentModalTypeMain
   } from "../../../stores/admin";
   import { openTestBuilderModal } from "../TestBuilderModal/index.svelte";
   import { get } from "svelte/store";
-  import type { Test } from "../../../test";
 
-  const headers: Array<
-    { key: Exclude<keyof Test, "id">; value: string } | { key: "overflow"; empty: boolean }
-  > = [
+  const headers = [
+    { key: "type", value: "type" },
     { key: "testName", value: $_("admin.form.tests.test_name.label_text") },
     {
       key: "functionName",
@@ -41,6 +40,8 @@
       key: "returnPrecision",
       value: $_("admin.form.tests.return_precision.label_text")
     },
+    { key: "stdin", value: "stdin" },
+    { key: "stdout", value: "stdout" },
     { key: "overflow", empty: true }
   ];
 
@@ -74,7 +75,8 @@
         </Button>
         <Button
           on:click={() => {
-            resetCurrentModal();
+            resetCurrentModalTypeMain();
+            resetCurrentModalTypeFunction();
             openTestBuilderModal();
           }}>{$_("admin.form.tests.builder.create_test")}</Button
         >

diff --git a/src/components/OverflowMenu.svelte b/src/components/OverflowMenu.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-  import { boilerplate, stdin, basic, peakLoadTest, stdinTests } from "../editor/exampleCodes";
+  import {
+    boilerplate,
+    stdin,
+    basic,
+    peakLoadTest,
+    stdinTests,
+    basicTests,
+    peakLoadTestTests
+  } from "../editor/exampleCodes";
   import { setCode } from "../editor/utils";
   import { openIntroductionModal } from "./IntroductionModal/index.svelte";
   import { updateUrlParams } from "../url";
@@ -23,14 +31,14 @@
     text={$_("overflow_menu.load_basic")}
     on:click={() => {
       setCode(basic);
-      updateUrlParams({ code: basic, tests: undefined });
+      updateUrlParams({ code: basic, tests: basicTests });
     }}
   />
   <OverflowMenuItem
     text={$_("overflow_menu.load_peakLoadTest")}
     on:click={() => {
       setCode(peakLoadTest);
-      updateUrlParams({ code: peakLoadTest, tests: undefined });
+      updateUrlParams({ code: peakLoadTest, tests: peakLoadTestTests });
     }}
   />
   <OverflowMenuItem