test: create tests index page

pages/index.page.spec.tsx

@@ -0,0 +1,28 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import Home from './index.page'
+
+describe('<Home />', () => {
+  beforeAll(() => {
+    window.Element.prototype.animate = jest.fn()
+  })
+
+  it('should render the title and explore link', () => {
+    render(<Home />)
+
+    expect(screen.getAllByText('sandevistan')[0]).toBeInTheDocument()
+    expect(screen.getByText('explore')).toBeInTheDocument()
+  })
+
+  it('should navigate to the about page when explore link is clicked', () => {
+    render(<Home />)
+    window.open = jest.fn()
+
+    const exploreLink = screen.getByText('explore')
+
+    fireEvent.click(exploreLink)
+
+    expect(window.open).toHaveBeenCalledTimes(1)
+    expect(window.open).toHaveBeenCalledWith('/about', '_self', 'noreferrer')
+  })
+})

src/components/ErrorCase/index.tsx

@@ -9,7 +9,7 @@ type ErrorCaseProps = {
 
 const ErrorCase = ({ hasMargin, onClick }: ErrorCaseProps) => {
   return (
-    <S.Container hasMargin={hasMargin} data-testid='layout__error'>
+    <S.Container hasMargin={hasMargin} data-testid='error-case__id'>
       <ErrorIcon fontSize='large' />
       <S.Text>Something went wrong. Please try again.</S.Text>
       <S.RetryButton onClick={onClick}>Retry</S.RetryButton>

src/components/SkeletonText/index.tsx

@@ -4,11 +4,11 @@ const SkeletonText = () => {
   const skeletons = [160, 120, 70, 50]
 
   return (
-    <>
+    <div data-testid='skeleton__loading'>
       {skeletons.map((height, index) => (
         <Skeleton key={index} height={height} animation='wave' />
       ))}
-    </>
+    </div>
   )
 }
 

src/layout/layout.spec.tsx

@@ -19,7 +19,12 @@ describe('<Layout />', () => {
   })
 
   it('should render loading case correctly', async () => {
-    fetchMock.mockResponse(() => new Promise(() => {}))
+    fetchMock.mockResponse(
+      () =>
+        new Promise(() => {
+          // @NOTE: this is a promise that never resolves, to mock loading case
+        })
+    )
 
     render(
       <PagesStoregedProvider>
@@ -42,7 +47,7 @@ describe('<Layout />', () => {
     )
 
     await waitFor(() => {
-      expect(screen.getByTestId(`${id}__error`)).toBeInTheDocument()
+      expect(screen.getByTestId('error-case__id')).toBeInTheDocument()
     })
   })
 })