Testing/issue#168 (stakwork#169)

* feat: add node without timestamps * feat: disable some tests temporary * refactor: return auto tests for add node modal * fix: fix test * fix: fix tests * fix: fix regexp * feat: fix regexp * feat: update cypress constant * feat: add yarn caching * feat: add prettier and ci checks * fix: lint issues * fix: add yarn global caching * fix: eslint version --------- Co-authored-by: Расул <[email protected]> Co-authored-by: Emberist <[email protected]> Co-authored-by: kevkevin <[email protected]>
gouravmpk · Mar 20, 2023 · e270ff4 · e270ff4
1 parent 9164bd8
commit e270ff4
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 109 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -9,14 +9,30 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install
+        run: yarn --immutable
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Lint
+        run: yarn lint
+
       - name: Cypress run
         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
         uses: cypress-io/github-action@v5
         with:
           install-command: yarn --immutable
           browser: chrome
           start: yarn start
-          wait-on: "http://localhost:3000" # Waits for above
+          wait-on: 'http://localhost:3000' # Waits for above
           wait-on-timeout: 120 # Waits for 2 minutes
           # Records to Cypress Dashboard
           record: true

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+16.18
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,5 @@
+enableGlobalCache: true
+
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-3.4.1.cjs
diff --git a/cypress/e2e/addNode.cy.ts b/cypress/e2e/addNode.cy.ts
@@ -1,16 +1,17 @@
 import {
   addNodeButtonHome,
   addNodeButtonSidebarOpen,
+  addNodeCloseButton,
   addNodeModal,
   addNodeSubmitButton,
-  addNodeCloseButton,
+  checkbox,
+  description,
+  endTime,
   link,
+  mainError,
   startTime,
-  endTime,
-  description,
-  tags,
   tagError,
-  mainError,
+  tags,
   toast,
 } from "../support/constants/addNode";
 
