From c76e580dfc20db3d489f74b24762783cdf1bf7ca Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 12 Mar 2024 20:11:53 -0400 Subject: [PATCH 01/10] Add next/previous incident buttons in cite header --- .../gatsby-site/src/templates/citeTemplate.js | 86 +++++++++++++------ 1 file changed, 58 insertions(+), 28 deletions(-) diff --git a/site/gatsby-site/src/templates/citeTemplate.js b/site/gatsby-site/src/templates/citeTemplate.js index 76641c73a8..ce91908eb5 100644 --- a/site/gatsby-site/src/templates/citeTemplate.js +++ b/site/gatsby-site/src/templates/citeTemplate.js @@ -24,7 +24,12 @@ import { SUBSCRIPTION_TYPE } from 'utils/subscriptions'; import VariantList from 'components/variants/VariantList'; import Tools from 'components/cite/Tools'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { + faCircleArrowLeft, + faCircleArrowRight, + faArrowLeft, + faArrowRight, +} from '@fortawesome/free-solid-svg-icons'; import ClassificationsEditor from 'components/taxa/ClassificationsEditor'; import ClassificationsDisplay from 'components/taxa/ClassificationsDisplay'; @@ -176,11 +181,30 @@ function CiteTemplate({ )} {!readOnly && ( - + <> + + +
+ + + + + + +
+ )} @@ -348,28 +372,7 @@ function CiteTemplate({ /> )} - {!readOnly && ( -
- - -
- )} + {!readOnly && } {!readOnly && ( @@ -389,4 +392,31 @@ function CiteTemplate({ ); } +const NextPreviousButtons = ({ prevIncident, nextIncident }) => { + const localizePath = useLocalizePath(); + + return ( +
+ + +
+ ); +}; + export default CiteTemplate; From d6e771114f212eb0a40c195635f0588dae0bb5b2 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Mon, 18 Mar 2024 16:02:48 -0400 Subject: [PATCH 02/10] Stop from appearing on first and last pages --- .../gatsby-site/src/templates/citeTemplate.js | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/site/gatsby-site/src/templates/citeTemplate.js b/site/gatsby-site/src/templates/citeTemplate.js index ce91908eb5..b1f43eb8a7 100644 --- a/site/gatsby-site/src/templates/citeTemplate.js +++ b/site/gatsby-site/src/templates/citeTemplate.js @@ -189,20 +189,24 @@ function CiteTemplate({ >
- - - - - - + {prevIncident && ( + + + + )} + {nextIncident && ( + + + + )}
)} From 437bc32907419f6321b73e069a4aa052a1c95829 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 19 Mar 2024 10:51:34 -0400 Subject: [PATCH 03/10] wip --- .../cypress/e2e/integration/cite.cy.js | 586 +++++++++--------- .../gatsby-site/src/templates/citeTemplate.js | 2 + 2 files changed, 300 insertions(+), 288 deletions(-) diff --git a/site/gatsby-site/cypress/e2e/integration/cite.cy.js b/site/gatsby-site/cypress/e2e/integration/cite.cy.js index 3699c3a130..cf1979e2ff 100644 --- a/site/gatsby-site/cypress/e2e/integration/cite.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/cite.cy.js @@ -39,296 +39,306 @@ describe('Cite pages', () => { }); }); - maybeIt('Should show an edit link to users with the appropriate role', {}, () => { - cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); - - const id = 'r3'; - - cy.visit('/cite/1#' + id); - - cy.get(`#${id} [data-cy="edit-report"]`).click(); - - cy.waitForStableDOM(); - - cy.url().should('contain', '/cite/edit/?report_number=3'); - }); - - it('Successfully loads', () => { - cy.visit(url); - }); - - // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged - it.skip( - 'Should scroll to report when coming from the discover app', - { retries: { runMode: 4 } }, - () => { - cy.visit(discoverUrl); - - cy.disableSmoothScroll(); - - cy.waitForStableDOM(); - - cy.get('[data-cy="collapse-button"]:visible').click(); - - cy.contains('Show Details on Incident #10').first().click(); - cy.waitForStableDOM(); - cy.url().should('include', '/cite/10/#r23'); - cy.waitForStableDOM(); - - cy.contains('h5', '​Is Starbucks shortchanging its baristas?', { timeout: 8000 }) - .parents('[data-cy="incident-report-card"]') - .then((subject) => { - expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); - }); - } - ); - - it('Should scroll to report when clicking on a report in the timeline', () => { - cy.visit(url); - - cy.disableSmoothScroll(); - - cy.waitForStableDOM(); - - cy.get('text') - .contains('For some Starbucks workers, job leaves bitter taste') - .parents('a') - .click(); - - cy.waitForStableDOM(); - - cy.get('h5') - .contains('For some Starbucks workers, job leaves bitter taste') - .parents('[data-cy="incident-report-card"]') - .then((subject) => { - expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 1); - }); - }); - - // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged - it.skip( - 'Should scroll to report when coming from the landing page', - { retries: { runMode: 4 } }, - () => { - cy.visit('/'); - - cy.disableSmoothScroll(); - - cy.waitForStableDOM(); - - cy.get('[data-cy="latest-incident-report-title"]').then(($value) => { - const incidentTitle = $value.text(); - - cy.contains('Latest Incident Report').first().click(); - cy.waitForStableDOM(); - - cy.contains('h5', incidentTitle, { timeout: 8000 }) - .parents('[data-cy="incident-report-card"]') - .then((subject) => { - expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); - }); - }); - } - ); - - it('Should show the incident stats table', () => { - cy.visit(url); - cy.get('[data-cy=incident-stats]').should('exist'); - }); - - it('Should show editors in the stats table', () => { - cy.visit(url); - cy.get('[data-cy=incident-stats] > * > *') - .contains('Editors') - .parents('*') - .contains('Sean McGregor'); - }); - - it('Should flag an incident', () => { - // mock requests until a testing database is implemented - const _id = '23'; - - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'FindReport', - 'fetchReport', - unflaggedReport - ); - - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'logReportHistory', - 'logReportHistory', - { - data: { - logReportHistory: { - report_number: 10, - }, - }, - } - ); - - cy.visit(url + '#' + _id); - - cy.waitForStableDOM(); - - cy.get(`[id="r${_id}"`).find('[data-cy="expand-report-button"]').click(); - - cy.get(`[id="r${_id}"`).find('[data-cy="flag-button"]').click(); - - cy.get('[data-cy="flag-report-23"]').as('modal').should('be.visible'); - - cy.wait('@fetchReport'); - - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'UpdateReport', - 'updateReport', - flaggedReport - ); - - const now = new Date(); - - cy.clock(now); - - cy.get('@modal').find('[data-cy="flag-toggle"]').click(); - - cy.wait('@updateReport') - .its('request.body.variables') - .then((variables) => { - expect(variables.query.report_number).to.equal(23); - expect(variables.set).deep.eq({ - flag: true, - date_modified: format(now, 'yyyy-MM-dd'), - epoch_date_modified: getUnixTime(now), - }); - }); - - cy.wait('@logReportHistory') - .its('request.body.variables.input') - .then((input) => { - const expectedReport = deleteReportTypenames( - transformReportData(flaggedReport.data.updateOneReport) - ); - - expectedReport.modifiedBy = ''; - expectedReport.date_modified = format(now, 'yyyy-MM-dd'); - expectedReport.epoch_date_modified = getUnixTime(now); - - expect(input).to.deep.eq(expectedReport); - }); - - cy.get('@modal').find('[data-cy="flag-toggle"]').should('be.disabled'); - - cy.get('[aria-label="Close"]').click(); - - cy.get('@modal').should('not.exist'); - }); - - maybeIt('Should remove duplicate', () => { - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'UpsertClassification', - 'upsertClassification', - upsertDuplicateClassification - ); - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'UpdateIncident', - 'updateIncident', - updateIncident50 - ); - cy.conditionalIntercept( - '**/graphql', - (req) => req.body.operationName == 'InsertDuplicate', - 'insertDuplicate', - { - data: { - insertOneDuplicate: { - __typename: 'Duplicate', - duplicate_incident_number: 10, - true_incident_number: 50, - }, - }, - } - ); - - cy.conditionalIntercept( - '**/graphql', - (req) => - req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, - 'findIncident', - incident10 - ); - - cy.conditionalIntercept( - '**/graphql', - (req) => - req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, - 'findIncident', - incident50 - ); - - cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); - cy.waitForStableDOM(); - - cy.visit('/cite/10'); - cy.waitForStableDOM(); - - cy.get('[data-cy="remove-duplicate"]').click(); - cy.waitForStableDOM(); - - cy.get('#input-duplicateIncidentId').type('50'); - cy.waitForStableDOM(); - - cy.get('#duplicateIncidentId > a[aria-label="50"]').click(); - cy.waitForStableDOM(); - - cy.get('#input-duplicateIncidentId').blur(); - cy.waitForStableDOM(); - - cy.get('[data-cy="confirm-remove-duplicate"]').click(); - cy.waitForStableDOM(); - - cy.contains('Incident 10 marked as duplicate').should('exist'); - }); - - it('Should pre-fill submit report form', () => { - cy.visit(url); - - cy.contains('New Report').scrollIntoView().click(); - - cy.waitForStableDOM(); - - cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new report to incident 10').should( - 'be.visible' - ); - - cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); - }); - - it('Should pre-fill submit report response form', () => { +// maybeIt('Should show an edit link to users with the appropriate role', {}, () => { +// cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); +// +// const id = 'r3'; +// +// cy.visit('/cite/1#' + id); +// +// cy.get(`#${id} [data-cy="edit-report"]`).click(); +// +// cy.waitForStableDOM(); +// +// cy.url().should('contain', '/cite/edit/?report_number=3'); +// }); +// +// it('Successfully loads', () => { +// cy.visit(url); +// }); +// +// // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged +// it.skip( +// 'Should scroll to report when coming from the discover app', +// { retries: { runMode: 4 } }, +// () => { +// cy.visit(discoverUrl); +// +// cy.disableSmoothScroll(); +// +// cy.waitForStableDOM(); +// +// cy.get('[data-cy="collapse-button"]:visible').click(); +// +// cy.contains('Show Details on Incident #10').first().click(); +// cy.waitForStableDOM(); +// cy.url().should('include', '/cite/10/#r23'); +// cy.waitForStableDOM(); +// +// cy.contains('h5', '​Is Starbucks shortchanging its baristas?', { timeout: 8000 }) +// .parents('[data-cy="incident-report-card"]') +// .then((subject) => { +// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); +// }); +// } +// ); +// +// it('Should scroll to report when clicking on a report in the timeline', () => { +// cy.visit(url); +// +// cy.disableSmoothScroll(); +// +// cy.waitForStableDOM(); +// +// cy.get('text') +// .contains('For some Starbucks workers, job leaves bitter taste') +// .parents('a') +// .click(); +// +// cy.waitForStableDOM(); +// +// cy.get('h5') +// .contains('For some Starbucks workers, job leaves bitter taste') +// .parents('[data-cy="incident-report-card"]') +// .then((subject) => { +// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 1); +// }); +// }); +// +// // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged +// it.skip( +// 'Should scroll to report when coming from the landing page', +// { retries: { runMode: 4 } }, +// () => { +// cy.visit('/'); +// +// cy.disableSmoothScroll(); +// +// cy.waitForStableDOM(); +// +// cy.get('[data-cy="latest-incident-report-title"]').then(($value) => { +// const incidentTitle = $value.text(); +// +// cy.contains('Latest Incident Report').first().click(); +// cy.waitForStableDOM(); +// +// cy.contains('h5', incidentTitle, { timeout: 8000 }) +// .parents('[data-cy="incident-report-card"]') +// .then((subject) => { +// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); +// }); +// }); +// } +// ); +// +// it('Should show the incident stats table', () => { +// cy.visit(url); +// cy.get('[data-cy=incident-stats]').should('exist'); +// }); +// +// it('Should show editors in the stats table', () => { +// cy.visit(url); +// cy.get('[data-cy=incident-stats] > * > *') +// .contains('Editors') +// .parents('*') +// .contains('Sean McGregor'); +// }); +// +// it('Should flag an incident', () => { +// // mock requests until a testing database is implemented +// const _id = '23'; +// +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'FindReport', +// 'fetchReport', +// unflaggedReport +// ); +// +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'logReportHistory', +// 'logReportHistory', +// { +// data: { +// logReportHistory: { +// report_number: 10, +// }, +// }, +// } +// ); +// +// cy.visit(url + '#' + _id); +// +// cy.waitForStableDOM(); +// +// cy.get(`[id="r${_id}"`).find('[data-cy="expand-report-button"]').click(); +// +// cy.get(`[id="r${_id}"`).find('[data-cy="flag-button"]').click(); +// +// cy.get('[data-cy="flag-report-23"]').as('modal').should('be.visible'); +// +// cy.wait('@fetchReport'); +// +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'UpdateReport', +// 'updateReport', +// flaggedReport +// ); +// +// const now = new Date(); +// +// cy.clock(now); +// +// cy.get('@modal').find('[data-cy="flag-toggle"]').click(); +// +// cy.wait('@updateReport') +// .its('request.body.variables') +// .then((variables) => { +// expect(variables.query.report_number).to.equal(23); +// expect(variables.set).deep.eq({ +// flag: true, +// date_modified: format(now, 'yyyy-MM-dd'), +// epoch_date_modified: getUnixTime(now), +// }); +// }); +// +// cy.wait('@logReportHistory') +// .its('request.body.variables.input') +// .then((input) => { +// const expectedReport = deleteReportTypenames( +// transformReportData(flaggedReport.data.updateOneReport) +// ); +// +// expectedReport.modifiedBy = ''; +// expectedReport.date_modified = format(now, 'yyyy-MM-dd'); +// expectedReport.epoch_date_modified = getUnixTime(now); +// +// expect(input).to.deep.eq(expectedReport); +// }); +// +// cy.get('@modal').find('[data-cy="flag-toggle"]').should('be.disabled'); +// +// cy.get('[aria-label="Close"]').click(); +// +// cy.get('@modal').should('not.exist'); +// }); +// +// maybeIt('Should remove duplicate', () => { +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'UpsertClassification', +// 'upsertClassification', +// upsertDuplicateClassification +// ); +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'UpdateIncident', +// 'updateIncident', +// updateIncident50 +// ); +// cy.conditionalIntercept( +// '**/graphql', +// (req) => req.body.operationName == 'InsertDuplicate', +// 'insertDuplicate', +// { +// data: { +// insertOneDuplicate: { +// __typename: 'Duplicate', +// duplicate_incident_number: 10, +// true_incident_number: 50, +// }, +// }, +// } +// ); +// +// cy.conditionalIntercept( +// '**/graphql', +// (req) => +// req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, +// 'findIncident', +// incident10 +// ); +// +// cy.conditionalIntercept( +// '**/graphql', +// (req) => +// req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, +// 'findIncident', +// incident50 +// ); +// +// cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); +// cy.waitForStableDOM(); +// +// cy.visit('/cite/10'); +// cy.waitForStableDOM(); +// +// cy.get('[data-cy="remove-duplicate"]').click(); +// cy.waitForStableDOM(); +// +// cy.get('#input-duplicateIncidentId').type('50'); +// cy.waitForStableDOM(); +// +// cy.get('#duplicateIncidentId > a[aria-label="50"]').click(); +// cy.waitForStableDOM(); +// +// cy.get('#input-duplicateIncidentId').blur(); +// cy.waitForStableDOM(); +// +// cy.get('[data-cy="confirm-remove-duplicate"]').click(); +// cy.waitForStableDOM(); +// +// cy.contains('Incident 10 marked as duplicate').should('exist'); +// }); +// +// it('Should pre-fill submit report form', () => { +// cy.visit(url); +// +// cy.contains('New Report').scrollIntoView().click(); +// +// cy.waitForStableDOM(); +// +// cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new report to incident 10').should( +// 'be.visible' +// ); +// +// cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); +// }); +// +// it('Should pre-fill submit report response form', () => { +// cy.visit(url); +// +// cy.waitForStableDOM(); +// +// cy.contains('New Response').scrollIntoView().click(); +// +// cy.waitForStableDOM(); +// +// cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new response to incident 10').should( +// 'be.visible' +// ); +// +// cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); +// }); +// +// it('should render Next and Previous incident buttons', () => { +// cy.visit(url); +// +// cy.contains('Next Incident').should('be.visible').should('have.attr', 'href', '/cite/11'); +// +// cy.contains('Previous Incident').should('be.visible').should('have.attr', 'href', '/cite/9'); +// }); + it('', () => { cy.visit(url); - - cy.waitForStableDOM(); - - cy.contains('New Response').scrollIntoView().click(); - - cy.waitForStableDOM(); - - cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new response to incident 10').should( - 'be.visible' - ); - - cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); + cy.get(`[data-cy="header-previous-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/9'); + cy.get(`[data-cy="header-next-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/11'); }); - - it('should render Next and Previous incident buttons', () => { - cy.visit(url); - - cy.contains('Next Incident').should('be.visible').should('have.attr', 'href', '/cite/11'); - - cy.contains('Previous Incident').should('be.visible').should('have.attr', 'href', '/cite/9'); + it('', () => { + cy.visit('/cite/1'); + cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); + cy.get(`[data-cy="header-next-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/2'); }); maybeIt('Should show the edit incident form', () => { diff --git a/site/gatsby-site/src/templates/citeTemplate.js b/site/gatsby-site/src/templates/citeTemplate.js index b1f43eb8a7..cfb0b6ac43 100644 --- a/site/gatsby-site/src/templates/citeTemplate.js +++ b/site/gatsby-site/src/templates/citeTemplate.js @@ -191,6 +191,7 @@ function CiteTemplate({
{prevIncident && ( Date: Mon, 1 Apr 2024 13:57:25 -0400 Subject: [PATCH 04/10] Uncomment --- .../cypress/e2e/integration/cite.cy.js | 595 +++++++++--------- 1 file changed, 301 insertions(+), 294 deletions(-) diff --git a/site/gatsby-site/cypress/e2e/integration/cite.cy.js b/site/gatsby-site/cypress/e2e/integration/cite.cy.js index cf1979e2ff..78b9951d45 100644 --- a/site/gatsby-site/cypress/e2e/integration/cite.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/cite.cy.js @@ -39,306 +39,313 @@ describe('Cite pages', () => { }); }); -// maybeIt('Should show an edit link to users with the appropriate role', {}, () => { -// cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); -// -// const id = 'r3'; -// -// cy.visit('/cite/1#' + id); -// -// cy.get(`#${id} [data-cy="edit-report"]`).click(); -// -// cy.waitForStableDOM(); -// -// cy.url().should('contain', '/cite/edit/?report_number=3'); -// }); -// -// it('Successfully loads', () => { -// cy.visit(url); -// }); -// -// // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged -// it.skip( -// 'Should scroll to report when coming from the discover app', -// { retries: { runMode: 4 } }, -// () => { -// cy.visit(discoverUrl); -// -// cy.disableSmoothScroll(); -// -// cy.waitForStableDOM(); -// -// cy.get('[data-cy="collapse-button"]:visible').click(); -// -// cy.contains('Show Details on Incident #10').first().click(); -// cy.waitForStableDOM(); -// cy.url().should('include', '/cite/10/#r23'); -// cy.waitForStableDOM(); -// -// cy.contains('h5', '​Is Starbucks shortchanging its baristas?', { timeout: 8000 }) -// .parents('[data-cy="incident-report-card"]') -// .then((subject) => { -// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); -// }); -// } -// ); -// -// it('Should scroll to report when clicking on a report in the timeline', () => { -// cy.visit(url); -// -// cy.disableSmoothScroll(); -// -// cy.waitForStableDOM(); -// -// cy.get('text') -// .contains('For some Starbucks workers, job leaves bitter taste') -// .parents('a') -// .click(); -// -// cy.waitForStableDOM(); -// -// cy.get('h5') -// .contains('For some Starbucks workers, job leaves bitter taste') -// .parents('[data-cy="incident-report-card"]') -// .then((subject) => { -// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 1); -// }); -// }); -// -// // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged -// it.skip( -// 'Should scroll to report when coming from the landing page', -// { retries: { runMode: 4 } }, -// () => { -// cy.visit('/'); -// -// cy.disableSmoothScroll(); -// -// cy.waitForStableDOM(); -// -// cy.get('[data-cy="latest-incident-report-title"]').then(($value) => { -// const incidentTitle = $value.text(); -// -// cy.contains('Latest Incident Report').first().click(); -// cy.waitForStableDOM(); -// -// cy.contains('h5', incidentTitle, { timeout: 8000 }) -// .parents('[data-cy="incident-report-card"]') -// .then((subject) => { -// expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); -// }); -// }); -// } -// ); -// -// it('Should show the incident stats table', () => { -// cy.visit(url); -// cy.get('[data-cy=incident-stats]').should('exist'); -// }); -// -// it('Should show editors in the stats table', () => { -// cy.visit(url); -// cy.get('[data-cy=incident-stats] > * > *') -// .contains('Editors') -// .parents('*') -// .contains('Sean McGregor'); -// }); -// -// it('Should flag an incident', () => { -// // mock requests until a testing database is implemented -// const _id = '23'; -// -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'FindReport', -// 'fetchReport', -// unflaggedReport -// ); -// -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'logReportHistory', -// 'logReportHistory', -// { -// data: { -// logReportHistory: { -// report_number: 10, -// }, -// }, -// } -// ); -// -// cy.visit(url + '#' + _id); -// -// cy.waitForStableDOM(); -// -// cy.get(`[id="r${_id}"`).find('[data-cy="expand-report-button"]').click(); -// -// cy.get(`[id="r${_id}"`).find('[data-cy="flag-button"]').click(); -// -// cy.get('[data-cy="flag-report-23"]').as('modal').should('be.visible'); -// -// cy.wait('@fetchReport'); -// -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'UpdateReport', -// 'updateReport', -// flaggedReport -// ); -// -// const now = new Date(); -// -// cy.clock(now); -// -// cy.get('@modal').find('[data-cy="flag-toggle"]').click(); -// -// cy.wait('@updateReport') -// .its('request.body.variables') -// .then((variables) => { -// expect(variables.query.report_number).to.equal(23); -// expect(variables.set).deep.eq({ -// flag: true, -// date_modified: format(now, 'yyyy-MM-dd'), -// epoch_date_modified: getUnixTime(now), -// }); -// }); -// -// cy.wait('@logReportHistory') -// .its('request.body.variables.input') -// .then((input) => { -// const expectedReport = deleteReportTypenames( -// transformReportData(flaggedReport.data.updateOneReport) -// ); -// -// expectedReport.modifiedBy = ''; -// expectedReport.date_modified = format(now, 'yyyy-MM-dd'); -// expectedReport.epoch_date_modified = getUnixTime(now); -// -// expect(input).to.deep.eq(expectedReport); -// }); -// -// cy.get('@modal').find('[data-cy="flag-toggle"]').should('be.disabled'); -// -// cy.get('[aria-label="Close"]').click(); -// -// cy.get('@modal').should('not.exist'); -// }); -// -// maybeIt('Should remove duplicate', () => { -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'UpsertClassification', -// 'upsertClassification', -// upsertDuplicateClassification -// ); -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'UpdateIncident', -// 'updateIncident', -// updateIncident50 -// ); -// cy.conditionalIntercept( -// '**/graphql', -// (req) => req.body.operationName == 'InsertDuplicate', -// 'insertDuplicate', -// { -// data: { -// insertOneDuplicate: { -// __typename: 'Duplicate', -// duplicate_incident_number: 10, -// true_incident_number: 50, -// }, -// }, -// } -// ); -// -// cy.conditionalIntercept( -// '**/graphql', -// (req) => -// req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, -// 'findIncident', -// incident10 -// ); -// -// cy.conditionalIntercept( -// '**/graphql', -// (req) => -// req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, -// 'findIncident', -// incident50 -// ); -// -// cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); -// cy.waitForStableDOM(); -// -// cy.visit('/cite/10'); -// cy.waitForStableDOM(); -// -// cy.get('[data-cy="remove-duplicate"]').click(); -// cy.waitForStableDOM(); -// -// cy.get('#input-duplicateIncidentId').type('50'); -// cy.waitForStableDOM(); -// -// cy.get('#duplicateIncidentId > a[aria-label="50"]').click(); -// cy.waitForStableDOM(); -// -// cy.get('#input-duplicateIncidentId').blur(); -// cy.waitForStableDOM(); -// -// cy.get('[data-cy="confirm-remove-duplicate"]').click(); -// cy.waitForStableDOM(); -// -// cy.contains('Incident 10 marked as duplicate').should('exist'); -// }); -// -// it('Should pre-fill submit report form', () => { -// cy.visit(url); -// -// cy.contains('New Report').scrollIntoView().click(); -// -// cy.waitForStableDOM(); -// -// cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new report to incident 10').should( -// 'be.visible' -// ); -// -// cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); -// }); -// -// it('Should pre-fill submit report response form', () => { -// cy.visit(url); -// -// cy.waitForStableDOM(); -// -// cy.contains('New Response').scrollIntoView().click(); -// -// cy.waitForStableDOM(); -// -// cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new response to incident 10').should( -// 'be.visible' -// ); -// -// cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); -// }); -// -// it('should render Next and Previous incident buttons', () => { -// cy.visit(url); -// -// cy.contains('Next Incident').should('be.visible').should('have.attr', 'href', '/cite/11'); -// -// cy.contains('Previous Incident').should('be.visible').should('have.attr', 'href', '/cite/9'); -// }); + maybeIt('Should show an edit link to users with the appropriate role', {}, () => { + cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); + + const id = 'r3'; + + cy.visit('/cite/1#' + id); + + cy.get(`#${id} [data-cy="edit-report"]`).click(); + + cy.waitForStableDOM(); + + cy.url().should('contain', '/cite/edit/?report_number=3'); + }); + + it('Successfully loads', () => { + cy.visit(url); + }); + + // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged + it.skip( + 'Should scroll to report when coming from the discover app', + { retries: { runMode: 4 } }, + () => { + cy.visit(discoverUrl); + + cy.disableSmoothScroll(); + + cy.waitForStableDOM(); + + cy.get('[data-cy="collapse-button"]:visible').click(); + + cy.contains('Show Details on Incident #10').first().click(); + cy.waitForStableDOM(); + cy.url().should('include', '/cite/10/#r23'); + cy.waitForStableDOM(); + + cy.contains('h5', '​Is Starbucks shortchanging its baristas?', { timeout: 8000 }) + .parents('[data-cy="incident-report-card"]') + .then((subject) => { + expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); + }); + } + ); + + it('Should scroll to report when clicking on a report in the timeline', () => { + cy.visit(url); + + cy.disableSmoothScroll(); + + cy.waitForStableDOM(); + + cy.get('text') + .contains('For some Starbucks workers, job leaves bitter taste') + .parents('a') + .click(); + + cy.waitForStableDOM(); + + cy.get('h5') + .contains('For some Starbucks workers, job leaves bitter taste') + .parents('[data-cy="incident-report-card"]') + .then((subject) => { + expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 1); + }); + }); + + // skipping until https://github.com/responsible-ai-collaborative/aiid/pull/1680/files is merged + it.skip( + 'Should scroll to report when coming from the landing page', + { retries: { runMode: 4 } }, + () => { + cy.visit('/'); + + cy.disableSmoothScroll(); + + cy.waitForStableDOM(); + + cy.get('[data-cy="latest-incident-report-title"]').then(($value) => { + const incidentTitle = $value.text(); + + cy.contains('Latest Incident Report').first().click(); + cy.waitForStableDOM(); + + cy.contains('h5', incidentTitle, { timeout: 8000 }) + .parents('[data-cy="incident-report-card"]') + .then((subject) => { + expect(subject[0].getBoundingClientRect().top).to.be.closeTo(0, 30); + }); + }); + } + ); + + it('Should show the incident stats table', () => { + cy.visit(url); + cy.get('[data-cy=incident-stats]').should('exist'); + }); + + it('Should show editors in the stats table', () => { + cy.visit(url); + cy.get('[data-cy=incident-stats] > * > *') + .contains('Editors') + .parents('*') + .contains('Sean McGregor'); + }); + + it('Should flag an incident', () => { + // mock requests until a testing database is implemented + const _id = '23'; + + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'FindReport', + 'fetchReport', + unflaggedReport + ); + + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'logReportHistory', + 'logReportHistory', + { + data: { + logReportHistory: { + report_number: 10, + }, + }, + } + ); + + cy.visit(url + '#' + _id); + + cy.waitForStableDOM(); + + cy.get(`[id="r${_id}"`).find('[data-cy="expand-report-button"]').click(); + + cy.get(`[id="r${_id}"`).find('[data-cy="flag-button"]').click(); + + cy.get('[data-cy="flag-report-23"]').as('modal').should('be.visible'); + + cy.wait('@fetchReport'); + + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'UpdateReport', + 'updateReport', + flaggedReport + ); + + const now = new Date(); + + cy.clock(now); + + cy.get('@modal').find('[data-cy="flag-toggle"]').click(); + + cy.wait('@updateReport') + .its('request.body.variables') + .then((variables) => { + expect(variables.query.report_number).to.equal(23); + expect(variables.set).deep.eq({ + flag: true, + date_modified: format(now, 'yyyy-MM-dd'), + epoch_date_modified: getUnixTime(now), + }); + }); + + cy.wait('@logReportHistory') + .its('request.body.variables.input') + .then((input) => { + const expectedReport = deleteReportTypenames( + transformReportData(flaggedReport.data.updateOneReport) + ); + + expectedReport.modifiedBy = ''; + expectedReport.date_modified = format(now, 'yyyy-MM-dd'); + expectedReport.epoch_date_modified = getUnixTime(now); + + expect(input).to.deep.eq(expectedReport); + }); + + cy.get('@modal').find('[data-cy="flag-toggle"]').should('be.disabled'); + + cy.get('[aria-label="Close"]').click(); + + cy.get('@modal').should('not.exist'); + }); + + maybeIt('Should remove duplicate', () => { + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'UpsertClassification', + 'upsertClassification', + upsertDuplicateClassification + ); + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'UpdateIncident', + 'updateIncident', + updateIncident50 + ); + cy.conditionalIntercept( + '**/graphql', + (req) => req.body.operationName == 'InsertDuplicate', + 'insertDuplicate', + { + data: { + insertOneDuplicate: { + __typename: 'Duplicate', + duplicate_incident_number: 10, + true_incident_number: 50, + }, + }, + } + ); + + cy.conditionalIntercept( + '**/graphql', + (req) => + req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, + 'findIncident', + incident10 + ); + + cy.conditionalIntercept( + '**/graphql', + (req) => + req.body.operationName == 'FindIncident' && req.body.variables.query.incident_id == 10, + 'findIncident', + incident50 + ); + + cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); + cy.waitForStableDOM(); + + cy.visit('/cite/10'); + cy.waitForStableDOM(); + + cy.get('[data-cy="remove-duplicate"]').click(); + cy.waitForStableDOM(); + + cy.get('#input-duplicateIncidentId').type('50'); + cy.waitForStableDOM(); + + cy.get('#duplicateIncidentId > a[aria-label="50"]').click(); + cy.waitForStableDOM(); + + cy.get('#input-duplicateIncidentId').blur(); + cy.waitForStableDOM(); + + cy.get('[data-cy="confirm-remove-duplicate"]').click(); + cy.waitForStableDOM(); + + cy.contains('Incident 10 marked as duplicate').should('exist'); + }); + + it('Should pre-fill submit report form', () => { + cy.visit(url); + + cy.contains('New Report').scrollIntoView().click(); + + cy.waitForStableDOM(); + + cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new report to incident 10').should( + 'be.visible' + ); + + cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); + }); + + it('Should pre-fill submit report response form', () => { + cy.visit(url); + + cy.waitForStableDOM(); + + cy.contains('New Response').scrollIntoView().click(); + + cy.waitForStableDOM(); + + cy.contains('[data-cy="prefilled-incident-id"]', 'Adding a new response to incident 10').should( + 'be.visible' + ); + + cy.get(`.incident-ids-field [data-cy="token"]`).contains('10').should('be.visible'); + }); + + it('should render Next and Previous incident buttons', () => { + cy.visit(url); + + cy.contains('Next Incident').should('be.visible').should('have.attr', 'href', '/cite/11'); + + cy.contains('Previous Incident').should('be.visible').should('have.attr', 'href', '/cite/9'); + }); + it('', () => { cy.visit(url); - cy.get(`[data-cy="header-previous-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/9'); - cy.get(`[data-cy="header-next-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/11'); + cy.get(`[data-cy="header-previous-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', '/cite/9'); + cy.get(`[data-cy="header-next-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', '/cite/11'); }); it('', () => { cy.visit('/cite/1'); cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); - cy.get(`[data-cy="header-next-incident-link"]`).should('be.visible').should('have.attr', 'href', '/cite/2'); + cy.get(`[data-cy="header-next-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', '/cite/2'); }); maybeIt('Should show the edit incident form', () => { From d95088a70a7170c2cc0db9d4c93699f3c3a018e5 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 2 Apr 2024 16:53:50 -0400 Subject: [PATCH 05/10] Test that buttons appear only when applicable --- .../cypress/e2e/integration/cite.cy.js | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/site/gatsby-site/cypress/e2e/integration/cite.cy.js b/site/gatsby-site/cypress/e2e/integration/cite.cy.js index 78b9951d45..1905409f15 100644 --- a/site/gatsby-site/cypress/e2e/integration/cite.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/cite.cy.js @@ -20,6 +20,8 @@ describe('Cite pages', () => { let user; + let lastIncidentId; + before('before', function () { // Skip all tests if the environment is empty since /cite/{incident_id} is not available Cypress.env('isEmptyEnvironment') && this.skip(); @@ -32,13 +34,35 @@ describe('Cite pages', () => { first_name last_name } + incidents(limit: 1, sortBy: INCIDENT_ID_DESC) { + incident_id + } } `, - }).then(({ data: { user: userData } }) => { + }).then(({ data: { user: userData, incidents: incidentsData } }) => { user = userData; + lastIncidentId = incidentsData[0].incident_id; }); }); + it('Should disable Previous and Next incident buttons in header on first and last incidents', () => { + cy.visit('/cite/1'); + + cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); + + cy.get(`[data-cy="header-next-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', '/cite/2'); + + cy.visit(`/cite/${lastIncidentId}`); + + cy.get(`[data-cy="header-next-incident-link"]`).should('not.exist'); + + cy.get(`[data-cy="header-previous-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', `/cite/${lastIncidentId - 1}`); + }); + maybeIt('Should show an edit link to users with the appropriate role', {}, () => { cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); From 38ab3b12181fcb3cbc813f29a4e8b15a5b305bd0 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 23 Apr 2024 10:43:46 -0400 Subject: [PATCH 06/10] Don't change sponsors --- site/gatsby-site/src/components/landing/Sponsors.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/site/gatsby-site/src/components/landing/Sponsors.js b/site/gatsby-site/src/components/landing/Sponsors.js index 2bb30b8c16..3be9de39f0 100644 --- a/site/gatsby-site/src/components/landing/Sponsors.js +++ b/site/gatsby-site/src/components/landing/Sponsors.js @@ -103,18 +103,12 @@ export default function Sponsors({ sponsors = [] }) { organization chartered to advance the AI Incident Database. The governance of the Collaborative is architected around the participation in its impact programming. For more details, we invite you to read the{' '} - - founding report - {' '} - and learn more on our{' '} + founding report and learn + more on our{' '} board and contributors.

