fix(#9732): infinite loop on privacy policy page (#9733)

Fixes Navigation Issue with Back Buttons on Privacy Policy Page This fix addresses the navigation issue observed on the Privacy Policy page where clicking the bottom back button first leads to an infinite loop between the top and bottom of the page. Specifically: When accessing the Privacy Policy from the login page, clicking the bottom back button first would scroll the page to the top. The top back button, when clicked after this, would return the user to the bottom, and vice versa, creating an endless loop. Changes Made: Adjusted the event listeners to ensure that the back button consistently takes the user back to the login page, without causing an infinite loop between the top and bottom of the Privacy Policy page. The top back button now returns to the login page as expected when clicked, regardless of whether the bottom or top button is clicked first. #9732
medic · Jan 29, 2025 · 8e6ed11 · 8e6ed11
1 parent 2c5a640
commit 8e6ed11
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 10 deletions.
diff --git a/api/src/public/privacy-policy/script.js b/api/src/public/privacy-policy/script.js
@@ -1,8 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
-  const backButton = document.getElementById('back-button');
-  if (backButton) {
-    backButton.addEventListener('click', function() {
-      history.go(-1);
-    }, false);
-  }
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.back-button').forEach(button => {
+    button.addEventListener('click', () => window.history.back());
+  });
 });
diff --git a/api/src/templates/privacy-policy/index.html b/api/src/templates/privacy-policy/index.html
@@ -27,20 +27,20 @@
   <body>
     <div>
       <% if(showBackButton) { %>
-      <a id="back-button" href="#">{{ translations.back }}</a>
+      <a class="back-button" href="#">{{ translations.back }}</a>
       <% } else { %>
       <a href="/">{{ translations.login }}</a>
       <% } %>
     </div>
     <div>
       <h1>{{ translations.title }}</h1>
     </div>
-    <div>
+    <div id="privacy-policy-content">
       {{ policy }}
     </div>
     <div>
       <% if(showBackButton) { %>
-      <a id="back-button" href="#">{{ translations.back }}</a>
+      <a class="back-button" href="#">{{ translations.back }}</a>
       <% } else { %>
       <a href="/">{{ translations.login }}</a>
       <% } %>

diff --git a/tests/e2e/default/privacy-policy/login-privacy-policy.wdio-spec.js b/tests/e2e/default/privacy-policy/login-privacy-policy.wdio-spec.js
@@ -0,0 +1,56 @@
+const utils = require('@utils');
+const commonPage = require('@page-objects/default/common/common.wdio.page.js');
+const privacyPolicyFactory = require('@factories/cht/settings/privacy-policy');
+const loginPage = require('@page-objects/default/login/login.wdio.page');
+const loginPrivacyPolicyPage = require('@page-objects/default/privacy-policy/login-privacy-policy.wdio.page');
+
+describe('Privacy Policy Navigation for Unauthenticated Users', () => {
+  const privacyPolicy = privacyPolicyFactory.privacyPolicy().build();
+
+  afterEach(async () => {
+    await utils.deleteAllDocs();
+  });
+
+  it('should not display privacy policy page when the privacy policy is not enabled', async () => {
+    await commonPage.reloadSession();
+
+    // Assert: privacy policy link is not available on the login page
+    const privacyPolicyLink = await loginPage.privacyPolicyPageLink();
+    expect(await privacyPolicyLink.isDisplayed()).to.equal(false);
+  });
+
+  it('should navigate back to the login page when using either back button', async () => {
+    await utils.saveDocs([privacyPolicy]);
+    await commonPage.reloadSession();
+
+    // Navigate to privacy policy page
+    await loginPage.goToPrivacyPolicyPage();
+    const privacyContent = await loginPrivacyPolicyPage.privacyContent();
+    expect(await privacyContent.isDisplayed()).to.equal(true);
+
+    // Test navigation using both back buttons
+    const testBackButton = async (backButtonType) => {
+      let backButton;
+
+      if (backButtonType === 'top') {
+        backButton = await loginPrivacyPolicyPage.topBackButton();
+      } else if (backButtonType === 'bottom') {
+        await loginPrivacyPolicyPage.scrollToBottom();
+        backButton = await loginPrivacyPolicyPage.bottomBackButton();
+      }
+
+      // Click the back button
+      await loginPrivacyPolicyPage.goBackToLoginPage(backButton);
+
+      // Assert: back button redirects to the login page
+      expect((await browser.getUrl()).includes('/medic/login')).to.be.true;
+
+      // Navigate back to the privacy policy page for the next iteration
+      await loginPage.goToPrivacyPolicyPage();
+    };
+
+    // Run tests for both buttons
+    await testBackButton('top');
+    await testBackButton('bottom');
+  });
+});
diff --git a/tests/page-objects/default/login/login.wdio.page.js b/tests/page-objects/default/login/login.wdio.page.js
@@ -11,6 +11,7 @@ const labelForPassword = () => $('label[for="password"]');
 const errorMessageField = () => $('p.error.incorrect');
 const localeByName = (locale) => $(`.locale[name="${locale}"]`);
 const tokenLoginError = (reason) => $(`.error.${reason}`);
+const privacyPolicyPageLink = () => $('a[translate="privacy.policy"]');
 
 const getErrorMessage = async () => {
   await (await errorMessageField()).waitForDisplayed();
@@ -133,6 +134,10 @@ const setPasswordValue = async (password) => {
   await (await passwordField()).setValue(password);
 };
 
+const goToPrivacyPolicyPage = async () => {
+  await (await privacyPolicyPageLink()).click();
+};
+
 module.exports = {
   login,
   cookieLogin,
@@ -147,4 +152,6 @@ module.exports = {
   getErrorMessage,
   togglePassword,
   setPasswordValue,
+  privacyPolicyPageLink,
+  goToPrivacyPolicyPage
 };
diff --git a/tests/page-objects/default/privacy-policy/login-privacy-policy.wdio.page.js b/tests/page-objects/default/privacy-policy/login-privacy-policy.wdio.page.js
@@ -0,0 +1,26 @@
+const privacyContent = () => $('#privacy-policy-content');
+const backButtons = () => $$('a.back-button');
+
+const topBackButton = async () => {
+  return (await backButtons())[0];
+};
+
+const bottomBackButton = async () => {
+  return (await backButtons())[1];
+};
+
+const scrollToBottom = async () => {
+  await (await bottomBackButton()).scrollIntoView();
+};
+
+const goBackToLoginPage = async (backButton) => {
+  await (backButton).click();
+};
+
+module.exports = {
+  privacyContent,
+  topBackButton,
+  bottomBackButton,
+  scrollToBottom,
+  goBackToLoginPage
+};