Skip to content

Commit a717686

Browse files
joyguptaajoyguptaa
authored
New UI for task accordion (#606)
* Bug : Fixed logic to make test case work * Feat : Changed API to render tasks Desc : Replaced existing task api with one that has pagination in it * Test : Added test case for new task UI * Feat : Implemented new UI in dev mode for tasks * Feat : Removed scrollbar from tasks * Test : Added test case for new task UI * Chore : Removed comments * Bug : Fixed depreciation warning * Refactor : Shifted helper function to common utils * Style : Fixed styling for progress bar * Feat : Updated logic for displaying progress bar based on status * Test : Added test cases for progress bar
1 parent e692499 commit a717686

File tree

10 files changed

+848
-98
lines changed

10 files changed

+848
-98
lines changed

‎__tests__/taskRequests/taskRequestDetails.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('Tests the User Management User Listing Screen', () => {
1111

1212
beforeAll(async () => {
1313
browser = await puppeteer.launch({
14-
headless: true,
14+
headless: 'new',
1515
ignoreHTTPSErrors: true,
1616
args: ['--incognito', '--disable-web-security'],
1717
devtools: false,

‎__tests__/user-details/task-duedate-hover.test.js‎

Lines changed: 173 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const puppeteer = require('puppeteer');
22
const {
33
userDetailsApi,
4+
usersTasksInDev,
45
} = require('../../mock-data/task-card-date-hover/index'); //has user info
56
const {
67
superUserDetails,
@@ -49,6 +50,62 @@ describe('Tasks On User Management Page', () => {
4950
},
5051
body: JSON.stringify(superUserDetails), // Y contains the json of a superuser in the server which will grant us the access to view the page without locks
5152
});
53+
} else if (
54+
url ===
55+
'https://api.realdevsquad.com/tasks/?size=3&dev=true&assignee=ajeyakrishna'
56+
) {
57+
interceptedRequest.respond({
58+
status: 200,
59+
contentType: 'application/json',
60+
headers: {
61+
'Access-Control-Allow-Origin': '*',
62+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
63+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
64+
},
65+
body: JSON.stringify(usersTasksInDev['initial']),
66+
});
67+
} else if (
68+
url ===
69+
'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=vvTPGHAs9w36oY1UnV8r'
70+
) {
71+
interceptedRequest.respond({
72+
status: 200,
73+
contentType: 'application/json',
74+
headers: {
75+
'Access-Control-Allow-Origin': '*',
76+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
77+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
78+
},
79+
body: JSON.stringify(usersTasksInDev['vvTPGHAs9w36oY1UnV8r']),
80+
});
81+
} else if (
82+
url ===
83+
'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=i1LQOKkGhhpOxE6yEo3A'
84+
) {
85+
interceptedRequest.respond({
86+
status: 200,
87+
contentType: 'application/json',
88+
headers: {
89+
'Access-Control-Allow-Origin': '*',
90+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
91+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
92+
},
93+
body: JSON.stringify(usersTasksInDev['i1LQOKkGhhpOxE6yEo3A']),
94+
});
95+
} else if (
96+
url ===
97+
'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=OhNeSTj5J72PhrA4mtrr'
98+
) {
99+
interceptedRequest.respond({
100+
status: 200,
101+
contentType: 'application/json',
102+
headers: {
103+
'Access-Control-Allow-Origin': '*',
104+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
105+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
106+
},
107+
body: JSON.stringify(usersTasksInDev['OhNeSTj5J72PhrA4mtrr']),
108+
});
52109
} else {
53110
interceptedRequest.continue();
54111
}
@@ -57,25 +114,6 @@ describe('Tasks On User Management Page', () => {
57114
'http://localhost:8000/users/details/index.html?username=sunny-s',
58115
);
59116

60-
await page.evaluate(async () => {
61-
// We write the function with superUser as true
62-
63-
async function accessingUserData() {
64-
const isSuperUser = true;
65-
if (isSuperUser) {
66-
await getUserTasks();
67-
await getUserPrs();
68-
await generateAcademicTabDetails();
69-
toggleAccordionTabsVisibility();
70-
} else {
71-
lockAccordiansForNonSuperUser();
72-
}
73-
}
74-
75-
// Calling the function
76-
await accessingUserData();
77-
});
78-
79117
await page.waitForNetworkIdle();
80118
});
81119

@@ -141,4 +179,120 @@ describe('Tasks On User Management Page', () => {
141179

142180
await page.waitForTimeout(500); //waiting for a moment to check changes(very helpful when you turn headless into false)
143181
});
182+
183+
it('Scroll of task should work in dev mode', async () => {
184+
await page.goto(
185+
'http://localhost:8000/users/details/index.html?username=ajeyakrishna&dev=true',
186+
);
187+
await page.waitForNetworkIdle();
188+
const taskDiv = await page.$$('.accordion-tasks');
189+
expect(taskDiv).toBeTruthy();
190+
await taskDiv[0].click();
191+
192+
const userTasksDevDiv = await page.$('.user-tasks-dev');
193+
expect(userTasksDevDiv).toBeTruthy();
194+
195+
await page.evaluate(() => {
196+
window.scrollBy(0, window.document.body.scrollHeight);
197+
});
198+
await page.waitForNetworkIdle();
199+
200+
await page.evaluate(() => {
201+
window.scrollBy(0, window.document.body.scrollHeight);
202+
});
203+
await page.waitForNetworkIdle();
204+
205+
await page.evaluate(() => {
206+
window.scrollBy(0, window.document.body.scrollHeight);
207+
});
208+
await page.waitForNetworkIdle();
209+
210+
await page.evaluate(() => {
211+
window.scrollBy(0, window.document.body.scrollHeight);
212+
});
213+
await page.waitForNetworkIdle();
214+
215+
let renderedTasks = await userTasksDevDiv.$$('.user-task');
216+
expect(Array.from(renderedTasks).length).toBe(12);
217+
});
218+
219+
it('New task card should have all the detail fields', async () => {
220+
await page.goto(
221+
'http://localhost:8000/users/details/index.html?username=ajeyakrishna&dev=true',
222+
);
223+
await page.waitForNetworkIdle();
224+
const taskDiv = await page.$$('.accordion-tasks');
225+
expect(taskDiv).toBeTruthy();
226+
await taskDiv[0].click();
227+
228+
const userTasksDevDiv = await page.$('.user-tasks-dev');
229+
expect(userTasksDevDiv).toBeTruthy();
230+
231+
let renderedTasks = await page.$$('.user-task');
232+
let firstTask = await renderedTasks[0].$$('.task');
233+
let firstTaskHTML = await page.evaluate(
234+
(element) => element.innerHTML,
235+
firstTask[0],
236+
);
237+
238+
expect(firstTaskHTML).toContain('<div class="task-title">');
239+
expect(firstTaskHTML).not.toContain('<progress');
240+
expect(firstTaskHTML).toContain('<div class="detail-block eta">');
241+
expect(firstTaskHTML).toContain('<div class="detail-block status">');
242+
expect(firstTaskHTML).toContain('<div class="detail-block startedOn">');
243+
expect(firstTaskHTML).toContain('<div class="detail-block priority">');
244+
expect(firstTaskHTML).toContain('<div class="detail-block createdBy">');
245+
expect(firstTaskHTML).toContain('<div class="detail-block type">');
246+
247+
let secondTask = await renderedTasks[1].$$('.task');
248+
let secondTaskHTML = await page.evaluate(
249+
(element) => element.innerHTML,
250+
secondTask[0],
251+
);
252+
253+
expect(secondTaskHTML).toContain('<div class="task-title">');
254+
expect(secondTaskHTML).not.toContain('<progress');
255+
expect(secondTaskHTML).toContain('<div class="detail-block eta">');
256+
expect(secondTaskHTML).toContain('<div class="detail-block status">');
257+
expect(secondTaskHTML).toContain('<div class="detail-block startedOn">');
258+
expect(secondTaskHTML).toContain('<div class="detail-block priority">');
259+
expect(secondTaskHTML).toContain('<div class="detail-block createdBy">');
260+
expect(secondTaskHTML).toContain('<div class="detail-block type">');
261+
262+
let thirdTask = await renderedTasks[2].$$('.task');
263+
let thirdTaskHTML = await page.evaluate(
264+
(element) => element.innerHTML,
265+
thirdTask[0],
266+
);
267+
268+
expect(thirdTaskHTML).toContain('<div class="task-title">');
269+
expect(thirdTaskHTML).not.toContain('<progress');
270+
expect(thirdTaskHTML).toContain('<div class="detail-block eta">');
271+
expect(thirdTaskHTML).toContain('<div class="detail-block status">');
272+
expect(thirdTaskHTML).toContain('<div class="detail-block startedOn">');
273+
expect(thirdTaskHTML).toContain('<div class="detail-block priority">');
274+
expect(thirdTaskHTML).toContain('<div class="detail-block createdBy">');
275+
expect(thirdTaskHTML).toContain('<div class="detail-block type">');
276+
277+
await page.evaluate(() => {
278+
window.scrollBy(0, window.document.body.scrollHeight);
279+
});
280+
await page.waitForNetworkIdle();
281+
282+
renderedTasks = await page.$$('.user-task');
283+
let fourthTask = await renderedTasks[3].$$('.task');
284+
let fourthTaskHTML = await page.evaluate(
285+
(element) => element.innerHTML,
286+
fourthTask[0],
287+
);
288+
289+
expect(fourthTaskHTML).toContain('<div class="task-title">');
290+
expect(fourthTaskHTML).toContain('<progress class="green"');
291+
expect(fourthTaskHTML).toContain('<div class="detail-block eta">');
292+
expect(fourthTaskHTML).toContain('<div class="detail-block status">');
293+
expect(fourthTaskHTML).toContain('<div class="detail-block startedOn">');
294+
expect(fourthTaskHTML).toContain('<div class="detail-block priority">');
295+
expect(fourthTaskHTML).toContain('<div class="detail-block createdBy">');
296+
expect(fourthTaskHTML).toContain('<div class="detail-block type">');
297+
});
144298
});

‎extension-requests/local-utils.js‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -205,38 +205,6 @@ function formDataToObject(formData) {
205205
return result;
206206
}
207207

208-
function dateDiff(date1, date2, formatter) {
209-
if (date2 > date1) {
210-
return dateDiff(date2, date1, formatter);
211-
}
212-
213-
const timeDifference = new Date(date1).getTime() - new Date(date2).getTime();
214-
215-
const seconds = Math.floor(timeDifference / 1000);
216-
const minutes = Math.floor(seconds / 60);
217-
const hours = Math.floor(minutes / 60);
218-
const days = Math.floor(hours / 24);
219-
const months = Math.floor(days / 30);
220-
const years = Math.floor(days / 365);
221-
222-
let res;
223-
if (seconds < 60) {
224-
res = `${seconds} ${seconds === 1 ? 'second' : 'seconds'}`;
225-
} else if (minutes < 60) {
226-
res = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
227-
} else if (hours < 24) {
228-
res = `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
229-
} else if (days < 30) {
230-
res = `${days} ${days === 1 ? 'day' : 'days'}`;
231-
} else if (months < 12) {
232-
res = `${months} ${months === 1 ? 'month' : 'months'}`;
233-
} else {
234-
res = `${years} ${years === 1 ? 'year' : 'years'}`;
235-
}
236-
237-
return formatter ? formatter(res) : res;
238-
}
239-
240208
const addSpinner = (container) => {
241209
const spinner = createElement({
242210
type: 'div',

‎footerTest.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
22

33
let config = {
44
launchOptions: {
5-
headless: true,
5+
headless: 'new',
66
ignoreHTTPSErrors: true,
77
},
88
};

0 commit comments

Comments
 (0)