change props type of card component and added test case

react-frontend/src/recognition-list-components/RecognitionCardComponent.js

@@ -5,8 +5,8 @@ import styled from "styled-components";
 import { Row, Col } from "core-components/grid/GridComponent";
 import { Card } from "core-components/card/CardComponent";
 import ImageComponent from "core-components/image/ImageComponent";
-import RecognitionTopBarComponent from "./RecognitionTopBarComponent";
-import RecognitionTextComponent from "./RecognitionTextComponent";
+import RecognitionCardHeaderComponent from "recognition-list-components/RecognitionCardHeaderComponent";
+import RecognitionTextComponent from "recognition-list-components/RecognitionTextComponent";
 import CoreValueIconComponent from "shared-components/core-value-icon-components/CoreValueIconComponent";
 import HighFiveComponent from "shared-components/high-five-components/HighFiveComponent";
 
@@ -33,29 +33,33 @@ const HighFive = styled.div`
   bottom: 50px;
 `;
 
-const RecognitionCardComponent = ({ recognition }) => (
+const RecognitionCardComponent = ({
+  given_by,
+  given_for,
+  given_at,
+  text,
+  core_value,
+  high_five_count,
+}) => (
   <Card
     className="my-4 mx-2 shadow p-3 mb-4 border border-secondary bg-light grey"
     style={{ borderRadius: "36px" }}
   >
     <Card.Body>
       <Row>
         <Col sm="12" md="7">
-          <RecognitionTopBarComponent
-            given_for={recognition.given_for}
-            given_at={recognition.given_at}
-            core_value={recognition.core_value}
+          <RecognitionCardHeaderComponent
+            given_for={given_for}
+            given_at={given_at}
+            core_value={core_value}
           />
           <ImgM className="bg-dark d-sm-block d-md-none mt-2">
             <ImageComponent
               src="https://i.picsum.photos/id/654/300/200.jpg"
               alt="CoreValueImage"
             />
           </ImgM>
-          <RecognitionTextComponent
-            text={recognition.text}
-            given_by={recognition.given_by}
-          />
+          <RecognitionTextComponent text={text} given_by={given_by} />
         </Col>
         <Col className="d-none d-md-block">
           <Col className=" d-flex  justify-content-center">
@@ -66,7 +70,7 @@ const RecognitionCardComponent = ({ recognition }) => (
                   alt="CoreValueImage"
                 />
               </ImgD>
-              <Col className="d-flex justify-content-center align-items-center">
+              <Col className="d-flex justify-content-center mt-4">
                 <CoreValueIconComponent size="50px" color="red" />
               </Col>
             </Row>
@@ -79,15 +83,18 @@ const RecognitionCardComponent = ({ recognition }) => (
     </Card.Body>
     <Card.Footer className="bg-light grey">
       <span className="font-weight-bold text-muted">+</span>
-      <span className="font-weight-bold text-dark">
-        {recognition.highFiveCount}
-      </span>
+      <span className="font-weight-bold text-dark">{high_five_count}</span>
     </Card.Footer>
   </Card>
 );
 
 RecognitionCardComponent.propTypes = {
-  recognition: PropTypes.object.isRequired,
+  given_by: PropTypes.string.isRequired,
+  given_for: PropTypes.string.isRequired,
+  given_at: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  core_value: PropTypes.string.isRequired,
+  high_five_count: PropTypes.string.isRequired,
 };
 
 export default React.memo(RecognitionCardComponent);

react-frontend/src/recognition-list-components/RecognitionCardComponent.test.js

@@ -3,28 +3,65 @@ import { render } from "@testing-library/react";
 
 import RecognitionCardComponent from "recognition-list-components/RecognitionCardComponent";
 
-const recognition = {
-  given_for: "Avinash Mane",
-  given_by: "Avinash Patil",
-  given_at: "today at 5:37 pm",
-  text: "i give high five to avinash for writing block",
-  core_value: "write a block",
-  highFiveCount: 1,
-};
-
 describe("Recognition Card Component test", () => {
   test("render menu button", () => {
     const { getByText } = render(
-      <RecognitionCardComponent recognition={recognition} />
+      <RecognitionCardComponent
+        given_at="today 3:00AM"
+        given_by="roy"
+        given_for="jack"
+        text="good work"
+        core_value="positive"
+        high_five_count="1"
+      />
     );
     expect(getByText("...")).toHaveTextContent("...");
   });
 
   test("render high five icon", () => {
     const { getByAltText } = render(
-      <RecognitionCardComponent recognition={recognition} />
+      <RecognitionCardComponent
+        given_at="today 3:00AM"
+        given_by="roy"
+        given_for="jack"
+        text="good work"
+        core_value="positive"
+        high_five_count="1"
+      />
     );
     const testImage = getByAltText("High five recognition");
     expect(testImage).toBeInTheDocument();
   });
+
+  test("render recognition card header component", () => {
+    const { getByText } = render(
+      <RecognitionCardComponent
+        given_at="today 3:00AM"
+        given_by="roy"
+        given_for="jack"
+        text="give high five for good work"
+        core_value="good work"
+        high_five_count="1"
+      />
+    );
+    expect(getByText("today 3:00AM")).toHaveTextContent("today 3:00AM");
+    expect(getByText("jack")).toHaveTextContent("jack");
+  });
+
+  test("render recognition text component", () => {
+    const { getByText } = render(
+      <RecognitionCardComponent
+        given_at="today 3:00AM"
+        given_by="roy"
+        given_for="jack"
+        text="give high five for good work"
+        core_value="good work"
+        high_five_count="1"
+      />
+    );
+    expect(getByText("roy")).toHaveTextContent("roy");
+    expect(getByText("give high five for good work")).toHaveTextContent(
+      "give high five for good work"
+    );
+  });
 });

react-frontend/src/recognition-list-components/RecognitionTopBarComponent.js → react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
-import { Row, Col } from "core-components/grid/GridComponent";
+import { Row } from "core-components/grid/GridComponent";
 import { Form } from "core-components/form/FormComponent";
 import { Button } from "core-components/button/ButtonComponent";
 import ImageComponent from "core-components/image/ImageComponent";
@@ -15,9 +15,13 @@ const Img = styled.div`
   width: 12vh;
 `;
 
-const RecognitionTopBarComponent = ({ given_at, given_for, core_value }) => {
+const RecognitionCardHeaderComponent = ({
+  given_at,
+  given_for,
+  core_value,
+}) => {
   return (
-    <Col>
+    <Row>
       <Row className="d-flex justify-content-end">
         <Button
           className="bg-white font-weight-bold text-dark btn-outline-light grey"
@@ -55,13 +59,13 @@ const RecognitionTopBarComponent = ({ given_at, given_for, core_value }) => {
           <Form.Label className="text-muted">{given_at}</Form.Label>
         </Row>
       </Row>
-    </Col>
+    </Row>
   );
 };
-RecognitionTopBarComponent.propTypes = {
+RecognitionCardHeaderComponent.propTypes = {
   given_for: PropTypes.string.isRequired,
   given_at: PropTypes.string.isRequired,
   core_value: PropTypes.string.isRequired,
 };
 
-export default React.memo(RecognitionTopBarComponent);
+export default React.memo(RecognitionCardHeaderComponent);

react-frontend/src/recognition-list-components/RecognitionTopBarComponent.test.js → react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.test.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import RecognitionTopBarComponent from "recognition-list-components/RecognitionTopBarComponent";
+import RecognitionCardHeaderComponent from "recognition-list-components/RecognitionCardHeaderComponent";
 
 describe("Recognition TopBar Component test", () => {
   test("should equal to recognition name", () => {
     const { getByText } = render(
-      <RecognitionTopBarComponent
+      <RecognitionCardHeaderComponent
         given_at="today 3:00 AM"
         given_for="avinash"
         core_value="positive"
@@ -17,7 +17,7 @@ describe("Recognition TopBar Component test", () => {
 
   test("should equal to recognition time", () => {
     const { getByText } = render(
-      <RecognitionTopBarComponent
+      <RecognitionCardHeaderComponent
         given_at="today 3:00 AM"
         given_for="avinash"
         core_value="positive"
@@ -28,7 +28,7 @@ describe("Recognition TopBar Component test", () => {
 
   test("render image component", () => {
     const { getByAltText } = render(
-      <RecognitionTopBarComponent
+      <RecognitionCardHeaderComponent
         given_at="today 3:00 AM"
         given_for="avinash"
         core_value="positive"

react-frontend/src/recognition-list-components/RecognitionListComponent.js

@@ -14,7 +14,12 @@ const RecognitionListComponent = ({ recognitionList }) => {
       {recognitionList.map((recognition) => (
         <RecognitionCardComponent
           key={recognition.index}
-          recognition={recognition}
+          given_by={recognition.given_by}
+          given_for={recognition.given_for}
+          given_at={recognition.given_at}
+          text={recognition.text}
+          core_value={recognition.core_value}
+          high_five_count={recognition.high_five_count}
         />
       ))}
     </Div>