Card snapshot tests

package.json

@@ -3,25 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.3",
-    "@mui/material": "^5.4.0",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.34.12",
+    "react-query": "^3.34.19",
     "react-scripts": "5.0.0",
     "react-test-renderer": "^17.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest --",
+    "coverage": "jest --collectCoverage --",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -43,12 +45,19 @@
     ]
   },
   "devDependencies": {
+
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-17-updated": "^1.0.2",
+
     "jest": "^27.5.1",
     "eslint": "^8.10.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.2",
-    "eslint-plugin-react-hooks": "^4.3.0"
+
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "react-test-renderer": "^17.0.2"
+
   }
-}
+}

src/App.jsx

@@ -1,31 +1,59 @@
-import logo from './logo.svg';
 import './App.css';
 import SwimLane from './Componenets/SwimLane';
-import { Box } from '@material-ui/core';
+import { Box, Button, Typography } from '@material-ui/core';
+import {CircularProgress} from '@mui/material';
+import { useQuery } from 'react-query';
+import axios from 'axios';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import React from "react";
 
-const data = [{title:"A title" , desc: "1234"}, {title: "Placeholder task", desc: "4321"}, {title: "Group 31", desc: "100/100"}, {title: "IBM open-audio-software", desc: "Never Forget"} ];
-const swimlanes=[
-                  {cards: [data[0], data[1], data[2]], title:"To Do" },
-                  {cards: [data[3], data[2], data[0]], title:"In Progress"},  
-                  {cards: [data[0], data[1], data[2]], title:"Done" }
-                ]
 
+
+
+
+const KanbanGETRequest = async () =>{
+
+ const data = await axios.get('http://kanbanbackend-petrukhp-dev.apps.sandbox-m2.ll9k.p1.openshiftapps.com/listAllKanbanBoards')
+        .then(res => { return res})
+        return data
+
+
+    }
 function App() {
+  const {data, isSuccess, isError, isLoading, refetch} =  useQuery('kanbanBoards', KanbanGETRequest, {enabled: false })
+  const swimLaneData = data ? data.data[0].kanbanBoardSwimLanes : null;
   return (
+    <>
+
+    <Button variant="contained" onClick={refetch} size="large" color="primary">
+      <RefreshIcon />
+      <Typography>
+        Fetch Data
+      </Typography>
+    </Button>
+
 
-    <Box sx={{
+     <Box sx={{
       display: 'flex',
       alignItems: 'flex-start',
       flexDirection: 'row',
       p: 1,
       m: 1,
       borderRadius: 1,
     }}>
-      {swimlanes?.map(lane => 
-        <SwimLane swimLaneData = {lane.cards} swimLaneTitle={lane.title} />
-        )}
-    </Box>
-  );
+
+
+      { isLoading ? <CircularProgress /> :
+      swimLaneData?.map(lane => 
+        <SwimLane swimLaneData = {lane.kanbanSwimLaneTasks} swimLaneTitle={lane.swimLaneTitle} key={lane._id}/>
+        )
+
+
+
+      }
+      </Box> 
+    </>
+  )
 }
 
 export default App;

src/Componenets/Card.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import {Typography, CardContent, Card} from '@material-ui/core';
 import { Box } from '@mui/system';
 
-const KBCard = ({title, desc }) => {
+const KBCard = ({title, desc, id }) => {
     return (
 <>
-    <Card>
-    <Box sx={{ bgcolor: '#FBFFC8', p: 2, display: 'flex' }}>
+    <Card testid="card" key={id}>
+    <Box sx={{ bgcolor: '#FBFFC8', p: 2, display: 'flex', my:2, border:1 }}>
       <CardContent>
         <Typography variant="h5" component="h2">
           {title}

src/Componenets/Card.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import  renderer  from "react-test-renderer";
+import { shallow } from 'enzyme';
+import KBCard from './Card';
+
+
+
+describe('Card Component', () => {
+
+    it("renders without crashing", () => {
+        shallow(<KBCard />);
+      });
+    it('renders a snapshot', () => {
+        const cardSnap = renderer.create(<KBCard testid="card"/>).toJSON();
+        expect(cardSnap).toMatchSnapshot();
+      });
+
+      it('renders the title of the card', () => {
+        const cardSnap = renderer.create(<KBCard text="KBCard.title"/>).toJSON();
+        expect(cardSnap).toMatchSnapshot();  
+
+    });
+    it('renders the description in the card', () => {
+        const cardSnap = renderer.create(<KBCard text="KBCard.desc"/>).toJSON();
+        expect(cardSnap).toMatchSnapshot();  
+
+    });
+
+
+});

src/Componenets/SwimLane.jsx

@@ -3,14 +3,15 @@ import { Box, Typography } from '@material-ui/core';
 import KBCard from './Card';
 
 const SwimLane = ({swimLaneData, swimLaneTitle}) => {
+
   return (
       <Box sx={{
         display: 'flex',
         alignItems: 'flex-start',
         flexDirection: 'column',
         bgcolor: '#9bbedb',
         p: 1,
-        m: 1,
+        m: 2,
         borderRadius: 1
       }}
       >
@@ -23,11 +24,14 @@ const SwimLane = ({swimLaneData, swimLaneTitle}) => {
           m: 1,
           borderRadius: 3
         }}
-        >
-          {swimLaneData?.map(card => <KBCard title={card.title} desc={card.desc} />
-          )}
-        </Box>
+      >
+        {swimLaneData?.map(card =>
+          <KBCard title={card.taskTitle} desc={card.taskDescription} key={card._id}/>
+          )
+        }
       </Box>
+    </Box>
+
   )
 }
 export default SwimLane;

src/Componenets/__snapshots__/Card.test.jsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Component renders a snapshot 1`] = `
+<div
+  className="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"
+  testid="card"
+>
+  <div
+    className="MuiBox-root css-cqh5gh"
+  >
+    <div
+      className="MuiCardContent-root"
+    >
+      <h2
+        className="MuiTypography-root MuiTypography-h5"
+      />
+      <p
+        className="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+        style={
+          Object {
+            "marginBottom": 12,
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Component renders the description in the card 1`] = `
+<div
+  className="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"
+  testid="card"
+>
+  <div
+    className="MuiBox-root css-cqh5gh"
+  >
+    <div
+      className="MuiCardContent-root"
+    >
+      <h2
+        className="MuiTypography-root MuiTypography-h5"
+      />
+      <p
+        className="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+        style={
+          Object {
+            "marginBottom": 12,
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Component renders the title of the card 1`] = `
+<div
+  className="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"
+  testid="card"
+>
+  <div
+    className="MuiBox-root css-cqh5gh"
+  >
+    <div
+      className="MuiCardContent-root"
+    >
+      <h2
+        className="MuiTypography-root MuiTypography-h5"
+      />
+      <p
+        className="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+        style={
+          Object {
+            "marginBottom": 12,
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;

src/index.js

@@ -3,10 +3,15 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {QueryClient, QueryClientProvider} from 'react-query';
+
+const queryClient = new QueryClient()
 
 ReactDOM.render(
   <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
     <App />
+    </QueryClientProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/setupTests.js

@@ -3,3 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-17-updated';
+
+configure({ adapter: new Adapter() });