fork

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "basepath",
+    "tanstack"
+  ]
+}

__tests__/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:jest/recommended", "plugin:jest/style"],
+  "env": {
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.spec.js"],
+      "extends": ["plugin:jest-dom/recommended", "plugin:testing-library/react"],
+      "rules": {
+        "testing-library/prefer-screen-queries": "warn",
+        "testing-library/prefer-presence-queries": "warn",
+        "testing-library/prefer-explicit-assert": "warn",
+        "testing-library/no-wait-for-empty-callback": "warn"
+      }
+    }
+  ]
+}

__tests__/components/Column/components/Card/index.spec.tsx

@@ -0,0 +1,62 @@
+import { render } from '@testing-library/react'
+// @ts-expect-error TS(2305): Module '"react-beautiful-dnd"' has no exported mem... Remove this comment to see the full error message
+import { callbacks } from 'react-beautiful-dnd'
+import Card from '@/components/Board/components/DefaultCard'
+
+// @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+describe('<Card />', () => {
+  let subject
+
+  const card = {
+    id: 1,
+    title: 'Card title',
+    description: 'Card content',
+  }
+
+  // @ts-expect-error TS(2304): Cannot find name 'jest'.
+  const defaultCard = jest.fn(() => <div>Card title</div>)
+
+  function mount({ children = card, ...otherProps } = {}) {
+    subject = render(
+      <Card renderCard={defaultCard} {...otherProps}>
+        {children}
+      </Card>
+    )
+    return subject
+  }
+
+  function reset() {
+    subject = undefined
+    defaultCard.mockClear()
+  }
+
+  // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+  beforeEach(reset)
+
+  // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+  it('renders the specified card', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'expect'.
+    expect(mount().queryByText('Card title')).toBeInTheDocument()
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+  describe('when the card is being dragging', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+    beforeEach(() => {
+      callbacks.isDragging(true)
+      mount()
+    })
+    // @ts-expect-error TS(2304): Cannot find name 'afterEach'.
+    afterEach(() => {
+      callbacks.isDragging(false)
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+    it('calls the "renderCard" prop passing the dragging value', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(defaultCard).toHaveBeenCalledTimes(1)
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(defaultCard).toHaveBeenCalledWith(true)
+    })
+  })
+})

__tests__/components/Column/components/CardAdder/components/CardForm/index.spec.tsx

