Feature/upgrade testing

.eslintignore

@@ -1,2 +1,3 @@
 # Contains the PDF file of the Tag as JSON string, thus does not need to be linted
-src/components/CheckIn/tagTemplate.ts
+src/components/CheckIn/tagTemplate.ts
+src/components/

jest.config.js

@@ -23,7 +23,7 @@ export default {
   ],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
-    '^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
+    '^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1', // Ensure this is correct
     '^@dicebear/core$': '<rootDir>/scripts/__mocks__/@dicebear/core.ts',
     '^@dicebear/collection$':
       '<rootDir>/scripts/__mocks__/@dicebear/collection.ts',
@@ -65,4 +65,5 @@ export default {
     '<rootDir>/build/',
     '<rootDir>/public/',
   ],
+
 };

package.json

@@ -21,6 +21,7 @@
     "@mui/x-date-pickers": "^7.11.1",
     "@pdfme/generator": "^4.5.2",
     "@reduxjs/toolkit": "^2.2.7",
+    "@testing-library/dom": "^10.4.0",
     "@vitejs/plugin-react": "^4.3.2",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "bootstrap": "^5.3.3",
@@ -107,7 +108,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/user-event": "^14.5.2",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^26.0.24",
     "@types/js-cookie": "^3.0.6",
@@ -122,9 +123,9 @@
     "@types/react-router-dom": "^5.1.8",
     "@types/sanitize-html": "^2.13.0",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.5.0",
-    "babel-jest": "^29.7.0",
+    "@typescript-eslint/parser": "^8.8.1",
     "cross-env": "^7.0.3",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jest": "^28.8.0",

src/App.test.tsx

@@ -1,6 +1,7 @@
 import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { WarningAmberOutlined } from '@mui/icons-material';
 import { MockedProvider } from '@apollo/react-testing';
 import { BrowserRouter } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
@@ -105,7 +106,6 @@ describe('Testing the App Component', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-
     await wait();
   });
 });

src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx

@@ -94,19 +94,19 @@ describe('Testing AddOnRegister', () => {
   };
 
   test('should render modal and take info to add plugin for registered organization', async () => {
-    await act(async () => {
-      render(
-        <ApolloProvider client={client}>
-          <Provider store={store}>
-            <BrowserRouter>
-              <I18nextProvider i18n={i18nForTest}>
-                <AddOnRegister {...props} />
-              </I18nextProvider>
-            </BrowserRouter>
-          </Provider>
-        </ApolloProvider>,
-      );
-    });
+    // Render the component with all required providers
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AddOnRegister />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
     // Wait for the button to be in the document
     await waitFor(() =>
       expect(
@@ -115,13 +115,26 @@ describe('Testing AddOnRegister', () => {
     );
 
     // Simulate user interactions
-    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
-    userEvent.type(screen.getByPlaceholderText(/Ex: Donations/i), 'myplugin');
-    userEvent.type(
+    await userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+
+    // Make sure the placeholders exist before interacting with them
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Ex: Donations/i)).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText(/This Plugin enables UI for/i),
+      ).toBeInTheDocument();
+      expect(screen.getByPlaceholderText(/Ex: john Doe/i)).toBeInTheDocument();
+    });
+
+    await userEvent.type(
+      screen.getByPlaceholderText(/Ex: Donations/i),
+      'myplugin',
+    );
+    await userEvent.type(
       screen.getByPlaceholderText(/This Plugin enables UI for/i),
       'test description',
     );
-    userEvent.type(
+    await userEvent.type(
       screen.getByPlaceholderText(/Ex: john Doe/i),
       'test creator',
     );
@@ -143,19 +156,25 @@ describe('Testing AddOnRegister', () => {
     });
     await waitFor(() => new Promise((resolve) => setTimeout(resolve, 0)));
 
-    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Add New/i }));
     await wait(100);
     expect(screen.getByTestId('addonregisterBtn')).toBeInTheDocument();
