Merge branch 'feat/filter' into renovate/extension-task-cards

__tests__/home/home.test.js

@@ -0,0 +1,159 @@
+const puppeteer = require('puppeteer');
+
+describe('Home Page', () => {
+  let browser;
+  let page;
+  jest.setTimeout(60000);
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      ignoreHTTPSErrors: true,
+      args: ['--incognito', '--disable-web-security'],
+      devtools: false,
+    });
+    page = await browser.newPage();
+
+    await page.goto('http://localhost:8000/');
+    await page.waitForNetworkIdle();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('should display the Sync Users Status button', async () => {
+    const syncUsersStatusButton = await page.$('#sync-users-status');
+    expect(syncUsersStatusButton).toBeTruthy();
+
+    const spinnerInsideSyncUsersStatus = await syncUsersStatusButton.$(
+      '.spinner',
+    );
+    expect(spinnerInsideSyncUsersStatus).toBeTruthy();
+
+    const syncUsersStatusUpdate = await page.$('#sync-users-status-update');
+    expect(syncUsersStatusUpdate).toBeTruthy();
+  });
+
+  it('should display the Sync External Accounts button', async () => {
+    const syncExternalAccountsButton = await page.$('#sync-external-accounts');
+    expect(syncExternalAccountsButton).toBeTruthy();
+
+    const spinnerInsideSyncExternalAccounts =
+      await syncExternalAccountsButton.$('.spinner');
+    expect(spinnerInsideSyncExternalAccounts).toBeTruthy();
+
+    const syncExternalAccountsUpdate = await page.$(
+      '#sync-external-accounts-update',
+    );
+    expect(syncExternalAccountsUpdate).toBeTruthy();
+  });
+
+  it('should display the Sync Unverified Users button', async () => {
+    const syncUnverifiedUsersButton = await page.$('#sync-unverified-users');
+    expect(syncUnverifiedUsersButton).toBeTruthy();
+
+    const spinnerInsideSyncUnverifiedUsers = await syncUnverifiedUsersButton.$(
+      '.spinner',
+    );
+    expect(spinnerInsideSyncUnverifiedUsers).toBeTruthy();
+
+    const syncUnverifiedUsersUpdate = await page.$(
+      '#sync-unverified-users-update',
+    );
+    expect(syncUnverifiedUsersUpdate).toBeTruthy();
+  });
+
+  it('should display the Create Goals anchor button', async () => {
+    const createGoalsButton = await page.$('#create-goal');
+    expect(createGoalsButton).toBeTruthy();
+  });
+
+  it('should display the Discord Users anchor button', async () => {
+    const discordUsersButton = await page.$('#discord-user-link');
+    expect(discordUsersButton).toBeTruthy();
+    const discordUsersButtonHref = await page.evaluate(
+      (el) => el.getAttribute('href'),
+      discordUsersButton,
+    );
+    expect(discordUsersButtonHref).toBe('/users/discord/index.html');
+    const discordUsersButtonText = await page.evaluate(
+      (el) => el.innerText,
+      discordUsersButton,
+    );
+    const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
+    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
+  });
+
+  it('should display the User Management anchor button', async () => {
+    const userManagementButton = await page.$('#user-management-link');
+    expect(userManagementButton).toBeTruthy();
+    const userManagementButtonHref = await page.evaluate(
+      (el) => el.getAttribute('href'),
+      userManagementButton,
+    );
+    expect(userManagementButtonHref).toBe('/users/index.html');
+    const userManagementButtonText = await page.evaluate(
+      (el) => el.innerText,
+      userManagementButton,
+    );
+    const trimmedUserManagementButtonText = userManagementButtonText.trim();
+    expect(trimmedUserManagementButtonText).toBe('User Management');
+  });
+
+  it('should display the Sync Repo button', async () => {
+    const syncRepoButton = await page.$('#repo-sync-button');
+    expect(syncRepoButton).toBeTruthy();
+
+    const spinnerInsideSyncRepo = await syncRepoButton.$('.spinner');
+    expect(spinnerInsideSyncRepo).toBeTruthy();
+
+    const syncRepoStatusUpdate = await page.$('#sync-repo-status-update');
+    expect(syncRepoStatusUpdate).toBeTruthy();
+
+    const toast = await page.$('#toast');
+    expect(toast).toBeTruthy();
+
+    await page.evaluate(() => {
+      document.querySelector('#repo-sync-button').click();
+    });
+    await page.waitForSelector('#toast');
+    const toastVisibility = await page.waitForFunction(() => {
+      const toast = document.querySelector('#toast');
+      const toastStyle = window.getComputedStyle(toast);
+      return toastStyle && toastStyle.getPropertyValue('display') !== 'none';
+    });
+    expect(toastVisibility).toBeTruthy();
+  });
+
+  it('should display the footer with the correct repo link', async () => {
+    const footer = await page.$('footer');
+    expect(footer).toBeTruthy();
+
+    const infoRepo = await footer.$('.info-repo');
+    expect(infoRepo).toBeTruthy();
+
+    const repoLink = await infoRepo.$('a');
+    expect(repoLink).toBeTruthy();
+
+    const repoLinkHref = await page.evaluate((el) => el.href, repoLink);
+    expect(repoLinkHref).toBe(
+      'https://github.com/Real-Dev-Squad/website-dashboard',
+    );
+
+    const repoLinkTarget = await page.evaluate((el) => el.target, repoLink);
+    expect(repoLinkTarget).toBe('_blank');
+
+    const repoLinkRel = await page.evaluate((el) => el.rel, repoLink);
+    expect(repoLinkRel).toBe('noopener noreferrer');
+
+    const repoLinkText = await page.evaluate((el) => el.innerText, repoLink);
+    expect(repoLinkText).toBe('open sourced repo');
+
+    const repoLinkClass = await page.evaluate((el) => el.className, repoLink);
+    expect(repoLinkClass).toBe('');
+
+    const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
+    expect(repoLinkStyle).toBeTruthy();
+  });
+});

