Merge pull request #28 from Programmer-RD-AI/13-create-and-configure-…

…sign-up-page

Develop and test Sign Up Page and SignUpButton component for user reg…

cypress/e2e/user/signUpPage.cy.js

@@ -0,0 +1,51 @@
+// cypress/integration/signUpPage.spec.js
+describe("Sign Up Page", () => {
+  beforeEach(() => {
+    cy.visit("/signup");
+  });
+
+  it("should display the Sign Up heading", () => {
+    cy.get("h1").contains("Sign Up").should("be.visible");
+  });
+
+  it("should display the form heading", () => {
+    cy.get("h5").contains("Create an Account").should("be.visible");
+  });
+
+  it("should display form description", () => {
+    cy.contains("Join us to access exclusive content and features").should(
+      "be.visible"
+    );
+  });
+
+  it("should have a Username field", () => {
+    cy.get("input[placeholder='Your Username']").should("exist");
+  });
+
+  it("should have an Email field", () => {
+    cy.get("input[type='email']").should("exist");
+  });
+
+  it("should have a Password field", () => {
+    cy.get("input[type='password']").should("exist");
+  });
+
+  it("should have a Confirm Password field", () => {
+    cy.get("input[placeholder='******']").should("exist");
+  });
+
+  it("should have a Sign Up button", () => {
+    cy.get("button").contains("Sign Up").should("be.visible");
+  });
+
+  it("should have a link to the Log In page", () => {
+    cy.contains("Already have an account? Log In").should("be.visible");
+    cy.get('a[href="/login"]').should("exist");
+  });
+
+  it("should have animations on elements", () => {
+    // Check for animations by ensuring elements are visible after a delay
+    cy.get("h1").should("be.visible");
+    cy.get("form").should("be.visible");
+  });
+});

src/components/SignUpButton.cy.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import SignUpButton from './SignUpButton'
+
+describe('<SignUpButton />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SignUpButton />)
+  })
+})

src/components/SignUpButton.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { Button } from "@mui/material";
+import { signIn } from "../redux/slices/authSlice";
+
+const SignUpButton = () => {
+  const dispatch = useDispatch();
+
+  const handleSignUp = () => {
+    const user = {
+      name: "Jane Doe",
+      avatarUrl: "https://via.placeholder.com/150",
+    };
+    dispatch(signIn(user));
+  };
+
+  return (
+    <Button variant="contained" color="secondary" onClick={handleSignUp}>
+      Sign Up
+    </Button>
+  );
+};
+
+export default SignUpButton;

src/pages/SignUpPage.cy.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import SignUpPage from './SignUpPage'
+
+describe('<SignUpPage />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<SignUpPage />)
+  })
+})

src/pages/SignUpPage.jsx

@@ -0,0 +1,110 @@
+// src/pages/SignUpPage.js
+import React from "react";
+import {
+  Container,
+  Typography,
+  TextField,
+  Button,
+  Grid,
+  Paper,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import Fade from "@mui/material/Fade";
+import Zoom from "@mui/material/Zoom";
+
+const SignUpFormContainer = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(4),
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  textAlign: "center",
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[3],
+}));
+
+const SignUpPage = () => (
+  <Container>
+    <Fade in timeout={1000}>
+      <Typography variant="h1" align="center" gutterBottom color="primary">
+        Sign Up
+      </Typography>
+    </Fade>
+    <Zoom in timeout={1500}>
+      <SignUpFormContainer elevation={3}>
+        <Typography variant="h5" gutterBottom>
+          Create an Account
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Join us to access exclusive content and features. Fill out the form
+          below to create your account. If you already have an account, you can{" "}
+          <a href="/login">log in here</a>.
+        </Typography>
+        <form style={{ width: "100%" }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={6}>
+              <TextField
+                label="Username"
+                fullWidth
+                margin="normal"
+                required
+                variant="outlined"
+                placeholder="Your Username"
+              />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <TextField
+                label="Email"
+                type="email"
+                fullWidth
+                margin="normal"
+                required
+                variant="outlined"
+                placeholder="[email protected]"
+              />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <TextField
+                label="Password"
+                type="password"
+                fullWidth
+                margin="normal"
+                required
+                variant="outlined"
+                placeholder="******"
+              />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <TextField
+                label="Confirm Password"
+                type="password"
+                fullWidth
+                margin="normal"
+                required
+                variant="outlined"
+                placeholder="******"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                size="large"
+                style={{ marginTop: "16px" }}
+              >
+                Sign Up
+              </Button>
+            </Grid>
+            <Grid item xs={12}>
+              <Typography variant="body2" align="center" marginTop={2}>
+                Already have an account? <a href="/login">Log In</a>
+              </Typography>
+            </Grid>
+          </Grid>
+        </form>
+      </SignUpFormContainer>
+    </Zoom>
+  </Container>
+);
+
+export default SignUpPage;