From 57409d3f3197a087030a29b336aa820c8d5462e6 Mon Sep 17 00:00:00 2001 From: Sebastian Urchs Date: Thu, 12 Sep 2024 16:55:10 -0400 Subject: [PATCH] [FIX] Always prompt login if auth is enabled (#277) * [FIX] Always prompt login if auth is enabled Fixes #276 * [REF] Let tests handle the auth dialogue Needs to be closed first, so it doesn't cover UI elements --- cypress/e2e/APIRequests.cy.ts | 20 +++++++++++++++++++ cypress/e2e/Alert.cy.ts | 5 +++++ cypress/e2e/Auth.cy.ts | 5 ++++- cypress/e2e/Checkbox.cy.ts | 5 +++++ cypress/e2e/Form.cy.ts | 37 ++++++++++++++++------------------- cypress/e2e/ResultsTSV.cy.ts | 25 +++++++++++++++++------ cypress/support/e2e.ts | 2 +- src/App.tsx | 2 +- 8 files changed, 72 insertions(+), 29 deletions(-) diff --git a/cypress/e2e/APIRequests.cy.ts b/cypress/e2e/APIRequests.cy.ts index 061001f8..a2babdb7 100644 --- a/cypress/e2e/APIRequests.cy.ts +++ b/cypress/e2e/APIRequests.cy.ts @@ -185,6 +185,11 @@ describe('Successful API query requests', () => { ).as('getAssessmentToolOptions'); cy.visit('/'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); }); it('Intercepts the request sent to the API and asserts over the request url', () => { cy.get('[data-cy="Minimum age-continuous-field"]').type('10'); @@ -230,6 +235,11 @@ describe('Regression Tests', () => { cy.visit('/'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); cy.get('[data-cy="Diagnosis-categorical-field"]').type('parkin{downarrow}{enter}'); cy.get('[data-cy="Diagnosis-categorical-field"] input').should( @@ -275,6 +285,11 @@ describe('Partially successful API query requests', () => { cy.visit('/'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); }); it('Shows a warning for nodes that failed to return any results', () => { cy.get('[data-cy="submit-query-button"]').click(); @@ -321,6 +336,11 @@ describe('Failed API query requests', () => { cy.visit('/'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); }); it('Shows an error toast and does not display results for a completely failed ', () => { cy.get('[data-cy="submit-query-button"]').click(); diff --git a/cypress/e2e/Alert.cy.ts b/cypress/e2e/Alert.cy.ts index fea1ab1a..2b9c51ce 100644 --- a/cypress/e2e/Alert.cy.ts +++ b/cypress/e2e/Alert.cy.ts @@ -29,6 +29,11 @@ describe('Alert', () => { ).as('getAssessmentToolOptions'); cy.visit('/?node=All'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); // We need to wait for the fetch to complete and populate the // dropdown with nodes before searching for OpenNeuro diff --git a/cypress/e2e/Auth.cy.ts b/cypress/e2e/Auth.cy.ts index 623d2010..5c694d6d 100644 --- a/cypress/e2e/Auth.cy.ts +++ b/cypress/e2e/Auth.cy.ts @@ -1,12 +1,15 @@ describe('Authentication flow', () => { - it('Auth dialog is not visible by default and user is not logged in', () => { + it('Auth dialog is visible by default and user is not logged in', () => { cy.visit('/'); + cy.get('[data-cy="auth-dialog"]').should('exist'); + cy.get('[data-cy="close-auth-dialog-button"]').click(); cy.get('[data-cy="auth-dialog"]').should('not.exist'); cy.get('.MuiAvatar-root').click(); cy.get('[data-cy="login-button"]').should('exist'); }); it('Auth dialog can be opened and closed', () => { cy.visit('/'); + cy.get('[data-cy="close-auth-dialog-button"]').click(); cy.get('.MuiAvatar-root').click(); cy.get('[data-cy="login-button"]').click(); cy.get('[data-cy="auth-dialog"]').should('be.visible'); diff --git a/cypress/e2e/Checkbox.cy.ts b/cypress/e2e/Checkbox.cy.ts index 51471b22..f57b3a24 100644 --- a/cypress/e2e/Checkbox.cy.ts +++ b/cypress/e2e/Checkbox.cy.ts @@ -31,6 +31,11 @@ describe('Dataset result checkbox', () => { ).as('getAssessmentToolOptions'); cy.visit('/'); cy.wait(['@getNodes', '@getDiagnosisOptions', '@getAssessmentToolOptions']); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); let isFirstClick = true; diff --git a/cypress/e2e/Form.cy.ts b/cypress/e2e/Form.cy.ts index b7d3492c..baf0c8d1 100644 --- a/cypress/e2e/Form.cy.ts +++ b/cypress/e2e/Form.cy.ts @@ -1,8 +1,24 @@ import { diagnosisOptions } from '../fixtures/mocked-responses'; describe('App', () => { - it('Validates input to continuous field, displays the appropriate error, and disables the submit query button', () => { + beforeEach(() => { + cy.intercept( + { + method: 'GET', + url: '/attributes/nb:Diagnosis', + }, + diagnosisOptions + ).as('getDiagnosisOptions'); cy.visit('/'); + cy.wait('@getDiagnosisOptions'); + + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); + }); + it('Validates input to continuous field, displays the appropriate error, and disables the submit query button', () => { cy.get('[data-cy="submit-query-button"]').should('not.be.disabled'); cy.get('[data-cy="Minimum age-continuous-field"]').type('some text'); cy.get('[data-cy="Minimum age-continuous-field"] p') @@ -20,16 +36,6 @@ describe('App', () => { }); it('Displays the diagnosis options it retrieves from a node API', () => { - cy.intercept( - { - method: 'GET', - url: '/attributes/nb:Diagnosis', - }, - diagnosisOptions - ).as('getDiagnosisOptions'); - cy.visit('/'); - cy.wait('@getDiagnosisOptions'); - cy.get('[data-cy="Diagnosis-categorical-field"] input').should('not.be.disabled'); cy.get('[data-cy="Diagnosis-categorical-field"]').type('parkin{downarrow}{enter}'); cy.get('[data-cy="Diagnosis-categorical-field"] input').should( @@ -39,15 +45,6 @@ describe('App', () => { }); it('Disables the diagnosis field if healthy control checkbox is checked', () => { - cy.intercept( - { - method: 'GET', - url: '/attributes/nb:Diagnosis', - }, - diagnosisOptions - ).as('getDiagnosisOptions'); - cy.visit('/'); - cy.wait('@getDiagnosisOptions'); cy.get('[data-cy="Diagnosis-categorical-field"] input').should('not.be.disabled'); cy.get('[data-cy="Diagnosis-categorical-field"]').type('parkin{downarrow}{enter}'); cy.get('[data-cy="Diagnosis-categorical-field"] input').should( diff --git a/cypress/e2e/ResultsTSV.cy.ts b/cypress/e2e/ResultsTSV.cy.ts index 19de85c1..e5b4720f 100644 --- a/cypress/e2e/ResultsTSV.cy.ts +++ b/cypress/e2e/ResultsTSV.cy.ts @@ -1,9 +1,18 @@ import { mixedResponse, unprotectedResponse } from '../fixtures/mocked-responses'; describe('Results TSV', () => { - it('Removes a newline character from a dataset name in the downloaded dataset-level results file', () => { - cy.intercept('query?*', mixedResponse).as('call'); + beforeEach(() => { + cy.intercept('GET', 'query*', (req) => { + req.reply(mixedResponse); + }).as('call'); cy.visit('/'); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); + }); + it('Removes a newline character from a dataset name in the downloaded dataset-level results file', () => { cy.get('[data-cy="submit-query-button"]').click(); cy.wait('@call'); cy.get('[data-cy="select-all-checkbox"]').find('input').check(); @@ -11,8 +20,6 @@ describe('Results TSV', () => { cy.readFile('cypress/downloads/dataset-level-results.tsv').should('contain', 'some cool name'); }); it('Removes the unwanted whitespace from the downloaded results files', () => { - cy.intercept('query?*', mixedResponse).as('call'); - cy.visit('/'); cy.get('[data-cy="submit-query-button"]').click(); cy.wait('@call'); cy.get('[data-cy="select-all-checkbox"]').find('input').check(); @@ -26,8 +33,6 @@ describe('Results TSV', () => { }); }); it('Checks whether the protected and unprotected datasets are correctly identified', () => { - cy.intercept('query?*', mixedResponse).as('call'); - cy.visit('/'); cy.get('[data-cy="submit-query-button"]').click(); cy.wait('@call'); cy.get('[data-cy="select-all-checkbox"]').find('input').check(); @@ -43,9 +48,17 @@ describe('Results TSV', () => { expect(datasetNotProtected.split('\t')[8]).to.equal('/ds004116/sub-300101'); }); }); +}); +describe('Unprotected response', () => { it('Checks whether the rows in the participant.tsv file generated according to session_type', () => { cy.intercept('query?*', unprotectedResponse).as('call'); cy.visit('/'); + // TODO: remove this + // Bit of a hacky way to close the auth dialog + // But we need to do it until we make auth an always-on feature + // Because the auth dialog will overlap a lot of the UI and thus fail the tests + cy.get('[data-cy="close-auth-dialog-button"]').click(); + cy.get('[data-cy="submit-query-button"]').click(); cy.wait('@call'); cy.get('[data-cy="select-all-checkbox"]').find('input').check(); diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index 598ab5f0..753201dd 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -17,4 +17,4 @@ import './commands'; // Alternatively you can use CommonJS syntax: -// require('./commands') +// require('./commands'); diff --git a/src/App.tsx b/src/App.tsx index 7114dac3..011a38d7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,7 +49,7 @@ function App() { const [searchParams, setSearchParams] = useSearchParams(); const [isLoggedIn, setIsLoggedIn] = useState(false); - const [openAuthDialog, setOpenAuthDialog] = useState(false); + const [openAuthDialog, setOpenAuthDialog] = useState(true); const [name, setName] = useState(''); const [profilePic, setProfilePic] = useState(''); const [IDToken, setIDToken] = useState('');