Merge pull request #2 from Andrea-gli/play

add testing snippet area

src/client/components/composer/NewRequest/TestEntryForm.jsx

@@ -1,79 +1,73 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState } from "react";
 import WWWForm from "./WWWForm.jsx";
 import BodyTypeSelect from "./BodyTypeSelect.jsx";
 import JSONTextArea from "./JSONTextArea.jsx";
-import RawBodyTypeSelect from "./RawBodyTypeSelect.jsx"
-import JSONPrettify from "./JSONPrettify.jsx"
-import TextCodeAreaEditable from "./TextCodeAreaEditable.jsx"
+import RawBodyTypeSelect from "./RawBodyTypeSelect.jsx";
+import JSONPrettify from "./JSONPrettify.jsx";
+import TextCodeAreaEditable from "./TextCodeAreaEditable.jsx";
 import dropDownArrow from "../../../../assets/icons/caret-down-tests.svg";
 import dropDownArrowUp from "../../../../assets/icons/caret-up-tests.svg";
 import { isAbsolute, relative } from "path";
+import RestTestSnippetsContainer from "./TestSnippets/RestTestSnippetsContainer";
 
 const TestEntryForm = (props) => {
-  const {
-    testContent,
-    setNewTestContent
-  } = props;
+  const { testContent, setNewTestContent } = props;
 
   const [showTests, setShowTests] = useState(false);
   const handleShowTests = () => setShowTests(!showTests);
 
   return (
-    <div className='mt-4 mb-4'>
+    <div className="mt-4 mb-4">
+      <RestTestSnippetsContainer
+        testContent={testContent}
+        setNewTestContent={setNewTestContent}
+        setShowTests={setShowTests}
+      />
       <div
         className="is-rest-invert show-hide-tests cards-dropdown minimize-card is-flex is-align-items-center is-justify-content-center"
-        onClick={() => {
-          handleShowTests();
-        }}
+        onClick={handleShowTests}
       >
-      {showTests === true &&
-        <>
-          <span>Hide Tests</span>
-          <span className="icon is-medium is-align-self-center show-hide-tests-icon">
-            <img 
-              alt=''
-              src={dropDownArrowUp} 
-              className="is-awesome-icon" 
-              aria-hidden="false" 
-            />
-          </span>
-        </>
-      }
-      {showTests === false &&
-        <>
-          <span>View Tests</span>
-          <span className="icon is-medium is-align-self-center show-hide-tests-icon">
-            <img 
-              alt=''
-              src={dropDownArrow}
-              className="is-awesome-icon" 
-              aria-hidden="false" 
-            />
-          </span>
-        </>
-      }
-
-
-      </div>
-    {showTests === true &&
-      <div id="test-script-entry">
-        <TextCodeAreaEditable
-          mode="javascript"
-          value={testContent}
-          onChange={(editor, data, value) => {
-            setNewTestContent(value);
-          }}
-        />
+        {showTests === true && (
+          <>
+            <span>Hide Tests</span>
+            <span className="icon is-medium is-align-self-center show-hide-tests-icon">
+              <img
+                alt=""
+                src={dropDownArrowUp}
+                className="is-awesome-icon"
+                aria-hidden="false"
+              />
+            </span>
+          </>
+        )}
+        {showTests === false && (
+          <>
+            <span>View Tests</span>
+            <span className="icon is-medium is-align-self-center show-hide-tests-icon">
+              <img
+                alt=""
+                src={dropDownArrow}
+                className="is-awesome-icon"
+                aria-hidden="false"
+              />
+            </span>
+          </>
+        )}
       </div>
-    }
+      {showTests === true && (
+        <div id="test-script-entry">
+          <TextCodeAreaEditable
+            mode="javascript"
+            value={testContent}
+            onChange={(editor, data, value) => {
+              setNewTestContent(value);
+            }}
+          />
+        </div>
+      )}
     </div>
-
-
-
-
-
-
-
   );
 };
 

src/client/components/composer/NewRequest/TestSnippets/RestTestSnippets.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from "react";
+
+export default function RestTestSnippets(props) {
+  const { setNewTestContent, setShowTests } = props;
+
+  const snippets = {
+    "Status code: Code is 200":
+      "assert.strictEqual(response.status, 200, 'response is 200')",
+
+    "Access the cookies from the response object":
+      "assert.exists(response.cookies, 'cookies exists on response object')",
+  };
+
+  const handleClickOne = () => {
+    setShowTests(true);
+    setNewTestContent(snippets["Status code: Code is 200"]);
+  };
+
+  const handleClickTwo = () => {
+    setShowTests(true);
+    setNewTestContent(snippets["Access the cookies from the response object"]);
+  };
+
+  return (
+    <div>
+      <span onClick={handleClickOne}>Status code: Code is 200</span>;
+      <br />
+      <span onClick={handleClickTwo}>
+        Access the cookies from the response object
+      </span>
+      ;
+    </div>
+  );
+}

