Skip to content

Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
williampj merged 4 commits into from
Nov 26, 2020
Merged

Dashboard Specs with bug fixes #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
22ac882
Fix several small bugs related to events & timestamps
AndiLavera Nov 26, 2020
de7e496
Eslint fixes
AndiLavera Nov 26, 2020
e7c84ef
Merge branch 'master' of github.com:williampj/bridgeapi.js into event…
AndiLavera Nov 26, 2020
a63d413
Dashboard specs
AndiLavera Nov 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 22 additions & 9 deletions components/Dashboard/Card.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};
9 changes: 5 additions & 4 deletions components/Sidebar/ListItem.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
noWrap
align="center"
>
{completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
{completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
</Typography>
</ListItemText>
</MUIListItem>
Expand All@@ -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,
};
19 changes: 8 additions & 11 deletions components/Sidebar/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
const classes = useStyles();

return (
<div className={classes.root}>
<Drawer
Expand All@@ -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>
Expand Down
8 changes: 4 additions & 4 deletions pages/dashboard.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down
61 changes: 61 additions & 0 deletions specs/fixtures/bridges.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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": ""
}
]
}
61 changes: 61 additions & 0 deletions specs/integration/bridgeapi/dashboard.spec.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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');
});
});
8 changes: 3 additions & 5 deletions specs/support/mocks/handlers.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
);
}

return res(
ctx.json(
{ bridges: [] },
),
);
return res(ctx.json(bridges));
}),
];

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Dashboard Specs with bug fixes by AndiLavera · Pull Request #52 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Dashboard Specs with bug fixes#52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

williampj
merged 4 commits into

from

Nov 26, 2020
 Merged


Dashboard Specs with bug fixes
#52
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
22ac882

Fix several small bugs related to events & timestamps


AndiLavera Nov 26, 2020
de7e496

Eslint fixes


AndiLavera Nov 26, 2020
e7c84ef

Merge branch 'master' of github.com:williampj/bridgeapi.js into event…


AndiLavera Nov 26, 2020
a63d413

Dashboard specs


AndiLavera Nov 26, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


31 changes: 22 additions & 9 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -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>

Expand DownExpand Up@@ -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,
};

9 changes: 5 additions & 4 deletions
components/Sidebar/ListItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand All@@ -16,7 +18,7 @@ function ListItem({
 noWrap
 align="center"
 >
 {completed ? `${timestamp} - ${date} ${statusCode}` : 'Ongoing' }
 {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
 </Typography>
 </ListItemText>
 </MUIListItem>
Expand All@@ -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,
};

19 changes: 8 additions & 11 deletions
components/Sidebar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({

function Sidebar({ events, title }) {
 const classes = useStyles();

 return (
 <div className={classes.root}>
 <Drawer
Expand All@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions
pages/dashboard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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),
Expand Down

61 changes: 61 additions & 0 deletions
specs/fixtures/bridges.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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": ""
 }
 ]
}

61 changes: 61 additions & 0 deletions
specs/integration/bridgeapi/dashboard.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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');
 });
});

8 changes: 3 additions & 5 deletions
specs/support/mocks/handlers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -20,11 +22,7 @@ const handlers = [
 );
 }

 return res(
 ctx.json(
 { bridges: [] },
 ),
 );
 return res(ctx.json(bridges));
 }),
];

Expand Down