From ee928d13948b3cb2186c3defafdbda43dd3b3d05 Mon Sep 17 00:00:00 2001 From: Ranuga <79456372+Programmer-RD-AI@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:27:54 +0530 Subject: [PATCH] Add and test Article Card component with styles and visual consistency --- cypress/e2e/user/articleCard.cy.js | 48 ++++++++++++ .../ArticleCard -- renders (failed).png | Bin 0 -> 1894 bytes .../ArticleCard -- renders (failed).png | Bin 0 -> 1894 bytes src/assets/styles/ArticleCard.css | 16 ++++ src/components/ArticleCard.cy.jsx | 9 +++ src/components/ArticleCard.jsx | 74 ++++++++++++++++++ 6 files changed, 147 insertions(+) create mode 100644 cypress/e2e/user/articleCard.cy.js create mode 100644 cypress/screenshots/components/ArticleCard-copy-1.cy.jsx/ArticleCard -- renders (failed).png create mode 100644 cypress/screenshots/components/ArticleCard.cy.jsx/ArticleCard -- renders (failed).png create mode 100644 src/assets/styles/ArticleCard.css create mode 100644 src/components/ArticleCard.cy.jsx create mode 100644 src/components/ArticleCard.jsx diff --git a/cypress/e2e/user/articleCard.cy.js b/cypress/e2e/user/articleCard.cy.js new file mode 100644 index 0000000..6fadb0e --- /dev/null +++ b/cypress/e2e/user/articleCard.cy.js @@ -0,0 +1,48 @@ +// cypress/e2e/user/articleCard.cy.js + +describe("ArticleCard", () => { + beforeEach(() => { + // Visit the page where the ArticleCard is displayed + cy.visit("/"); // Adjust this path if ArticleCard is on a different route + }); + + it("should display article card", () => { + // Ensure at least one card exists and is visible + cy.get(".article-card").first().should("exist").and("be.visible"); + }); + + it("should display article title", () => { + // Ensure at least one card exists and is visible + cy.get(".article-card").first().should("exist").and("be.visible"); + + // Check if the title is present within the first card + cy.get(".article-card") + .first() + .within(() => { + cy.get("h6").should("exist").and("not.be.empty"); + }); + }); + + it("should display article summary", () => { + // Ensure at least one card exists and is visible + cy.get(".article-card").first().should("exist").and("be.visible"); + + // Check if the summary is present within the first card + cy.get(".article-card") + .first() + .within(() => { + cy.get("p").should("exist").and("not.be.empty"); + }); + }); + + it("should navigate to the article detail page on click", () => { + // Ensure at least one card exists and is visible + cy.get(".article-card").first().should("exist").and("be.visible"); + + // Click the first card to navigate + cy.get(".article-card").first().click(); + + // Verify that the URL includes the article ID + cy.url().should("include", "/article/"); + }); +}); diff --git a/cypress/screenshots/components/ArticleCard-copy-1.cy.jsx/ArticleCard -- renders (failed).png b/cypress/screenshots/components/ArticleCard-copy-1.cy.jsx/ArticleCard -- renders (failed).png new file mode 100644 index 0000000000000000000000000000000000000000..02fec02f082065441bffb9c041e6f2012603f46e GIT binary patch literal 1894 zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2IF)*;}db&7Qys!+||)3^T4XFnk`B91VoglrWkd jM$3fJf^nqO4*d03*`L(k^xFWeKN&n-{an^LB{Ts57o16w literal 0 HcmV?d00001 diff --git a/cypress/screenshots/components/ArticleCard.cy.jsx/ArticleCard -- renders (failed).png b/cypress/screenshots/components/ArticleCard.cy.jsx/ArticleCard -- renders (failed).png new file mode 100644 index 0000000000000000000000000000000000000000..02fec02f082065441bffb9c041e6f2012603f46e GIT binary patch literal 1894 zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2IF)*;}db&7Qys!+||)3^T4XFnk`B91VoglrWkd jM$3fJf^nqO4*d03*`L(k^xFWeKN&n-{an^LB{Ts57o16w literal 0 HcmV?d00001 diff --git a/src/assets/styles/ArticleCard.css b/src/assets/styles/ArticleCard.css new file mode 100644 index 0000000..e06afa9 --- /dev/null +++ b/src/assets/styles/ArticleCard.css @@ -0,0 +1,16 @@ +/* ArticleCard.css */ +.article-card { + height: 100%; + display: flex; + flex-direction: column; +} + +.article-card:hover .card-content { + opacity: 1; +} + +.card-content { + opacity: 0; + transition: opacity 0.3s ease; + overflow: hidden; +} diff --git a/src/components/ArticleCard.cy.jsx b/src/components/ArticleCard.cy.jsx new file mode 100644 index 0000000..23a97d5 --- /dev/null +++ b/src/components/ArticleCard.cy.jsx @@ -0,0 +1,9 @@ +import React from 'react' +import ArticleCard from './ArticleCard' + +describe('', () => { + it('renders', () => { + // see: https://on.cypress.io/mounting-react + cy.mount() + }) +}) \ No newline at end of file diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard.jsx new file mode 100644 index 0000000..60c5734 --- /dev/null +++ b/src/components/ArticleCard.jsx @@ -0,0 +1,74 @@ +import React from "react"; +import { Card, CardContent, Typography, styled } from "@mui/material"; +import { motion } from "framer-motion"; +import { Link } from "react-router-dom"; +import "../assets/styles/ArticleCard.css"; + +const StyledCard = styled(Card)({ + borderRadius: "0", + overflow: "hidden", + display: "flex", + flexDirection: "column", + height: "100%", + position: "relative", + boxShadow: "0 4px 8px rgba(0,0,0,0.1)", + transition: "transform 0.3s ease, box-shadow 0.3s ease", + maxHeight: "300px", +}); + +const CardContentStyled = styled(CardContent)({ + flex: 1, + display: "flex", + flexDirection: "column", + justifyContent: "center", + padding: "8px", + position: "absolute", + bottom: "0", + width: "100%", + backgroundColor: "rgba(0, 0, 0, 0.6)", + color: "white", + transition: "opacity 0.3s ease", + opacity: 0, + overflow: "hidden", +}); + +const StyledCardImage = styled("div")({ + width: "100%", + height: "200px", + backgroundSize: "cover", + backgroundPosition: "center", +}); + +const ArticleCard = ({ + title, + summary, + category, + author, + time, + image, + articleId, +}) => ( + + + + + + + {category} | {author} | {time} + + + {title} + + + {summary} + + + + + +); + +export default ArticleCard;