Merge pull request #864 from ABHISHEK-PANDEY2/post

Tests for Tutorial and Home Page
c2siorg · Aug 27, 2023 · 9addbb7 · 9addbb7
2 parents 3225631 + 4b1a6bd
commit 9addbb7
Show file tree

Hide file tree

Showing 12 changed files with 258 additions and 119 deletions.
diff --git a/cypress/e2e/components/homepage/homepage.cy.js b/cypress/e2e/components/homepage/homepage.cy.js
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-describe("Error Page Test | CodeLabz", () => {
+describe("Home Page Test | CodeLabz", () => {
   beforeEach(function () {
     cy.fixture("login").then(function (credentials) {
       this.credentials = credentials;
@@ -10,19 +10,55 @@ describe("Error Page Test | CodeLabz", () => {
       cy.visit(this.base_url);
     });
   });
-
+  let id;
   before(function () {
     indexedDB.deleteDatabase("firebaseLocalStorageDb");
-  })
+  });
 
   it("check not logged in user can access homepage", function () {
     cy.visit(this.base_url);
     cy.get("[data-testId=homepage");
   });
 
-  it("check main body has atleast one child", function () {
+  it("login", function () {
+    cy.visit(`${this.base_url}login`);
+    cy.get(".email").type(this.credentials.email);
+    cy.get(".password").type(this.credentials.password);
+    cy.get(".loginButton").click();
+    cy.wait(5000);
+  });
+
+  it("check main body child exist", function () {
     cy.get("[data-testId=homepageMainBody");
     cy.get("[data-testId=homepageMainBody").should("have.length.at.least", 1);
+    cy.get("[data-testId=sidebar_desktop]").should("exist");
+    cy.get("[data-testId=homepageNewCodelabz]").should("exist");
+    cy.get("[data-testId=activityCard]").should("exist");
+  });
+
+  it("check New Codelabz Button is working", function () {
+    cy.wait(5000);
+    cy.get("[data-testId=NewCodelabzBtn]").should("exist").click();
+    cy.get("[data-testId=newTutorial_title]").should("exist").type("test");
+    cy.get("[data-testId=newTutorial_summary]").should("exist").type("test");
+    cy.get("#orgSelect").should("exist").click();
+    cy.get("#react-select-3-listbox").click();
+    cy.get("[data-testId=newTutorialSubmit]").should("exist").click();
+    cy.wait(5000);
+    cy.get("[data-testId=publishTutorial]").should("exist").click();
+    cy.url().then(url => {
+      const urlArray = url.split("/");
+      id = urlArray.pop();
+    });
   });
 
+  it("Check New Codelabz is visible on homepage", function () {
+    cy.visit(this.base_url);
+    cy.get("[data-testId=codelabz]").should("exist");
+    cy.get("[data-testId=codelabzDetails]").spread((first, second) => {
+      first.click();
+      cy.wait(5000);
+      cy.url().should("include", "/tutorial");
+    });
+  });
 });
diff --git a/cypress/e2e/components/tutorialPage/tutorialPage.cy.js b/cypress/e2e/components/tutorialPage/tutorialPage.cy.js
@@ -0,0 +1,67 @@
+/// <reference types="cypress" />
+
+describe("Tutorial Page Test | CodeLabz", () => {
+  let id, org;
+  beforeEach(function () {
+    cy.fixture("login").then(function (credentials) {
+      this.credentials = credentials;
+    });
+    cy.fixture("base_url").then(function (data) {
+      this.base_url = data.base_url;
+    });
+  });
+
+  before(function () {
+    indexedDB.deleteDatabase("firebaseLocalStorageDb");
+  });
+  it("login", function () {
+    cy.visit(`${this.base_url}login`);
+    cy.get(".email").type(this.credentials.email);
+    cy.get(".password").type(this.credentials.password);
+    cy.get(".loginButton").click();
+    cy.wait(5000);
+  });
+
+  it("Create new tutorial", function () {
+    cy.visit(`${this.base_url}tutorials`);
+    cy.wait(1000);
+    cy.get("[data-testId=NewTutorialBtn]").click();
+    cy.get("[data-testId=newTutorial_title]").should("exist").type("test");
+    cy.get("[data-testId=newTutorial_summary]").should("exist").type("test");
+    cy.get("#orgSelect").should("exist").click();
+    cy.get("#react-select-3-listbox").click();
+    cy.get("[data-testId=newTutorialSubmit]").should("exist").click();
+    cy.wait(5000);
+    cy.url().then(url => {
+      const urlArray = url.split("/");
+      id = urlArray.pop();
+      org = urlArray.pop();
+    });
+  });
+
+  it("Check tutorial can't be visited if not published", function () {
+    cy.visit(`${this.base_url}tutorial/${id}`);
+    cy.wait(5000);
+    cy.location().should(loc => {
+      expect(loc.href).to.eq(`${this.base_url}not-found`);
+    });
+  });
+
+  it("Check tutorial can be visited if published", function () {
+    cy.visit(`${this.base_url}tutorials/${org}/${id}`);
+    cy.get("[data-testId=publishTutorial]").should("exist").click();
+    cy.wait(5000);
+    cy.visit(`${this.base_url}tutorial/${id}`);
+    cy.wait(5000);
+    cy.location().should(loc => {
+      expect(loc.href).to.eq(`${this.base_url}tutorial/${id}`);
+    });
+    cy.get("[data-testId=tutorialpageSideBar]").should("exist");
+    cy.get("[data-testId=tutorialpageMainBody]");
+    cy.get("[data-testId=tutorialpageStepsBar]").should("exist");
+
+    cy.get("[data-testId=tutorialpageComments]").should("exist");
+    cy.get("[data-testId=tutorialpageAuthorName]").should("exist");
+    cy.get("[data-testId=tutorialpageSteps]").should("exist");
+  });
+});
diff --git a/src/components/Card/CardWithoutPicture.jsx b/src/components/Card/CardWithoutPicture.jsx
@@ -101,7 +101,7 @@ export default function CardWithoutPicture({ tutorial }) {
   };
 
   return (
-    <Card className={classes.root}>
+    <Card className={classes.root} data-testId="codelabz">
       <CardHeader
         avatar={
           <Avatar className={classes.avatar}>
@@ -142,7 +142,10 @@ export default function CardWithoutPicture({ tutorial }) {
         subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
       />
       <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
-        <CardContent className={classes.contentPadding}>
+        <CardContent
+          className={classes.contentPadding}
+          data-testId="codelabzDetails"
+        >
           <Typography variant="h5" color="text.primary" data-testId="Title">
             {tutorial?.title}
           </Typography>

diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx
@@ -8,58 +8,58 @@ import { makeStyles } from "@mui/styles";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		justifyContent: "space-between",
-		flex: 1,
-		padding: "8px",
-		alignItems: "center",
-	},
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    justifyContent: "space-between",
+    flex: 1,
+    padding: "8px",
+    alignItems: "center"
+  }
 }));
 
 function Activity() {
-	const classes = useStyles();
-	const [List, setList] = useState(1);
+  const classes = useStyles();
+  const [List, setList] = useState(1);
 
-	const acitvitylist = [
-		{
-			id: 1,
-			icon: LocalOfferIcon,
-			text: "Featured",
-		},
-		{
-			id: 2,
-			icon: StarBorderIcon,
-			text: "New",
-		},
-		{
-			id: 3,
-			icon: EmojiEventsIcon,
-			text: "Top",
-		},
-	];
+  const acitvitylist = [
+    {
+      id: 1,
+      icon: LocalOfferIcon,
+      text: "Featured"
+    },
+    {
+      id: 2,
+      icon: StarBorderIcon,
+      text: "New"
+    },
+    {
+      id: 3,
+      icon: EmojiEventsIcon,
+      text: "Top"
+    }
+  ];
 
-	return (
-		<React.Fragment>
-			<Grid container>
-				<div className={classes.root}>
-					<Grid item>
-						<Typography variant="h6">Activity</Typography>
-					</Grid>
-					<Grid item>
-						<ActivityList
-							value={List}
-							toggle={(item) => {
-								setList(item.id);
-							}}
-							acitvitylist={acitvitylist}
-						/>
-					</Grid>
-				</div>
-			</Grid>
-		</React.Fragment>
-	);
+  return (
+    <React.Fragment>
+      <Grid container data-testId="activityCard">
+        <div className={classes.root}>
+          <Grid item>
+            <Typography variant="h6">Activity</Typography>
+          </Grid>
+          <Grid item>
+            <ActivityList
+              value={List}
+              toggle={item => {
+                setList(item.id);
+              }}
+              acitvitylist={acitvitylist}
+            />
+          </Grid>
+        </div>
+      </Grid>
+    </React.Fragment>
+  );
 }
 
 export default Activity;
diff --git a/src/components/Topbar/NewCodelabz/index.jsx b/src/components/Topbar/NewCodelabz/index.jsx
@@ -3,63 +3,66 @@ import { makeStyles } from "@mui/styles";
 import React from "react";
 import AddBoxRoundedIcon from "@mui/icons-material/AddBoxRounded";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		height: theme.spacing(8),
-		justifyContent: "flex-start",
-		alignItems: "center",
-		display: "flex",
-		cursor: "pointer",
-		margin: "0.5rem",
-		"&:hover": {},
-	},
-	flex: {
-		display: "flex",
-		flexDirection: "row",
-	},
-	iconDiv: {
-		padding: theme.spacing(1),
-	},
-	title: {
-		fontWeight: "normal",
-		fontSize: theme.spacing(2),
-	},
-	description: {
-		fontSize: theme.spacing(1.5),
-	},
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: theme.spacing(8),
+    justifyContent: "flex-start",
+    alignItems: "center",
+    display: "flex",
+    cursor: "pointer",
+    margin: "0.5rem",
+    "&:hover": {}
+  },
+  flex: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  iconDiv: {
+    padding: theme.spacing(1)
+  },
+  title: {
+    fontWeight: "normal",
+    fontSize: theme.spacing(2)
+  },
+  description: {
+    fontSize: theme.spacing(1.5)
+  }
 }));
 
 function NewCodelabz({ setVisibleModal }) {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	return (
-		<React.Fragment>
-			<Paper className={classes.root}>
-				<Grid
-					spacing={0}
-					justifyContent="flex-start"
-					alignItems="center"
-					className={classes.flex}>
-					<Grid
-						item
-						className={classes.iconDiv}
-						justifyContent="center"
-						alignContent="center"
-						onClick={() => setVisibleModal(true)}>
-						<AddBoxRoundedIcon color="primary" fontSize="large" />
-					</Grid>
-					<Grid item container sm={9} direction="column">
-						<Typography variant="h6" className={classes.title}>
-							New Codelabz
-						</Typography>
-						<Typography variant="body2" className={classes.description}>
-							Share a tutorial
-						</Typography>
-					</Grid>
-				</Grid>
-			</Paper>
-		</React.Fragment>
-	);
+  return (
+    <React.Fragment>
+      <Paper className={classes.root} data-testId="homepageNewCodelabz">
+        <Grid
+          spacing={0}
+          justifyContent="flex-start"
+          alignItems="center"
+          className={classes.flex}
+        >
+          <Grid
+            item
+            className={classes.iconDiv}
+            justifyContent="center"
+            alignContent="center"
+            data-testId="NewCodelabzBtn"
+            onClick={() => setVisibleModal(true)}
+          >
+            <AddBoxRoundedIcon color="primary" fontSize="large" />
+          </Grid>
+          <Grid item container sm={9} direction="column">
+            <Typography variant="h6" className={classes.title}>
+              New Codelabz
+            </Typography>
+            <Typography variant="body2" className={classes.description}>
+              Share a tutorial
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+    </React.Fragment>
+  );
 }
 
 export default NewCodelabz;
diff --git a/src/components/TutorialPage/StepBar.jsx b/src/components/TutorialPage/StepBar.jsx
@@ -80,7 +80,7 @@ const StepsBar = ({
           </StepList>
         </Drawer>
       ) : (
-        <Card className={classes.card}>
+        <Card className={classes.card} data-testId="tutorialpageStepsBar">
           <div data-testId="sidebar_desktop">
             <Typography sx={{ fontWeight: "800", textAlign: "center" }}>
               STEPS