@@ -0,0 +1,107 @@
+import { render, fireEvent } from '@testing-library/react'
+import CardForm from '@/components/Board/components/Column/components/CardAdder/components/CardForm'
+
+// @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+describe('<CardForm />', () => {
+  let subject: any, onConfirm: any, onCancel: any
+
+  function mount() {
+    // @ts-expect-error TS(2304): Cannot find name 'jest'.
+    onConfirm = jest.fn()
+    // @ts-expect-error TS(2304): Cannot find name 'jest'.
+    onCancel = jest.fn()
+
+    subject = render(<CardForm onConfirm={onConfirm} onCancel={onCancel} />)
+  }
+
+  // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+  beforeEach(mount)
+  // @ts-expect-error TS(2304): Cannot find name 'afterEach'.
+  afterEach(() => {
+    subject = onConfirm = onCancel = undefined
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+  it('renders the card inputs', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'expect'.
+    expect(subject.container.querySelector('input[name="title"]')).toBeInTheDocument()
+    // @ts-expect-error TS(2304): Cannot find name 'expect'.
+    expect(subject.container.querySelector('input[name="description"]')).toBeInTheDocument()
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+  it('focuses on the title input', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'expect'.
+    expect(subject.container.querySelector('input[name="title"]')).toHaveFocus()
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+  describe('when the user clicks confirm the input', () => {
+    // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+    describe('when the user has informed a valid card', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+      beforeEach(() => {
+        fireEvent.change(subject.container.querySelector('input[name="title"]'), { target: { value: 'Card title' } })
+        fireEvent.change(subject.container.querySelector('input[name="description"]'), {
+          target: { value: 'Description' },
+        })
+        fireEvent.click(subject.queryByText('Add'))
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('calls the onConfirm prop passing the values', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).toHaveBeenCalledTimes(1)
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).toHaveBeenCalledWith({ title: 'Card title', description: 'Description' })
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('does not call the onCancel prop', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onCancel).not.toHaveBeenCalled()
+      })
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+    describe('when the user has not typed a card title', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+      beforeEach(() => {
+        fireEvent.change(subject.container.querySelector('input[name="title"]'), { target: { value: '' } })
+        fireEvent.click(subject.queryByText('Add'))
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('does not call the onConfirm prop', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).not.toHaveBeenCalled()
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('does not call the onCancel prop', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onCancel).not.toHaveBeenCalled()
+      })
+    })
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+  describe('when the user cancels the input', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+    beforeEach(() => {
+      fireEvent.click(subject.queryByText('Cancel'))
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+    it('calls the onCancel prop', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+    it('does not call the onConfirm prop', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+  })
+})

__tests__/components/Column/components/CardAdder/index.spec.tsx

@@ -0,0 +1,107 @@
+import { render, fireEvent } from '@testing-library/react'
+import CardAdder from '@/components/Board/components/ColumnAdder'
+
+// @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+describe('<CardAdder />', () => {
+  let subject: any, onConfirm: any
+  const column = { id: 1 }
+  function mount() {
+    // @ts-expect-error TS(2304): Cannot find name 'jest'.
+    onConfirm = jest.fn()
+
+    subject = render(<CardAdder column={column} onConfirm={onConfirm} />)
+  }
+
+  // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+  beforeEach(mount)
+  // @ts-expect-error TS(2304): Cannot find name 'afterEach'.
+  afterEach(() => {
+    subject = onConfirm = undefined
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+  it('renders the button to add a new card', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'expect'.
+    expect(subject.queryByText('+')).toBeInTheDocument()
+  })
+
+  // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+  describe('when the user clicks to add a new card', () => {
+    // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+    beforeEach(() => fireEvent.click(subject.queryByText('+')))
+
+    // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+    it('hides the card placeholder', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(subject.queryByText('+')).not.toBeInTheDocument()
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+    it('renders the card inputs', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(subject.container.querySelector('input[name="title"]')).toBeInTheDocument()
+      // @ts-expect-error TS(2304): Cannot find name 'expect'.
+      expect(subject.container.querySelector('input[name="description"]')).toBeInTheDocument()
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+    describe('when the user confirms the new card', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+      beforeEach(() => {
+        fireEvent.change(subject.container.querySelector('input[name="title"]'), {
+          target: { value: 'Card Added by user' },
+        })
+        fireEvent.change(subject.container.querySelector('input[name="description"]'), {
+          target: { value: 'Description' },
+        })
+        fireEvent.click(subject.queryByText('Add'))
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('calls the "onConfirm" prop passing the new card and the column', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).toHaveBeenCalledTimes(1)
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).toHaveBeenCalledWith(column, { title: 'Card Added by user', description: 'Description' })
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('hides the input', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(subject.container.querySelector('input')).not.toBeInTheDocument()
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('renders the placeholder to add a new card', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(subject.queryByText('+')).toBeInTheDocument()
+      })
+    })
+
+    // @ts-expect-error TS(2593): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
+    describe('when the user cancels the new card', () => {
+      // @ts-expect-error TS(2304): Cannot find name 'beforeEach'.
+      beforeEach(() => {
+        fireEvent.click(subject.queryByText('Cancel'))
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('does not call the "onConfirm" prop', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(onConfirm).not.toHaveBeenCalled()
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('hides the input', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(subject.container.querySelector('input')).not.toBeInTheDocument()
+      })
+
+      // @ts-expect-error TS(2593): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
+      it('renders the placeholder to add a new card', () => {
+        // @ts-expect-error TS(2304): Cannot find name 'expect'.
+        expect(subject.queryByText('+')).toBeInTheDocument()
+      })
+    })
+  })
+})