Dashboard Specs with bug fixes

components/Dashboard/Card.js

@@ -25,18 +25,25 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function Card({ bridge }) {
+function Card({ bridge, index }) {
   const classes = useStyles();
 
+  const completedAt = (bridge.completedAt
+    && new Date(bridge.completedAt).toDateString())
+    || 'No requests';
+
+  const updatedAt = new Date(bridge.updatedAt).toDateString();
+
   return (
     <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
-      <Paper className={classes.paper}>
+      <Paper className={classes.paper} id={`card-${index}`}>
         <Link href={`/bridge/${bridge.id}`}>
           <Typography
             variant="h5"
             color="primary"
             className={classes.title}
             style={{ fontWeight: 600 }}
+            id={`card-title-${index}`}
           >
             {bridge.title}
           </Typography>
@@ -59,12 +66,17 @@ function Card({ bridge }) {
           </Grid>
 
           <Grid item xs container direction="column" className={classes.values}>
-            <Typography variant="subtitle1">{bridge.lastRequest || 'No requests'}</Typography>
-            <Typography variant="subtitle1">
-              {(new Date(bridge.updatedAt)).toUTCString().split(' ').slice(1, 4)
-                .join(' ')}
+            <Typography variant="subtitle1" id={`card-completedAt-${index}`}>
+              {completedAt}
+            </Typography>
+
+            <Typography variant="subtitle1" id={`card-updateAt-${index}`}>
+              {updatedAt}
+            </Typography>
+
+            <Typography variant="subtitle1" id={`card-eventCount-${index}`}>
+              {bridge.eventCount || '0'}
             </Typography>
-            <Typography variant="subtitle1">{bridge.requests || '0'}</Typography>
           </Grid>
         </Grid>
 
@@ -93,7 +105,8 @@ Card.propTypes = {
     id: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
     updatedAt: PropTypes.string.isRequired,
-    lastRequest: PropTypes.string,
-    requests: PropTypes.string,
+    eventCount: PropTypes.number.isRequired,
+    completedAt: PropTypes.string,
   }).isRequired,
+  index: PropTypes.number.isRequired,
 };

components/Sidebar/ListItem.js

@@ -6,8 +6,10 @@ import {
 import PropTypes from 'prop-types';
 
 function ListItem({
-  date, statusCode, timestamp, completed,
+  completedAt, statusCode, completed,
 }) {
+  const timestamp = new Date(completedAt).toDateString();
+
   return (
     <MUIListItem divider>
       <ListItemText>
@@ -16,7 +18,7 @@ function ListItem({
           noWrap
           align="center"
         >
-          {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
+          {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
         </Typography>
       </ListItemText>
     </MUIListItem>
@@ -26,8 +28,7 @@ function ListItem({
 export default ListItem;
 
 ListItem.propTypes = {
-  date: PropTypes.string.isRequired,
   statusCode: PropTypes.number.isRequired,
-  timestamp: PropTypes.string.isRequired,
+  completedAt: PropTypes.string.isRequired,
   completed: PropTypes.bool.isRequired,
 };

components/Sidebar/index.js

@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({
 
 function Sidebar({ events, title }) {
   const classes = useStyles();
+
   return (
     <div className={classes.root}>
       <Drawer
@@ -52,17 +53,13 @@ function Sidebar({ events, title }) {
               <Typography variant="h6" align="center" className={classes.title}>{title || 'Untitled'}</Typography>
             </Link>
             <Divider />
-            {events.slice().reverse().map((evt) => {
-              const { date, statusCode, time } = evt.responses.slice(-1)[0].headers;
-              return (
-                <ListItem
-                  date={date}
-                  statusCode={statusCode}
-                  timestamp={time}
-                  completed={evt.completed}
-                />
-              );
-            })}
+            {events.map((event) => (
+              <ListItem
+                completedAt={event.completedAt}
+                statusCode={event.statusCode}
+                completed={event.completed}
+              />
+            ))}
           </List>
         </div>
       </Drawer>

pages/dashboard.js

@@ -29,11 +29,11 @@ function Dashboard({ bridges }) {
     <ProtectRoute>
       <div className={classes.root}>
         <Navbar />
-        <Container maxWidth="md">
-          <Grid container spacing={2}>
+        <Container maxWidth="lg">
+          <Grid container spacing={2} id="dashboard-card-container">
 
             {bridges && bridges.length > 0
-              ? (bridges.map((bridge) => <Card bridge={bridge} key={bridge} />))
+              ? (bridges.map((bridge, idx) => <Card bridge={bridge} key={bridge} index={idx} />))
               : (
                 <Grid item xs={12}>
                   <Typography
@@ -58,9 +58,9 @@ export default Dashboard;
 
 export async function getServerSideProps(context) {
   const res = await fetchDataOrRedirect(context, '/bridges');
-
   if (!res) return { props: {} }; // Redirecting to /users/login
 
+  console.log(res.data.bridges);
   return {
     props: {
       bridges: toCamel(res.data.bridges),

specs/fixtures/bridges.json

@@ -0,0 +1,61 @@
+{
+  "bridges": [
+    {
+      "id": 7,
+      "title": "title_0",
+      "inbound_url": "d51985cdb5139d8d7a76",
+      "outbound_url": "c41a7126-a18c-4af6-880e-6857771a35c8.mock.pstmn.io/success_event",
+      "http_method": "POST",
+      "retries": 0,
+      "delay": 0,
+      "data": {
+        "payload": "{\n  \"hello\": \"world\"\n}",
+        "test_payload": "{\n  \"hello\": \"world\",\n  \"acessEnvVars\": \"$env.MY_KEY\",\n  \"accessPayload\": \"$payload.message\"\n}"
+      },
+      "created_at": "2020-11-24T13:49:08.508Z",
+      "updated_at": "2020-11-25T15:33:12.740Z",
+      "user_id": 3,
+      "active": true,
+      "eventCount": 1,
+      "completedAt": "2020-11-25T15:33:34.274Z"
+    },
+    {
+      "id": 4,
+      "title": "title_1",
+      "inbound_url": "534a9856d7b2b9267609",
+      "outbound_url": "c41a7126-a18c-4af6-880e-6857771a35c8.mock.pstmn.io/success_event",
+      "http_method": "POST",
+      "retries": 0,
+      "delay": 0,
+      "data": {
+        "payload": "{\n  \"hello\": \"world\"\n}",
+        "test_payload": "{\n  \"hello\": \"world\",\n  \"acessEnvVars\": \"$env.MY_KEY\",\n  \"accessPayload\": \"$payload.message\"\n}"
+      },
+      "created_at": "2020-11-26T18:30:24.093Z",
+      "updated_at": "2020-11-26T18:30:24.093Z",
+      "user_id": 3,
+      "active": true,
+      "eventCount": 0,
+      "completedAt": ""
+    },
+    {
+      "id": 5,
+      "title": "title_2",
+      "inbound_url": "71049d297d641db846ff",
+      "outbound_url": "c41a7126-a18c-4af6-880e-6857771a35c8.mock.pstmn.io/success_event",
+      "http_method": "POST",
+      "retries": 0,
+      "delay": 0,
+      "data": {
+        "payload": "{\n  \"hello\": \"world\"\n}",
+        "test_payload": "{\n  \"hello\": \"world\",\n  \"acessEnvVars\": \"$env.MY_KEY\",\n  \"accessPayload\": \"$payload.message\"\n}"
+      },
+      "created_at": "2020-11-26T18:30:25.780Z",
+      "updated_at": "2020-11-26T18:30:25.780Z",
+      "user_id": 3,
+      "active": true,
+      "eventCount": 0,
+      "completedAt": ""
+    }
+  ]
+}

specs/integration/bridgeapi/dashboard.spec.js

@@ -0,0 +1,61 @@
+/// <reference types="cypress" />
+
+describe('Sign Up', () => {
+  beforeEach(() => {
+    cy.clearCookies();
+  });
+
+  afterEach(() => {
+    cy.clearCookies();
+  });
+
+  it('redirects to login with bad token', () => {
+    cy.setBadToken();
+    cy.visit('/dashboard');
+
+    cy.location().should((location) => {
+      expect(location.pathname).to.eq('/users/login');
+    });
+  });
+
+  it('has 3 bridges displayed', () => {
+    cy.setToken();
+    cy.visit('/dashboard');
+
+    cy.get('#dashboard-card-container')
+      .children().should('have.length', 3);
+
+    cy.get('#card-title-0')
+      .contains('title_0').should('be.visible');
+    cy.get('#card-title-0')
+      .parent().should('have.attr', 'href').and('eq', '/bridge/7');
+    cy.get('#card-completedAt-0')
+      .contains('Wed Nov 25 2020').should('be.visible');
+    cy.get('#card-updateAt-0')
+      .contains('Wed Nov 25 2020').should('be.visible');
+    cy.get('#card-eventCount-0')
+      .contains('1').should('be.visible');
+
+    cy.get('#card-title-1')
+      .contains('title_1').should('be.visible');
+    cy.get('#card-title-1')
+      .parent().should('have.attr', 'href').and('eq', '/bridge/4');
+    cy.get('#card-completedAt-1')
+      .contains('No requests').should('be.visible');
+    cy.get('#card-updateAt-1')
+      .contains('Thu Nov 26 2020').should('be.visible');
+    cy.get('#card-eventCount-1')
+      .contains('0').should('be.visible');
+
+    cy.get('#card-title-2')
+      .contains('title_2').should('be.visible');
+    cy.get('#card-title-2')
+      .parent().should('have.attr', 'href').and('eq', '/bridge/5');
+    cy.get('#card-completedAt-2')
+      .contains('No requests').should('be.visible');
+    cy.get('#card-updateAt-2')
+      .contains('Thu Nov 26 2020').should('be.visible');
+    cy.get('#card-eventCount-2')
+      .contains('0').should('be.visible');
+  });
+});

specs/support/mocks/handlers.js

@@ -1,6 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { rest } from 'msw';
 
+const bridges = require('../../fixtures/bridges.json');
+
 // msw doesn't give us a way to stub requests on a per spec basis. Because
 // of this, we need to make our own way. Use `cy.setToken` to create a
 // token that will be valid. Use `cy.setBadToken` to create an invalid token.
@@ -20,11 +22,7 @@ const handlers = [
       );
     }
 
-    return res(
-      ctx.json(
-        { bridges: [] },
-      ),
-    );
+    return res(ctx.json(bridges));
   }),
 ];