Skip to content

Commit d63d274

Browse files
Achintya-ChatterjeeAchintya-Chatterjee
authored
Dev to Main Sync (#706)
1 parent 6a2a761 commit d63d274

File tree

15 files changed

+1733
-67
lines changed

15 files changed

+1733
-67
lines changed

‎__tests__/task-requests/task-request.test.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,3 +357,164 @@ describe('urlParams', () => {
357357
expect(newestFirstClass).toContain('selected');
358358
});
359359
});
360+
361+
describe('Sort Icon Functionality', () => {
362+
beforeEach(async () => {
363+
await page.goto(`${SITE_URL}/task-requests/?dev=true`);
364+
await page.waitForNetworkIdle();
365+
});
366+
367+
const getSortIconDetails = async (iconId) => {
368+
const iconElement = await page.$(`#${iconId}`);
369+
const display = await page.evaluate(
370+
(el) => window.getComputedStyle(el).display,
371+
iconElement,
372+
);
373+
return display;
374+
};
375+
376+
const getSortParameterDetails = async () => {
377+
const sortParameterElement = await page.$('.sort-button__text');
378+
const sortParameter = await page.evaluate(
379+
(el) => el.textContent,
380+
sortParameterElement,
381+
);
382+
return sortParameter;
383+
};
384+
385+
it('updates sort icon display and sort parameter text when sort by is changed', async () => {
386+
let ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
387+
let descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
388+
let sortParameter = await getSortParameterDetails();
389+
390+
expect(ascSortIconDisplay).toBe('block');
391+
expect(descSortIconDisplay).toBe('none');
392+
expect(sortParameter).toBe('created');
393+
394+
await page.click('.sort-button');
395+
await page.click('#REQUESTORS_COUNT_DESC');
396+
await page.waitForNetworkIdle();
397+
398+
ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
399+
descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
400+
sortParameter = await getSortParameterDetails();
401+
402+
expect(ascSortIconDisplay).toBe('none');
403+
expect(descSortIconDisplay).toBe('block');
404+
expect(sortParameter).toBe('requestors');
405+
});
406+
407+
it('ensures sort icon display and sort parameter text are in sync with URL parameters', async () => {
408+
await page.goto(`${SITE_URL}/task-requests?sort=requestors-desc&dev=true`);
409+
410+
const ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
411+
const descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
412+
const sortParameter = await getSortParameterDetails();
413+
414+
expect(ascSortIconDisplay).toBe('none');
415+
expect(descSortIconDisplay).toBe('block');
416+
expect(sortParameter).toBe('requestors');
417+
});
418+
});
419+
420+
describe('badges', () => {
421+
const DENIED = 'DENIED';
422+
const ASSIGNMENT = 'assignment';
423+
424+
const getBadgeTexts = async (page) => {
425+
const badges = await page.$$('.badge');
426+
return Promise.all(
427+
badges.map((badge) => page.evaluate((el) => el.textContent, badge)),
428+
);
429+
};
430+
beforeEach(async () => {
431+
await page.goto(`${SITE_URL}/task-requests/?dev=true`);
432+
await page.waitForNetworkIdle();
433+
});
434+
435+
it('verifies that filters applied by the user are correctly displayed as badges on the screen', async () => {
436+
await page.click('#filter-button');
437+
await page.click(`input[value="${DENIED}"]`);
438+
await page.click(`input[value="${ASSIGNMENT}"]`);
439+
await page.click('#apply-filter-button');
440+
await page.waitForNetworkIdle();
441+
442+
const badgeTexts = await getBadgeTexts(page);
443+
expect(badgeTexts).toContain(DENIED.toLowerCase());
444+
expect(badgeTexts).toContain(ASSIGNMENT);
445+
});
446+
447+
it('verifies that badge is removed when clicked and filters are updated accordingly', async () => {
448+
await page.goto(
449+
`${SITE_URL}/task-requests/?sort=created-asc&status=pending&status=denied&dev=true`,
450+
);
451+
await page.waitForNetworkIdle();
452+
453+
const badges = await page.$$('.badge');
454+
let badgeTexts = await getBadgeTexts(page);
455+
expect(badgeTexts).toContain(DENIED.toLowerCase());
456+
expect(badgeTexts).toContain('pending');
457+
458+
const deniedBadge = badges[badgeTexts.indexOf(DENIED.toLowerCase())];
459+
await deniedBadge.click();
460+
461+
badgeTexts = await getBadgeTexts(page);
462+
expect(badgeTexts).not.toContain(DENIED.toLowerCase());
463+
464+
const checkbox = await page.$(`input[value="${DENIED}"]`);
465+
const isChecked = await page.evaluate((el) => el.checked, checkbox);
466+
expect(isChecked).toBe(false);
467+
});
468+
469+
it('verifies that filters header is shown only when at least one badge is present', async () => {
470+
await page.goto(`${SITE_URL}/task-requests/?sort=created-asc&dev=true`);
471+
await page.waitForNetworkIdle();
472+
473+
const filtersHeader = await page.$('.filters__header');
474+
let displayStyle = await page.evaluate(
475+
(el) => window.getComputedStyle(el).display,
476+
filtersHeader,
477+
);
478+
expect(displayStyle).toBe('none');
479+
480+
await page.click('#filter-button');
481+
await page.click(`input[value="${DENIED}"]`);
482+
await page.click('#apply-filter-button');
483+
await page.waitForNetworkIdle();
484+
485+
displayStyle = await page.evaluate(
486+
(el) => window.getComputedStyle(el).display,
487+
filtersHeader,
488+
);
489+
expect(displayStyle).toBe('flex');
490+
491+
let badges = await page.$$('.badge');
492+
let badgeTexts = await getBadgeTexts(page);
493+
494+
const deniedBadge = badges[badgeTexts.indexOf(DENIED.toLowerCase())];
495+
await deniedBadge.click();
496+
497+
displayStyle = await page.evaluate(
498+
(el) => window.getComputedStyle(el).display,
499+
filtersHeader,
500+
);
501+
expect(displayStyle).toBe('none');
502+
});
503+
504+
it('verifies that badges are displayed based on URL parameters and removes all badges when the Clear all button is clicked', async () => {
505+
await page.goto(
506+
`${SITE_URL}/task-requests/?sort=created-asc&status=denied&request-type=assignment&dev=true`,
507+
);
508+
await page.waitForNetworkIdle();
509+
510+
let badgeTexts = await getBadgeTexts(page);
511+
expect(badgeTexts).toContain('denied');
512+
expect(badgeTexts).toContain(ASSIGNMENT);
513+
514+
await page.click('#clear-all-button');
515+
await page.waitForNetworkIdle();
516+
517+
badges = await page.$$('.badge');
518+
expect(badges.length).toBe(0);
519+
});
520+
});

