Fixing a profile dropdown behavior and added a chevron-down icon

Author: ZendeAditya

__tests__/navbar/navbar.test.js

@@ -15,6 +15,17 @@ describe('Tests the navbar and its components on various pages', () => {
 
     const navLinks = await navbarPage.$('.nav-links');
     expect(navLinks).toBeTruthy();
+
+    const devFlag = await navbarPage.evaluate(() => {
+      return new URLSearchParams(window.location.search).get('dev') === 'true';
+    });
+
+    const chevronIcon = await navbarPage.$('#chevron-down');
+    if (devFlag) {
+      expect(chevronIcon).toBeTruthy();
+    } else {
+      expect(chevronIcon).toBeFalsy();
+    }
   };
 
   beforeAll(async () => {
@@ -99,4 +110,49 @@ describe('Tests the navbar and its components on various pages', () => {
     await page.goto(`${LOCAL_TEST_PAGE_URL}/feed/index.html`);
     await testNavbar(page);
   });
+  it('should close the dropdown by clicking outside the dropdown under dev feature flag', async () => {
+    await page.goto(`${LOCAL_TEST_PAGE_URL}?dev=true`);
+
+    const userInfoHandle = await page.$('.user-info');
+    const dropdownHandle = await page.$('#dropdown');
+
+    expect(userInfoHandle).toBeTruthy();
+    expect(dropdownHandle).toBeTruthy();
+
+    await page.evaluate(() => {
+      const userInfo = document.querySelector('.user-info');
+      if (userInfo) {
+        userInfo.click();
+      }
+    });
+    await page.mouse.click(100, 100);
+    const dropdownIsActive = await dropdownHandle.evaluate((el) =>
+      el.classList.contains('active'),
+    );
+    expect(dropdownIsActive).toBe(false);
+  });
+  it('should keep the dropdown open when clicking outside when feature flag is off', async () => {
+    await page.goto(`${LOCAL_TEST_PAGE_URL}?dev=false`);
+    await page.waitForSelector('#dropdown');
+    await page.evaluate(() => {
+      const dropdown = document.getElementById('dropdown');
+      if (dropdown && !dropdown.classList.contains('active')) {
+        dropdown.classList.add('active');
+      }
+    });
+    let dropdownIsActive = await page.evaluate(() => {
+      const dropdown = document.getElementById('dropdown');
+      return dropdown?.classList.contains('active') ?? false;
+    });
+    expect(dropdownIsActive).toBe(true);
+    await page.evaluate(() => {
+      document.body.click();
+    });
+    await page.waitForTimeout(200);
+    const newDropdownHandle = await page.$('#dropdown');
+    const newDropdownIsActive = await newDropdownHandle.evaluate((el) =>
+      el.classList.contains('active'),
+    );
+    expect(newDropdownIsActive).toBe(true);
+  });
 });

images/chevron-down.svg

@@ -1,10 +1,15 @@
+const urlParams = new URLSearchParams(window.location.search);
+const devFlag = urlParams.get('dev') === 'true';
+const chevronIcon = devFlag
+  ? `<span><img id="chevron-down" src="images/chevron-down.svg" alt="chevron-down icon" /></span>`
+  : '';
 const addNavbartoPage = async () => {
   const navbar = document?.getElementById('tasksNav');
   const navbarParams = new URLSearchParams(window?.location?.search);
   navbar.innerHTML = `
         <div class="logo">
             <a href="/index.html">
-                <img src="/images/[email protected]" alt="logo" />
+                <img src="/images/[email protected]" alt="logo"  />
             </a>
         </div>
         <div class="nav-links">
@@ -31,6 +36,7 @@ const addNavbartoPage = async () => {
             <span>
             <img id="user-img" src="" alt="" />
             </span>
+              ${chevronIcon}
         </div>
         <div id="dropdown"></div>
     `;

navbar.global.js

@@ -1,3 +1,5 @@
+const urlParam = new URLSearchParams(window.location.search);
+const isDevFlag = urlParam.get('dev') === 'true';
 const DROPDOWN_OPTIONS = [
   {
     name: 'Home',
@@ -89,7 +91,16 @@ async function handleUserSignin() {
           dropdown.classList.add('active');
         }
       });
-
+      document.addEventListener('click', (event) => {
+        if (
+          isDevFlag &&
+          dropdown.classList.contains('active') &&
+          !dropdown.contains(event.target) &&
+          !userInfo.contains(event.target)
+        ) {
+          dropdown.classList.remove('active');
+        }
+      });
       signOutElement.addEventListener('click', () => {
         getSelfUser('/auth/signout');
       });