Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added lazy loading for initial checking #937

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

added lazy loading for initial checking #937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d66123
added lazy loading for initial checking
Jan 17, 2025
73dd22c
Merge branch 'develop' into lazy_loading_test
Achintya-Chatterjee Jan 24, 2025
d00080a
lazy loading groups page test
Jan 31, 2025
ff44cec
Merge branch 'develop' into lazy_loading_test
Achintya-Chatterjee Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 88 additions & 144 deletions __tests__/groups/group.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,14 @@
const puppeteer = require('puppeteer');
const { allUsersData, superUserData } = require('../../mock-data/users');
const { allUsersData } = require('../../mock-data/users');
const { discordGroups, GroupRoleData } = require('../../mock-data/groups');
const {
STAGING_API_URL,
LOCAL_TEST_PAGE_URL,
} = require('../../mock-data/constants');

function setSuperUserPermission() {
allUsersData.users[0] = superUserData;
}

function resetUserPermission() {
allUsersData.users[0] = {
...allUsersData.users[0],
roles: { archived: false },
};
}
const BASE_URL = 'https://api.realdevsquad.com';
const PAGE_URL = 'http://localhost:8000';

describe('Discord Groups Page', () => {
let browser;
let page;
jest.setTimeout(60000);
jest.setTimeout(120000);

beforeAll(async () => {
browser = await puppeteer.launch({
Expand All @@ -38,9 +26,8 @@ describe('Discord Groups Page', () => {

page.on('request', (interceptedRequest) => {
const url = interceptedRequest.url();

if (interceptedRequest.method() === 'GET') {
if (url === `${STAGING_API_URL}/users/`) {
if (url === `${BASE_URL}/users/`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
Expand All @@ -51,7 +38,7 @@ describe('Discord Groups Page', () => {
},
body: JSON.stringify(allUsersData),
});
} else if (url === `${STAGING_API_URL}/users?profile=true`) {
} else if (url === `${BASE_URL}/users/self`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
Expand All @@ -62,18 +49,10 @@ describe('Discord Groups Page', () => {
},
body: JSON.stringify(allUsersData.users[0]),
});
} else if (url === `${STAGING_API_URL}/discord-actions/groups`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
body: JSON.stringify(discordGroups),
});
} else if (url === `${STAGING_API_URL}/discord-actions/groups`) {
} else if (url.startsWith(`${BASE_URL}/discord-actions/groups`)) {
const urlParams = new URLSearchParams(url.split('?')[1]);
const latestDoc = urlParams.get('latestDoc');
const paginatedGroups = getPaginatedGroups(latestDoc);
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
Expand All @@ -82,9 +61,9 @@ describe('Discord Groups Page', () => {
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
body: JSON.stringify(discordGroups),
body: JSON.stringify(paginatedGroups),
});
} else if (url === `${STAGING_API_URL}/discord-actions/roles`) {
} else if (url === `${BASE_URL}/discord-actions/roles`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
Expand All @@ -99,10 +78,9 @@ describe('Discord Groups Page', () => {
interceptedRequest.continue();
}
} else if (interceptedRequest.method() === 'POST') {
if (url === `${STAGING_API_URL}/discord-actions/groups`) {
if (url === `${BASE_URL}/discord-actions/groups`) {
const postData = interceptedRequest.postData();
const groupData = JSON.parse(postData);
// discordGroups.push(groupData);
interceptedRequest.respond({
status: 201,
contentType: 'application/json',
Expand All @@ -113,7 +91,7 @@ describe('Discord Groups Page', () => {
},
body: JSON.stringify({ message: 'Group created successfully' }),
});
} else if (url === `${STAGING_API_URL}/discord-actions/roles`) {
} else if (url === `${BASE_URL}/discord-actions/roles`) {
interceptedRequest.respond({
status: 201,
contentType: 'application/json',
Expand All @@ -128,7 +106,7 @@ describe('Discord Groups Page', () => {
interceptedRequest.continue();
}
} else if (interceptedRequest.method() === 'DELETE') {
if (url === `${STAGING_API_URL}/discord-actions/roles`) {
if (url === `${BASE_URL}/discord-actions/roles`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
Expand All @@ -146,8 +124,8 @@ describe('Discord Groups Page', () => {
interceptedRequest.continue();
}
});
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
await page.waitForNetworkIdle();
await page.goto(`${PAGE_URL}/groups`);
await page.waitForSelector('.card', { timeout: 5000 }); // Wait for the first batch of cards to load
});

afterAll(async () => {
Expand All @@ -160,7 +138,6 @@ describe('Discord Groups Page', () => {
});

test('Should display cards', async () => {
await page.waitForSelector('.card');
const cards = await page.$$('.card');

expect(cards.length).toBeGreaterThan(0);
Expand Down Expand Up @@ -252,136 +229,103 @@ describe('Discord Groups Page', () => {
const closeBtn = await groupCreationModal.$('#close-button');

await closeBtn.click();
await page.waitForTimeout(500); // Wait for modal to close
const groupCreationModalClosed = await page.$('.group-creation-modal');

expect(groupCreationModalClosed).toBeFalsy();
});

test('Should display only specified groups when name=<group-name> with different case', async () => {
const groupNames = 'fIrSt,DSA+COdInG';
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?name=${groupNames}`);
await page.waitForNetworkIdle();

const displayedGroups = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.card__title')).map(
(el) => el.textContent,
);
});

expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
});

test('Should display no group found div when no group is present', async () => {
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?name=no-group-present`);
await page.waitForNetworkIdle();

const noGroupDiv = await page.$('.no-group-container');

expect(noGroupDiv).toBeTruthy();
});

it('should display the footer with the correct repo link', async () => {
const footer = await page.$('[data-test-id="footer"]');
expect(footer).toBeTruthy();

const infoRepo = await footer.$('[data-test-id="info-repo"]');
expect(infoRepo).toBeTruthy();

const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
expect(repoLink).toBeTruthy();
test('Should load more groups on scroll', async () => {
await page.goto(`${PAGE_URL}/groups`);
await page.waitForSelector('.card', { timeout: 10000 });

const repoLinkHref = await page.evaluate((el) => el.href, repoLink);
expect(repoLinkHref).toBe(
'https://github.com/Real-Dev-Squad/website-dashboard',
const initialGroupCount = await page.$$eval(
'.card',
(cards) => cards.length,
);

const repoLinkTarget = await page.evaluate((el) => el.target, repoLink);
expect(repoLinkTarget).toBe('_blank');
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});

const repoLinkRel = await page.evaluate((el) => el.rel, repoLink);
expect(repoLinkRel).toBe('noopener noreferrer');
await page.waitForFunction(
(initialCount) => {
return document.querySelectorAll('.card').length > initialCount;
},
{ timeout: 60000 },
initialGroupCount,
);

const repoLinkText = await page.evaluate((el) => el.innerText, repoLink);
expect(repoLinkText).toBe('open sourced repo');
const newGroupCount = await page.$$eval('.card', (cards) => cards.length);

const repoLinkClass = await page.evaluate((el) => el.className, repoLink);
expect(repoLinkClass).toBe('');
expect(newGroupCount).toBeGreaterThan(initialGroupCount);
}, 120000);

const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
expect(repoLinkStyle).toBeTruthy();
});

test('Should display delete button for super users', async () => {
setSuperUserPermission();
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
await page.waitForNetworkIdle();
await page.waitForTimeout(1000);

const deleteButtons = await page.$$('.delete-group');
const cards = await page.$$('.card');
expect(deleteButtons.length).toBe(cards.length);
expect(deleteButtons.length).toBeGreaterThan(0);
});
test('Should stop loading more groups when all groups are loaded', async () => {
await page.goto(`${PAGE_URL}/groups`);
await page.waitForSelector('.card', { timeout: 5000 });

test('Should not display delete button when user is normal user', async () => {
resetUserPermission();
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
await page.waitForNetworkIdle();
// Scroll to the bottom multiple times
for (let i = 0; i < 5; i++) {
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});
await page.waitForTimeout(1000);
}

const deleteButtons = await page.$$('.delete-group');
expect(deleteButtons.length).toBe(0);
});
const finalGroupCount = await page.$$eval('.card', (cards) => cards.length);

test('Should display delete confirmation modal on click of delete button', async () => {
setSuperUserPermission();
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
await page.waitForNetworkIdle();
// Scroll one more time
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});
await page.waitForTimeout(1000);

const deleteButton = await page.$('.delete-group');
await deleteButton.click();

const deleteConfirmationModal = await page.waitForSelector(
'.delete-confirmation-modal',
const newFinalGroupCount = await page.$$eval(
'.card',
(cards) => cards.length,
);

expect(deleteConfirmationModal).toBeTruthy();
expect(newFinalGroupCount).toBe(finalGroupCount);
});

test('Should close delete confirmation modal when cancel button is clicked', async () => {
setSuperUserPermission();
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
test('Should display only specified groups when dev=true and name=<group-name> with different case', async () => {
const groupNames = 'fIrSt,DSA+COdInG';
await page.goto(`${PAGE_URL}/groups?dev=true&name=${groupNames}`);
await page.waitForNetworkIdle();
await page.waitForTimeout(1000);

const deleteButton = await page.$('.delete-group');
await deleteButton.click();

const cancelButton = await page.waitForSelector('#cancel-delete');
await cancelButton.click();
const displayedGroups = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.card__title')).map(
(el) => el.textContent,
);
});

const modalClosed = await page.$('.delete-confirmation-modal');
expect(modalClosed).toBeFalsy();
expect(displayedGroups).toContain('First Daaa');
expect(displayedGroups).toContain('DSA Coding Group');
});

test('Should render loader when deleting a group', async () => {
setSuperUserPermission();
await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
await page.waitForNetworkIdle();
await page.waitForTimeout(1000);

const deleteButton = await page.$('.delete-group');
await deleteButton.click();

const confirmButton = await page.waitForSelector('#confirm-delete');
confirmButton.click();

const loader = await page.waitForSelector('.loader');
expect(loader).toBeTruthy();

await page.waitForTimeout(1000);
test('Should display no group found div when no group is present', async () => {
await page.goto(`${PAGE_URL}/groups?dev=true&name=no-group-present`);
await page.waitForSelector('.no-group-container', { timeout: 5000 });

const loaderAfter = await page.$('.loader');
expect(loaderAfter).toBeFalsy();
const noGroupDiv = await page.$('.no-group-container');
expect(noGroupDiv).toBeTruthy();
});
});

// Helper function to simulate paginated data
function getPaginatedGroups(latestDoc) {
const pageSize = 18;
const startIndex = latestDoc
? discordGroups.groups.findIndex((g) => g.id === latestDoc) + 1
: 0;
const endIndex = startIndex + pageSize;
const groups = discordGroups.groups.slice(startIndex, endIndex);
const newLatestDoc = groups.length > 0 ? groups[groups.length - 1].id : null;

return {
message: 'Roles fetched successfully!',
groups,
newLatestDoc,
};
}
3 changes: 2 additions & 1 deletion constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
const API_BASE_URL =
window.API_BASE_URL || 'https://staging-api.realdevsquad.com';
const REPO_SYNC_API_URL =
'https://staging-sync.staging-realdevsquad-com.workers.dev';
const USER_MANAGEMENT_LINK = 'user-management-link';
Expand Down
22 changes: 13 additions & 9 deletions groups/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/index.ico" type="image/x-icon" />
<title>Discord Groups | Real Dev Squad</title>
<link rel="stylesheet" href="../global.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/groups/style.css" />
<script src="/helpers/loadENV.js"></script>
<script src="/constants.js"></script>
<script src="../utils.js" defer></script>
<script type="module" src="/groups/script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand Down Expand Up @@ -39,18 +38,23 @@
<div class="create-group">
<button class="button">
<span class="button__text">Create Group</span>
<img src="assets/plus.svg" alt="+" class="button__icon" />
<img src="assets/plus.svg" class="button__icon" />
</button>
</div>
</section>
<div class="group-container"></div>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
loadFooter();
});
</script>
<script src="../footer/footerComponent.js"></script>
<footer>
<p class="info-repo">
The contents of this website are deployed from this
<a
href="https://github.com/Real-Dev-Squad/website-dashboard"
target="_blank"
rel="noopener noreferrer"
>open sourced repo</a
>
</p>
</footer>
</body>
<div class="toast">
<div class="toast__message"></div>
Expand Down
Loading
Loading