Lazy loading fix due to filter on applications page with delete option (#856)

* Display applied filters on applications page with clear option

* Added test case and feature falg for filter

* fixed the lazy loading bug due to filter

Author: ahsrah7

__tests__/applications/applications.test.js

@@ -153,6 +153,7 @@ describe('Applications page', () => {
     ).toBe(true, 'status query param is not removed from url');
     expect(applicationCards.length).toBe(6);
   });
+
   it('should load more applications on going to the bottom of the page', async function () {
     let applicationCards = await page.$$('.application-card');
     expect(applicationCards.length).toBe(6);
@@ -184,6 +185,25 @@ describe('Applications page', () => {
     expect(urlAfterOpeningModal.searchParams.get('id') !== null).toBe(true);
   });
 
+  it('under feature flag should open application details modal for application, when user click on view details on any card', async function () {
+    await page.goto(`${SITE_URL}/applications/?dev=true`);
+    await page.waitForNetworkIdle();
+    const applicationDetailsModal = await page.$('.application-details');
+    expect(
+      await applicationDetailsModal.evaluate((el) =>
+        el.classList.contains('hidden'),
+      ),
+    ).toBe(true);
+    await page.click('.view-details-button');
+    expect(
+      await applicationDetailsModal.evaluate((el) =>
+        el.classList.contains('hidden'),
+      ),
+    ).toBe(false);
+    const urlAfterOpeningModal = new URL(page.url());
+    expect(urlAfterOpeningModal.searchParams.get('id') !== null).toBe(true);
+  });
+
   it('should close application details modal, when user clicks the close button', async function () {
     const applicationDetailsModal = await page.$('.application-details');
     await page.click('.view-details-button');

applications/script.js

@@ -480,9 +480,11 @@ if (isDev) {
 }
 
 function showAppliedFilter(filterApplied) {
-  filterLabel.classList.remove('hidden');
-  filterText.textContent =
-    'Status :' + filterApplied[0].toUpperCase() + filterApplied.substring(1);
+  if (filterApplied) {
+    filterLabel.classList.remove('hidden');
+    filterText.textContent =
+      'Status :' + filterApplied[0].toUpperCase() + filterApplied.substring(1);
+  }
 }
 
 function applyFilter(filter) {