src/client/components/composer/NewRequest/TestSnippets/RestTestSnippetsContainer.jsx

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from "react";
+import dropDownArrow from "../../../../../assets/icons/caret-down-tests.svg";
+
+import dropDownArrowUp from "../../../../../assets/icons/caret-up-tests.svg";
+
+import RestTestSnippets from "./RestTestSnippets";
+
+export default function RestTestSnippetsContainer(props) {
+  console.log("propsssss=>", props);
+  const { setShowTests, testContent, setNewTestContent } = props;
+  const [showSnippets, setShowSnippets] = useState(false);
+
+  const handleShowSnippets = () => {
+    setShowSnippets(!showSnippets);
+  };
+  return (
+    <div>
+      <div
+        className="is-rest-invert show-hide-tests cards-dropdown minimize-card is-flex is-align-items-center is-justify-content-center"
+        onClick={handleShowSnippets}
+      >
+        {showSnippets === true && (
+          <>
+            <span>Test Snippets</span>
+            <span className="icon is-medium is-align-self-center show-hide-tests-icon">
+              <img
+                alt=""
+                src={dropDownArrowUp}
+                className="is-awesome-icon"
+                aria-hidden="false"
+              />
+            </span>
+          </>
+        )}
+
+        {showSnippets === false && (
+          <>
+            <span>Test Snippets</span>
+            <span className="icon is-medium is-align-self-center show-hide-tests-icon">
+              <img
+                alt=""
+                src={dropDownArrow}
+                className="is-awesome-icon"
+                aria-hidden="false"
+              />
+            </span>
+          </>
+        )}
+      </div>
+
+      {showSnippets === true && (
+        <div id="test-snippets">
+          <RestTestSnippets
+            testContent={testContent}
+            setNewTestContent={setNewTestContent}
+            setShowTests={setShowTests}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/client/components/composer/NewRequest/TextCodeAreaEditable.jsx

@@ -1,18 +1,18 @@
 import { POINT_CONVERSION_UNCOMPRESSED } from "constants";
 import React, { useState, useEffect, useRef } from "react";
-import {UnControlled as CodeMirror} from 'react-codemirror2';
-import 'codemirror/theme/neat.css';
+import { UnControlled as CodeMirror } from "react-codemirror2";
+import "codemirror/theme/neat.css";
 
-
-export default function TextCodeAreaEditable ({ value, mode, onChange, theme }) {
+export default function TextCodeAreaEditable({ value, mode, onChange, theme }) {
+  console.log("value=>", value, "mode=>", mode, "theme=>", theme);
   return (
-    <div className='is-neutral-200-box'>
+    <div className="is-neutral-200-box">
       <CodeMirror
         value={value}
         autoCursor={false}
         options={{
           mode,
-          theme: theme || 'neat',
+          theme: theme || "neat",
           lineNumbers: true,
           tabSize: 4,
           lineWrapping: true,
@@ -23,4 +23,4 @@ export default function TextCodeAreaEditable ({ value, mode, onChange, theme })
       />
     </div>
   );
-}
+}

src/client/components/composer/RestContainer.jsx

@@ -150,7 +150,6 @@ export default function RestContainer({
         minimized: false,
         tab: currentTab,
       };
-      console.log("reqRes--->", reqRes);
     }
 
     // add request to history

src/client/components/display/WebSocketMessage.tsx

@@ -32,6 +32,7 @@ const WebSocketMessage:React.SFC<WebSocketMessageProps> = ({
 console.log('Data=>>>> ',data)
 console.log('type of data', typeof data)
 
+
   return (
     <div>
       <div className={webSocketMessageClassNames} id={`ws-msg-${index}`}>
@@ -42,6 +43,7 @@ console.log('type of data', typeof data)
 
           typeof data==='object'?
 
+          //decode buffer to dataURI
            <img src={new TextDecoder("utf-8").decode(data)} alt="img"/> :
 
             <div id={webSocketMessageIDNames}>{data}</div> 

src/client/components/display/WebSocketWindow.tsx

@@ -11,6 +11,7 @@ const { api } = window;
 const WebSocketWindow :React.SFC<WebSocketWindowProps> = ({ content, outgoingMessages, incomingMessages, connection }) => {
 
   const [inputMessage, setInputMessage] = useState('');
+  const [showWarning, setShowWarning] =useState(false)
 
   //updates the outgoing message when it changes
   const updateOutgoingMessage = (value: any) => {
@@ -28,6 +29,13 @@ const WebSocketWindow :React.SFC<WebSocketWindowProps> = ({ content, outgoingMes
 
     const file = event.target.files[0]
     console.log('file===>',file)
+    console.log('size==>', file.size)
+    file.size>100000 ?
+      setShowWarning(true):
+      setShowWarning(false)
+
+
+
     //const imageSrc = URL.createObjectURL(file)
 
     const dataURL = (file:any) => new Promise((resolve, reject) => {
@@ -38,6 +46,7 @@ const WebSocketWindow :React.SFC<WebSocketWindowProps> = ({ content, outgoingMes
 });
 
      const data:any = await dataURL(file);
+
     // const buffer = Buffer.from(data, "utf8");
     // console.log(buffer)
 
@@ -120,6 +129,11 @@ const WebSocketWindow :React.SFC<WebSocketWindowProps> = ({ content, outgoingMes
           >
             Send image
           </button>
+
+
+          {showWarning? 
+          <p >file size is large, may cause errors</p>: null}
+
         </div>
         {/* only show the ws messages when connection is open */}
         {connection === "open" && (

test/pageObjects/ComposerObj.js

@@ -49,13 +49,13 @@ class ComposerObj {
     return app.client.$("button=Add New Request");
   }
 
-  // get closeConnectionBtn() {
-  //   return app.client.$("button=Close Connection");
-  // }
+  get closeConnectionBtn() {
+    return app.client.$("button=Close Connection");
+  }
 
-  // get reopenConnectionBtn() {
-  //   return app.client.$("button=Re-Open Connection");
-  // }
+  get reopenConnectionBtn() {
+    return app.client.$("button=Re-Open Connection");
+  }
 
   get testScriptCode() {
     const codeMirror = app.client.$("#test-script-entry");