Merge pull request #14 from luis-grizzo/card-data-improvements

Card data improvements

.github/workflows/cy.yml

@@ -25,4 +25,4 @@ jobs:
         run: npm run lint
 
       - name: Test
-        run: npm run test:default --clearCache && npm run test:coverage
+        run: npm run test:clearCache && npm run test:coverage

__tests__/components/AutoSlider/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutoSlider should match snapshot 1`] = `
+<div>
+  <div
+    class="relative w-full"
+  >
+    <div
+      class="absolute right-0 top-0 w-4 h-full bg-gradient-to-l from-neutral-950 z-50"
+      data-testid="right-fade"
+      style="opacity: 0; will-change: opacity;"
+    />
+    <div
+      class="overflow-hidden -z-50"
+      role="tabpanel"
+    >
+      <div
+        class="flex items-center gap-4 w-min"
+        role="tablist"
+      >
+        <span>
+          item 1
+        </span>
+        <span>
+          item 2
+        </span>
+        <span>
+          item 3
+        </span>
+        <span>
+          item 4
+        </span>
+        <span>
+          item 5
+        </span>
+        <span>
+          item 6
+        </span>
+        <span>
+          item 7
+        </span>
+        <span>
+          item 8
+        </span>
+        <span>
+          item 9
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

__tests__/components/AutoSlider/index.test.tsx

@@ -0,0 +1,184 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { timeUnits } from '@/constants/timeUnits'
+
+import { AutoSlider } from '@/components'
+
+const mockItems = [
+  'item 1',
+  'item 2',
+  'item 3',
+  'item 4',
+  'item 5',
+  'item 6',
+  'item 7',
+  'item 8',
+  'item 9'
+]
+
+jest.useFakeTimers()
+
+describe('AutoSlider', () => {
+  it('should match snapshot', () => {
+    const { container } = render(
+      <AutoSlider>
+        {mockItems.map((item) => (
+          <span key={item}>{item}</span>
+        ))}
+      </AutoSlider>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should auto scroll to the end of content after interval', () => {
+    render(
+      <AutoSlider>
+        {mockItems.map((item) => (
+          <span key={item}>{item}</span>
+        ))}
+      </AutoSlider>
+    )
+
+    const container = screen.getByRole('tabpanel')
+    const content = screen.getByRole('tablist')
+
+    container.scrollTo = jest.fn((xOrOptions?: number | ScrollToOptions) => {
+      if (typeof xOrOptions === 'number') {
+        container.scrollLeft = xOrOptions
+      } else {
+        const { left } = xOrOptions as ScrollToOptions
+        container.scrollLeft = left ?? 0
+      }
+    })
+    const spyScrollTo = jest.spyOn(container, 'scrollTo')
+
+    Object.defineProperties(container, {
+      scrollWidth: {
+        value: 400,
+        writable: true
+      },
+      clientWidth: {
+        value: 300,
+        writable: true
+      }
+    })
+
+    Object.defineProperty(content, 'clientWidth', {
+      value: 400,
+      writable: true
+    })
+
+    jest.advanceTimersByTime(timeUnits.second * 3)
+
+    expect(spyScrollTo).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      left: 100
+    })
+
+    jest.advanceTimersByTime(timeUnits.second * 3)
+
+    expect(spyScrollTo).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      left: 0
+    })
+  })
+
+  it('should handle scroll', async () => {
+    render(
+      <AutoSlider>
+        {mockItems.map((item) => (
+          <span key={item}>{item}</span>
+        ))}
+      </AutoSlider>
+    )
+
+    const container = screen.getByRole('tabpanel')
+    const content = screen.getByRole('tablist')
+
+    let leftFade!: HTMLElement | null, rightFade!: HTMLElement | null
+
+    Object.defineProperties(container, {
+      scrollWidth: {
+        value: 400,
+        writable: true
+      },
+      clientWidth: {
+        value: 300,
+        writable: true
+      }
+    })
+
+    Object.defineProperty(content, 'clientWidth', {
+      value: 400,
+      writable: true
+    })
+
+    fireEvent.scroll(container, { target: { scrollLeft: 100 } })
+
+    leftFade = screen.queryByTestId('left-fade')
+    rightFade = screen.queryByTestId('right-fade')
+
+    await waitFor(() => {
+      expect(leftFade).toBeInTheDocument()
+      expect(rightFade).not.toBeInTheDocument()
+    })
+
+    fireEvent.scroll(container, { target: { scrollLeft: 50 } })
+
+    leftFade = screen.queryByTestId('left-fade')
+    rightFade = screen.queryByTestId('right-fade')
+
+    await waitFor(() => {
+      expect(leftFade).toBeInTheDocument()
+      expect(rightFade).toBeInTheDocument()
+    })
+
+    fireEvent.scroll(container, { target: { scrollLeft: 0 } })
+
+    leftFade = screen.queryByTestId('left-fade')
+    rightFade = screen.queryByTestId('right-fade')
+
+    await waitFor(() => {
+      expect(leftFade).not.toBeInTheDocument()
+      expect(rightFade).toBeInTheDocument()
+    })
+  })
+
+  // it('should handle the scroll functions', () => {
+  //   render(
+  //     <AutoSlider>
+  //       {mockItems.map((item) => (
+  //         <span key={item}>{item}</span>
+  //       ))}
+  //     </AutoSlider>
+  //   )
+
+  //   const container = screen.getByRole('tabpanel')
+  //   let leftFade, rightFade
+
+  //   fireEvent.scroll(container, { target: { scrollLeft: 100 } })
+
+  //   leftFade = screen.findAllByRole('presentation')
+  //   rightFade = screen.findAllByRole('presentation')[1]
+
+  //   expect(leftFade).toBeInTheDocument()
+  //   expect(rightFade).not.toBeInTheDocument()
+
+  //   // fireEvent.scroll(container, { target: { scrollLeft: 50 } })
+
+  //   // leftFade = screen.findAllByRole('presentation')[0]
+  //   // rightFade = screen.findAllByRole('presentation')[1]
+
+  //   // expect(leftFade).toBeInTheDocument()
+  //   // expect(rightFade).toBeInTheDocument()
+
+  //   // fireEvent.scroll(container, { target: { scrollLeft: 0 } })
+
+  //   // leftFade = screen.findAllByRole('presentation')[0]
+  //   // rightFade = screen.findAllByRole('presentation')[1]
+
+  //   // expect(leftFade).not.toBeInTheDocument()
+  //   // expect(rightFade).toBeInTheDocument()
+  // })
+})