diff --git a/src/components/Dashboard/Content/index.test.tsx b/src/components/Dashboard/Content/index.test.tsx index a33e771..5a81ccb 100644 --- a/src/components/Dashboard/Content/index.test.tsx +++ b/src/components/Dashboard/Content/index.test.tsx @@ -2,14 +2,13 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import DashboardContent from '.'; +import DashboardContent, { dashboardDataTestIds } from '.'; describe('DashboardContent', () => { - const dataTestId = 'dashboard-content'; it('renders DashboardContent and its components', () => { - render(); + render(); - const dashboardContent = screen.getByTestId(dataTestId); + const dashboardContent = screen.getByTestId(dashboardDataTestIds.content); expect(dashboardContent).toBeVisible(); }); diff --git a/src/components/Dashboard/Content/index.tsx b/src/components/Dashboard/Content/index.tsx index 97f91c3..4063583 100644 --- a/src/components/Dashboard/Content/index.tsx +++ b/src/components/Dashboard/Content/index.tsx @@ -2,13 +2,13 @@ import React from 'react'; import Shimmer from 'components/Shimmer'; -interface DashboardContentProps { - 'data-test-id'?: string; -} +export const dashboardDataTestIds = { + content: 'dashboard__content', +}; -const DashboardContent = ({ ...attributes }: DashboardContentProps): JSX.Element => { +const DashboardContent = (): JSX.Element => { return ( -
+
diff --git a/src/components/Shimmer/index.test.tsx b/src/components/Shimmer/index.test.tsx index ae4dc70..2290e4a 100644 --- a/src/components/Shimmer/index.test.tsx +++ b/src/components/Shimmer/index.test.tsx @@ -2,15 +2,14 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import Shimmer from '.'; +import Shimmer, { shimmerDataTestIds } from '.'; describe('Shimmer', () => { - const dataTestId = 'shimmer'; it('renders Shimmer and its components', () => { const testClass = 'test-class'; - render(); + render(); - const shimmer = screen.getByTestId(dataTestId); + const shimmer = screen.getByTestId(shimmerDataTestIds.content); expect(shimmer).toBeVisible(); expect(shimmer).toHaveClass(testClass); diff --git a/src/components/Shimmer/index.tsx b/src/components/Shimmer/index.tsx index 7dbe178..0462435 100644 --- a/src/components/Shimmer/index.tsx +++ b/src/components/Shimmer/index.tsx @@ -1,18 +1,22 @@ import React from 'react'; +import classNames from 'classnames'; + interface ShimmerProps { classAttributes: string; - 'data-test-id'?: string; } +export const shimmerDataTestIds = { + content: 'shimmer__content', +}; + // Ref: https://delba.dev/blog/animated-loading-skeletons-with-tailwind -const Shimmer = ({ classAttributes, ...attributes }: ShimmerProps): JSX.Element => { +const Shimmer = ({ classAttributes }: ShimmerProps): JSX.Element => { + const DEFAULT_CLASSNAME_ATTRIBUTES = + 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:from-30% before:via-white/50 before:to-transparent before:to-70% isolate overflow-hidden shadow-xl shadow-black/5'; return ( -
-
+
+
); };