From 66d8f37c324fc82df49f1f1bf1931cd2d84f6c19 Mon Sep 17 00:00:00 2001 From: Rishi <148757583+rishirishhh@users.noreply.github.com> Date: Tue, 19 Nov 2024 01:13:38 +0530 Subject: [PATCH] fix: shimmer is applied to only those data that are loaded later (#916) --- .../extension-requests.test.js | 73 --------- extension-requests/script.js | 150 +++++------------- 2 files changed, 36 insertions(+), 187 deletions(-) diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js index b8d50c5e..f758b151 100644 --- a/__tests__/extension-requests/extension-requests.test.js +++ b/__tests__/extension-requests/extension-requests.test.js @@ -667,79 +667,6 @@ describe('Tests the Extension Requests Screen', () => { 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'); diff --git a/extension-requests/script.js b/extension-requests/script.js index dfe1818b..19d574c8 100644 --- a/extension-requests/script.js +++ b/extension-requests/script.js @@ -623,26 +623,16 @@ async function createExtensionCard(data, dev) { }); deadlineContainer.appendChild(deadlineText); - let deadlineValue; - if (dev) { - deadlineValue = createElement({ - type: 'span', - attributes: { - class: 'skeleton-span', - 'data-testid': 'skeleton-span', - }, - }); - } else { - deadlineValue = createElement({ - type: 'span', - innerText: `${deadlineDays}`, - attributes: { - class: `tooltip-container ${ - isDeadLineCrossed && isStatusPending ? 'red-text' : '' - }`, - }, - }); - } + const deadlineValue = createElement({ + type: 'span', + innerText: `${deadlineDays}`, + attributes: { + class: `tooltip-container ${ + isDeadLineCrossed && isStatusPending ? 'red-text' : '' + }`, + }, + }); + deadlineContainer.appendChild(deadlineValue); const deadlineTooltip = createElement({ type: 'span', @@ -662,24 +652,14 @@ async function createExtensionCard(data, dev) { }); requestedContainer.appendChild(requestedText); - let requestedValue; - if (dev) { - requestedValue = createElement({ - type: 'span', - attributes: { - class: 'skeleton-text', - 'data-testid': 'skeleton-text', - }, - }); - } else { - requestedValue = createElement({ - type: 'span', - attributes: { - class: `requested-day tooltip-container ${requestedDaysTextColor}`, - }, - innerText: `${requestedDaysAgo}`, - }); - } + const requestedValue = createElement({ + type: 'span', + attributes: { + class: `requested-day tooltip-container ${requestedDaysTextColor}`, + }, + innerText: ` ${requestedDaysAgo}`, + }); + const requestedToolTip = createElement({ type: 'span', attributes: { class: 'tooltip' }, @@ -744,19 +724,12 @@ async function createExtensionCard(data, dev) { }); newDeadlineContainer.appendChild(newDeadlineText); - let newDeadlineValue; - if (dev) { - newDeadlineValue = createElement({ - type: 'span', - attributes: { class: 'skeleton-span', 'data-testid': 'skeleton-span' }, - }); - } else { - newDeadlineValue = createElement({ - type: 'span', - attributes: { class: 'requested-day tooltip-container' }, - innerText: ` ${newDeadlineDays}`, - }); - } + const newDeadlineValue = createElement({ + type: 'span', + attributes: { class: 'requested-day tooltip-container' }, + innerText: ` ${newDeadlineDays}`, + }); + const newDeadlineToolTip = createElement({ type: 'span', attributes: { class: 'tooltip' }, @@ -776,19 +749,12 @@ async function createExtensionCard(data, dev) { }); extensionForContainer.appendChild(extensionForText); - let extensionForValue; - if (dev) { - extensionForValue = createElement({ - type: 'span', - attributes: { class: 'skeleton-span' }, - }); - } else { - extensionForValue = createElement({ - type: 'span', - attributes: { class: 'tooltip-container' }, - innerText: ` +${extensionDays}`, - }); - } + const extensionForValue = createElement({ + type: 'span', + attributes: { class: 'tooltip-container' }, + innerText: ` +${extensionDays}`, + }); + const extensionToolTip = createElement({ type: 'span', attributes: { class: 'tooltip' }, @@ -821,19 +787,12 @@ async function createExtensionCard(data, dev) { const requestNumber = data.requestNumber || 1; - let extensionRequestNumberValue; - if (dev) { - extensionRequestNumberValue = createElement({ - type: 'span', - attributes: { class: 'skeleton-span', 'data-testid': 'skeleton-span' }, - }); - } else { - extensionRequestNumberValue = createElement({ - type: 'span', - attributes: { class: 'extension-request-number' }, - innerText: `#${requestNumber}`, - }); - } + const extensionRequestNumberValue = createElement({ + type: 'span', + attributes: { class: 'extension-request-number' }, + innerText: `#${requestNumber}`, + }); + extensionRequestNumberContainer.appendChild(extensionRequestNumberValue); const cardAssigneeButtonContainer = createElement({ type: 'div', @@ -1330,44 +1289,7 @@ async function createExtensionCard(data, dev) { CommitedHoursContent.innerText = 'Missing'; CommitedHoursContent.classList.add('label-content-missing'); } - if (dev) { - deadlineValue.classList.remove('skeleton-span'); - deadlineValue.innerText = `${deadlineDays}`; - - deadlineValue.classList.add('tooltip-container'); - if (isDeadLineCrossed && isStatusPending) { - deadlineValue.classList.add('red-text'); - } - } - - if (dev) { - requestedValue.classList.remove('skeleton-text'); - requestedValue.innerText = `${requestedDaysAgo}`; - - requestedValue.classList.add( - 'requested-day', - 'tooltip-container', - requestedDaysTextColor, - ); - } - - if (dev) { - newDeadlineValue.classList.remove('skeleton-span'); - newDeadlineValue.innerText = ` ${newDeadlineDays}`; - newDeadlineValue.classList.add('requested-day', 'tooltip-container'); - } - if (dev) { - extensionForValue.classList.remove('skeleton-span'); - extensionForValue.innerText = ` +${extensionDays}`; - extensionForValue.classList.add('tooltip-container'); - } - - if (dev) { - extensionRequestNumberValue.classList.remove('skeleton-span'); - extensionRequestNumberValue.innerText = `#${requestNumber}`; - extensionRequestNumberValue.classList.add('extension-request-number'); - } if (!dev) { removeSpinner(); renderExtensionCreatedLog();