From 6ba7b5dc996e1b1a5d0b131e26cc8cba730e306f Mon Sep 17 00:00:00 2001 From: Jacqueline Tuyisenge Date: Thu, 24 Oct 2024 11:59:20 +0200 Subject: [PATCH] fix(#404): add skeleton loader on login activities table --- src/Skeletons/loginActivities.skeleton.tsx | 52 + src/components/LoginActivitiesTable.tsx | 149 +- .../AdminTraineeDashboard.test.tsx.snap | 11 +- .../__snapshots__/DashHeader.test.tsx.snap | 2 +- .../__snapshots__/Header.test.tsx.snap | 126 +- tests/components/loginActivities.test.tsx | 9 +- .../__snapshots__/Cohorts.test.tsx.snap | 154 +- .../AdminTraineeDashboard.test.tsx.snap | 11 +- .../__snapshots__/Admindash.test.tsx.snap | 154 +- .../__snapshots__/GradingSystem.test.tsx.snap | 186 +- tests/pages/__snapshots__/Home.test.tsx.snap | 55 +- .../pages/__snapshots__/Profile.test.tsx.snap | 3346 +++++++++++++++-- .../TraineeRatingDashboard.test.tsx.snap | 170 +- .../UpdateTraineeRating.test.tsx.snap | 186 +- .../__snapshots__/userRegister.test.tsx.snap | 2 +- 15 files changed, 3622 insertions(+), 991 deletions(-) create mode 100644 src/Skeletons/loginActivities.skeleton.tsx diff --git a/src/Skeletons/loginActivities.skeleton.tsx b/src/Skeletons/loginActivities.skeleton.tsx new file mode 100644 index 000000000..581a9b5aa --- /dev/null +++ b/src/Skeletons/loginActivities.skeleton.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import Skeleton from 'react-loading-skeleton'; +import 'react-loading-skeleton/dist/skeleton.css'; + +export default function LoginActivitiesSkeleton() { + // Define an array with unique keys + const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }]; + + return ( +
+ + + + + + + + + + + + + {skeletonRows.map((row) => ( + + + + + + + + + ))} + +
DateCountry NameCityStateIPV4Attempt
+ + + + + + + + + + + +
+
+ ); +} diff --git a/src/components/LoginActivitiesTable.tsx b/src/components/LoginActivitiesTable.tsx index 705545596..e8b571a05 100644 --- a/src/components/LoginActivitiesTable.tsx +++ b/src/components/LoginActivitiesTable.tsx @@ -6,6 +6,7 @@ import React, { useState, useEffect } from 'react'; import { useQuery } from '@apollo/client'; import { GET_LOGIN_ACTIVITIES } from '../queries/manageStudent.queries'; +import LoginActivitiesSkeleton from '../Skeletons/loginActivities.skeleton'; interface LoginActivitiesData { loginActivities: LoginActivity[]; @@ -99,78 +100,88 @@ const LoginActivitiesTable: React.FC = () => { const displayActivities = loginActivities.slice(startIndex, endIndex); console.log('displayActivities', displayActivities); - if (loading && page === 1) { - return
Loading login activities...
; - } - - /* istanbul ignore next */ - if (error) { - return
Error retrieving login activities.
; - } - - /* istanbul ignore next */ - if (displayActivities.length === 0) { - return
No login activities yet.
; - } - /* istanbul ignore next */ return (
- - - - - - - - - - - - - {displayActivities.map((activity, index) => ( - - - - - - - - - ))} - -
DateCountry NameCityStateIPv4Attempt
- {new Date(Number(activity.date)).toLocaleString()} - - {activity.country_name || 'N/A'} - {activity.city || 'N/A'}{activity.state || 'N/A'}{activity.IPv4 || 'N/A'} - {activity.failed > 0 ? 'Failed' : 'Success'} -
- -
- - Page {page} of {totalPages} - - {page > 1 && ( - - )} - {page < totalPages && ( - - )} -
+

Login Activities

+ + {/* eslint-disable-next-line no-nested-ternary */} + {loading && page === 1 ? ( +
+ +
+ ) : /* eslint-disable-next-line no-nested-ternary */ + error ? ( +
Error retrieving login activities.
+ ) : displayActivities.length === 0 ? ( +
No login activities yet.
+ ) : ( + <> +
+ + + + + + + + + + + + + {displayActivities.map((activity, index) => ( + + + + + + + + + ))} + +
DateCountry NameCityStateIPv4Attempt
+ {new Date(Number(activity.date)).toLocaleString()} + + {activity.country_name || 'N/A'} + + {activity.city || 'N/A'} + + {activity.state || 'N/A'} + + {activity.IPv4 || 'N/A'} + + {activity.failed > 0 ? 'Failed' : 'Success'} +
+
+ +
+ + Page {page} of {totalPages} + + {page > 1 && ( + + )} + {page < totalPages && ( + + )} +
+ + )}
); }; diff --git a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap index 36f807f1b..3d11fe910 100644 --- a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap +++ b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap @@ -463,7 +463,7 @@ Array [ name="date" readOnly={true} type="text" - value="2024-10-06" + value="2024-10-24" />
-
-
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + +
    +
  • @@ -272,7 +277,7 @@ exports[`Header Tests Should render the header with home 1`] = ` exports[`Header Tests Should render the header with no active 1`] = `
    • -
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + +
    +
  • @@ -541,7 +551,7 @@ exports[`Header Tests Should render the header with no active 1`] = ` exports[`Header Tests Should render the header with no active 2`] = `
    • -
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + + +
  • @@ -781,7 +796,7 @@ exports[`Header Tests Should render the header with no active 2`] = ` exports[`Header Tests Should render the header with no active 3`] = `
    • -
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + + +
  • @@ -1051,7 +1071,7 @@ exports[`Header Tests Should render the header with no active 3`] = ` exports[`Header Tests Should render the header with pricing active 1`] = `
    • -
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + + +
  • @@ -1321,7 +1346,7 @@ exports[`Header Tests Should render the header with pricing active 1`] = ` exports[`Header Tests Should render the header with product active 1`] = `
    • -
  • - - Docs - -
    • +

    + Docs +

    + + ▼ + + +
  • diff --git a/tests/components/loginActivities.test.tsx b/tests/components/loginActivities.test.tsx index 31075aab6..89501eaca 100644 --- a/tests/components/loginActivities.test.tsx +++ b/tests/components/loginActivities.test.tsx @@ -5,6 +5,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom'; import React from 'react'; import { GET_LOGIN_ACTIVITIES } from '../../src/queries/manageStudent.queries'; import LoginActivitiesTable from '../../src/components/LoginActivitiesTable'; +import LoginActivitiesSkeleton from '../../src/Skeletons/loginActivities.skeleton'; const mockLoginActivities = [ { @@ -38,15 +39,13 @@ const mocks = [ ]; describe('LoginActivities', () => { - it('renders login activities table', async () => { + it('renders login activities skeleton table', async () => { render( , ); - expect( - screen.getByText(/Loading login activities.../i), - ).toBeInTheDocument(); + expect(screen.getByTestId('login-activities-skeleton')).toBeInTheDocument(); }); it('displays loading state while fetching login activities', () => { render( @@ -55,7 +54,7 @@ describe('LoginActivities', () => { , ); - expect(screen.getByText('Loading login activities...')).toBeTruthy(); + expect(screen.getByTestId('login-activities-skeleton')).toBeTruthy(); }); it('displays error state if login activities retrieval fails', async () => { diff --git a/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap b/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap index 2843aa57f..d496ad235 100644 --- a/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap +++ b/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap @@ -1026,14 +1026,14 @@ Array [ colSpan={6} >
    diff --git a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap index cdb28ed1f..e3a616220 100644 --- a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap +++ b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap @@ -463,7 +463,7 @@ Array [ name="date" readOnly={true} type="text" - value="2024-10-06" + value="2024-10-24" />
    -
    diff --git a/tests/pages/__snapshots__/GradingSystem.test.tsx.snap b/tests/pages/__snapshots__/GradingSystem.test.tsx.snap index ce701c773..6dc4578ab 100644 --- a/tests/pages/__snapshots__/GradingSystem.test.tsx.snap +++ b/tests/pages/__snapshots__/GradingSystem.test.tsx.snap @@ -369,7 +369,7 @@ Array [ className="max-w-full" >
    -   - - - - - - -
    - -

    - - No records available - -

    -
    - + No records available +

    - @@ -504,14 +484,14 @@ Array [ colSpan={3} >
    diff --git a/tests/pages/__snapshots__/Home.test.tsx.snap b/tests/pages/__snapshots__/Home.test.tsx.snap index e8e6437c2..cc9b67cac 100644 --- a/tests/pages/__snapshots__/Home.test.tsx.snap +++ b/tests/pages/__snapshots__/Home.test.tsx.snap @@ -224,6 +224,32 @@ exports[`Home page renders the landing page 1`] = ` About
    • +
  • + + Product + +
    • +
    +
    +

    + Docs +

    + + ▼ + +
    +
  • @@ -453,7 +479,6 @@ exports[`Home page renders the landing page 1`] = ` > Come shape the future together -
    - I'm extremely impressed with Pulse and their performance management platform. - Since using their services, it has been a game-changer for our organization. - The platform is intuitive, easy to navigate, and packed with powerful features. + Content1

    - I'm delighted to share my positive experience with Pulse and their exceptional - performance management platform. Implementing their services has led to remarkable - improvements in our performance tracking and management processes. + Content2

    - - We are thrilled with the services provided by Pulse. Their performance management platform - has exceeded our expectations in every way. The user-friendly interface and comprehensive - features have made tracking and monitoring our performance metrics a breeze. - + Content3

    - I'm extremely impressed with Pulse and their performance management platform. - Since using their services, it has been a game-changer for our organization. - The platform is intuitive, easy to navigate, and packed with powerful features. + Content1

    - I'm delighted to share my positive experience with Pulse and their exceptional - performance management platform. Implementing their services has led to remarkable - improvements in our performance tracking and management processes. + Content2

    - - We are thrilled with the services provided by Pulse. Their performance management platform - has exceeded our expectations in every way. The user-friendly interface and comprehensive - features have made tracking and monitoring our performance metrics a breeze. - + Content3

    diff --git a/tests/pages/__snapshots__/Profile.test.tsx.snap b/tests/pages/__snapshots__/Profile.test.tsx.snap index 50a62de3d..da0515bac 100644 --- a/tests/pages/__snapshots__/Profile.test.tsx.snap +++ b/tests/pages/__snapshots__/Profile.test.tsx.snap @@ -165,16 +165,17 @@ Object { >
    -