Skip to content

Commit

Permalink
added uniform design to the card
Browse files Browse the repository at this point in the history
  • Loading branch information
@rishirishhh
rishirishhh committed Oct 15, 2024
1 parent adc1fdf commit 121b375
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 31 deletions.
52 changes: 52 additions & 0 deletions __tests__/extension-requests/extension-requests.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -667,6 +667,58 @@ 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.$$(
Expand Down
148 changes: 117 additions & 31 deletions extension-requests/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -622,15 +622,27 @@ async function createExtensionCard(data, dev) {
innerText: `Deadline${isDeadLineCrossed ? ' ' : ' in '}`,
});
deadlineContainer.appendChild(deadlineText);
const deadlineValue = createElement({
type: 'span',
innerText: `${deadlineDays}`,
attributes: {
class: `tooltip-container ${
isDeadLineCrossed && isStatusPending ? 'red-text' : ''
}`,
},
});

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' : ''
}`,
},
});
}
deadlineContainer.appendChild(deadlineValue);
const deadlineTooltip = createElement({
type: 'span',
Expand All @@ -649,13 +661,25 @@ async function createExtensionCard(data, dev) {
innerText: 'Requested ',
});
requestedContainer.appendChild(requestedText);
const requestedValue = createElement({
type: 'span',
attributes: {
class: `requested-day tooltip-container ${requestedDaysTextColor}`,
},
innerText: ` ${requestedDaysAgo}`,
});

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 requestedToolTip = createElement({
type: 'span',
attributes: { class: 'tooltip' },
Expand Down Expand Up @@ -719,11 +743,20 @@ async function createExtensionCard(data, dev) {
innerText: `New deadline${isNewDeadLineCrossed ? ' ' : ' in '}`,
});
newDeadlineContainer.appendChild(newDeadlineText);
const newDeadlineValue = createElement({
type: 'span',
attributes: { class: 'requested-day tooltip-container' },
innerText: ` ${newDeadlineDays}`,
});

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 newDeadlineToolTip = createElement({
type: 'span',
attributes: { class: 'tooltip' },
Expand All @@ -743,11 +776,19 @@ async function createExtensionCard(data, dev) {
});
extensionForContainer.appendChild(extensionForText);

const extensionForValue = createElement({
type: 'span',
attributes: { class: 'tooltip-container' },
innerText: ` +${extensionDays}`,
});
let extensionForValue;
if (dev) {
extensionForValue = createElement({
type: 'span',
attributes: { class: 'skeleton-span' },
});
} else {
extensionForValue = createElement({
type: 'span',
attributes: { class: 'tooltip-container' },
innerText: ` +${extensionDays}`,
});
}
const extensionToolTip = createElement({
type: 'span',
attributes: { class: 'tooltip' },
Expand Down Expand Up @@ -780,11 +821,19 @@ async function createExtensionCard(data, dev) {

const requestNumber = data.requestNumber || 1;

const extensionRequestNumberValue = createElement({
type: 'span',
attributes: { class: 'extension-request-number' },
innerText: `#${requestNumber}`,
});
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}`,
});
}
extensionRequestNumberContainer.appendChild(extensionRequestNumberValue);
const cardAssigneeButtonContainer = createElement({
type: 'div',
Expand Down Expand Up @@ -1281,7 +1330,44 @@ 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.add('extension-request-number');
}
if (!dev) {
removeSpinner();
renderExtensionCreatedLog();
Expand Down

0 comments on commit 121b375

Please sign in to comment.