[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

@@ -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();

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

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');

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;
 

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(

cypress/e2e/ResultsTSV.cy.ts

@@ -1,18 +1,25 @@
 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();
     cy.get('[data-cy="dataset-level-download-results-button"]').click();
     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();

cypress/support/e2e.ts

@@ -17,4 +17,4 @@
 import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands');

src/App.tsx

@@ -49,7 +49,7 @@ function App() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const [openAuthDialog, setOpenAuthDialog] = useState(false);
+  const [openAuthDialog, setOpenAuthDialog] = useState(true);
   const [name, setName] = useState<string>('');
   const [profilePic, setProfilePic] = useState<string>('');
   const [IDToken, setIDToken] = useState<string | undefined>('');