Repository: concord-consortium/collaborative-learning
Pull request #2556: CLUE-154 added test for log out and return to welcome screen
Author: login: nstclair-cc
Labels: name: run regression
Created: 2025-05-20T16:50:49Z | Merged: 2025-05-22T15:20:16Z

[CLUE-154](https://concord-consortium.atlassian.net/browse/CLUE-154)

This PR improves the Cypress test coverage for the standalone CLUE application by:
- Adding a logout test that verifies a user can log out and is returned to the welcome screen.
- Improving the StandaloneHelper and test logic to handle conditional UI states so that the dialog text is less brittle

[CLUE-154]: https://concord-consortium.atlassian.net/browse/CLUE-154?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/cypress/e2e/functional/standalone_tests/standalone_load_spec.js b/cypress/e2e/functional/standalone_tests/standalone_load_spec.js
index 095240d6a4..e256331da1 100644
--- a/cypress/e2e/functional/standalone_tests/standalone_load_spec.js
+++ b/cypress/e2e/functional/standalone_tests/standalone_load_spec.js
@@ -130,5 +130,18 @@ context('Standalone', () => {
       cy.wait(500); // Wait for any animations/resize operations to complete
       clueCanvas.deleteTile('text');
     });
+
+    it("should allow user to log out and return to welcome screen", () => {
+      // Visit the standalone page
+      standaloneHelper.visitStandalone("/standalone/?unit=msa");
+      standaloneHelper.startStandaloneSession();
+      standaloneHelper.selectOrCreateGroup(1);
+
+      // Verify we're logged in by checking for the user menu
+      cy.get("[data-test=user-header]").should("exist");
+
+      // Log out
+      standaloneHelper.logout();
+    });
   });
 });
