added tests for editor

scorelab · Aug 30, 2023 · 7e67ec5 · 7e67ec5
1 parent 9addbb7
commit 7e67ec5
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 52 deletions.
diff --git a/cypress/e2e/components/editor/editor.cy.js b/cypress/e2e/components/editor/editor.cy.js
@@ -65,6 +65,35 @@ describe("Editor Test | CodeLabz", () => {
     cy.get('[data-testId=stepsPanel]>div').eq(0).contains("Test step1");
   });
 
+  it("Collapsing of sidebar", function (){
+    cy.get("[data-testid=tutorial-steps-list]").should("exist");
+    cy.get("[data-testid=tutorial-collapse-button]").click();
+    cy.get("[data-testid=tutorial-steps-list]").should("not.exist");
+    cy.get("[data-testid=tutorial-collapse-button]").click();
+  });
+
+  it("should publish unpublish successfully", function () {
+    cy.get("[data-testid=publishTutorial]").contains("Unpublish");
+    cy.get("[data-testid=publishTutorial]").click();
+    cy.wait(1000);
+    cy.get("[data-testid=publishTutorial]").contains("Publish");
+  });
+
+  it("should support rich text", function () {
+    cy.get('.ql-editor').type("{selectall}{backspace}");
+    cy.get('.ql-editor').type("{ctrl}b").type("bold").type("{ctrl}b").type("{enter}");
+    cy.get(".ql-italic").click();
+    cy.get('.ql-editor').type("italic");
+    cy.get(".ql-italic").click();
+    cy.get('.ql-editor').type("{rightarrow}{enter}");
+    cy.get('.ql-editor').type("{ctrl}u").type("underlined").type("{ctrl}u");
+    cy.get("[data-testId=previewMode]").click();
+    cy.fixture("editor").then(editorTestData => {
+      cy.get("[data-testid=tutorial-content]").should("have.html", editorTestData.expectedRichTextHTML);
+    })
+
+  });
+
   it("Should add new step", function () {
     cy.get('[data-testId=addNewStep]').click();
     cy.get('[data-testId=newStepModal]').should("exist");
@@ -74,6 +103,13 @@ describe("Editor Test | CodeLabz", () => {
     cy.wait(1000);
     cy.get('[data-testid=stepsPanel]>div').eq(2).contains("Test step2");
   });
+
+  it("Change active step by clicking on it", function (){
+    cy.get('[data-testid=stepsPanel]>div').eq(2).click();
+    cy.get('[data-testId=stepsPanel]>div').eq(2).find('.Mui-active').should('exist');
+    cy.get('[data-testid=stepsPanel]>div').eq(0).click();
+    cy.get('[data-testId=stepsPanel]>div').eq(0).find('.Mui-active').should('exist');
+  });
 
   it("should switch between tutorial steps", function () {
     cy.get('[data-testId=nextStepButton]').click();

diff --git a/cypress/fixtures/editor.json b/cypress/fixtures/editor.json
@@ -0,0 +1,3 @@
+{
+    "expectedRichTextHTML": "<div><p><strong>bold</strong><br><em>italic</em><br><u>underlined</u></p></div>"
+}
diff --git a/src/components/Tutorials/index.jsx b/src/components/Tutorials/index.jsx
@@ -212,6 +212,7 @@ const ViewTutorial = () => {
         </Grid>
         <Grid className={classes.flexRow}>
           <ExpandMore
+            data-testid="tutorial-collapse-button"
             expand={expand}
             onClick={() => {
               setExpand(prev => !prev);
@@ -229,6 +230,7 @@ const ViewTutorial = () => {
             className={classes.widthTransition}
           >
             <Collapse
+              data-testid="tutorial-steps-list"
               in={expand}
               timeout="auto"
               unmountOnExit

diff --git a/src/components/Tutorials/subComps/EditControls.jsx b/src/components/Tutorials/subComps/EditControls.jsx
@@ -43,16 +43,17 @@ const EditControls = ({
   const dispatch = useDispatch();
   const [viewRemoveStepModal, setViewRemoveStepModal] = useState(false);
   const [viewColorPickerModal, setViewColorPickerModal] = useState(false);
+  const [publishLoad, setPublishLoad] = useState(false);
   const DropdownMenu = () => {
-  const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorEl, setAnchorEl] = React.useState(null);
 
-  const handleClick = event => {
-    setAnchorEl(event.currentTarget);
-  };
+    const handleClick = event => {
+      setAnchorEl(event.currentTarget);
+    };
 
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
 
     return (
       <>
@@ -103,9 +104,15 @@ const EditControls = ({
     );
   };
 
-  const handlePublishTutorial = () => {
-    publishUnpublishTutorial(owner, tutorial_id, isPublished)(firebase, firestore, dispatch);
-  }
+  const handlePublishTutorial = async () => {
+    setPublishLoad(true);
+    await publishUnpublishTutorial(owner, tutorial_id, isPublished)(
+      firebase,
+      firestore,
+      dispatch
+    );
+    setPublishLoad(false);
+  };
 
   return (
     <>
@@ -136,46 +143,7 @@ const EditControls = ({
         >
           Add images
         </Button>
-
-        {/* <Button
-          onClick={() => {
-            <Snackbar
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left"
-              }}
-              open={true}
-              autoHideDuration={6000}
-              message="updating step visibility...."
-            />;
-            hideUnHideStep(
-              owner,
-              tutorial_id,
-              noteID,
-              visibility
-            )(firebase, firestore, dispatch).then(() => {
-              <Snackbar
-                anchorOrigin={{
-                  vertical: "bottom",
-                  horizontal: "left"
-                }}
-                open={true}
-                autoHideDuration={6000}
-                message="updated...."
-              />;
-            });
-          }}
-        >
-          {!visibility ? (
-            <>
-              <VisibilityOffIcon /> Show step
-            </>
-          ) : (
-            <>
-              <VisibilityIcon /> Hide step
-            </>
-          )}
-        </Button> */}
+
         <Button
           danger
           onClick={() => {
@@ -225,8 +193,13 @@ const EditControls = ({
                   <FileCopyIcon /> Preview mode
                 </Button>
               )}
-              <Button data-testid={"publishTutorial"} onClick={handlePublishTutorial} type="dashed">
-                <FileCopyIcon /> Publish
+              <Button
+                data-testid="publishTutorial"
+                onClick={handlePublishTutorial}
+                type="dashed"
+                disabled={publishLoad}
+              >
+                <FileCopyIcon /> {isPublished ? "Unpublish" : "Publish"}
               </Button>
               <DropdownMenu key="more" />
             </>