Dev To Main Sync

__tests__/applications/applications.test.js

@@ -295,4 +295,35 @@ describe('Applications page', () => {
     );
     await page.waitForNetworkIdle();
   });
+
+  it('should display the footer with the correct repo link', async () => {
+    const footer = await page.$('[data-test-id="footer"]');
+    expect(footer).toBeTruthy();
+
+    const infoRepo = await footer.$('[data-test-id="info-repo"]');
+    expect(infoRepo).toBeTruthy();
+
+    const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
+    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();
+  });
 });

__tests__/extension-requests/extension-requests.test.js

@@ -640,6 +640,106 @@ describe('Tests the Extension Requests Screen', () => {
     expect(cardCount === 3 || cardCount === 7).toBe(true);
   });
 
+  it('checks whether the shimmer effect is visible under dev flag only for the assignee image element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const assignImageSelector = await page.$$(
+      '[data-testid="assignee-image skeleton"]',
+    );
+    expect(assignImageSelector).toBeTruthy();
+
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.assignee-image', (el) =>
+      el.classList.contains('skeleton'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the assignee name element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const assignNameSelector = await page.$$(
+      '[data-testid="assignee-name skeleton-text"]',
+    );
+    expect(assignNameSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.assignee-name', (el) =>
+      el.classList.contains('skeleton-text'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is working for deadlineValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const deadlineValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(deadlineValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.tooltip-container', (el) =>
+      el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is working for requestedValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const requestedValueSelector = await page.$$(
+      '[data-testid="skeleton-text"]',
+    );
+    expect(requestedValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
+      el.classList.contains('skeleton-text'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+  it('checks whether the shimmer effect is working for newDeadlineValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const newDeadlineValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(newDeadlineValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
+      el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is working for extensionRequestNumberValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const extensionRequestNumberValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(extensionRequestNumberValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval(
+      '.extension-request-number',
+      (el) => el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the statusSiteLink element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const statusSiteLinkSelector = await page.$$(
+      '[data-testid="external-link skeleton-link"]',
+    );
+    expect(statusSiteLinkSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.external-link', (el) =>
+      el.classList.contains('skeleton-link'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the taskStatusValue element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const taskStatusValueElement = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(taskStatusValueElement).toBeTruthy();
+  });
+
   it('Checks whether the card is not removed from display when api call is unsuccessful', async () => {
     const extensionCards = await page.$$('.extension-card');
 

__tests__/groups/group.test.js

@@ -266,4 +266,35 @@ describe('Discord Groups Page', () => {
 
     expect(noGroupDiv).toBeTruthy();
   });
+
+  it('should display the footer with the correct repo link', async () => {
+    const footer = await page.$('[data-test-id="footer"]');
+    expect(footer).toBeTruthy();
+
+    const infoRepo = await footer.$('[data-test-id="info-repo"]');
+    expect(infoRepo).toBeTruthy();
+
+    const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
+    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();
+  });
 });

__tests__/users/App.test.js

@@ -6,7 +6,7 @@ const API_BASE_URL = 'https://staging-api.realdevsquad.com';
 describe('App Component', () => {
   let browser;
   let page;
-  jest.setTimeout(60000);
+  jest.setTimeout(90000);
   let config = {
     launchOptions: {
       headless: 'new',
@@ -68,6 +68,11 @@ describe('App Component', () => {
   });
 
   it('should render all sections', async () => {
+    await page.waitForSelector('.tabs_section');
+    await page.waitForSelector('.users_section');
+    await page.waitForSelector('.user_card');
+    await page.waitForSelector('.user_details_section');
+
     let tabsSection = await page.$('.tabs_section');
     let usersSection = await page.$('.users_section');
     let firstUser = await page.$('.user_card');
@@ -82,6 +87,8 @@ describe('App Component', () => {
   });
 
   it('should update the URL query string and re-render the app', async () => {
+    await page.waitForSelector('[data_key="verified"]');
+
     // Click on the "Linked Accounts" tab
     await page.click('[data_key="verified"]');
 

applications/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/applications/style.css" />
+    <link rel="stylesheet" href="../global.css" />
     <script type="module" src="/applications/script.js" defer></script>
     <script src="/helpers/loadENV.js"></script>
     <title>Applications</title>
@@ -121,5 +122,11 @@ <h2>Status</h2>
       <div class="loader hidden">Loading...</div>
       <div id="page_bottom_element"></div>
     </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        loadFooter();
+      });
+    </script>
+    <script src="../footer/footerComponent.js"></script>
   </body>
 </html>