- +

From 845a934275bc87fdb78a4733190eac76c421b694 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 23 Apr 2024 10:45:27 -0400 Subject: [PATCH 07/10] wip --- .../cypress/e2e/integration/cite.cy.js | 44 ++++++++----------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/site/gatsby-site/cypress/e2e/integration/cite.cy.js b/site/gatsby-site/cypress/e2e/integration/cite.cy.js index f28a671b22..d74563d240 100644 --- a/site/gatsby-site/cypress/e2e/integration/cite.cy.js +++ b/site/gatsby-site/cypress/e2e/integration/cite.cy.js @@ -45,24 +45,6 @@ describe('Cite pages', () => { }); }); - it('Should disable Previous and Next incident buttons in header on first and last incidents', () => { - cy.visit('/cite/1'); - - cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); - - cy.get(`[data-cy="header-next-incident-link"]`) - .should('be.visible') - .should('have.attr', 'href', '/cite/2'); - - cy.visit(`/cite/${lastIncidentId}`); - - cy.get(`[data-cy="header-next-incident-link"]`).should('not.exist'); - - cy.get(`[data-cy="header-previous-incident-link"]`) - .should('be.visible') - .should('have.attr', 'href', `/cite/${lastIncidentId - 1}`); - }); - maybeIt('Should show an edit link to users with the appropriate role', {}, () => { cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); @@ -365,14 +347,6 @@ describe('Cite pages', () => { .should('have.attr', 'href', '/cite/11'); }); - it('Should not show the previous button on incident 1.', () => { - cy.visit('/cite/1'); - cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); - cy.get(`[data-cy="header-next-incident-link"]`) - .should('be.visible') - .should('have.attr', 'href', '/cite/2'); - }); - it('Should disable Previous and Next incident buttons on first and last incidents', () => { cy.visit('/cite/1'); @@ -397,6 +371,24 @@ describe('Cite pages', () => { }); }); + it('Should disable Previous and Next incident buttons in header on first and last incidents', () => { + cy.visit('/cite/1'); + + cy.get(`[data-cy="header-previous-incident-link"]`).should('not.exist'); + + cy.get(`[data-cy="header-next-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', '/cite/2'); + + cy.visit(`/cite/${lastIncidentId}`); + + cy.get(`[data-cy="header-next-incident-link"]`).should('not.exist'); + + cy.get(`[data-cy="header-previous-incident-link"]`) + .should('be.visible') + .should('have.attr', 'href', `/cite/${lastIncidentId - 1}`); + }); + maybeIt('Should show the edit incident form', () => { cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword')); From 35f837347f64c6226ce23b677535e929a8f34bad Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 23 Apr 2024 10:55:11 -0400 Subject: [PATCH 08/10] Remove sponsors --- site/gatsby-site/src/components/landing/Sponsors.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/site/gatsby-site/src/components/landing/Sponsors.js b/site/gatsby-site/src/components/landing/Sponsors.js index 3be9de39f0..2bb30b8c16 100644 --- a/site/gatsby-site/src/components/landing/Sponsors.js +++ b/site/gatsby-site/src/components/landing/Sponsors.js @@ -103,12 +103,18 @@ export default function Sponsors({ sponsors = [] }) { organization chartered to advance the AI Incident Database. The governance of the Collaborative is architected around the participation in its impact programming. For more details, we invite you to read the{' '} - founding report and learn - more on our{' '} + + founding report + {' '} + and learn more on our{' '} board and contributors.

- +

From d15a9b182596ad4229041d7e01ca19361bab228b Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Tue, 23 Apr 2024 10:57:26 -0400 Subject: [PATCH 09/10] Remove sponsors --- site/gatsby-site/src/components/landing/Sponsors.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/site/gatsby-site/src/components/landing/Sponsors.js b/site/gatsby-site/src/components/landing/Sponsors.js index 2bb30b8c16..3829dbf8bc 100644 --- a/site/gatsby-site/src/components/landing/Sponsors.js +++ b/site/gatsby-site/src/components/landing/Sponsors.js @@ -103,18 +103,12 @@ export default function Sponsors({ sponsors = [] }) { organization chartered to advance the AI Incident Database. The governance of the Collaborative is architected around the participation in its impact programming. For more details, we invite you to read the{' '} - - founding report - {' '} - and learn more on our{' '} + founding report and learn + more on our{' '} board and contributors.

- +

From 375906294fb0f143f8627ab6eba1aed100e265a1 Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Wed, 24 Apr 2024 11:36:30 -0400 Subject: [PATCH 10/10] Show in grey instead of hiding when not applicable --- .../gatsby-site/src/templates/citeTemplate.js | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/site/gatsby-site/src/templates/citeTemplate.js b/site/gatsby-site/src/templates/citeTemplate.js index 139cdde419..2e99eae2d3 100644 --- a/site/gatsby-site/src/templates/citeTemplate.js +++ b/site/gatsby-site/src/templates/citeTemplate.js @@ -189,26 +189,30 @@ function CiteTemplate({ >

- {prevIncident && ( - - - - )} - {nextIncident && ( - - - - )} + + + + + +
)}