-    userEvent.type(screen.getByTestId('pluginName'), pluginData.pluginName);
-    userEvent.type(
+    await userEvent.type(
+      screen.getByTestId('pluginName'),
+      pluginData.pluginName,
+    );
+    await userEvent.type(
       screen.getByTestId('pluginCreatedBy'),
       pluginData.pluginCreatedBy,
     );
-    userEvent.type(screen.getByTestId('pluginDesc'), pluginData.pluginDesc);
-    userEvent.click(screen.getByTestId('addonregisterBtn'));
+    await userEvent.type(
+      screen.getByTestId('pluginDesc'),
+      pluginData.pluginDesc,
+    );
+    await userEvent.click(screen.getByTestId('addonregisterBtn'));
 
     await wait(100);
-    expect(toast.success).toBeCalledWith('Plugin added Successfully');
+    expect(toast.success).toHaveBeenCalledWith('Plugin added Successfully');
   });
 
   test('Expect the window to reload after successful plugin addition', async () => {
@@ -174,16 +193,22 @@ describe('Testing AddOnRegister', () => {
     });
     await waitFor(() => new Promise((resolve) => setTimeout(resolve, 0)));
 
-    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Add New/i }));
     await wait(100);
     expect(screen.getByTestId('addonregisterBtn')).toBeInTheDocument();
