[#10] Fix issues by comments

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(<DashboardContent data-test-id={dataTestId} />);
+    render(<DashboardContent />);
 
-    const dashboardContent = screen.getByTestId(dataTestId);
+    const dashboardContent = screen.getByTestId(dashboardDataTestIds.content);
 
     expect(dashboardContent).toBeVisible();
   });

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 (
-    <div className="flex flex-col w-full" {...attributes}>
+    <div className="flex flex-col w-full" data-test-id={dashboardDataTestIds.content}>
       <Shimmer classAttributes="h-[302px] rounded-[12px]" />
       <div className="flex flex-row justify-between mt-[38px]">
         <div className="flex flex-col justify-between">

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(<Shimmer classAttributes={testClass} data-test-id={dataTestId} />);
+    render(<Shimmer classAttributes={testClass} />);
 
-    const shimmer = screen.getByTestId(dataTestId);
+    const shimmer = screen.getByTestId(shimmerDataTestIds.content);
 
     expect(shimmer).toBeVisible();
     expect(shimmer).toHaveClass(testClass);

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 (
-    <div
-      className={`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 ${classAttributes}`}
-      {...attributes}
-    >
-      <div className={`bg-white bg-opacity-[.12] ${classAttributes}`}></div>
+    <div className={classNames(DEFAULT_CLASSNAME_ATTRIBUTES, classAttributes)} data-test-id={shimmerDataTestIds.content}>
+      <div className={classNames('bg-white bg-opacity-[.12]', classAttributes)}></div>
     </div>
   );
 };