From 4357581ee85ef79cc0998ccc974d27b97cd9d082 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Wed, 27 Mar 2024 19:50:58 -0400 Subject: [PATCH 1/3] Add toasts on query failures --- .../components/checklists/CheckListForm.js | 3 ++- .../components/checklists/ChecklistsIndex.js | 26 +++++++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/site/gatsby-site/src/components/checklists/CheckListForm.js b/site/gatsby-site/src/components/checklists/CheckListForm.js index 4c5b0bee63..0d2871afe5 100644 --- a/site/gatsby-site/src/components/checklists/CheckListForm.js +++ b/site/gatsby-site/src/components/checklists/CheckListForm.js @@ -101,7 +101,7 @@ export default function CheckListForm({ const { data: generatedRisksData, loading: generatedRisksLoading, - errors: generatedRisksErrors, + error: generatedRisksErrors, } = useQuery( gql` query { @@ -124,6 +124,7 @@ export default function CheckListForm({ addToast({ message: t('Failure searching for risks.'), severity: SEVERITY.danger, + error: generatedRisksErrors, }); } diff --git a/site/gatsby-site/src/components/checklists/ChecklistsIndex.js b/site/gatsby-site/src/components/checklists/ChecklistsIndex.js index 4e5115a6ff..563d3fc457 100644 --- a/site/gatsby-site/src/components/checklists/ChecklistsIndex.js +++ b/site/gatsby-site/src/components/checklists/ChecklistsIndex.js @@ -40,11 +40,23 @@ const ChecklistsIndex = ({ users }) => { const [insertChecklist] = useMutation(INSERT_CHECKLIST); /************************** Get Checklists **************************/ - const { data: checklistsData, loading: checklistsLoading } = useQuery(FIND_CHECKLISTS, { + const { + data: checklistsData, + loading: checklistsLoading, + error: checklistsErrors, + } = useQuery(FIND_CHECKLISTS, { variables: { query: { owner_id: user?.id } }, skip: !user?.id, }); + if (checklistsErrors) { + addToast({ + message: t('Could not fetch checklists'), + severity: SEVERITY.danger, + error: checklistsErrors, + }); + } + // In useState so that on deleting a checklist, // we can remove it from display immediately. const [checklists, setChecklists] = useState([]); @@ -104,7 +116,17 @@ const ChecklistsIndex = ({ users }) => { } `; - const { data: risksData } = useQuery(gql(riskQuery), { skip: skipRisksQuery }); + const { data: risksData, error: risksErrors } = useQuery(gql(riskQuery), { + skip: skipRisksQuery, + }); + + if (risksErrors) { + addToast({ + message: t('Failure searching for risks.'), + severity: SEVERITY.danger, + error: risksErrors, + }); + } /************************ Prepare Display ***************************/ const [sortBy, setSortBy] = useState('alphabetical'); From 0c92f2f142cfe6257727cc7be54ac31e0c42c5bb Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Thu, 28 Mar 2024 17:22:30 -0400 Subject: [PATCH 2/3] Add tests for toasts --- .../integration/apps/checklistsIndex.cy.js | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js b/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js index 760edaffd4..07cbf686e1 100644 --- a/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js @@ -7,6 +7,13 @@ describe('Checklists App Index', () => { const newChecklistButtonQuery = '#new-checklist-button'; + const testError = { + 0: { + message: 'Test error', + locations: [{ line: 1, column: 1 }], + }, + }; + const usersQuery = { query: gql` { @@ -91,4 +98,34 @@ describe('Checklists App Index', () => { cy.get('[data-cy="checklist-card"]:last-child button').contains('Delete').should('not.exist'); }); }); + + it('Should show toast on error fetching checklists', () => { + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'findChecklists', + 'findChecklists', + { errors: [testError] } + ); + + cy.visit(url); + + cy.get('[data-cy="toast"]').contains('Could not fetch checklists').should('exist'); + }); + + maybeIt('Should show toast on error creating checklist', () => { + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'insertChecklist', + 'insertChecklist', + { errors: [testError] } + ); + + cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); + + cy.visit(url); + + cy.get(newChecklistButtonQuery).click(); + + cy.get('[data-cy="toast"]').contains('Could not create checklist.').should('exist'); + }); }); From 57da1a9309f9187d9fc1856f3c347367e8907c2e Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Thu, 28 Mar 2024 18:38:26 -0400 Subject: [PATCH 3/3] Add tests for toasts --- .../integration/apps/checklistsIndex.cy.js | 104 ++++++++++++++++-- 1 file changed, 94 insertions(+), 10 deletions(-) diff --git a/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js b/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js index 07cbf686e1..73009e13ae 100644 --- a/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js @@ -112,20 +112,104 @@ describe('Checklists App Index', () => { cy.get('[data-cy="toast"]').contains('Could not fetch checklists').should('exist'); }); + it('Should show toast on error fetching risks', () => { + cy.query(usersQuery).then(({ data: { users } }) => { + const user = users.find((user) => user.adminData.email == Cypress.env('e2eUsername')); + + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'findChecklists', + 'findChecklists', + { + data: { + checklists: [ + { + about: '', + id: 'fakeChecklist1', + name: 'My Checklist', + owner_id: user.userId, + risks: [], + tags_goals: ['GMF:Known AI Goal:Translation'], + tags_methods: [], + tags_other: [], + }, + { + about: '', + id: 'fakeChecklist2', + name: "Somebody Else's Checklist", + owner_id: 'aFakeUserId', + risks: [], + tags_goals: [], + tags_methods: [], + tags_other: [], + }, + ], + }, + } + ); + + cy.conditionalIntercept('**/graphql', (req) => req.body.query.includes('GMF'), 'risks', { + errors: [testError], + }); + + cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); + + cy.visit(url); + + cy.get('[data-cy="toast"]').contains('Failure searching for risks').should('exist'); + }); + }); + maybeIt('Should show toast on error creating checklist', () => { - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'insertChecklist', - 'insertChecklist', - { errors: [testError] } - ); + cy.query(usersQuery).then(({ data: { users } }) => { + const user = users.find((user) => user.adminData.email == Cypress.env('e2eUsername')); - cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'insertChecklist', + 'insertChecklist', + { errors: [testError] } + ); - cy.visit(url); + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'findChecklists', + 'findChecklists', + { + data: { + checklists: [ + { + about: '', + id: 'fakeChecklist1', + name: 'My Checklist', + owner_id: user.userId, + risks: [], + tags_goals: [], + tags_methods: [], + tags_other: [], + }, + { + about: '', + id: 'fakeChecklist2', + name: "Somebody Else's Checklist", + owner_id: 'aFakeUserId', + risks: [], + tags_goals: [], + tags_methods: [], + tags_other: [], + }, + ], + }, + } + ); + + cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); - cy.get(newChecklistButtonQuery).click(); + cy.visit(url); - cy.get('[data-cy="toast"]').contains('Could not create checklist.').should('exist'); + cy.get(newChecklistButtonQuery).click(); + + cy.get('[data-cy="toast"]').contains('Could not create checklist.').should('exist'); + }); }); });