@@ -39,6 +40,7 @@ describe("Add Node Form / Home interactions", () => {
   const descriptionInput = () => cy.get(description);
   const tagsInput = () => cy.get(tags);
   const toastBody = () => cy.get(toast);
+  const checkboxButton = () => cy.get(checkbox);
 
   it("clicking the Add Content + button opens the Add Content Form modal, X button closes it", () => {
     openButton("home")
@@ -56,82 +58,88 @@ describe("Add Node Form / Home interactions", () => {
     modal().should("not.exist");
   });
 
-  // it("submitting the form with all fields empty yields 5 error messages", () => {
-  //   openButton("home").click();
+  it("submitting the form with all fields empty yields 5 error messages", () => {
+    openButton("home").click();
 
-  //   submitButton().click({ waitForAnimations: false });
+    checkboxButton().click({ waitForAnimations: false });
 
-  //   mainErrorMessage().should("not.be.visible").and("contain.text", "5 errors");
+    submitButton().click({ waitForAnimations: false });
 
-  //   cy.contains(/the field is required/i).should("be.visible");
+    mainErrorMessage().should("not.be.visible").and("contain.text", "5 errors");
 
-  //   tagErrorMessage()
-  //     .should("be.visible")
-  //     .and(
-  //       "contain.text",
-  //       "You need to enter at least 1 topic tag to submit a node."
-  //     );
-  // });
+    cy.contains(/the field is required/i).should("be.visible");
 
-  // it("all fields filled out correctly submits the form, closes the modal and displays custom success message", () => {
-  //   cy.intercept("POST", "https://knowledge-graph.sphinx.chat/add_node", {
-  //     body: {
-  //       success: true,
-  //     },
-  //     statusCode: 200,
-  //   }).as("add_node");
+    tagErrorMessage()
+      .should("be.visible")
+      .and(
+        "contain.text",
+        "You need to enter at least 1 topic tag to submit a node."
+      );
+  });
+
+  it("all fields filled out correctly submits the form and checkbox checked, closes the modal and displays custom success message", () => {
+    cy.intercept("POST", "https://knowledge-graph.sphinx.chat/add_node", {
+      body: {
+        success: true,
+      },
+      statusCode: 200,
+    }).as("add_node");
+
+    openButton("home").click();
+
+    checkboxButton().click({ waitForAnimations: false });
 
-  //   openButton("home").click();
+    linkInput().type("youtube.com/watch?v=Midgx8bBDMk", {
+      waitForAnimations: false,
+    });
 
-  //   linkInput().type("youtube.com/watch?v=Midgx8bBDMk", {
-  //     waitForAnimations: false,
-  //   });
+    startTimeInput().type("000000");
+    endTimeInput().type("000030");
+    descriptionInput().type("description");
+    tagsInput().type("test").type("{enter}");
 
-  //   startTimeInput().type("000000");
-  //   endTimeInput().type("000030");
-  //   descriptionInput().type("description");
-  //   tagsInput().type("test").type("{enter}");
+    submitButton().click();
 
-  //   submitButton().click();
+    cy.wait("@add_node");
 
-  //   cy.wait("@add_node");
+    modal().should("not.exist");
 
-  //   modal().should("not.exist");
+    // Waiting for Toast opacity keyframe to complete
+    cy.wait(3000);
 
-  //   // Waiting for Toast opacity keyframe to complete
-  //   cy.wait(3000);
+    toastBody()
+      .should("be.visible")
+      .and("contain.text", "Node submitted successfully!");
+  });
 
-  //   toastBody()
-  //     .should("be.visible")
-  //     .and("contain.text", "Node submitted successfully!");
-  // });
+  it("checkbox checked, submitting the form but receiving an error response from the server, displays custom error message", () => {
+    cy.intercept("POST", "https://knowledge-graph.sphinx.chat/add_node", {
+      body: { error: { message: "Payment required" } },
+      statusCode: 402,
+    }).as("add_node");
 
-  // it("submitting the form but receiving an error response from the server, displays custom error message", () => {
-  //   cy.intercept("POST", "https://knowledge-graph.sphinx.chat/add_node", {
-  //     body: { error: { message: "Payment required" } },
-  //     statusCode: 402,
-  //   }).as("add_node");
+    openButton("home").click();
 
-  //   openButton("home").click();
+    checkboxButton().click({ waitForAnimations: false });
 
-  //   linkInput().type("youtube.com/watch?v=Midgx8bBDMk", {
-  //     waitForAnimations: false,
-  //   });
+    linkInput().type("youtube.com/watch?v=Midgx8bBDMk", {
+      waitForAnimations: false,
+    });
 
-  //   startTimeInput().type("000000");
-  //   endTimeInput().type("000030");
-  //   descriptionInput().type("description");
-  //   tagsInput().type("test").type("{enter}");
+    startTimeInput().type("000000");
+    endTimeInput().type("000030");
+    descriptionInput().type("description");
+    tagsInput().type("test").type("{enter}");
 
-  //   submitButton().click();
+    submitButton().click();
 
-  //   cy.wait("@add_node");
+    cy.wait("@add_node");
 
-  //   // Waiting for Toast opacity keyframe to complete
-  //   cy.wait(3000);
+    // Waiting for Toast opacity keyframe to complete
+    cy.wait(3000);
 
-  //   toastBody()
-  //     .should("be.visible")
-  //     .and("contain.text", "Node submission failed, please try again.");
-  // });
+    toastBody()
+      .should("be.visible")
+      .and("contain.text", "Node submission failed, please try again.");
+  });
 });
diff --git a/cypress/support/constants/addNode.ts b/cypress/support/constants/addNode.ts
@@ -1,20 +1,21 @@
 // buttons
-export const addNodeButtonHome = ".kGagkX > .sc-gsnTZi";
+export const addNodeButtonHome = "#add-node-cta";
 export const addNodeButtonSidebarOpen = ".sc-iIPllB > .sc-gsnTZi > .sc-dkzDqf";
-export const addNodeSubmitButton = ".jkcwwh > .sc-gsnTZi";
-export const addNodeCloseButton = "[data-test=add-node-close-button]";
+export const addNodeSubmitButton = "#add-node-submit-cta";
+export const addNodeCloseButton = "#add-node-close-button";
 
 // modal & error messages
-export const addNodeModal = ".sc-ksZaOG";
-export const tagError = ":nth-child(5) > .hSMvhC > .jsuUoS";
-export const mainError = "[data-test=add-node-error-alert]";
+export const addNodeModal = "#add-node-form";
+export const tagError = "#tag-input-errors";
+export const mainError = "#add-node-error-alert";
 
 // inputs
-export const link = "#link";
-export const startTime = "#startTime";
-export const endTime = "#endTime";
-export const description = "#description";
-export const tags = "#tags";
+export const link = "#add-node-link";
+export const startTime = "#add-node-start-time";
+export const endTime = "#add-node-end-time";
+export const description = "#add-node-description";
+export const tags = "#add-node-tags";
+export const checkbox = "#add-node-timestamps-checkbox";
 
 // alerts
 export const toast = ".Toastify__toast-body";
diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "@typescript-eslint/parser": "^5.27.1",
     "craco-alias": "^3.0.1",
     "cypress": "^12.2.0",
+    "eslint": "^7.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-formatter-codeframe": "^7.32.1",

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,12 @@
+/** @type {import('prettier').Config} */
+const config = {
+  bracketSpacing: true,
+  jsxSingleQuote: false,
+  printWidth: 120,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+}
+
+module.exports = config
diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx
@@ -37,8 +37,8 @@ const tagRule = {
 
 const timeRegex = /^\d{2}:\d{2}:\d{2}$/;
 
-const twitterOrYoutubeRegex =
-  /^(https:\/\/twitter.com\/[a-zA-Z0-9_]\/spaces\/.*)|(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)|(https?|ftp|file):\/\/(www.)?(.*?)\.(mp3)?$/;
+const twitterOrYoutubeRegexOrMp3 =
+  /^(?:(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)[\w-]{11}|(?:https?:\/\/)?(?:www\.)?twitter\.com\/i\/spaces\/\d+(?:\?|$)|.+\.mp3)$/i;
 
 const mainInfoMessage =
   'Come across an interesting or useful part of a video or audio you\'d like to share? You can add it to the knowledge graph here!\n\nEnter a valid link to the YouTube video or Twitter Space you were watching, choose a start and end timestamp to encompass the segment you found interesting or useful, provide a brief description of what the segment is about, and add topic tags that are relevant to the segment. Hit "Add node", and your clip will be added to the graph shortly.\n\nYour pubkey will be submitted with your clip, and any boosts your clip receives will go to you!';
@@ -140,7 +140,7 @@ export const AddNodeModal = () => {
   return (
     <BaseModal id="addNode" preventOutsideClose>
       <FormProvider {...form}>
-        <form onSubmit={onSubmit}>
+        <form id="add-node-form" onSubmit={onSubmit}>
           <Flex align="center" direction="row" justify="space-between" pb={32}>
             <Flex align="center" direction="row">
               <Text kind="bigHeadingBold">Add Content</Text>
@@ -151,15 +151,15 @@ export const AddNodeModal = () => {
               </InfoIcon>
             </Flex>
 
-            {Object.keys(errors).length !== 0 && (
-              <ErrorAlert data-test="add-node-error-alert" role="alert">
+            {Object.keys(errors).length > 0 && (
+              <ErrorAlert id="add-node-error-alert" role="alert">
                 {Object.keys(errors).length}
                 {Object.keys(errors).length > 1 ? " errors" : " error"}
               </ErrorAlert>
             )}
 
             <CloseButton
-              data-test="add-node-close-button"
+              id="add-node-close-button"
               onClick={close}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === "Space") {
@@ -185,7 +185,7 @@ export const AddNodeModal = () => {
                 pattern: {
                   message:
                     "You must enter a valid YouTube, Twitter Space or mp3 link.",
-                  value: twitterOrYoutubeRegex,
+                  value: twitterOrYoutubeRegexOrMp3,
                 },
               }}
             />
@@ -196,6 +196,7 @@ export const AddNodeModal = () => {
               Add timestamps
               <button
                 className="checkbox"
+                id="add-node-timestamps-checkbox"
                 onClick={() => setEnableTimestamps(!enableTimestamps)}
                 type="button"
               >

diff --git a/src/components/App/AppBar/index.tsx b/src/components/App/AppBar/index.tsx
@@ -14,6 +14,12 @@ type Props = {
   onSubmit?: () => void;
 };
 
+const AddNodeButton = ({ onClick }: { onClick: () => void }) => (
+  <AddButton id="add-node-cta" kind="small" onClick={onClick}>
+    Add Content +
+  </AddButton>
+);
+
 export const AppBar = ({ onSubmit }: Props) => {
   const sidebarIsOpen = useAppStore((s) => s.sidebarIsOpen);
   const selectedNode = useSelectedNode();
@@ -40,16 +46,12 @@ export const AppBar = ({ onSubmit }: Props) => {
       </SearchBarWrapper>
 
       <Flex>
-        <AddButton kind="small" onClick={open}>
-          Add Content +
-        </AddButton>
+        <AddNodeButton onClick={open} />
       </Flex>
     </Header>
   ) : (
     <AddNodeWrapper>
-      <AddButton kind="small" onClick={open}>
-        Add Content +
-      </AddButton>
+      <AddNodeButton onClick={open} />
     </AddNodeWrapper>
   );
 };

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -35,14 +35,21 @@ export const App = () => {
   const selectedNode = useSelectedNode();
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen);
 
-  const [searchTerm, setCurrentSearch, setRelevanceSelected, setTranscriptOpen] = useAppStore((s) => [
+  const [
+    searchTerm,
+    setCurrentSearch,
+    setRelevanceSelected,
+    setTranscriptOpen,
+  ] = useAppStore((s) => [
     s.currentSearch,
     s.setCurrentSearch,
     s.setRelevanceSelected,
     s.setTranscriptOpen,
   ]);
 
-  const hasBudgetExplanationModalBeSeen = useAppStore((s) => s.hasBudgetExplanationModalBeSeen);
+  const hasBudgetExplanationModalBeSeen = useAppStore(
+    (s) => s.hasBudgetExplanationModalBeSeen
+  );
 
   const fetchData = useDataStore((s) => s.fetchData);
   const setSphinxModalOpen = useDataStore((s) => s.setSphinxModalOpen);
@@ -100,9 +107,13 @@ export const App = () => {
         <DataRetriever loader={<Preloader />}>
           <FormProvider {...form}>
             <SideBar onSubmit={handleSubmit} />
+
             <Universe />
+
             {isChileGraph && <SecondarySideBar />}
+
             <AppBar onSubmit={handleSubmit} />
+
             {isChileGraph && <FooterMenu />}
           </FormProvider>
         </DataRetriever>