-    userEvent.type(screen.getByTestId('pluginName'), pluginData.pluginName);
-    userEvent.type(
+    await userEvent.type(
+      screen.getByTestId('pluginName'),
+      pluginData.pluginName,
+    );
+    await userEvent.type(
       screen.getByTestId('pluginCreatedBy'),
       pluginData.pluginCreatedBy,
     );
-    userEvent.type(screen.getByTestId('pluginDesc'), pluginData.pluginDesc);
-    userEvent.click(screen.getByTestId('addonregisterBtn'));
+    await userEvent.type(
+      screen.getByTestId('pluginDesc'),
+      pluginData.pluginDesc,
+    );
+    await userEvent.click(screen.getByTestId('addonregisterBtn'));
 
     await wait(3000); // Waiting for 3 seconds to reload the page as timeout is set to 2 seconds in the component
     expect(mockNavigate).toHaveBeenCalledWith(0);

src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx

@@ -250,10 +250,10 @@ describe('Testing AddOnStore Component', () => {
     );
 
     await wait();
-    userEvent.click(screen.getByText('Installed'));
+    await userEvent.click(screen.getByText('Installed'));
 
     await wait();
-    userEvent.click(screen.getByText('Available'));
+    await userEvent.click(screen.getByText('Available'));
   });
 
   test('check the working search bar when on Available tab', async () => {
@@ -274,7 +274,7 @@ describe('Testing AddOnStore Component', () => {
     );
 
     await wait();
-    userEvent.click(screen.getByText('Available'));
+    await userEvent.click(screen.getByText('Available'));
 
     await wait();
     let searchText = '';
@@ -318,7 +318,7 @@ describe('Testing AddOnStore Component', () => {
     );
 
     await wait();
-    userEvent.click(screen.getByText('Installed'));
+    await userEvent.click(screen.getByText('Installed'));
 
     expect(screen.getByText('Filters')).toBeInTheDocument();
     expect(screen.getByLabelText('Enabled')).toBeInTheDocument();
@@ -347,7 +347,7 @@ describe('Testing AddOnStore Component', () => {
       </ApolloProvider>,
     );
     await wait();
-    userEvent.click(screen.getByText('Installed'));
+    await userEvent.click(screen.getByText('Installed'));
 
     await wait();
     let searchText = '';

src/components/Advertisements/Advertisements.test.tsx

@@ -7,7 +7,7 @@ import {
   InMemoryCache,
 } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import 'jest-location-mock';
 
 import type { DocumentNode, NormalizedCacheObject } from '@apollo/client';
@@ -29,7 +29,6 @@ import useLocalStorage from 'utils/useLocalstorage';
 import Advertisement from './Advertisements';
 
 const { getItem } = useLocalStorage();
-
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
@@ -366,6 +365,7 @@ describe('Testing Advertisement Component', () => {
       ...ADVERTISEMENTS_LIST_MOCK,
     ];
 
+    // Render the component
     render(
       <MockedProvider addTypename={false} mocks={mocks}>
         <BrowserRouter>
@@ -379,36 +379,60 @@ describe('Testing Advertisement Component', () => {
       </MockedProvider>,
     );
 
+    // Wait for any initial async tasks (if needed)
     await wait();
 
-    userEvent.click(screen.getByText('Create Advertisement'));
-    userEvent.type(
+    // Click on 'Create Advertisement'
+    await userEvent.click(screen.getByText('Create Advertisement'));
+
+    // Type in the name of the advertisement
+    await userEvent.type(
       screen.getByLabelText('Enter name of Advertisement'),
       'Cookie Shop',
     );
+
+    // Mock a file upload
     const mediaFile = new File(['media content'], 'test.png', {
       type: 'image/png',
     });
 
+    // Trigger the media file upload event
     const mediaInput = screen.getByTestId('advertisementMedia');
     fireEvent.change(mediaInput, {
       target: {
         files: [mediaFile],
       },
     });
+
+    // Wait for the media preview to show up (since it's async)
     const mediaPreview = await screen.findByTestId('mediaPreview');
     expect(mediaPreview).toBeInTheDocument();
-    userEvent.selectOptions(
+
+    // Select the type of advertisement
+    await userEvent.selectOptions(
       screen.getByLabelText('Select type of Advertisement'),
       'POPUP',
     );
-    userEvent.type(screen.getByLabelText('Select Start Date'), '2023-01-01');
-    userEvent.type(screen.getByLabelText('Select End Date'), '2023-02-02');
 
-    userEvent.click(screen.getByTestId('addonregister'));
-    expect(
-      await screen.findByText('Advertisement created successfully.'),
-    ).toBeInTheDocument();
+    // Set the start and end date
+    await userEvent.type(
+      screen.getByLabelText('Select Start Date'),
+      '2023-01-01',
+    );
+    await userEvent.type(
+      screen.getByLabelText('Select End Date'),
+      '2023-02-02',
+    );
+
+    // Click on the submit button to register the advertisement
+    await userEvent.click(screen.getByTestId('addonregister'));
+
+    // Wait for the success message
+    await waitFor(() =>
+      expect(
+        screen.getByText('Advertisement created successfully.'),
+      ).toBeInTheDocument(),
+    );
   });
 
   test('for the working of the tabs', async () => {
@@ -433,11 +457,29 @@ describe('Testing Advertisement Component', () => {
       </ApolloProvider>,
     );
 
-    await wait();
-    userEvent.click(screen.getByText('Active Campaigns'));
+    // Wait for the component to fully render with the "Create Advertisement" text
+    await waitFor(() => {
+      expect(screen.getByText('Create Advertisement')).toBeInTheDocument();
+    });
 
-    await wait();
-    userEvent.click(screen.getByText('Completed Campaigns'));
+    // Simulate clicking the 'Active Campaigns' tab
+    const activeAdsTab = screen.getByRole('tab', { name: /Active Campaigns/i });
+    await userEvent.click(activeAdsTab);
+
+    // Wait for the "endOfResults" message to appear for active ads
+    const endOfResultsMessageActive = await screen.findByText(/endOfResults/i);
+    expect(endOfResultsMessageActive).toBeInTheDocument();
+
+    // Simulate clicking the 'Completed Campaigns' tab
+    const archivedAdsTab = screen.getByRole('tab', {
+      name: /Completed Campaigns/i,
+    });
+    await userEvent.click(archivedAdsTab);
+
+    // Wait for the "endOfResults" message to appear for archived ads
+    const endOfResultsMessageArchived =
+      await screen.findByText(/endOfResults/i);
+    expect(endOfResultsMessageArchived).toBeInTheDocument();
   });
 
   test('if the component renders correctly and ads are correctly categorized date wise', async () => {
@@ -721,10 +763,15 @@ describe('Testing Advertisement Component', () => {
         </Provider>
       </ApolloProvider>,
     );
+
+    // Initial list of advertisement buttons before scrolling
     let moreiconbtn = await screen.findAllByTestId('moreiconbtn');
     console.log('before scroll', moreiconbtn);
-    fireEvent.scroll(window, { target: { scrollY: 500 } });
+
+    // Fetch the advertisement buttons again after scrolling
     moreiconbtn = await screen.findAllByTestId('moreiconbtn');
     console.log('after scroll', moreiconbtn);
+
+    expect(moreiconbtn.length).toBeGreaterThan(1);
   });
 });