constants.js

@@ -1,10 +1,13 @@
 const API_BASE_URL = 'https://api.realdevsquad.com';
+const REPO_SYNC_API_URL =
+  'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
 const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
 const SYNC_USERS_STATUS = 'sync-users-status';
 const SYNC_EXTERNAL_ACCOUNTS = 'sync-external-accounts';
 const SYNC_UNVERIFIED_USERS = 'sync-unverified-users';
 const SYNC_USERS_STATUS_UPDATE = 'sync-users-status-update';
+const SYNC_REPO_STATUS_UPDATE = 'sync-repo-status-update';
 const SYNC_EXTERNAL_ACCOUNTS_UPDATE = 'sync-external-accounts-update';
 const SYNC_UNVERIFIED_USERS_UPDATE = 'sync-unverified-users-update';
 const SYNC_IN_PROGRESS = 'Last Sync: In progress';

extension-requests/constants.js

@@ -4,6 +4,7 @@ const DOWN_ARROW_ICON = '/images/chevron-down.svg';
 const CHECK_ICON = '/images/check-icon.svg';
 const CANCEL_ICON = '/images/x-icon.svg';
 const EDIT_ICON = '/images/edit-icon.svg';
+const ERROR_MESSAGE_RELOAD = 'Something went wrong, Please reload';
 
 const taskInfoModelHeadings = [
   { title: 'Title' },

extension-requests/index.html

@@ -105,11 +105,7 @@ <h1>Extension Requests</h1>
       <button id="filter-button" class="filter-button">
         <span class="filter-text">Filters</span>
 
-        <img
-          class="funnel-icon"
-          src="../users/images/funnel.svg"
-          alt="funnel icon"
-        />
+        <img class="funnel-icon" src="/images/funnel.svg" alt="funnel icon" />
       </button>
       <div class="filter-modal hidden">
         <div class="filter-head">

extension-requests/script.js

@@ -105,7 +105,7 @@ async function populateExtensionRequests(query = {}) {
       });
     }
   } catch (error) {
-    errorHeading.textContent = 'Something went wrong, Please reload';
+    errorHeading.textContent = ERROR_MESSAGE_RELOAD;
     errorHeading.classList.add('error-visible');
   } finally {
     removeLoader('loader');

extension-requests/style.css

@@ -523,7 +523,7 @@ body {
   width: 20%;
   min-width: 15rem;
   border: 1px solid var(--light-gray-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 0 10px var(--black-transparent);
   border-radius: 0.31rem;
   display: flex;
   flex-direction: column;

index.html

@@ -20,11 +20,11 @@
 
     <section id="sync-buttons" class="element-display-remove">
       <div class="button-container">
-        <button class="action-button" id="sync-users-status">
+        <button class="action-button" id="sync-unverified-users">
           <span class="spinner"></span>
-          Sync Users Status
+          Sync Unverified Users
         </button>
-        <div class="status" id="sync-users-status-update"></div>
+        <div class="status" id="sync-unverified-users-update"></div>
       </div>
 
       <div class="button-container">
@@ -36,11 +36,11 @@
       </div>
 
       <div class="button-container">
-        <button class="action-button" id="sync-unverified-users">
+        <button class="action-button" id="sync-users-status">
           <span class="spinner"></span>
-          Sync Unverified Users
+          Sync Users Status
         </button>
-        <div class="status" id="sync-unverified-users-update"></div>
+        <div class="status" id="sync-users-status-update"></div>
       </div>
     </section>
 
@@ -54,6 +54,13 @@
       </a>
       <a class="action-button" href="/task/index.html"> Create Tasks </a>
       <a class="action-button" href="/profile/index.html"> Profile </a>
+      <a
+        id="discord-user-link"
+        class="action-button"
+        href="/users/discord/index.html"
+      >
+        Discord Users
+      </a>
       <a
         id="user-management-link"
         class="element-display-remove action-button"
@@ -73,6 +80,17 @@
       </a>
       <a class="action-button" href="/groups/index.html"> Discord Groups </a>
       <a class="action-button" href="/standup/index.html"> Standup Updates</a>
+      <div class="button-container element-display-remove" id="sync-repo-div">
+        <button id="repo-sync-button" class="action-button">
+          <span class="spinner"></span>
+          Sync Repo
+        </button>
+        <div class="status" id="sync-repo-status-update"></div>
+        <div id="toast" class="hidden">
+          <div class="message"></div>
+          <div class="progress-bar"></div>
+        </div>
+      </div>
     </section>
 
     <footer>