Skip to content

Commit

Permalink
fix: shimmer is applied to only those data that are loaded later (Rea…
Browse files Browse the repository at this point in the history 
…l-Dev-Squad#916)
  • Loading branch information
@rishirishhh @sunilk429
rishirishhh authored and sunilk429 committed Nov 20, 2024
1 parent cacd6f6 commit cb84204
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 187 deletions.
73 changes: 0 additions & 73 deletions __tests__/extension-requests/extension-requests.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down
150 changes: 36 additions & 114 deletions extension-requests/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' },
Expand Down Expand Up @@ -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' },
Expand All @@ -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' },
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit cb84204

Please sign in to comment.