‎constants.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
2-
('https://staging-sync.staging-realdevsquad-com.workers.dev');
32
const REPO_SYNC_API_URL =
43
'https://staging-sync.staging-realdevsquad-com.workers.dev';
54
const USER_MANAGEMENT_LINK = 'user-management-link';

‎groups/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const BASE_URL = 'https://api.realdevsquad.com'; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
1+
const BASE_URL = window.API_BASE_URL; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
22

33
async function getMembers() {
44
try {

‎images/x-icon-black.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"check": "prettier --check .",
88
"fix": "prettier --write .",
99
"test": "jest",
10-
"start": "node server.js"
10+
"start": "node server.js",
11+
"dev": "local-ssl-proxy --source 443 --target 5500 -n dev.realdevsquad.com"
1112
},
1213
"repository": {
1314
"type": "git",
@@ -26,6 +27,7 @@
2627
"jest-puppeteer": "^8.0.6",
2728
"jest-puppeteer-istanbul": "^0.5.3",
2829
"jsdom": "^21.1.1",
30+
"local-ssl-proxy": "^2.0.5",
2931
"pre-commit": "^1.2.2",
3032
"prettier": "2.3.1",
3133
"puppeteer": "^20.2.1",

‎requests/constants.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const DEV_FEATURE_FLAG = true;
2+
const Status = {
3+
APPROVED: 'APPROVED',
4+
PENDING: 'PENDING',
5+
REJECTED: 'REJECTED',
6+
};
7+
8+
const OOO_REQUEST_TYPE = 'OOO';
9+
const REQUEST_CONTAINER_ID = 'request_container';
10+
const OOO_TAB_ID = 'ooo_tab_link';
11+
12+
const DEFAULT_DATE_FORMAT = 'DD MMM YYYY';
13+
14+
const MessageStatus = {
15+
SUCCESS: 'SUCCESS',
16+
ERROR: 'ERROR',
17+
};
18+
19+
const ErrorMessages = {
20+
UNAUTHENTICATED:
21+
'You are unauthenticated to view this section, please login!',
22+
UNAUTHORIZED: 'You are unauthrozed to view this section',
23+
OOO_NOT_FOUND: 'OOO Requests not found',
24+
SERVER_ERROR: 'Unexpected error occurred',
25+
};
26+
27+
const LAST_ELEMENT_CONTAINER = '.virtual';

‎requests/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta
8+
name="description"
9+
content="This web page is for the requests managment functionality in real dev squad's dashboard website. admin can view and take action on the requests raised by the team members."
10+
/>
11+
<meta name="keywords" content="RDS, Request Managment" />
12+
<meta name="author" content="Real Dev Squad" />
13+
<link rel="icon" href="/images/index.ico" type="image/x-icon" />
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<link
17+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;800&display=swap"
18+
rel="stylesheet"
19+
/>
20+
21+
<title>Requests | Real Dev Squad</title>
22+
<link rel="stylesheet" href="/requests/style.css" />
23+
<script src="/helpers/loadENV.js"></script>
24+
<script src="/requests/constants.js"></script>
25+
<script src="/requests/util.js"></script>
26+
<script src="/utils.js"></script>
27+
<script src="/requests/script.js" defer></script>
28+
</head>
29+
30+
<body>
31+
<div class="header">
32+
<div class="header__contents">
33+
<img
34+
src="/task-requests/assets/RDSLogo.png"
35+
alt="RDS logo"
36+
height="48"
37+
width="48"
38+
/>
39+
<a href="/index.html" class="header__contents__navlink">Home</a>
40+
</div>
41+
</div>
42+
<div class="container">
43+
<div class="container__header">
44+
<nav>
45+
<a href="#" class="selected__tab" id="ooo_tab_link">OOO</a>
46+
<a href="#" class="disabled__tab" id="task_tab_link">Task</a>
47+
<a href="#" class="disabled__tab" id="extension_tab_link"
48+
>Extension</a
49+
>
50+
</nav>
51+
<div id="toast" class="hidden">
52+
<div class="message"></div>
53+
<div class="progress-bar"></div>
54+
</div>
55+
</div>
56+
<div class="container__body">
57+
<div id="request_container" class="request"></div>
58+
<div class="container__body__loader hidden">Loading...</div>
59+
<div class="virtual"></div>
60+
</div>
61+
</div>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)