diff --git a/cypress/support/elements/common/standalone-helper.js b/cypress/support/elements/common/standalone-helper.js
index af5f830eff..655035e127 100644
--- a/cypress/support/elements/common/standalone-helper.js
+++ b/cypress/support/elements/common/standalone-helper.js
@@ -10,32 +10,58 @@ class StandaloneHelper {
   }
 
   selectOrCreateGroup(groupNumber) {
-    // Wait for the group selection dialog and select Group 1
-    cy.get("[data-testid=group-select]", { timeout: 30000 }).should("exist");
+    // Only select a group if the group selection dialog is present
+    cy.get('body').then($body => {
+      if ($body.find('[data-testid=group-select]').length) {
+        cy.get('[data-testid=group-select]', { timeout: 30000 }).should('exist');
 
-    // Wait for the groups to be fully loaded
-    cy.get("[data-testid=existing-groups]", { timeout: 30000 }).should("exist").then($groups => {
-      // Store the group element if it exists
-      const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
+        // Wait for the groups to be fully loaded
+        cy.get('[data-testid=existing-groups]', { timeout: 30000 }).should('exist').then($groups => {
+          const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
 
-      if (group.length > 0) {
-        // If Group exists, click it using force option to handle any overlay issues
-        cy.get(`[data-testid=existing-group-${groupNumber}]`).should("exist").click({ force: true });
+          if (group.length > 0) {
+            cy.get(`[data-testid=existing-group-${groupNumber}]`).should('exist').click({ force: true });
+          } else {
+            cy.get('[data-testid=new-group-select]').should('exist').select(groupNumber.toString());
+            cy.get('[data-testid=create-group-button]').should('exist').click();
+          }
+        });
+
+        // Wait for the navigation dropdown to appear with a longer timeout
+        cy.get('[data-testid=problem-navigation-dropdown]', { timeout: 60000 }).should('exist');
       } else {
-        // If Group doesn't exist, create it
-        cy.get("[data-testid=new-group-select]").should("exist").select(groupNumber.toString());
-        cy.get("[data-testid=create-group-button]").should("exist").click();
+        cy.log('Group select dialog not present, continuing...');
       }
     });
-
-    // Wait for the navigation dropdown to appear with a longer timeout
-    cy.get("[data-testid=problem-navigation-dropdown]", { timeout: 60000 }).should("exist");
   }
 
   startStandaloneSession() {
     // Click "Get Started" to begin authentication
-    cy.get("[data-testid=standalone-welcome]", { timeout: 30000 }).should("exist");
-    cy.get("[data-testid=standalone-get-started-button]").click();
+    cy.get('[data-testid=standalone-welcome]', { timeout: 30000 }).should("exist");
+    cy.get('[data-testid=standalone-get-started-button]').click();
+  }
+
+  logout() {
+    // Click the user menu button
+    cy.get('[data-test=user-header]').should('exist').click();
+
+    // Click the logout button in the menu
+    cy.get('[data-test=user-list]').should('exist');
+    cy.get('[data-test=list-item-log-out]').should('exist').click();
+
+    // Handle the portal confirmation dialog
+    cy.origin('https://learn.portal.staging.concord.org', () => {
+      // Wait for the page to load
+      cy.get('body').should('exist');
+      // Click the Yes button using the exact selector
+      cy.get('input[name="confirm"]').click();
+    });
+
+    // Wait for redirect back to standalone page
+    cy.url().should('include', '/standalone/');
+
+    // Confirm the presence of the Get Started button
+    cy.get('[data-testid=standalone-get-started-button]').should('exist');
   }
 
   // Navigation helpers can be added here when CLUE-143 is completed


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR adds a logout test and enhances the standalone helper to handle conditional group-selection dialogs more robustly.

- Introduces a `logout` method in `StandaloneHelper` and a corresponding Cypress test
- Wraps group-selection logic in `selectOrCreateGroup` with a presence check to avoid brittle failures
- Logs and skips group-selection when the dialog isn't shown

### Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

| File                                                    | Description                                            |
| ------------------------------------------------------- | ------------------------------------------------------ |
| cypress/support/elements/common/standalone-helper.js    | Added conditional group-selection logic and a `logout` helper |
| cypress/e2e/functional/standalone_tests/standalone_load_spec.js | Added test case for logout and return to welcome screen |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T16:53:27Z
user: login: dougmartin
body: Looks good :+1: 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-22T10:35:41Z

Review comments:
diff_hunk: @@ -10,26 +10,29 @@ class StandaloneHelper {
   }
 
   selectOrCreateGroup(groupNumber) {
-    // Wait for the group selection dialog and select Group 1
-    cy.get("[data-testid=group-select]", { timeout: 30000 }).should("exist");
+    // Only select a group if the group selection dialog is present
+    cy.get('body').then($body => {
+      if ($body.find('[data-testid=group-select]').length) {
+        cy.get('[data-testid=group-select]', { timeout: 30000 }).should('exist');
 
-    // Wait for the groups to be fully loaded
-    cy.get("[data-testid=existing-groups]", { timeout: 30000 }).should("exist").then($groups => {
-      // Store the group element if it exists
-      const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
+        // Wait for the groups to be fully loaded
+        cy.get('[data-testid=existing-groups]', { timeout: 30000 }).should('exist').then($groups => {
+          const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
 
-      if (group.length > 0) {
-        // If Group exists, click it using force option to handle any overlay issues
-        cy.get(`[data-testid=existing-group-${groupNumber}]`).should("exist").click({ force: true });
+          if (group.length > 0) {
+            cy.get(`[data-testid=existing-group-${groupNumber}]`).should('exist').click({ force: true });
+          } else {
+            cy.get('[data-testid=new-group-select]').should('exist').select(groupNumber.toString());
+            cy.get('[data-testid=create-group-button]').should('exist').click();
+          }
+        });
+
+        // Wait for the navigation dropdown to appear with a longer timeout
+        cy.get('[data-testid=problem-navigation-dropdown]', { timeout: 60000 }).should('exist');
       } else {
-        // If Group doesn't exist, create it
-        cy.get("[data-testid=new-group-select]").should("exist").select(groupNumber.toString());
-        cy.get("[data-testid=create-group-button]").should("exist").click();
+        cy.log('Group select dialog not present, continuing...');
       }
     });
path: cypress/support/elements/common/standalone-helper.js
user: login: Copilot
body: The `else` branch in `selectOrCreateGroup` skips waiting for the problem navigation dropdown, which may cause timing issues when the group dialog isn't present. Consider moving the dropdown wait outside the conditional so it's always applied.
created_at: 2025-05-20T16:53:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -10,26 +10,29 @@ class StandaloneHelper {
   }
 
   selectOrCreateGroup(groupNumber) {
-    // Wait for the group selection dialog and select Group 1
-    cy.get("[data-testid=group-select]", { timeout: 30000 }).should("exist");
+    // Only select a group if the group selection dialog is present
+    cy.get('body').then($body => {
+      if ($body.find('[data-testid=group-select]').length) {
+        cy.get('[data-testid=group-select]', { timeout: 30000 }).should('exist');
 
-    // Wait for the groups to be fully loaded
-    cy.get("[data-testid=existing-groups]", { timeout: 30000 }).should("exist").then($groups => {
-      // Store the group element if it exists
-      const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
+        // Wait for the groups to be fully loaded
+        cy.get('[data-testid=existing-groups]', { timeout: 30000 }).should('exist').then($groups => {
+          const group = $groups.find(`[data-testid=existing-group-${groupNumber}]`);
 
-      if (group.length > 0) {
-        // If Group exists, click it using force option to handle any overlay issues
-        cy.get(`[data-testid=existing-group-${groupNumber}]`).should("exist").click({ force: true });
+          if (group.length > 0) {
+            cy.get(`[data-testid=existing-group-${groupNumber}]`).should('exist').click({ force: true });
+          } else {
+            cy.get('[data-testid=new-group-select]').should('exist').select(groupNumber.toString());
+            cy.get('[data-testid=create-group-button]').should('exist').click();
+          }
+        });
+
+        // Wait for the navigation dropdown to appear with a longer timeout
+        cy.get('[data-testid=problem-navigation-dropdown]', { timeout: 60000 }).should('exist');
path: cypress/support/elements/common/standalone-helper.js
user: login: Copilot
body: [nitpick] The project appears to use double quotes for selector strings elsewhere; consider standardizing on one quoting style (`"..."`) for consistency.
created_at: 2025-05-20T16:53:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -38,6 +41,29 @@ class StandaloneHelper {
     cy.get("[data-testid=standalone-get-started-button]").click();
   }
 
+  logout() {
+    // Click the user menu button
+    cy.get("[data-test=user-header]").should("exist").click();
+
+    // Click the logout button in the menu
+    cy.get("[data-test=user-list]").should("exist");
+    cy.get("[data-test=list-item-log-out]").should("exist").click();
path: cypress/support/elements/common/standalone-helper.js
user: login: Copilot
body: [nitpick] Most selectors in this helper use `data-testid`, but here `data-test` is used. For consistency and easier maintenance, align on a single attribute naming convention.
```suggestion
    cy.get("[data-testid=user-header]").should("exist").click();

    // Click the logout button in the menu
    cy.get("[data-testid=user-list]").should("exist");
    cy.get("[data-testid=list-item-log-out]").should("exist").click();
```
created_at: 2025-05-20T16:53:27Z
author_association: CONTRIBUTOR

PR comments:
user: login: codecov[bot]
created_at: 2025-05-20T16:52:34Z
body: ## [Codecov](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 86.85%. Comparing base [(`732b001`)](https://app.codecov.io/gh/concord-consortium/collaborative-learning/commit/732b00146b711ecb80f8808950b641404bc2fbc3?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) to head [(`5564878`)](https://app.codecov.io/gh/concord-consortium/collaborative-learning/commit/55648785ceb52e42c16ae335d6e5e07f86ad7a33?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium).
> Report is 4 commits behind head on master.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #2556      +/-   ##
==========================================
- Coverage   86.87%   86.85%   -0.02%     
==========================================
  Files         771      771              
  Lines       40874    40874              
  Branches    10391    10391              
==========================================
- Hits        35508    35502       -6     
- Misses       5059     5065       +6     
  Partials      307      307              
```

| [Flag](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) | Coverage Δ | |
|---|---|---|
| [cypress](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) | `?` | |
| [cypress-regression](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) | `79.11% <ø> (+0.01%)` | :arrow_up: |
| [cypress-smoke](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) | `28.43% <ø> (ø)` | |
| [jest](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium) | `47.96% <ø> (ø)` | |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium#carryforward-flags-in-the-pull-request-comment) to find out more.

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/concord-consortium/collaborative-learning/pull/2556?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=concord-consortium).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: cypress[bot]
created_at: 2025-05-20T16:53:45Z
body: 
<h3>
  <a href="https://cloud.cypress.io/projects/3pbqac?utm_source=github&utm_medium=PASSED&utm_campaign=project">collaborative-learning</a>&nbsp;
  <img src="https://assets.cypress.io/github-pr-comment-icons/chevron.svg" alt="" height="14" width="14" />&nbsp;
  <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">Run #15412</a>
</h3>

<details>
  <summary>
    <strong>Run Properties:</strong>&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="status check passed" height="10" width="10" />&nbsp;Passed&nbsp;<a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">#15412</a></code> &nbsp;&bull;&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/concord-consortium/collaborative-learning/commit/55648785ceb52e42c16ae335d6e5e07f86ad7a33">55648785ce</a>: Merge branch 'master' into CLUE-154-Automation-for-Add-confirm-logout-page-in-St...</code>
  </summary><br />

  <table width="744">
    <tbody>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Project</strong>
        </td>
        <td width="520">
          <code><a href="https://cloud.cypress.io/projects/3pbqac?utm_source=github&utm_medium=PASSED&utm_campaign=project">collaborative-learning</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Branch Review</strong>
        </th>
        <td>
          <code><a href="https://cloud.cypress.io/projects/3pbqac/branches/CLUE-154-Automation-for-Add-confirm-logout-page-in-Standalone-CLUE/review?utm_source=github&utm_medium=PASSED&utm_campaign=review%20changes&changeRequest=2556">CLUE-154-Automation-for-Add-confirm-logout-page-in-Standalone-CLUE</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run status</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="status check passed" height="10" width="10" />&nbsp;Passed&nbsp;<a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">#15412</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run duration</strong></td>
        <td><code>01m 44s</code></td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Commit</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/concord-consortium/collaborative-learning/commit/55648785ceb52e42c16ae335d6e5e07f86ad7a33">55648785ce</a>: Merge branch 'master' into CLUE-154-Automation-for-Add-confirm-logout-page-in-St...</code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Committer</strong></td>
        <td><code>Natalya St. Clair</code></td>
      </tr>
    </tbody>
    <tfoot>
      <tr />
      <tr height="48">
        <td colspan="2">
          <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/properties?utm_source=github&utm_medium=PASSED&utm_campaign=properties">View all properties for this run ↗︎</a>
        </td>
      </tr>
    </tfoot>
  </table>
  <hr />
</details>

<table width="744">
  <thead>
    <tr />
    <tr height="48">
      <th colspan="2" align="left" width="744">Test results</th>
    </tr>
  </thead>
  <tbody>
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="Tests that failed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?reviewViewBy=FAILED&utm_source=github&utm_medium=PASSED&utm_campaign=failed%20tests">
          <strong>Failures</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/flaky-v3.svg" alt="Tests that were flaky" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?reviewViewBy=FLAKY&utm_source=github&utm_medium=PASSED&utm_campaign=flaky%20tests">
          <strong>Flaky</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/pending.svg" alt="Tests that did not run due to a developer annotating a test with .skip" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/test-results?utm_source=github&utm_medium=PASSED&utm_campaign=pending%20tests&statuses=%5B%7B%22value%22%3A%22PENDING%22%2C%22label%22%3A%22PENDING%22%7D%5D">
          <strong>Pending</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/skipped-v3.svg" alt="Tests that did not run due to a failure in a mocha hook" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/test-results?utm_source=github&utm_medium=PASSED&utm_campaign=skipped%20tests&statuses=%5B%7B%22value%22%3A%22SKIPPED%22%2C%22label%22%3A%22SKIPPED%22%7D%5D">
          <strong>Skipped</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="Tests that passed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/3pbqac/runs/15412/overview?utm_source=github&utm_medium=PASSED&utm_campaign=passed%20tests">
          <strong>Passing</strong>
        </a>
      </td>
      <td>
        <code><strong>1</strong></code>
      </td>
    </tr><tfoot>
    <tr height="48"><td colspan="2"><a href="https://cloud.cypress.io/projects/3pbqac/branches/CLUE-154-Automation-for-Add-confirm-logout-page-in-Standalone-CLUE/review?utm_source=github&utm_medium=PASSED&utm_campaign=review%20changes&changeRequest=2556">View all changes introduced in this branch ↗︎</a></td></tr></tfoot>
  </tbody>
</table>






author_association: NONE