From 7b9c01b5696685d130b47ca115cd23166c781b3e Mon Sep 17 00:00:00 2001 From: Leandro Lourenci Date: Sun, 9 Feb 2020 15:41:08 -0300 Subject: [PATCH 1/3] Rename lane for column --- README.md | 222 +++---- assets/index.js | 10 +- cypress/integration/board.spec.js | 90 +-- .../components/DefaultLaneHeader/index.js | 28 +- .../DefaultLaneHeader/index.spec.js | 106 ++-- src/components/Board/components/Lane/index.js | 24 +- .../Board/components/Lane/index.spec.js | 30 +- .../LaneAdder/components/LaneForm/index.js | 22 +- .../components/LaneForm/index.spec.js | 18 +- .../Board/components/LaneAdder/index.js | 22 +- .../Board/components/LaneAdder/index.spec.js | 28 +- src/components/Board/index.js | 219 +++---- src/components/Board/index.spec.js | 588 +++++++++--------- src/components/Board/services/index.js | 24 +- src/components/Board/services/index.spec.js | 22 +- src/index.spec.js | 10 +- src/services/helpers.js | 84 +-- src/services/helpers.spec.js | 104 ++-- 18 files changed, 829 insertions(+), 822 deletions(-) diff --git a/README.md b/README.md index 8295878b..ed324ba5 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Import the lib and use it on your project: import Board from '@lourenci/react-kanban' const board = { - lanes: [ + columns: [ { id: 1, title: 'Backlog', @@ -43,7 +43,7 @@ const board = { { id: 1, title: 'Add card', - description: 'Add capability to add a card in a lane' + description: 'Add capability to add a card in a column' }, ] }, @@ -54,7 +54,7 @@ const board = { { id: 2, title: 'Drag-n-drop support', - description: 'Move a card between the lanes' + description: 'Move a card between the columns' }, ] } @@ -81,16 +81,16 @@ We expose some APIs that you can import to help you to work with the controlled To use them, you just need to import them together with your board: ```js -import Board, { addCard, addLane, ... } from '@lourenci/react-kanban' +import Board, { addCard, addColumn, ... } from '@lourenci/react-kanban' ``` **All the helpers you need to pass your board and they will return a new board to pass to your state:** ```js -import Board, { addLane } from '@lourenci/react-kanban' +import Board, { addColumn } from '@lourenci/react-kanban' ... const [board, setBoard] = useState(initialBoard) ... -const newBoard = addLane(board, newLane) +const newBoard = addColumn(board, newColumn) setBoard(newBoard) ... {board} @@ -102,9 +102,9 @@ setBoard(newBoard) ```js { - lanes: [{ - id: ${unique-required-laneId}, - title: {$required-laneTitle**}, + columns: [{ + id: ${unique-required-columnId}, + title: {$required-columnTitle**}, cards: [{ id: ${unique-required-cardId}, title: ${required-cardTitle*} @@ -116,7 +116,7 @@ setBoard(newBoard) \* The `title` and the `description` are required if you are using the card's default template. You can render your own card template through the [`renderCard`](#rendercard) prop. -** The `title` is required if you are using the lane's default template. You can render your own lane template through the [`renderLaneHeader`](#renderlaneheader) prop. +** The `title` is required if you are using the column's default template. You can render your own column template through the [`renderColumnHeader`](#rendercolumnheader) prop. ### โš™๏ธ Props @@ -125,22 +125,22 @@ setBoard(newBoard) | [`children`](#children) (required if controlled) | The board to render | โœ… | ๐Ÿšซ | | [`initialBoard`](#initialboard) (required if uncontrolled) | The board to render | ๐Ÿšซ | โœ… | | [`onCardDragEnd`](#oncarddragend) | Callback that will be called when the card move ends | โœ… | โœ… | -| [`onLaneDragEnd`](#onlanedragend) | Callback that will be called when the lane move ends | โœ… | โœ… | +| [`onColumnDragEnd`](#oncolumndragend) | Callback that will be called when the column move ends | โœ… | โœ… | | [`renderCard`](#rendercard)| A card to be rendered instead of the default card | โœ… | โœ… | -| [`renderLaneHeader`](#renderlaneheader) | A lane header to be rendered instead of the default lane header | โœ… | โœ… | -| [`allowAddLane`](#allowaddlane) | Allow a new lane be added by the user | โœ… | โœ… | -| [`onNewLaneConfirm`](#onnewlaneconfirm) (required if use the default lane adder template) | Callback that will be called when a new lane is confirmed by the user through the default lane adder template | โœ… | โœ… | -| [`onLaneNew`](#onlanenew) (required if `allowAddLane` or when [`addLane`](#renderlaneadder) is called) | Callback that will be called when a new lane is added through the default lane adder template | ๐Ÿšซ | โœ… | -| [`renderLaneAdder`](#renderlaneadder) | A lane adder to be rendered instead of the default lane adder template | โœ… | โœ… | -| [`disableLaneDrag`](#disablelanedrag) | Disable the lane move | โœ… | โœ… | +| [`renderColumnHeader`](#rendercolumnheader) | A column header to be rendered instead of the default column header | โœ… | โœ… | +| [`allowAddColumn`](#allowaddcolumn) | Allow a new column be added by the user | โœ… | โœ… | +| [`onNewColumnConfirm`](#onnewcolumnconfirm) (required if use the default column adder template) | Callback that will be called when a new column is confirmed by the user through the default column adder template | โœ… | โœ… | +| [`onColumnNew`](#oncolumnnew) (required if `allowAddColumn` or when [`addColumn`](#rendercolumnadder) is called) | Callback that will be called when a new column is added through the default column adder template | ๐Ÿšซ | โœ… | +| [`renderColumnAdder`](#rendercolumnadder) | A column adder to be rendered instead of the default column adder template | โœ… | โœ… | +| [`disableColumnDrag`](#disablecolumndrag) | Disable the column move | โœ… | โœ… | | [`disableCardDrag`](#disablecarddrag) | Disable the card move | โœ… | โœ… | -| [`allowRemoveLane`](#allowremovelane) | Allow to remove a lane in default lane header | โœ… | โœ… | -| [`onLaneRemove`](#onlaneremove) (required if `allowRemoveLane` or when [`removeLane`](#renderlaneheader) is called) | Callback that will be called when a lane is removed | โœ… | โœ… | -| [`allowRenameLane`](#allowrenamelane) | Allow to rename a lane in default lane header | โœ… | โœ… | -| [`onLaneRename`](#onlanerename) (required if `allowRenameLane` or when [`renameLane`](#renderlaneheader) is called) | Callback that will be called when a lane is renamed | โœ… | โœ… | +| [`allowRemoveColumn`](#allowremovecolumn) | Allow to remove a column in default column header | โœ… | โœ… | +| [`onColumnRemove`](#oncolumnremove) (required if `allowRemoveColumn` or when [`removeColumn`](#rendercolumnheader) is called) | Callback that will be called when a column is removed | โœ… | โœ… | +| [`allowRenameColumn`](#allowrenamecolumn) | Allow to rename a column in default column header | โœ… | โœ… | +| [`onColumnRename`](#oncolumnrename) (required if `allowRenameColumn` or when [`renameColumn`](#rendercolumnheader) is called) | Callback that will be called when a column is renamed | โœ… | โœ… | | [`allowRemoveCard`](#allowremovecard) | Allow to remove a card in default card template | โœ… | โœ… | | [`onCardRemove`](#oncardremove) (required if `allowRemoveCard`) | Callback that will be called when a card is removed | โœ… | โœ… | -| [`onCardNew`](#oncardnew) (required if [`addCard`](#renderlaneheader) is called) | Callback that will be called when a new card is added | ๐Ÿšซ | โœ… | +| [`onCardNew`](#oncardnew) (required if [`addCard`](#rendercolumnheader) is called) | Callback that will be called when a new card is added | ๐Ÿšซ | โœ… | #### `children` @@ -157,35 +157,35 @@ When the user moves a card, this callback will be called passing these parameter |--------------|------------------------------------------------------- | | `board` | The modified board | | `card` | The moved card | -| `source` | An object with the card source `{ fromLaneId, fromPosition }` | -| `destination`| An object with the card destination `{ toLaneId, toPosition }`| +| `source` | An object with the card source `{ fromColumnId, fromPosition }` | +| `destination`| An object with the card destination `{ toColumnId, toPosition }`| ##### Source and destination | Prop | Description | |---------|------------------------------------------------------------------------| -| `fromLaneId`| Lane source id. -| `toLaneId`| Lane destination id.| -| `fromPosition` | Card's index in lane source's array.| -| `toPosition` | Card's index in lane destination's array.| +| `fromColumnId`| Column source id. +| `toColumnId`| Column destination id.| +| `fromPosition` | Card's index in column source's array.| +| `toPosition` | Card's index in column destination's array.| -#### `onLaneDragEnd` -When the user moves a lane, this callback will be called passing these parameters: +#### `onColumnDragEnd` +When the user moves a column, this callback will be called passing these parameters: | Arg | Description | |--------------|------------------------------------------------------- | | `board` | The modified board | -| `lane` | The moved lane | -| `source` | An object with the lane source `{ fromPosition }` | -| `destination`| An object with the lane destination `{ toPosition }`| +| `column` | The moved column | +| `source` | An object with the column source `{ fromPosition }` | +| `destination`| An object with the column destination `{ toPosition }`| ##### Source and destination | Prop | Description | |---------|------------------------------------------------------------------------| -| `fromPosition` | Lane index before the moving.| -| `toPosition` | Lane index after the moving.| +| `fromPosition` | Column index before the moving.| +| `toPosition` | Column index after the moving.| #### `renderCard` Use this if you want to render your own card. You have to pass a function and return your card component. @@ -199,7 +199,7 @@ The function will receive these parameters: ##### `cardBag` | function | Description | |--------------|------------------------------------------------------- | -| `removeCard*` | Call this function to remove the card from the lane | +| `removeCard*` | Call this function to remove the card from the column | | `dragging` | Whether the card is being dragged or not | \* It's unavailable when the board is controlled. @@ -207,9 +207,9 @@ The function will receive these parameters: Ex.: ```js const board = { - lanes: [{ - id: ${unique-required-laneId}, - title: ${laneTitle}, + columns: [{ + id: ${unique-required-columnId}, + title: ${columnTitle}, cards: [{ id: ${unique-required-cardId}, dueDate: ${cardDueDate}, @@ -230,34 +230,34 @@ const board = { ``` -#### `renderLaneHeader` -Use this if you want to render your own lane header. You have to pass a function and return your lane header component. +#### `renderColumnHeader` +Use this if you want to render your own column header. You have to pass a function and return your column header component. The function will receive these parameters: | Arg | Description | |--------------|------------------------------------------------------- | -| `lane` | The lane props | -| `laneBag` | A bag with some helper functions to work with the lane | +| `column` | The column props | +| `columnBag` | A bag with some helper functions to work with the column | -##### `laneBag` +##### `columnBag` | function | Description | |--------------|------------------------------------------------------- | -| `removeLane*` | Call this function to remove the lane from the board | -| `renameLane*` | Call this function with a title to rename the lane | -| `addCard*` | Call this function with a new card to add it in the lane | +| `removeColumn*` | Call this function to remove the column from the board | +| `renameColumn*` | Call this function with a title to rename the column | +| `addCard*` | Call this function with a new card to add it in the column | -**`addCard`**: As a second argument you can pass an option to define where in the lane you want to add the card: -* `{ on: 'top' }`: to add on the top of the lane. -* `{ on: 'bottom' }`: to add on the bottom of the lane (default). +**`addCard`**: As a second argument you can pass an option to define where in the column you want to add the card: +* `{ on: 'top' }`: to add on the top of the column. +* `{ on: 'bottom' }`: to add on the bottom of the column (default). \* It's unavailable when the board is controlled. Ex.: ```js const board = { - lanes: [{ - id: ${unique-required-laneId}, - title: ${laneTitle}, + columns: [{ + id: ${unique-required-columnId}, + title: ${columnTitle}, wip: ${wip}, cards: [{ id: ${unique-required-cardId}, @@ -268,103 +268,103 @@ const board = { } ( - + renderColumnHeader={({ title }, { removeColumn, renameColumn, addCard }) => ( + {title} - - + + - {board} ``` -#### `allowAddLane` -Allow the user to add a new lane directly by the board. +#### `allowAddColumn` +Allow the user to add a new column directly by the board. -#### `onNewLaneConfirm` -When the user confirms a new lane through the default lane adder template, this callback will be called with a draft of a lane with the title typed by the user. +#### `onNewColumnConfirm` +When the user confirms a new column through the default column adder template, this callback will be called with a draft of a column with the title typed by the user. -If your board is uncontrolled you **must** return the new lane with its new id in this callback. +If your board is uncontrolled you **must** return the new column with its new id in this callback. -If your board is controlled use this to get the new lane title. +If your board is controlled use this to get the new column title. Ex.: ```js -function onLaneNew (newLane) { - const newLane = { id: ${required-new-unique-laneId}, ...newLane } - return newLane +function onColumnNew (newColumn) { + const newColumn = { id: ${required-new-unique-columnId}, ...newColumn } + return newColumn } - + ``` -#### `onLaneNew` -When the user adds a new lane through the default lane adder template, this callback will be called passing the updated board and the new lane. +#### `onColumnNew` +When the user adds a new column through the default column adder template, this callback will be called passing the updated board and the new column. This callback will not be called in an uncontrolled board. -#### `renderLaneAdder` -Use this if you want to render your own lane adder. You have to pass a function and return your lane adder component. +#### `renderColumnAdder` +Use this if you want to render your own column adder. You have to pass a function and return your column adder component. The function will receive these parameters: | Arg | Description | |--------------|------------------------------------------------------- | -| `laneBag` | A bag with some helper functions | +| `columnBag` | A bag with some helper functions | -##### `laneBag` +##### `columnBag` | function | Description | |--------------|------------------------------------------------------- | -| `addLane*` | Call this function with a new lane to add the new lane | +| `addColumn*` | Call this function with a new column to add the new column | \* It's unavailable when the board is controlled. Ex.: ```js -const LaneAdder = ({ addLane }) { +const ColumnAdder = ({ addColumn }) { return ( -
addLane({id: ${required-new-unique-laneId}, title: 'Title', cards:[]})}> - Add lane +
addColumn({id: ${required-new-unique-columnId}, title: 'Title', cards:[]})}> + Add column
) } } + allowAddColumn + renderColumnAdder={({ addColumn }) => } {board} ``` -#### `disableLaneDrag` -Disallow the user from move a lane. +#### `disableColumnDrag` +Disallow the user from move a column. #### `disableCardDrag` Disallow the user from move a card. -#### `allowRemoveLane` -When using the default header template, when you don't pass a template through the `renderLaneHeader`, it will allow the user to remove a lane. +#### `allowRemoveColumn` +When using the default header template, when you don't pass a template through the `renderColumnHeader`, it will allow the user to remove a column. -#### `onLaneRemove` -When the user removes a lane, this callback will be called passing these parameters: +#### `onColumnRemove` +When the user removes a column, this callback will be called passing these parameters: | Arg | Description | |--------------|------------------------------------------------------- | -| `board` | The board without the removed lane | -| `lane` | The removed lane | +| `board` | The board without the removed column | +| `column` | The removed column | -#### `allowRenameLane` -When using the default header template, when you don't pass a template through the `renderLaneHeader`, it will allow the user to rename a lane. +#### `allowRenameColumn` +When using the default header template, when you don't pass a template through the `renderColumnHeader`, it will allow the user to rename a column. -#### `onLaneRename` -When the user renames a lane, this callback will be called passing these parameters: +#### `onColumnRename` +When the user renames a column, this callback will be called passing these parameters: | Arg | Description | |--------------|------------------------------------------------------- | -| `board` | The board with the renamed lane | -| `lane` | The renamed lane | +| `board` | The board with the renamed column | +| `column` | The renamed column | #### `allowRemoveCard` When using the default card template, when you don't pass a template through the `renderCard`, it will allow the user to remove a card. @@ -374,66 +374,66 @@ When the user removes a card, this callback will be called passing these paramet | Arg | Description | |--------------|------------------------------------------------------- | -| `board` | The board without the removed lane | -| `lane` | The lane without the removed card | +| `board` | The board without the removed column | +| `column` | The column without the removed card | | `card` | The removed card | ### ๐Ÿ”ฉ Helpers to be used with an controlled board -#### `moveLane` +#### `moveColumn` | Arg | Description | |-|-| | `board` | Your board | -| `{ fromPosition }` | Index of lane to be moved | -| `{ toPosition }` | Index destination of lane to be moved | +| `{ fromPosition }` | Index of column to be moved | +| `{ toPosition }` | Index destination of column to be moved | #### `moveCard` | Arg | Description | |-|-| | `board` | Your board | -| `{ fromPosition, fromLaneId }` | Index and laneId of card to be moved | -| `{ toPosition, toLaneId }` | Index and laneId of the card destination | +| `{ fromPosition, fromColumnId }` | Index and columnId of card to be moved | +| `{ toPosition, toColumnId }` | Index and columnId of the card destination | -#### `addLane` +#### `addColumn` | Arg | Description | |-|-| | `board` | Your board | -| `lane` | Lane to be added | +| `column` | Column to be added | -#### `removeLane` +#### `removeColumn` | Arg | Description | |-|-| | `board` | Your board | -| `lane` | Lane to be removed | +| `column` | Column to be removed | -#### `changeLane` +#### `changeColumn` | Arg | Description | |-|-| | `board` | Your board | -| `lane` | Lane to be renamed | -| `object` | Pass a object to be merged with the lane. You can add new props and/or change the existing ones | +| `column` | Column to be renamed | +| `object` | Pass a object to be merged with the column. You can add new props and/or change the existing ones | #### `addCard` | Arg | Description | |-|-| | `board` | Your board | -| `inLane` | Lane to add the card be added | +| `inColumn` | Column to add the card be added | | `card` | Card to be added | -| `{ on: 'bottom|top' }` | Whether the card will be added on top or bottom of the lane (`bottom` is default) | +| `{ on: 'bottom|top' }` | Whether the card will be added on top or bottom of the column (`bottom` is default) | #### `removeCard` | Arg | Description | |-|-| | `board` | Your board | -| `fromLane` | Lane where the card is | +| `fromColumn` | Column where the card is | | `card` | Card to be removed | ## ๐Ÿงช Tests diff --git a/assets/index.js b/assets/index.js index 3b05093f..198dd861 100644 --- a/assets/index.js +++ b/assets/index.js @@ -4,10 +4,10 @@ import Board from '../src' import getUrlParams from './services/getUrlParams' const board = { - lanes: [ + columns: [ { id: '0206c8d7-4d48-4d97-b867-86fc2d21074d', - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: '0206c8d7-4d48-4d97-b867-86fc2d21075d', @@ -53,7 +53,7 @@ const board = { }, { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 9, @@ -68,8 +68,8 @@ const board = { render( , diff --git a/cypress/integration/board.spec.js b/cypress/integration/board.spec.js index 7b588521..376825d2 100644 --- a/cypress/integration/board.spec.js +++ b/cypress/integration/board.spec.js @@ -1,25 +1,25 @@ describe('Board Page', function() { - it('renders a board with its lanes and cards', function() { - cy.get('[data-testid="lane"]').should('have.length', 2) - cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Backlog') - cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Doing') + it('renders a board with its columns and cards', function() { + cy.get('[data-testid="column"]').should('have.length', 2) + cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Backlog') + cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Doing') cy.get('[data-testid="card"]').should('have.length', 9) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8) - cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8) + cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/) - cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]:eq(0)').contains(/Card title 9/) + cy.get('[data-testid="column"]:eq(1) [data-testid="card"]:eq(0)').contains(/Card title 9/) }) describe('about the card moving', () => { describe('when the card is not blocked for moving', () => { - describe('when the user moves a card in the same lane', () => { + describe('when the user moves a card in the same column', () => { beforeEach(() => { - const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)' + const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)' cy.get(firstCardSelector) .trigger('keydown', { keyCode: 32, which: 32 }) .trigger('keydown', { keyCode: 40, which: 40, force: true }) @@ -29,18 +29,18 @@ describe('Board Page', function() { .trigger('keydown', { keyCode: 32, which: 32, force: true }) }) - it('moves the cards to another position in the same lane', () => { - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8) - cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 2/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 3/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 1/) + it('moves the cards to another position in the same column', () => { + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8) + cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 2/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 3/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 1/) }) }) - describe('when the user moves a card from a lane to another lane', () => { + describe('when the user moves a card from a column to another column', () => { beforeEach(() => { - const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)' + const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)' cy.get(firstCardSelector) .trigger('keydown', { keyCode: 32, which: 32 }) .trigger('keydown', { keyCode: 39, which: 39, force: true }) @@ -48,9 +48,9 @@ describe('Board Page', function() { .trigger('keydown', { keyCode: 32, which: 32, force: true }) }) - it('moves the cards to another lane', () => { - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 7) - cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 2) + it('moves the cards to another column', () => { + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 7) + cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 2) }) }) }) @@ -60,7 +60,7 @@ describe('Board Page', function() { describe('when the user tries to move a card', () => { beforeEach(() => { - const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)' + const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)' cy.get(firstCardSelector) .trigger('keydown', { keyCode: 32, which: 32 }) .trigger('keydown', { keyCode: 40, which: 40, force: true }) @@ -71,51 +71,51 @@ describe('Board Page', function() { }) it('does not move the card', () => { - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8) - cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/) - cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8) + cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/) + cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/) }) }) }) }) - describe('about the lane moving', () => { - describe('when the lane is not blocked for moving', () => { - describe('when the user moves a lane to another position', () => { + describe('about the column moving', () => { + describe('when the column is not blocked for moving', () => { + describe('when the user moves a column to another position', () => { beforeEach(() => { - const firstLane = '[data-testid="lane"]:eq(0) > div:eq(0)' - cy.get(firstLane) + const firstColumn = '[data-testid="column"]:eq(0) > div:eq(0)' + cy.get(firstColumn) .trigger('keydown', { keyCode: 32, which: 32 }) .trigger('keydown', { keyCode: 39, which: 39, force: true }) .wait(500) .trigger('keydown', { keyCode: 32, which: 32, force: true }) }) - it('moves the lane to the specified position', () => { - cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Doing') - cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Backlog') + it('moves the column to the specified position', () => { + cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Doing') + cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Backlog') }) }) }) - describe('when the lane is blocked for moving', () => { - beforeEach(() => cy.visit('/?disableLaneDrag=true')) + describe('when the column is blocked for moving', () => { + beforeEach(() => cy.visit('/?disableColumnDrag=true')) - describe('when the user tries to move a lane', () => { + describe('when the user tries to move a column', () => { beforeEach(() => { - const firstLane = '[data-testid="lane"]:eq(0) > div:eq(0)' - cy.get(firstLane) + const firstColumn = '[data-testid="column"]:eq(0) > div:eq(0)' + cy.get(firstColumn) .trigger('keydown', { keyCode: 32, which: 32 }) .trigger('keydown', { keyCode: 39, which: 39, force: true }) .wait(500) .trigger('keydown', { keyCode: 32, which: 32, force: true }) }) - it('does not move the lane', () => { - cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Backlog') - cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Doing') + it('does not move the column', () => { + cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Backlog') + cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Doing') }) }) }) diff --git a/src/components/Board/components/DefaultLaneHeader/index.js b/src/components/Board/components/DefaultLaneHeader/index.js index 23c0c2f9..1947cb6f 100644 --- a/src/components/Board/components/DefaultLaneHeader/index.js +++ b/src/components/Board/components/DefaultLaneHeader/index.js @@ -2,7 +2,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import CursorPointer from '../CursorPointer' -const LaneHeaderSkeleton = styled.div` +const ColumnHeaderSkeleton = styled.div` padding-bottom: 10px; font-weight: bold; display: flex; @@ -31,8 +31,8 @@ const Input = styled.input` } ` -function LaneTitle({ allowRenameLane, onClick, children: title }) { - return allowRenameLane ? {title} : {title} +function ColumnTitle({ allowRenameColumn, onClick, children: title }) { + return allowRenameColumn ? {title} : {title} } function useRenameMode(state) { @@ -45,26 +45,26 @@ function useRenameMode(state) { return [renameMode, toggleRenameMode] } -export default function({ children: lane, allowRemoveLane, onLaneRemove, allowRenameLane, onLaneRename }) { +export default function({ children: column, allowRemoveColumn, onColumnRemove, allowRenameColumn, onColumnRename }) { const [renameMode, toggleRenameMode] = useRenameMode(false) const [titleInput, setTitleInput] = useState('') - function handleRenameLane(event) { + function handleRenameColumn(event) { event.preventDefault() - onLaneRename(lane, titleInput) + onColumnRename(column, titleInput) toggleRenameMode() } function handleRenameMode() { - setTitleInput(lane.title) + setTitleInput(column.title) toggleRenameMode() } return ( - + {renameMode ? ( -
+ ) : ( <> - - {lane.title} - - {allowRemoveLane && onLaneRemove(lane)}>ร—} + + {column.title} + + {allowRemoveColumn && onColumnRemove(column)}>ร—} )} - + ) } diff --git a/src/components/Board/components/DefaultLaneHeader/index.spec.js b/src/components/Board/components/DefaultLaneHeader/index.spec.js index 9acef498..9ca11cc5 100644 --- a/src/components/Board/components/DefaultLaneHeader/index.spec.js +++ b/src/components/Board/components/DefaultLaneHeader/index.spec.js @@ -1,113 +1,113 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import DefaultLaneHeader from './' +import DefaultColumnHeader from './' -describe('', () => { +describe('', () => { let subject - const onLaneRemove = jest.fn() - const onLaneRename = jest.fn() + const onColumnRemove = jest.fn() + const onColumnRename = jest.fn() - const lane = { id: 1, title: 'Lane title' } + const column = { id: 1, title: 'Column title' } function reset() { subject = undefined - onLaneRemove.mockClear() - onLaneRename.mockClear() + onColumnRemove.mockClear() + onColumnRename.mockClear() } function mount(props) { subject = render( - - {lane} - + + {column} + ) return subject } beforeEach(reset) - it('renders a lane header with the title', () => { - expect(mount().queryByText('Lane title')).toBeInTheDocument() + it('renders a column header with the title', () => { + expect(mount().queryByText('Column title')).toBeInTheDocument() }) - describe('about the remove lane button', () => { - describe('when the component does not receive the allowRemoveLane prop', () => { - beforeEach(() => mount({ onLaneRemove })) + describe('about the remove column button', () => { + describe('when the component does not receive the allowRemoveColumn prop', () => { + beforeEach(() => mount({ onColumnRemove })) it('does not show the remove button', () => { expect(subject.queryByText('ร—')).not.toBeInTheDocument() }) - it('does not call the "onLaneRemove" callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove" callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) }) - describe('when the component receives the "allowRemoveLane" prop', () => { - beforeEach(() => mount({ allowRemoveLane: true })) + describe('when the component receives the "allowRemoveColumn" prop', () => { + beforeEach(() => mount({ allowRemoveColumn: true })) it('shows the remove button', () => { expect(subject.queryByText('ร—')).toBeInTheDocument() }) - it('does not call the "onLaneRemove" callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove" callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) describe('when the user clicks on the remove button', () => { beforeEach(() => fireEvent.click(subject.queryByText('ร—'))) - it('calls the "onLaneRemove" callback passing the lane', () => { - expect(onLaneRemove).toHaveBeenCalledTimes(1) - expect(onLaneRemove).toHaveBeenCalledWith(lane) + it('calls the "onColumnRemove" callback passing the column', () => { + expect(onColumnRemove).toHaveBeenCalledTimes(1) + expect(onColumnRemove).toHaveBeenCalledWith(column) }) }) }) }) - describe('about the lane title renaming', () => { - describe('when the component does not receive the "allowRenameLane" prop', () => { - beforeEach(() => mount({ onLaneRename })) + describe('about the column title renaming', () => { + describe('when the component does not receive the "allowRenameColumn" prop', () => { + beforeEach(() => mount({ onColumnRename })) describe('when the user moves the mouse over the title', () => { it('does not show a mouse pointer', () => { - expect(subject.queryByText('Lane title')).not.toHaveStyle({ cursor: 'pointer' }) + expect(subject.queryByText('Column title')).not.toHaveStyle({ cursor: 'pointer' }) }) }) - describe('when the user clicks on the lane title', () => { - beforeEach(() => fireEvent.click(subject.queryByText('Lane title'))) + describe('when the user clicks on the column title', () => { + beforeEach(() => fireEvent.click(subject.queryByText('Column title'))) - it('does not allow the user to rename the lane', () => { - expect(subject.queryByText('Lane title')).toBeInTheDocument() + it('does not allow the user to rename the column', () => { + expect(subject.queryByText('Column title')).toBeInTheDocument() expect(subject.container.querySelector('input')).not.toBeInTheDocument() }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) }) }) - describe('when the component receives the "allowRenameLane" prop', () => { - beforeEach(() => mount({ allowRenameLane: true, onLaneRename })) + describe('when the component receives the "allowRenameColumn" prop', () => { + beforeEach(() => mount({ allowRenameColumn: true, onColumnRename })) describe('when the user moves the mouse over the title', () => { it('shows a mouse pointer', () => { - expect(subject.queryByText('Lane title')).toHaveStyle({ cursor: 'pointer' }) + expect(subject.queryByText('Column title')).toHaveStyle({ cursor: 'pointer' }) }) }) - describe('when the user clicks on the lane title', () => { - beforeEach(() => fireEvent.click(subject.queryByText('Lane title'))) + describe('when the user clicks on the column title', () => { + beforeEach(() => fireEvent.click(subject.queryByText('Column title'))) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) it('toggles the title for an input for typing a new title', () => { - expect(subject.queryByText('Lane title')).not.toBeInTheDocument() + expect(subject.queryByText('Column title')).not.toBeInTheDocument() expect(subject.container.querySelector('input')).toBeInTheDocument() expect(subject.queryByText('Rename', { selector: 'button' })).toBeInTheDocument() expect(subject.queryByText('Cancel', { selector: 'button' })).toBeInTheDocument() @@ -117,8 +117,8 @@ describe('', () => { expect(subject.container.querySelector('input')).toHaveFocus() }) - it('fills the input with the lane title', () => { - expect(subject.container.querySelector('input')).toHaveValue('Lane title') + it('fills the input with the column title', () => { + expect(subject.container.querySelector('input')).toHaveValue('Column title') }) describe('when the user types a new name and confirms it', () => { @@ -127,14 +127,14 @@ describe('', () => { fireEvent.click(subject.queryByText('Rename', { selector: 'button' })) }) - it('toggles the input for the lane title', () => { - expect(subject.queryByText('Lane title')).toBeInTheDocument() + it('toggles the input for the column title', () => { + expect(subject.queryByText('Column title')).toBeInTheDocument() expect(subject.container.querySelector('input')).not.toBeInTheDocument() }) - it('calls the "onLaneRename" callback passing the lane with the new title', () => { - expect(onLaneRename).toHaveBeenCalledTimes(1) - expect(onLaneRename).toHaveBeenCalledWith(lane, 'New title') + it('calls the "onColumnRename" callback passing the column with the new title', () => { + expect(onColumnRename).toHaveBeenCalledTimes(1) + expect(onColumnRename).toHaveBeenCalledWith(column, 'New title') }) }) @@ -143,13 +143,13 @@ describe('', () => { fireEvent.click(subject.queryByText('Cancel', { selector: 'button' })) }) - it('toggles the input for the lane title', () => { - expect(subject.queryByText('Lane title')).toBeInTheDocument() + it('toggles the input for the column title', () => { + expect(subject.queryByText('Column title')).toBeInTheDocument() expect(subject.container.querySelector('input')).not.toBeInTheDocument() }) - it('does call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) }) }) diff --git a/src/components/Board/components/Lane/index.js b/src/components/Board/components/Lane/index.js index 0ec0f3ca..d0c9658c 100644 --- a/src/components/Board/components/Lane/index.js +++ b/src/components/Board/components/Lane/index.js @@ -5,7 +5,7 @@ import Card from './components/Card' import CardSkeleton from '../CardSkeleton' import withDroppable from '../../../withDroppable' -export const StyledLane = styled.div` +export const StyledColumn = styled.div` height: 100%; display: inline-block; padding: 15px; @@ -15,19 +15,19 @@ export const StyledLane = styled.div` vertical-align: top; ` -const DroppableLane = withDroppable(styled.div` +const DroppableColumn = withDroppable(styled.div` min-height: 28px; `) -function Lane({ children, index: laneIndex, renderCard, renderLaneHeader, disableLaneDrag, disableCardDrag }) { +function Column({ children, index: columnIndex, renderCard, renderColumnHeader, disableColumnDrag, disableCardDrag }) { return ( - - {laneProvided => ( - -
- {renderLaneHeader(children)} + + {columnProvided => ( + +
+ {renderColumnHeader(children)}
- + {children.cards.length ? ( children.cards.map((card, index) => ( )} - - + + )} ) } -export default Lane +export default Column diff --git a/src/components/Board/components/Lane/index.spec.js b/src/components/Board/components/Lane/index.spec.js index 146aaccb..1a715bf3 100644 --- a/src/components/Board/components/Lane/index.spec.js +++ b/src/components/Board/components/Lane/index.spec.js @@ -1,13 +1,13 @@ import React from 'react' import { render } from '@testing-library/react' -import Lane, { StyledLane } from './' +import Column, { StyledColumn } from './' -describe('', () => { +describe('', () => { let subject const renderCard = jest.fn((_, { title }) =>
{title}
) - const lane = { + const column = { id: 1, title: 'Backlog', cards: [ @@ -24,11 +24,11 @@ describe('', () => { ] } - function mount({ children = lane, ...otherProps } = {}) { + function mount({ children = column, ...otherProps } = {}) { subject = render( -
Backlog
} renderCard={renderCard}> +
Backlog
} renderCard={renderCard}> {children} - + ) return subject } @@ -40,32 +40,32 @@ describe('', () => { beforeEach(reset) - it('renders a lane', () => { + it('renders a column', () => { expect(mount().container.querySelector('div')).toBeInTheDocument() }) - it("renders the lane's header", () => { + it("renders the column's header", () => { expect(mount().queryByText(/^Backlog$/)).toBeInTheDocument() }) - describe("about the lane's card", () => { + describe("about the column's card", () => { beforeEach(() => mount()) - it('renders the specified cards in the lane ordered by its specified position', () => { + it('renders the specified cards in the column ordered by its specified position', () => { const cards = subject.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) expect(cards[0]).toHaveTextContent(/^Card title 1/) expect(cards[1]).toHaveTextContent(/^Card title 2/) }) - it('calls the "renderCard" passing the lane, the card and whether the card is dragging or not', () => { - expect(renderCard).toHaveBeenCalledWith(lane, expect.objectContaining({ id: 1, title: 'Card title 1' }), false) + it('calls the "renderCard" passing the column, the card and whether the card is dragging or not', () => { + expect(renderCard).toHaveBeenCalledWith(column, expect.objectContaining({ id: 1, title: 'Card title 1' }), false) }) }) }) -describe('', () => { - it('renders a lane', () => { - expect(render().container.querySelector('div')).toBeInTheDocument() +describe('', () => { + it('renders a column', () => { + expect(render().container.querySelector('div')).toBeInTheDocument() }) }) diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.js b/src/components/Board/components/LaneAdder/components/LaneForm/index.js index 21021630..7ec32d41 100644 --- a/src/components/Board/components/LaneAdder/components/LaneForm/index.js +++ b/src/components/Board/components/LaneAdder/components/LaneForm/index.js @@ -1,9 +1,9 @@ import React from 'react' import styled from 'styled-components' -import { StyledLane } from '../../../Lane' +import { StyledColumn } from '../../../Column' import { when } from '@services/utils' -const StyledLaneForm = styled(StyledLane)` +const StyledColumnForm = styled(StyledColumn)` min-width: 230px; form { @@ -12,26 +12,26 @@ const StyledLaneForm = styled(StyledLane)` } ` -function LaneForm({ onConfirm, onCancel }) { - const inputLaneTitle = React.createRef() +function ColumnForm({ onConfirm, onCancel }) { + const inputColumnTitle = React.createRef() - function addLane(event) { + function addColumn(event) { event.preventDefault() - when(inputLaneTitle.current.value)(onConfirm) + when(inputColumnTitle.current.value)(onConfirm) } return ( - - - + + + - + ) } -export default LaneForm +export default ColumnForm diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js b/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js index a671af2c..143dc912 100644 --- a/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js +++ b/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js @@ -1,15 +1,15 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import LaneForm from './' +import ColumnForm from './' -describe('', () => { +describe('', () => { let subject, onConfirm, onCancel function mount() { onConfirm = jest.fn() onCancel = jest.fn() - subject = render() + subject = render() } beforeEach(mount) @@ -17,7 +17,7 @@ describe('', () => { subject = onConfirm = onCancel = undefined }) - it('renders an input asking for a lane title', () => { + it('renders an input asking for a column title', () => { expect(subject.container.querySelector('input')).toBeInTheDocument() }) @@ -26,15 +26,15 @@ describe('', () => { }) describe('when the user clicks confirm the input', () => { - describe('when the user has typed a lane title', () => { + describe('when the user has typed a column title', () => { beforeEach(() => { - fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Lane Title' } }) + fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Column Title' } }) fireEvent.click(subject.queryByText('Add')) }) - it('calls the onConfirm prop passing the lane title', () => { + it('calls the onConfirm prop passing the column title', () => { expect(onConfirm).toHaveBeenCalledTimes(1) - expect(onConfirm).toHaveBeenCalledWith('Lane Title') + expect(onConfirm).toHaveBeenCalledWith('Column Title') }) it('does not call the onCancel prop', () => { @@ -42,7 +42,7 @@ describe('', () => { }) }) - describe('when the user has not typed a lane title', () => { + describe('when the user has not typed a column title', () => { beforeEach(() => { fireEvent.click(subject.queryByText('Add')) }) diff --git a/src/components/Board/components/LaneAdder/index.js b/src/components/Board/components/LaneAdder/index.js index 5c277ddd..02268f25 100644 --- a/src/components/Board/components/LaneAdder/index.js +++ b/src/components/Board/components/LaneAdder/index.js @@ -1,8 +1,8 @@ import React, { useState } from 'react' import styled from 'styled-components' -import LaneForm from './components/LaneForm' +import ColumnForm from './components/ColumnForm' -const LaneAdderPlaceholder = styled.div` +const ColumnAdderPlaceholder = styled.div` border: 2px dashed #eee; min-width: 230px; height: 132px; @@ -16,21 +16,21 @@ const LaneAdderPlaceholder = styled.div` } ` -function LaneAdder({ onConfirm }) { - const [isAddingLane, setAddingLane] = useState(false) +function ColumnAdder({ onConfirm }) { + const [isAddingColumn, setAddingColumn] = useState(false) - function confirmLane(title) { + function confirmColumn(title) { onConfirm(title) - setAddingLane(false) + setAddingColumn(false) } - return isAddingLane ? ( - setAddingLane(false)} /> + return isAddingColumn ? ( + setAddingColumn(false)} /> ) : ( - setAddingLane(true)} role='button'> + setAddingColumn(true)} role='button'> โž• - + ) } -export default LaneAdder +export default ColumnAdder diff --git a/src/components/Board/components/LaneAdder/index.spec.js b/src/components/Board/components/LaneAdder/index.spec.js index 5621ccf0..18456a79 100644 --- a/src/components/Board/components/LaneAdder/index.spec.js +++ b/src/components/Board/components/LaneAdder/index.spec.js @@ -1,14 +1,14 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import LaneAdder from './' +import ColumnAdder from './' -describe('', () => { +describe('', () => { let subject, onConfirm function mount() { onConfirm = jest.fn() - subject = render() + subject = render() } beforeEach(mount) @@ -16,42 +16,42 @@ describe('', () => { subject = onConfirm = undefined }) - it('renders the lane placeholder to add a new lane', () => { + it('renders the column placeholder to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) - describe('when the user clicks to add a new lane', () => { + describe('when the user clicks to add a new column', () => { beforeEach(() => fireEvent.click(subject.queryByText('โž•'))) - it('hides the lane placeholder', () => { + it('hides the column placeholder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) - it('renders the input asking for a lane name', () => { + it('renders the input asking for a column name', () => { expect(subject.container.querySelector('input')).toBeInTheDocument() }) - describe('when the user confirms the new lane', () => { + describe('when the user confirms the new column', () => { beforeEach(() => { - fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Lane Added by user' } }) + fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Column Added by user' } }) fireEvent.click(subject.queryByText('Add')) }) - it('calls the "onConfirm" prop passing the lane title', () => { + it('calls the "onConfirm" prop passing the column title', () => { expect(onConfirm).toHaveBeenCalledTimes(1) - expect(onConfirm).toHaveBeenCalledWith('Lane Added by user') + expect(onConfirm).toHaveBeenCalledWith('Column Added by user') }) it('hides the input', () => { expect(subject.container.querySelector('input')).not.toBeInTheDocument() }) - it('renders the lane placeholder to add a new lane', () => { + it('renders the column placeholder to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) }) - describe('when the user cancels the new lane', () => { + describe('when the user cancels the new column', () => { beforeEach(() => { fireEvent.click(subject.queryByText('Cancel')) }) @@ -64,7 +64,7 @@ describe('', () => { expect(subject.container.querySelector('input')).not.toBeInTheDocument() }) - it('renders the lane placeholder to add a new lane', () => { + it('renders the column placeholder to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) }) diff --git a/src/components/Board/index.js b/src/components/Board/index.js index fce91204..1c2ec887 100644 --- a/src/components/Board/index.js +++ b/src/components/Board/index.js @@ -1,14 +1,14 @@ import React, { useState } from 'react' import styled from 'styled-components' import { DragDropContext } from 'react-beautiful-dnd' -import Lane from './components/Lane' -import LaneAdder from './components/LaneAdder' +import Column from './components/Column' +import ColumnAdder from './components/ColumnAdder' import withDroppable from '../withDroppable' import { when, partialRight } from '@services/utils' -import DefaultLaneHeader from './components/DefaultLaneHeader' +import DefaultColumnHeader from './components/DefaultColumnHeader' import DefaultCard from './components/DefaultCard' -import { getCard, getCoordinates, isALaneMove } from './services' -import { moveCard, moveLane, addLane, removeLane, changeLane, addCard, removeCard } from '@services/helpers' +import { getCard, getCoordinates, isAColumnMove } from './services' +import { moveCard, moveColumn, addColumn, removeColumn, changeColumn, addCard, removeCard } from '@services/helpers' const StyledBoard = styled.div` padding: 5px; @@ -17,11 +17,11 @@ const StyledBoard = styled.div` align-items: flex-start; ` -const Lanes = styled.div` +const Columns = styled.div` white-space: nowrap; ` -const DroppableBoard = withDroppable(Lanes) +const DroppableBoard = withDroppable(Columns) function Board(props) { return props.initialBoard ? : @@ -30,26 +30,29 @@ function Board(props) { function UncontrolledBoard({ initialBoard, onCardDragEnd, - onLaneDragEnd, - allowAddLane, - renderLaneAdder, - onNewLaneConfirm, - onLaneRemove, - renderLaneHeader, - allowRemoveLane, - allowRenameLane, - onLaneRename, + onColumnDragEnd, + allowAddColumn, + renderColumnAdder, + onNewColumnConfirm, + onColumnRemove, + renderColumnHeader, + allowRemoveColumn, + allowRenameColumn, + onColumnRename, onCardNew, renderCard, allowRemoveCard, onCardRemove, - onLaneNew, + onColumnNew, disableCardDrag, - disableLaneDrag + disableColumnDrag }) { const [board, setBoard] = useState(initialBoard) const handleOnCardDragEnd = partialRight(handleOnDragEnd, { moveCallback: moveCard, notifyCallback: onCardDragEnd }) - const handleOnLaneDragEnd = partialRight(handleOnDragEnd, { moveCallback: moveLane, notifyCallback: onLaneDragEnd }) + const handleOnColumnDragEnd = partialRight(handleOnDragEnd, { + moveCallback: moveColumn, + notifyCallback: onColumnDragEnd + }) function handleOnDragEnd({ source, destination, subject }, { moveCallback, notifyCallback }) { const reorderedBoard = moveCallback(board, source, destination) @@ -57,40 +60,40 @@ function UncontrolledBoard({ setBoard(reorderedBoard) } - async function handleLaneAdd(newLane) { - const lane = renderLaneAdder ? newLane : await onNewLaneConfirm(newLane) - const boardWithNewLane = addLane(board, lane) - onLaneNew(boardWithNewLane, lane) - setBoard(boardWithNewLane) + async function handleColumnAdd(newColumn) { + const column = renderColumnAdder ? newColumn : await onNewColumnConfirm(newColumn) + const boardWithNewColumn = addColumn(board, column) + onColumnNew(boardWithNewColumn, column) + setBoard(boardWithNewColumn) } - function handleLaneRemove(lane) { - const filteredBoard = removeLane(board, lane) - onLaneRemove(filteredBoard, lane) + function handleColumnRemove(column) { + const filteredBoard = removeColumn(board, column) + onColumnRemove(filteredBoard, column) setBoard(filteredBoard) } - function handleLaneRename(lane, title) { - const boardWithRenamedLane = changeLane(board, lane, { title }) - onLaneRename(boardWithRenamedLane, { ...lane, title }) - setBoard(boardWithRenamedLane) + function handleColumnRename(column, title) { + const boardWithRenamedColumn = changeColumn(board, column, { title }) + onColumnRename(boardWithRenamedColumn, { ...column, title }) + setBoard(boardWithRenamedColumn) } - function handleCardAdd(lane, card, options = {}) { - const boardWithNewCard = addCard(board, lane, card, options) + function handleCardAdd(column, card, options = {}) { + const boardWithNewCard = addCard(board, column, card, options) onCardNew( boardWithNewCard, - boardWithNewCard.lanes.find(({ id }) => id === lane.id), + boardWithNewCard.columns.find(({ id }) => id === column.id), card ) setBoard(boardWithNewCard) } - function handleCardRemove(lane, card) { - const boardWithoutCard = removeCard(board, lane, card) + function handleCardRemove(column, card) { + const boardWithoutCard = removeCard(board, column, card) onCardRemove( boardWithoutCard, - boardWithoutCard.lanes.find(({ id }) => id === lane.id), + boardWithoutCard.columns.find(({ id }) => id === column.id), card ) setBoard(boardWithoutCard) @@ -99,38 +102,38 @@ function UncontrolledBoard({ return ( { - if (!allowAddLane) return null - if (renderLaneAdder) return renderLaneAdder({ addLane: handleLaneAdd }) - if (!onNewLaneConfirm) return null - return handleLaneAdd({ title, cards: [] })} /> + onColumnDragEnd={handleOnColumnDragEnd} + renderColumnAdder={() => { + if (!allowAddColumn) return null + if (renderColumnAdder) return renderColumnAdder({ addColumn: handleColumnAdd }) + if (!onNewColumnConfirm) return null + return handleColumnAdd({ title, cards: [] })} /> }} - {...(renderLaneHeader && { - renderLaneHeader: lane => - renderLaneHeader(lane, { - removeLane: handleLaneRemove.bind(null, lane), - renameLane: handleLaneRename.bind(null, lane), - addCard: handleCardAdd.bind(null, lane) + {...(renderColumnHeader && { + renderColumnHeader: column => + renderColumnHeader(column, { + removeColumn: handleColumnRemove.bind(null, column), + renameColumn: handleColumnRename.bind(null, column), + addCard: handleCardAdd.bind(null, column) }) })} - renderCard={(lane, card, dragging) => { - if (renderCard) return renderCard(card, { removeCard: handleCardRemove.bind(null, lane, card), dragging }) + renderCard={(column, card, dragging) => { + if (renderCard) return renderCard(card, { removeCard: handleCardRemove.bind(null, column, card), dragging }) return ( handleCardRemove(lane, card)} + onCardRemove={card => handleCardRemove(column, card)} > {card} ) }} - allowRemoveLane={allowRemoveLane} - onLaneRemove={handleLaneRemove} - allowRenameLane={allowRenameLane} - onLaneRename={handleLaneRename} - disableLaneDrag={disableLaneDrag} + allowRemoveColumn={allowRemoveColumn} + onColumnRemove={handleColumnRemove} + allowRenameColumn={allowRenameColumn} + onColumnRename={handleColumnRename} + disableColumnDrag={disableColumnDrag} disableCardDrag={disableCardDrag} > {board} @@ -141,23 +144,23 @@ function UncontrolledBoard({ function ControlledBoard({ children: board, onCardDragEnd, - onLaneDragEnd, - allowAddLane, - renderLaneAdder, - onNewLaneConfirm, - onLaneRemove, - renderLaneHeader, - allowRemoveLane, - allowRenameLane, - onLaneRename, + onColumnDragEnd, + allowAddColumn, + renderColumnAdder, + onNewColumnConfirm, + onColumnRemove, + renderColumnHeader, + allowRemoveColumn, + allowRenameColumn, + onColumnRename, renderCard, allowRemoveCard, onCardRemove, disableCardDrag, - disableLaneDrag + disableColumnDrag }) { const handleOnCardDragEnd = partialRight(handleOnDragEnd, { notifyCallback: onCardDragEnd }) - const handleOnLaneDragEnd = partialRight(handleOnDragEnd, { notifyCallback: onLaneDragEnd }) + const handleOnColumnDragEnd = partialRight(handleOnDragEnd, { notifyCallback: onColumnDragEnd }) function handleOnDragEnd({ source, destination, subject }, { notifyCallback }) { when(notifyCallback)(callback => callback(subject, source, destination)) @@ -166,15 +169,15 @@ function ControlledBoard({ return ( { - if (!allowAddLane) return null - if (renderLaneAdder) return renderLaneAdder() - if (!onNewLaneConfirm) return null - return onNewLaneConfirm({ title, cards: [] })} /> + onColumnDragEnd={handleOnColumnDragEnd} + renderColumnAdder={() => { + if (!allowAddColumn) return null + if (renderColumnAdder) return renderColumnAdder() + if (!onNewColumnConfirm) return null + return onNewColumnConfirm({ title, cards: [] })} /> }} - {...(renderLaneHeader && { renderLaneHeader: renderLaneHeader })} - renderCard={(_lane, card, dragging) => { + {...(renderColumnHeader && { renderColumnHeader: renderColumnHeader })} + renderCard={(_column, card, dragging) => { if (renderCard) return renderCard(card, { dragging }) return ( @@ -182,11 +185,11 @@ function ControlledBoard({ ) }} - allowRemoveLane={allowRemoveLane} - onLaneRemove={onLaneRemove} - allowRenameLane={allowRenameLane} - onLaneRename={onLaneRename} - disableLaneDrag={disableLaneDrag} + allowRemoveColumn={allowRemoveColumn} + onColumnRemove={onColumnRemove} + allowRenameColumn={allowRenameColumn} + onColumnRename={onColumnRename} + disableColumnDrag={disableColumnDrag} disableCardDrag={disableCardDrag} > {board} @@ -197,23 +200,23 @@ function ControlledBoard({ function BoardContainer({ children: board, renderCard, - disableLaneDrag, + disableColumnDrag, disableCardDrag, - renderLaneHeader, - renderLaneAdder, - allowRemoveLane, - onLaneRemove, - allowRenameLane, - onLaneRename, - onLaneDragEnd, + renderColumnHeader, + renderColumnAdder, + allowRemoveColumn, + onColumnRemove, + allowRenameColumn, + onColumnRename, + onColumnDragEnd, onCardDragEnd }) { function handleOnDragEnd(event) { const coordinates = getCoordinates(event, board) if (!coordinates.source) return - isALaneMove(event.type) - ? onLaneDragEnd({ ...coordinates, subject: board.lanes[coordinates.source.fromPosition] }) + isAColumnMove(event.type) + ? onColumnDragEnd({ ...coordinates, subject: board.columns[coordinates.source.fromPosition] }) : onCardDragEnd({ ...coordinates, subject: getCard(board, coordinates.source) }) } @@ -221,33 +224,33 @@ function BoardContainer({ - {board.lanes.map((lane, index) => ( - ( + - renderLaneHeader ? ( - renderLaneHeader(lane) + renderColumnHeader={column => + renderColumnHeader ? ( + renderColumnHeader(column) ) : ( - - {lane} - + {column} + ) } - disableLaneDrag={disableLaneDrag} + disableColumnDrag={disableColumnDrag} disableCardDrag={disableCardDrag} > - {lane} - + {column} + ))} - {renderLaneAdder()} + {renderColumnAdder()} ) diff --git a/src/components/Board/index.spec.js b/src/components/Board/index.spec.js index a7e76f93..0e1d4beb 100644 --- a/src/components/Board/index.spec.js +++ b/src/components/Board/index.spec.js @@ -5,12 +5,12 @@ import { callbacks } from 'react-beautiful-dnd' import { moveCard } from '@services/helpers' describe('', () => { - let subject, onCardDragEnd, onLaneDragEnd, onLaneRemove, onLaneRename, onCardRemove + let subject, onCardDragEnd, onColumnDragEnd, onColumnRemove, onColumnRename, onCardRemove const board = { - lanes: [ + columns: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: 1, @@ -26,7 +26,7 @@ describe('', () => { }, { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 3, @@ -39,7 +39,7 @@ describe('', () => { } afterEach(() => { - subject = onCardDragEnd = onLaneDragEnd = onLaneRemove = onCardRemove = undefined + subject = onCardDragEnd = onColumnDragEnd = onColumnRemove = onCardRemove = undefined }) describe('when the board is controlled', () => { @@ -47,7 +47,7 @@ describe('', () => { const [board, setBoard] = useState(children) function handleCardMoving() { - setBoard(moveCard(board, { fromPosition: 0, fromLaneId: 1 }, { toPosition: 1, toLaneId: 1 })) + setBoard(moveCard(board, { fromPosition: 0, fromColumnId: 1 }, { toPosition: 1, toColumnId: 1 })) } return ( @@ -66,8 +66,8 @@ describe('', () => { it('renders a board according to the children prop', () => { const { queryByText } = mount() - const lane = within(queryByText(/^Lane Backlog$/).closest('[data-testid="lane"]')) - const cards = lane.queryAllByText(/^Card title/) + const column = within(queryByText(/^Column Backlog$/).closest('[data-testid="column"]')) + const cards = column.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) expect(cards[0]).toHaveTextContent(/^Card title 1$/) @@ -75,7 +75,7 @@ describe('', () => { fireEvent.click(queryByText('Move card', { selector: 'button' })) - const movedCards = lane.queryAllByText(/^Card title/) + const movedCards = column.queryAllByText(/^Card title/) expect(movedCards).toHaveLength(2) expect(movedCards[0]).toHaveTextContent(/^Card title 2$/) @@ -113,42 +113,42 @@ describe('', () => { expect(onCardDragEnd).toHaveBeenCalledTimes(1) expect(onCardDragEnd).toHaveBeenCalledWith( { id: 1, description: 'Card content', title: 'Card title 1' }, - { fromPosition: 0, fromLaneId: 1 }, - { toPosition: 1, toLaneId: 1 } + { fromPosition: 0, fromColumnId: 1 }, + { toPosition: 1, toColumnId: 1 } ) }) }) }) }) - describe('about the lane moving', () => { - describe('when the component receives "onLaneDragEnd" callback', () => { + describe('about the column moving', () => { + describe('when the component receives "onColumnDragEnd" callback', () => { beforeEach(() => { - onLaneDragEnd = jest.fn() - mount({ onLaneDragEnd }) + onColumnDragEnd = jest.fn() + mount({ onColumnDragEnd }) }) - describe('when the user cancels the lane moving', () => { + describe('when the user cancels the column moving', () => { beforeEach(() => { callbacks.onDragEnd({ source: null, destination: null, type: 'BOARD' }) }) - it('does not call onLaneDragEnd callback', () => { - expect(onLaneDragEnd).not.toHaveBeenCalled() + it('does not call onColumnDragEnd callback', () => { + expect(onColumnDragEnd).not.toHaveBeenCalled() }) }) - describe('when the user moves a lane to another position', () => { + describe('when the user moves a column to another position', () => { beforeEach(() => { act(() => { callbacks.onDragEnd({ source: { index: 0 }, destination: { index: 1 }, type: 'BOARD' }) }) }) - it('calls the onLaneDragEnd callback passing the lane and the move coordinates', () => { - expect(onLaneDragEnd).toHaveBeenCalledTimes(1) - expect(onLaneDragEnd).toHaveBeenCalledWith( - expect.objectContaining({ title: 'Lane Backlog' }), + it('calls the onColumnDragEnd callback passing the column and the move coordinates', () => { + expect(onColumnDragEnd).toHaveBeenCalledTimes(1) + expect(onColumnDragEnd).toHaveBeenCalledWith( + expect.objectContaining({ title: 'Column Backlog' }), { fromPosition: 0 }, { toPosition: 1 } ) @@ -160,10 +160,10 @@ describe('', () => { describe("about the board's custom card", () => { let renderCard const board = { - lanes: [ + columns: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: 1, @@ -179,7 +179,7 @@ describe('', () => { }, { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 3, @@ -206,7 +206,7 @@ describe('', () => { mount({ children: board, renderCard }) }) - it("renders the custom cards on the board's lane", () => { + it("renders the custom cards on the board's column", () => { const cards = subject.queryAllByTestId('card') expect(cards).toHaveLength(3) expect(cards[0]).toHaveTextContent(/^1 - Card title - Card content$/) @@ -222,13 +222,13 @@ describe('', () => { }) }) - describe("about the lane's header", () => { - let renderLaneHeader + describe("about the column's header", () => { + let renderColumnHeader const board = { - lanes: [ + columns: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', wip: 1, cards: [{ id: 2, title: 'Card title', content: 'Card content' }] } @@ -236,109 +236,111 @@ describe('', () => { } afterEach(() => { - renderLaneHeader = undefined + renderColumnHeader = undefined }) - describe('when the component receives a "renderLaneHeader" prop', () => { + describe('when the component receives a "renderColumnHeader" prop', () => { beforeEach(() => { - renderLaneHeader = jest.fn(laneContent => ( + renderColumnHeader = jest.fn(columnContent => (
- {laneContent.title} ({laneContent.wip}) + {columnContent.title} ({columnContent.wip})
)) - mount({ children: board, renderLaneHeader }) + mount({ children: board, renderColumnHeader }) }) - it("renders the custom header on the board's lane", () => { - expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Lane Backlog \(1\)$/) + it("renders the custom header on the board's column", () => { + expect(subject.queryAllByTestId('column-header')).toHaveLength(1) + expect(subject.queryByTestId('column-header')).toHaveTextContent(/^Column Backlog \(1\)$/) }) - it('passes the lane content to the "renderLaneHeader" prop', () => { - expect(renderLaneHeader).toHaveBeenCalledTimes(1) - expect(renderLaneHeader).toHaveBeenCalledWith({ + it('passes the column content to the "renderColumnHeader" prop', () => { + expect(renderColumnHeader).toHaveBeenCalledTimes(1) + expect(renderColumnHeader).toHaveBeenCalledWith({ id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', wip: 1, cards: [{ id: 2, title: 'Card title', content: 'Card content' }] }) }) }) - describe('when the component does not receive a "renderLaneHeader" prop', () => { + describe('when the component does not receive a "renderColumnHeader" prop', () => { beforeEach(() => mount({ children: board })) - it("renders the default header on the board's lane", () => { - expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Lane Backlog$/) + it("renders the default header on the board's column", () => { + expect(subject.queryAllByTestId('column-header')).toHaveLength(1) + expect(subject.queryByTestId('column-header')).toHaveTextContent(/^Column Backlog$/) }) }) }) - describe('about the lane adding', () => { - describe('about the default lane adder', () => { - describe('when the component does not receive "allowAddLane" prop', () => { - let onNewLaneConfirm + describe('about the column adding', () => { + describe('about the default column adder', () => { + describe('when the component does not receive "allowAddColumn" prop', () => { + let onNewColumnConfirm beforeEach(() => { - onNewLaneConfirm = jest.fn() - mount({ allowAddLane: false, onNewLaneConfirm }) + onNewColumnConfirm = jest.fn() + mount({ allowAddColumn: false, onNewColumnConfirm }) }) afterEach(() => { - onNewLaneConfirm = undefined + onNewColumnConfirm = undefined }) - it('does not render the lane adder', () => { + it('does not render the column adder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) }) - describe('when the component does not receive "onNewLaneConfirm" prop', () => { + describe('when the component does not receive "onNewColumnConfirm" prop', () => { beforeEach(() => { - mount({ allowAddLane: true }) + mount({ allowAddColumn: true }) }) - it('does not render the lane adder', () => { + it('does not render the column adder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) }) - describe('when it receives the "allowAddLane" and "onNewLaneConfirm" prop', () => { - let onNewLaneConfirm + describe('when it receives the "allowAddColumn" and "onNewColumnConfirm" prop', () => { + let onNewColumnConfirm beforeEach(() => { - onNewLaneConfirm = jest.fn() - mount({ allowAddLane: true, onNewLaneConfirm }) + onNewColumnConfirm = jest.fn() + mount({ allowAddColumn: true, onNewColumnConfirm }) }) afterEach(() => { - onNewLaneConfirm = undefined + onNewColumnConfirm = undefined }) - it('renders the lane placeholder as the last lane to add a new lane', () => { + it('renders the column placeholder as the last column to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) - describe('when the user clicks to add a new lane', () => { + describe('when the user clicks to add a new column', () => { beforeEach(() => fireEvent.click(subject.queryByText('โž•'))) - it('hides the lane placeholder', () => { + it('hides the column placeholder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) - it('renders the input asking for a lane title', () => { + it('renders the input asking for a column title', () => { expect(subject.container.querySelector('input')).toBeInTheDocument() }) - describe('when the user confirms the new lane', () => { + describe('when the user confirms the new column', () => { beforeEach(() => { - fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Lane Added by user' } }) + fireEvent.change(subject.container.querySelector('input'), { + target: { value: 'Column Added by user' } + }) fireEvent.click(subject.queryByText('Add')) }) - it('calls the "onNewLaneConfirm" passing the new lane', () => { - expect(onNewLaneConfirm).toHaveBeenCalledTimes(1) - expect(onNewLaneConfirm).toHaveBeenCalledWith({ title: 'Lane Added by user', cards: [] }) + it('calls the "onNewColumnConfirm" passing the new lane', () => { + expect(onNewColumnConfirm).toHaveBeenCalledTimes(1) + expect(onNewColumnConfirm).toHaveBeenCalledWith({ title: 'Column Added by user', cards: [] }) }) }) @@ -347,8 +349,8 @@ describe('', () => { fireEvent.click(subject.queryByText('Cancel')) }) - it('does not call the "onNewLaneConfirm" passing the new lane', () => { - expect(onNewLaneConfirm).not.toHaveBeenCalled() + it('does not call the "onNewColumnConfirm" passing the new lane', () => { + expect(onNewColumnConfirm).not.toHaveBeenCalled() }) }) }) @@ -357,17 +359,17 @@ describe('', () => { describe('about custom lane adder', () => { describe('when the component receives a custom lane adder', () => { - let renderLaneAdder + let renderColumnAdder - describe('when the component does not receive "allowAddLane" prop', () => { + describe('when the component does not receive "allowAddColumn" prop', () => { beforeEach(() => { - renderLaneAdder = jest.fn(() => ( + renderColumnAdder = jest.fn(() => (
)) - mount({ renderLaneAdder }) + mount({ renderColumnAdder }) it('does not renders the custom render adder', () => { expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() @@ -375,22 +377,22 @@ describe('', () => { }) }) - describe('when the component receives the "allowAddLane" prop', () => { + describe('when the component receives the "allowAddColumn" prop', () => { beforeEach(() => { - renderLaneAdder = jest.fn(() => ( + renderColumnAdder = jest.fn(() => (
)) - mount({ children: board, renderLaneAdder, allowAddLane: true }) + mount({ children: board, renderColumnAdder, allowAddColumn: true }) }) it('renders the custom lane adder as the last lane to add a new lane', () => { expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() }) - // TODO it needs spec for the renderLaneAdder callback + // TODO it needs spec for the renderColumnAdder callback }) }) }) @@ -398,88 +400,88 @@ describe('', () => { describe('about the lane removing', () => { beforeEach(() => { - onLaneRemove = jest.fn() + onColumnRemove = jest.fn() }) describe('when the component uses the default header template', () => { - describe('when the component receives the "allowRemoveLane" prop', () => { - beforeEach(() => mount({ allowRemoveLane: true, onLaneRemove })) + describe('when the component receives the "allowRemoveColumn" prop', () => { + beforeEach(() => mount({ allowRemoveColumn: true, onColumnRemove })) - it('does not call the "onLaneRemove callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) - describe('when the user clicks to remove a lane', () => { + describe('when the user clicks to remove a column', () => { beforeEach(() => { - const removeLaneButton = within(subject.queryAllByTestId('lane')[0]).queryByText('ร—') - fireEvent.click(removeLaneButton) + const removeColumnButton = within(subject.queryAllByTestId('lane')[0]).queryByText('ร—') + fireEvent.click(removeColumnButton) }) - it('calls the "onLaneRemove" callback passing the lane to be removed', () => { - expect(onLaneRemove).toHaveBeenCalledTimes(1) - expect(onLaneRemove).toHaveBeenCalledWith(expect.objectContaining({ id: 1 })) + it('calls the "onColumnRemove" callback passing the lane to be removed', () => { + expect(onColumnRemove).toHaveBeenCalledTimes(1) + expect(onColumnRemove).toHaveBeenCalledWith(expect.objectContaining({ id: 1 })) }) }) }) }) describe('when the component receives a custom header lane template', () => { - let renderLaneHeader + let renderColumnHeader beforeEach(() => { - renderLaneHeader = jest.fn(({ title }) =>
{title}
) - onLaneRemove = jest.fn() - mount({ renderLaneHeader, onLaneRemove }) + renderColumnHeader = jest.fn(({ title }) =>
{title}
) + onColumnRemove = jest.fn() + mount({ renderColumnHeader, onColumnRemove }) }) - it('does not call the "onLaneRemove" callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove" callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) }) }) describe('about the lane renaming', () => { describe('when the component use the default header template', () => { - describe('when the component receives the "allowRenameLane" prop', () => { + describe('when the component receives the "allowRenameColumn" prop', () => { beforeEach(() => { - onLaneRename = jest.fn() - mount({ allowRenameLane: true, onLaneRename }) + onColumnRename = jest.fn() + mount({ allowRenameColumn: true, onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) - describe('when the user renames a lane', () => { + describe('when the user renames a column', () => { beforeEach(() => { - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Lane Backlog')) + fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog')) fireEvent.change(subject.container.querySelector('input'), { target: { value: 'New title' } }) fireEvent.click(subject.queryByText('Rename', { selector: 'button' })) }) it('does not rename the lane', () => { - expect(subject.queryByText('Lane Backlog')).toBeInTheDocument() + expect(subject.queryByText('Column Backlog')).toBeInTheDocument() expect(subject.queryByText('New title')).not.toBeInTheDocument() }) - it('calls the "onLaneRename" callback passing the lane to be renamed', () => { - expect(onLaneRename).toHaveBeenCalledTimes(1) - expect(onLaneRename).toHaveBeenCalledWith( - expect.objectContaining({ id: 1, title: 'Lane Backlog' }), + it('calls the "onColumnRename" callback passing the lane to be renamed', () => { + expect(onColumnRename).toHaveBeenCalledTimes(1) + expect(onColumnRename).toHaveBeenCalledWith( + expect.objectContaining({ id: 1, title: 'Column Backlog' }), 'New title' ) }) }) }) - describe('when the component does not receive the "allowRenameLane" prop', () => { + describe('when the component does not receive the "allowRenameColumn" prop', () => { beforeEach(() => { - onLaneRename = jest.fn() - mount({ onLaneRename }) + onColumnRename = jest.fn() + mount({ onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) it('does not show the button on lane header to remove the lane', () => { @@ -490,13 +492,13 @@ describe('', () => { describe('when the component receives a custom header lane template', () => { beforeEach(() => { - const renderLaneHeader = ({ title }) =>
{title}
- onLaneRename = jest.fn() - mount({ renderLaneHeader, onLaneRename }) + const renderColumnHeader = ({ title }) =>
{title}
+ onColumnRename = jest.fn() + mount({ renderColumnHeader, onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) }) }) @@ -554,7 +556,7 @@ describe('', () => { const [board, setBoard] = useState(initialBoard) function handleCardMoving() { - setBoard(moveCard(board, { fromPosition: 0, fromLaneId: 1 }, { toPosition: 1, toLaneId: 1 })) + setBoard(moveCard(board, { fromPosition: 0, fromColumnId: 1 }, { toPosition: 1, toColumnId: 1 })) } return ( @@ -572,7 +574,7 @@ describe('', () => { it('does not rerender on initialBoard change', () => { const { queryByText } = mount({ Component: UselessState }) - const lane = within(queryByText(/^Lane Backlog$/).closest('[data-testid="lane"]')) + const lane = within(queryByText(/^Column Backlog$/).closest('[data-testid="lane"]')) const cards = lane.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) @@ -588,18 +590,18 @@ describe('', () => { expect(movedCards[1]).toHaveTextContent(/^Card title 2$/) }) - it('renders the specified lanes in the board ordered by its specified position', () => { - const lanes = mount().queryAllByText(/^Lane/) - expect(lanes).toHaveLength(2) - expect(lanes[0]).toHaveTextContent(/^Lane Backlog$/) - expect(lanes[1]).toHaveTextContent(/^Lane Doing$/) + it('renders the specified columns in the board ordered by its specified position', () => { + const columns = mount().queryAllByText(/^Column/) + expect(columns).toHaveLength(2) + expect(lanes[0]).toHaveTextContent(/^Column Backlog$/) + expect(lanes[1]).toHaveTextContent(/^Column Doing$/) }) it('renders the specified cards in their lanes', () => { const lane = within( mount() - .queryByText(/^Lane Backlog$/) - .closest('[data-testid="lane"]') + .queryByText(/^Column Backlog$/) + .closest('[data-testid="column"]') ) const cards = lane.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) @@ -637,7 +639,7 @@ describe('', () => { lanes: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: 2, @@ -653,7 +655,7 @@ describe('', () => { }, { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 3, @@ -668,8 +670,8 @@ describe('', () => { expect(onCardDragEnd).toHaveBeenCalledWith( expectedBoard, { description: 'Card content', id: 1, title: 'Card title 1' }, - { fromPosition: 0, fromLaneId: 1 }, - { toPosition: 1, toLaneId: 1 } + { fromPosition: 0, fromColumnId: 1 }, + { toPosition: 1, toColumnId: 1 } ) }) }) @@ -677,10 +679,10 @@ describe('', () => { }) describe('about the lane moving', () => { - describe('when the component receives "onLaneDragEnd" callback', () => { + describe('when the component receives "onColumnDragEnd" callback', () => { beforeEach(() => { - onLaneDragEnd = jest.fn() - mount({ onLaneDragEnd }) + onColumnDragEnd = jest.fn() + mount({ onColumnDragEnd }) }) describe('when the user cancels the lane moving', () => { @@ -688,8 +690,8 @@ describe('', () => { callbacks.onDragEnd({ source: null, destination: null, type: 'BOARD' }) }) - it('does not call onLaneDragEnd callback', () => { - expect(onLaneDragEnd).not.toHaveBeenCalled() + it('does not call onColumnDragEnd callback', () => { + expect(onColumnDragEnd).not.toHaveBeenCalled() }) }) @@ -700,12 +702,12 @@ describe('', () => { }) }) - it('calls the onLaneDragEnd callback passing the modified board, the lane, and the lane move coordinates', () => { + it('calls the onColumnDragEnd callback passing the modified board, the column, and the column move coordinates', () => { const expectedBoard = { lanes: [ { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 3, @@ -716,7 +718,7 @@ describe('', () => { }, { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: 1, @@ -733,10 +735,10 @@ describe('', () => { ] } - expect(onLaneDragEnd).toHaveBeenCalledTimes(1) - expect(onLaneDragEnd).toHaveBeenCalledWith( + expect(onColumnDragEnd).toHaveBeenCalledTimes(1) + expect(onColumnDragEnd).toHaveBeenCalledWith( expectedBoard, - expect.objectContaining({ title: 'Lane Backlog' }), + expect.objectContaining({ title: 'Column Backlog' }), { fromPosition: 0 }, { toPosition: 1 } ) @@ -751,7 +753,7 @@ describe('', () => { lanes: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', cards: [ { id: 1, @@ -767,7 +769,7 @@ describe('', () => { }, { id: 2, - title: 'Lane Doing', + title: 'Column Doing', cards: [ { id: 3, @@ -810,12 +812,12 @@ describe('', () => { }) describe("about the lane's header", () => { - let renderLaneHeader + let renderColumnHeader const board = { lanes: [ { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', wip: 1, cards: [{ id: 2, title: 'Card title', content: 'Card content' }] } @@ -823,62 +825,62 @@ describe('', () => { } afterEach(() => { - renderLaneHeader = undefined + renderColumnHeader = undefined }) - describe('when the component receives a "renderLaneHeader" prop', () => { + describe('when the component receives a "renderColumnHeader" prop', () => { beforeEach(() => { - renderLaneHeader = jest.fn(laneContent => ( + renderColumnHeader = jest.fn(columnContent => (
{laneContent.title} ({laneContent.wip})
)) - mount({ initialBoard: board, renderLaneHeader }) + mount({ initialBoard: board, renderColumnHeader }) }) - it("renders the custom header on the board's lane", () => { + it("renders the custom header on the board's column", () => { expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Lane Backlog \(1\)$/) + expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Column Backlog \(1\)$/) }) - it('passes the lane content, the "removeLane" and the "renameLane" to the "renderLaneHeader" prop', () => { - expect(renderLaneHeader).toHaveBeenCalledTimes(1) - expect(renderLaneHeader).toHaveBeenCalledWith( + it('passes the lane content, the "removeColumn" and the "renameColumn" to the "renderColumnHeader" prop', () => { + expect(renderColumnHeader).toHaveBeenCalledTimes(1) + expect(renderColumnHeader).toHaveBeenCalledWith( { id: 1, - title: 'Lane Backlog', + title: 'Column Backlog', wip: 1, cards: [{ id: 2, title: 'Card title', content: 'Card content' }] }, - { removeLane: expect.any(Function), renameLane: expect.any(Function), addCard: expect.any(Function) } + { removeColumn: expect.any(Function), renameColumn: expect.any(Function), addCard: expect.any(Function) } ) }) }) - describe('when the component does not receive a "renderLaneHeader" prop', () => { + describe('when the component does not receive a "renderColumnHeader" prop', () => { beforeEach(() => mount({ initialBoard: board })) - it("renders the default header on the board's lane", () => { + it("renders the default header on the board's column", () => { expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Lane Backlog$/) + expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Column Backlog$/) }) }) }) describe('about the lane adding', () => { describe('about the default lane adder', () => { - describe('when the component does not receive "allowAddLane" prop', () => { - let onLaneNew, onNewLaneConfirm + describe('when the component does not receive "allowAddColumn" prop', () => { + let onColumnNew, onNewColumnConfirm beforeEach(() => { - onLaneNew = jest.fn() - onNewLaneConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) - mount({ allowAddLane: false, onNewLaneConfirm, onLaneNew }) + onColumnNew = jest.fn() + onNewColumnConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) + mount({ allowAddColumn: false, onNewColumnConfirm, onColumnNew }) }) afterEach(() => { - onLaneNew = undefined - onNewLaneConfirm = undefined + onColumnNew = undefined + onNewColumnConfirm = undefined }) it('does not render the lane adder', () => { @@ -886,9 +888,9 @@ describe('', () => { }) }) - describe('when the component does not receive "onNewLaneConfirm" prop', () => { + describe('when the component does not receive "onNewColumnConfirm" prop', () => { beforeEach(() => { - mount({ allowAddLane: true }) + mount({ allowAddColumn: true }) }) it('does not render the lane adder', () => { @@ -896,17 +898,17 @@ describe('', () => { }) }) - describe('when it receives the "allowAddLane" and "onNewLaneConfirm" prop', () => { - let onLaneNew, onNewLaneConfirm + describe('when it receives the "allowAddColumn" and "onNewColumnConfirm" prop', () => { + let onColumnNew, onNewColumnConfirm beforeEach(() => { - onLaneNew = jest.fn() - onNewLaneConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) - mount({ allowAddLane: true, onNewLaneConfirm, onLaneNew }) + onColumnNew = jest.fn() + onNewColumnConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) + mount({ allowAddColumn: true, onNewColumnConfirm, onColumnNew }) }) afterEach(() => { - onLaneNew = undefined - onNewLaneConfirm = undefined + onColumnNew = undefined + onNewColumnConfirm = undefined }) it('renders the lane placeholder as the last lane to add a new lane', () => { @@ -926,27 +928,29 @@ describe('', () => { describe('when the user confirms the new lane', () => { beforeEach(async () => { - fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Lane Added by user' } }) + fireEvent.change(subject.container.querySelector('input'), { + target: { value: 'Column Added by user' } + }) fireEvent.click(subject.queryByText('Add')) await waitForElement(() => subject.container.querySelector('[data-testid="lane"]:nth-child(3)')) }) - it('calls the "onNewLaneConfirm" passing the new lane', () => { - expect(onNewLaneConfirm).toHaveBeenCalledTimes(1) - expect(onNewLaneConfirm).toHaveBeenCalledWith({ title: 'Lane Added by user', cards: [] }) + it('calls the "onNewColumnConfirm" passing the new lane', () => { + expect(onNewColumnConfirm).toHaveBeenCalledTimes(1) + expect(onNewColumnConfirm).toHaveBeenCalledWith({ title: 'Column Added by user', cards: [] }) }) - it('renders the new lane using the id returned on "onNewLaneConfirm"', () => { + it('renders the new column using the id returned on "onNewColumnConfirm"', () => { expect(subject.queryAllByTestId('lane')).toHaveLength(3) }) - it('renders the lane placeholder as the last lane to add a new lane', () => { + it('renders the column placeholder as the last column to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) - it('calls the "onLaneNew" passing the modified board and the added lane', () => { - expect(onLaneNew).toHaveBeenCalledTimes(1) - expect(onLaneNew).toHaveBeenCalledWith( + it('calls the "onColumnNew" passing the modified board and the added column', () => { + expect(onColumnNew).toHaveBeenCalledTimes(1) + expect(onColumnNew).toHaveBeenCalledWith( { lanes: [ expect.objectContaining({ id: 1 }), @@ -954,7 +958,7 @@ describe('', () => { expect.objectContaining({ id: 999 }) ] }, - { id: 999, title: 'Lane Added by user', cards: [] } + { id: 999, title: 'Column Added by user', cards: [] } ) }) }) @@ -964,7 +968,7 @@ describe('', () => { fireEvent.click(subject.queryByText('Cancel')) }) - it('does not add any new lane', () => { + it('does not add any new column', () => { expect(subject.queryAllByTestId('lane')).toHaveLength(2) }) @@ -978,17 +982,17 @@ describe('', () => { describe('about custom lane adder', () => { describe('when the component receives a custom lane adder', () => { - let onLaneNew, renderLaneAdder + let onColumnNew, renderColumnAdder - describe('when the component does not receive "allowAddLane" prop', () => { + describe('when the component does not receive "allowAddColumn" prop', () => { beforeEach(() => { - renderLaneAdder = jest.fn(() => ( + renderColumnAdder = jest.fn(() => (
)) - mount({ renderLaneAdder }) + mount({ renderColumnAdder }) it('does not renders the custom render adder', () => { expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() @@ -996,39 +1000,39 @@ describe('', () => { }) }) - describe('when the component receives the "allowAddLane" prop', () => { + describe('when the component receives the "allowAddColumn" prop', () => { beforeEach(() => { - onLaneNew = jest.fn() - renderLaneAdder = jest.fn(({ addLane }) => ( + onColumnNew = jest.fn() + renderColumnAdder = jest.fn(({ addColumn }) => (
- +
)) - mount({ children: board, renderLaneAdder, allowAddLane: true, onLaneNew }) + mount({ children: board, renderColumnAdder, allowAddColumn: true, onColumnNew }) }) it('renders the custom lane adder as the last lane to add a new lane', () => { expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() }) - it('passes the "addLane" to the "renderLaneAdder" prop', () => { - expect(renderLaneAdder).toHaveBeenCalledTimes(1) - expect(renderLaneAdder).toHaveBeenCalledWith({ addLane: expect.any(Function) }) + it('passes the "addColumn" to the "renderColumnAdder" prop', () => { + expect(renderColumnAdder).toHaveBeenCalledTimes(1) + expect(renderColumnAdder).toHaveBeenCalledWith({ addColumn: expect.any(Function) }) }) - describe('when the "addLane" callback is called', () => { - beforeEach(() => fireEvent.click(within(subject.queryByTestId('laneAdder')).queryByText('Add lane'))) + describe('when the "addColumn" callback is called', () => { + beforeEach(() => fireEvent.click(within(subject.queryByTestId('columnAdder')).queryByText('Add column'))) it('renders the new lane', () => { const lane = subject.queryAllByTestId('lane') - expect(lane).toHaveLength(3) + expect(column).toHaveLength(3) expect(lane[2]).toHaveTextContent('New lane') }) - it('calls the "onLaneNew" callback passing both the updated board and the added lane', () => { - expect(onLaneNew).toHaveBeenCalledTimes(1) - expect(onLaneNew).toHaveBeenCalledWith( + it('calls the "onColumnNew" callback passing both the updated board and the added column', () => { + expect(onColumnNew).toHaveBeenCalledTimes(1) + expect(onColumnNew).toHaveBeenCalledWith( { lanes: [ expect.objectContaining({ id: 1 }), @@ -1047,32 +1051,32 @@ describe('', () => { describe('about the lane removing', () => { beforeEach(() => { - onLaneRemove = jest.fn() + onColumnRemove = jest.fn() }) describe('when the component uses the default header template', () => { - describe('when the component receives the "allowRemoveLane" prop', () => { - beforeEach(() => mount({ allowRemoveLane: true, onLaneRemove })) + describe('when the component receives the "allowRemoveColumn" prop', () => { + beforeEach(() => mount({ allowRemoveColumn: true, onColumnRemove })) - it('does not call the "onLaneRemove callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) describe('when the user clicks to remove a lane', () => { beforeEach(() => { - const removeLaneButton = within(subject.queryAllByTestId('lane')[0]).queryByText('ร—') - fireEvent.click(removeLaneButton) + const removeColumnButton = within(subject.queryAllByTestId('column')[0]).queryByText('ร—') + fireEvent.click(removeColumnButton) }) it('removes the lane', () => { const lane = subject.queryAllByTestId('lane') - expect(lane).toHaveLength(1) - expect(lane[0]).toHaveTextContent('Lane Doing') + expect(column).toHaveLength(1) + expect(lane[0]).toHaveTextContent('Column Doing') }) - it('calls the "onLaneRemove" callback passing both the updated board and the removed lane', () => { - expect(onLaneRemove).toHaveBeenCalledTimes(1) - expect(onLaneRemove).toHaveBeenCalledWith( + it('calls the "onColumnRemove" callback passing both the updated board and the removed lane', () => { + expect(onColumnRemove).toHaveBeenCalledTimes(1) + expect(onColumnRemove).toHaveBeenCalledWith( { lanes: [expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1 }) ) @@ -1082,37 +1086,37 @@ describe('', () => { }) describe('when the component receives a custom header lane template', () => { - let renderLaneHeader + let renderColumnHeader beforeEach(() => { - renderLaneHeader = jest.fn(({ title }, { removeLane }) =>
{title}
) - onLaneRemove = jest.fn() - mount({ renderLaneHeader, onLaneRemove }) + renderColumnHeader = jest.fn(({ title }, { removeColumn }) =>
{title}
) + onColumnRemove = jest.fn() + mount({ renderColumnHeader, onColumnRemove }) }) - it('does not call the "onLaneRemove" callback', () => { - expect(onLaneRemove).not.toHaveBeenCalled() + it('does not call the "onColumnRemove" callback', () => { + expect(onColumnRemove).not.toHaveBeenCalled() }) - it('passes the lane and the lane bag to the "renderLaneHeader"', () => { - expect(renderLaneHeader).toHaveBeenCalledWith( - expect.objectContaining({ id: 1, title: 'Lane Backlog' }), - expect.objectContaining({ removeLane: expect.any(Function), renameLane: expect.any(Function) }) + it('passes the lane and the lane bag to the "renderColumnHeader"', () => { + expect(renderColumnHeader).toHaveBeenCalledWith( + expect.objectContaining({ id: 1, title: 'Column Backlog' }), + expect.objectContaining({ removeColumn: expect.any(Function), renameColumn: expect.any(Function) }) ) }) - describe('when the "removeLane" callback is called', () => { - beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Lane Backlog'))) + describe('when the "removeColumn" callback is called', () => { + beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('Column Backlog'))) it('removes the lane', () => { const lane = subject.queryAllByTestId('lane') - expect(lane).toHaveLength(1) - expect(lane[0]).toHaveTextContent('Lane Doing') + expect(column).toHaveLength(1) + expect(lane[0]).toHaveTextContent('Column Doing') }) - it('calls the "onLaneRemove" callback passing both the updated board and the removed lane', () => { - expect(onLaneRemove).toHaveBeenCalledTimes(1) - expect(onLaneRemove).toHaveBeenCalledWith( + it('calls the "onColumnRemove" callback passing both the updated board and the removed lane', () => { + expect(onColumnRemove).toHaveBeenCalledTimes(1) + expect(onColumnRemove).toHaveBeenCalledWith( { lanes: [expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1 }) ) @@ -1123,35 +1127,35 @@ describe('', () => { describe('about the lane renaming', () => { describe('when the component use the default header template', () => { - describe('when the component receives the "allowRenameLane" prop', () => { + describe('when the component receives the "allowRenameColumn" prop', () => { beforeEach(() => { - onLaneRename = jest.fn() - mount({ allowRenameLane: true, onLaneRename }) + onColumnRename = jest.fn() + mount({ allowRenameColumn: true, onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) describe('when the user renames a lane', () => { beforeEach(() => { - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Lane Backlog')) + fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog')) fireEvent.change(subject.container.querySelector('input'), { target: { value: 'New title' } }) fireEvent.click(subject.queryByText('Rename', { selector: 'button' })) }) it('renames the lane', () => { - expect(subject.queryByText('Lane Backlog')).not.toBeInTheDocument() + expect(subject.queryByText('Column Backlog')).not.toBeInTheDocument() expect(subject.queryByText('New title')).toBeInTheDocument() }) - it('calls the "onLaneRename" callback passing both the updated board and the renamed lane', () => { - expect(onLaneRename).toHaveBeenCalledTimes(1) - expect(onLaneRename).toHaveBeenCalledWith( + it('calls the "onColumnRename" callback passing both the updated board and the renamed column', () => { + expect(onColumnRename).toHaveBeenCalledTimes(1) + expect(onColumnRename).toHaveBeenCalledWith( { lanes: [ expect.objectContaining({ id: 1, title: 'New title' }), - expect.objectContaining({ id: 2, title: 'Lane Doing' }) + expect.objectContaining({ id: 2, title: 'Column Doing' }) ] }, expect.objectContaining({ id: 1, title: 'New title' }) @@ -1160,14 +1164,14 @@ describe('', () => { }) }) - describe('when the component does not receive the "allowRenameLane" prop', () => { + describe('when the component does not receive the "allowRenameColumn" prop', () => { beforeEach(() => { - onLaneRename = jest.fn() - mount({ onLaneRename }) + onColumnRename = jest.fn() + mount({ onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) it('does not show the button on lane header to remove the lane', () => { @@ -1178,31 +1182,31 @@ describe('', () => { describe('when the component receives a custom header lane template', () => { beforeEach(() => { - const renderLaneHeader = ({ title }, { renameLane }) => ( -
renameLane('New title')}>{title}
+ const renderColumnHeader = ({ title }, { renameColumn }) => ( +
renameColumn('New title')}>{title}
) - onLaneRename = jest.fn() - mount({ renderLaneHeader, onLaneRename }) + onColumnRename = jest.fn() + mount({ renderColumnHeader, onColumnRename }) }) - it('does not call the "onLaneRename" callback', () => { - expect(onLaneRename).not.toHaveBeenCalled() + it('does not call the "onColumnRename" callback', () => { + expect(onColumnRename).not.toHaveBeenCalled() }) - describe('when the "renameLane" callback is called', () => { - beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Lane Backlog'))) + describe('when the "renameColumn" callback is called', () => { + beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog'))) - it('renames the lane', () => { + it('renames the column', () => { expect(subject.queryAllByTestId('lane')[0]).toHaveTextContent('New title') }) - it('calls the "onLaneRename" callback passing both the updated board and the renamed lane', () => { - expect(onLaneRename).toHaveBeenCalledTimes(1) - expect(onLaneRename).toHaveBeenCalledWith( + it('calls the "onColumnRename" callback passing both the updated board and the renamed column', () => { + expect(onColumnRename).toHaveBeenCalledTimes(1) + expect(onColumnRename).toHaveBeenCalledWith( { lanes: [ expect.objectContaining({ id: 1, title: 'New title' }), - expect.objectContaining({ id: 2, title: 'Lane Doing' }) + expect.objectContaining({ id: 2, title: 'Column Doing' }) ] }, expect.objectContaining({ id: 1, title: 'New title' }) @@ -1238,7 +1242,7 @@ describe('', () => { expect(cards[1]).toHaveTextContent('Card title 3') }) - it('calls the "onCardRemove" callback passing the updated board, the updated lane and the removed card', () => { + it('calls the "onCardRemove" callback passing the updated board, the updated column and the removed card', () => { expect(onCardRemove).toHaveBeenCalledTimes(1) expect(onCardRemove).toHaveBeenCalledWith( { @@ -1247,7 +1251,7 @@ describe('', () => { expect.objectContaining({ id: 2, cards: [expect.objectContaining({ id: 3 })] }) ] }, - expect.objectContaining({ id: 1, title: 'Lane Backlog' }), + expect.objectContaining({ id: 1, title: 'Column Backlog' }), expect.objectContaining({ id: 1, title: 'Card title 1' }) ) }) @@ -1285,16 +1289,16 @@ describe('', () => { expect(cards[1]).toHaveTextContent('Card title 3') }) - it('calls the "onCardRemove" callback passing the updated board, lane and the removed card', () => { + it('calls the "onCardRemove" callback passing the updated board, column and the removed card', () => { expect(onCardRemove).toHaveBeenCalledTimes(1) expect(onCardRemove).toHaveBeenCalledWith( { lanes: [ - expect.objectContaining({ title: 'Lane Backlog' }), - expect.objectContaining({ title: 'Lane Doing' }) + expect.objectContaining({ title: 'Column Backlog' }), + expect.objectContaining({ title: 'Column Doing' }) ] }, - expect.objectContaining({ id: 1, title: 'Lane Backlog' }), + expect.objectContaining({ id: 1, title: 'Column Backlog' }), expect.objectContaining({ id: 1, title: 'Card title 1' }) ) }) @@ -1304,28 +1308,28 @@ describe('', () => { describe('about the card adding', () => { describe('when the component receives a custom header lane template', () => { - const renderLaneHeader = jest.fn((_, { addCard }) => { + const renderColumnHeader = jest.fn((_, { addCard }) => { return }) const onCardNew = jest.fn() beforeEach(() => { - renderLaneHeader.mockClear() + renderColumnHeader.mockClear() onCardNew.mockClear() }) it('does not call the "onCardNew" callback', () => { - mount({ renderLaneHeader, onCardNew }) + mount({ renderColumnHeader, onCardNew }) expect(onCardNew).not.toHaveBeenCalled() }) - it('passes the lane and the lane bag to the "renderLaneHeader"', () => { - mount({ renderLaneHeader, onCardNew }) - expect(renderLaneHeader).toHaveBeenCalledWith( - expect.objectContaining({ id: 1, title: 'Lane Backlog' }), + it('passes the lane and the lane bag to the "renderColumnHeader"', () => { + mount({ renderColumnHeader, onCardNew }) + expect(renderColumnHeader).toHaveBeenCalledWith( + expect.objectContaining({ id: 1, title: 'Column Backlog' }), expect.objectContaining({ - removeLane: expect.any(Function), - renameLane: expect.any(Function), + removeColumn: expect.any(Function), + renameColumn: expect.any(Function), addCard: expect.any(Function) }) ) @@ -1334,8 +1338,8 @@ describe('', () => { describe('when the "addCard" callback is called', () => { describe('when the position is not specified', () => { beforeEach(() => { - mount({ renderLaneHeader, onCardNew }) - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('New card')) + mount({ renderColumnHeader, onCardNew }) + fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) it('adds a new card on the bottom of the lane', () => { @@ -1344,7 +1348,7 @@ describe('', () => { expect(cards[2]).toHaveTextContent('New card') }) - it('calls the "onCardNew" callback passing the updated board, the updated lane and the new card', () => { + it('calls the "onCardNew" callback passing the updated board, the updated column and the new card', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { @@ -1365,11 +1369,11 @@ describe('', () => { describe('when the position is specified to add the card on the top of the lane', () => { beforeEach(() => { - const renderLaneHeader = jest.fn((_, { addCard }) => { + const renderColumnHeader = jest.fn((_, { addCard }) => { return }) - mount({ renderLaneHeader, onCardNew }) - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('New card')) + mount({ renderColumnHeader, onCardNew }) + fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) it('adds a new card on the top of the lane', () => { @@ -1378,7 +1382,7 @@ describe('', () => { expect(cards[0]).toHaveTextContent('New card') }) - it('calls the "onCardNew" callback passing the updated board, the updated lane and the new card', () => { + it('calls the "onCardNew" callback passing the updated board, the updated column and the new card', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { @@ -1399,13 +1403,13 @@ describe('', () => { describe('when the position is specified to add the card on the bottom of the lane', () => { beforeEach(() => { - const renderLaneHeader = jest.fn((_, { addCard }) => { + const renderColumnHeader = jest.fn((_, { addCard }) => { return ( ) }) - mount({ renderLaneHeader, onCardNew }) - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('New card')) + mount({ renderColumnHeader, onCardNew }) + fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) it('adds a new card on the bottom of the lane', () => { @@ -1414,7 +1418,7 @@ describe('', () => { expect(cards[2]).toHaveTextContent('New card') }) - it('calls the "onCardNew" callback passing the updated board, the updated lane and the new card', () => { + it('calls the "onCardNew" callback passing the updated board, the updated column and the new card', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { diff --git a/src/components/Board/services/index.js b/src/components/Board/services/index.js index 69240fba..0f8afca5 100644 --- a/src/components/Board/services/index.js +++ b/src/components/Board/services/index.js @@ -1,30 +1,30 @@ function getCoordinates(event, board) { if (event.destination === null) return {} - const laneSource = { fromPosition: event.source.index } - const laneDestination = { toPosition: event.destination.index } + const columnSource = { fromPosition: event.source.index } + const columnDestination = { toPosition: event.destination.index } - if (isALaneMove(event.type)) { - return { source: laneSource, destination: laneDestination } + if (isAColumnMove(event.type)) { + return { source: columnSource, destination: columnDestination } } return { - source: { ...laneSource, fromLaneId: getLane(board, event.source.droppableId).id }, - destination: { ...laneDestination, toLaneId: getLane(board, event.destination.droppableId).id } + source: { ...columnSource, fromColumnId: getColumn(board, event.source.droppableId).id }, + destination: { ...columnDestination, toColumnId: getColumn(board, event.destination.droppableId).id } } } -function isALaneMove(type) { +function isAColumnMove(type) { return type === 'BOARD' } function getCard(board, sourceCoordinate) { - const lane = board.lanes.find(lane => lane.id === sourceCoordinate.fromLaneId) - return lane.cards[sourceCoordinate.fromPosition] + const column = board.columns.find(column => column.id === sourceCoordinate.fromColumnId) + return column.cards[sourceCoordinate.fromPosition] } -function getLane(board, droppableId) { - return board.lanes.find(({ id }) => String(id) === droppableId) +function getColumn(board, droppableId) { + return board.columns.find(({ id }) => String(id) === droppableId) } -export { getCard, getCoordinates, isALaneMove } +export { getCard, getCoordinates, isAColumnMove } diff --git a/src/components/Board/services/index.spec.js b/src/components/Board/services/index.spec.js index 71294e7a..06ad4ba0 100644 --- a/src/components/Board/services/index.spec.js +++ b/src/components/Board/services/index.spec.js @@ -1,4 +1,4 @@ -import { getCard, isALaneMove, getCoordinates } from './' +import { getCard, isAColumnMove, getCoordinates } from './' describe('#getCoordinates', () => { describe('when the event does not have destination', () => { @@ -7,21 +7,21 @@ describe('#getCoordinates', () => { }) }) - describe('when the event is a lane move', () => { + describe('when the event is a column move', () => { const event = { type: 'BOARD', source: { index: 0, droppableId: 0 }, destination: { index: 1, droppableId: 1 } } - it('returns the lane coordinates', () => { + it('returns the column coordinates', () => { expect(getCoordinates(event)).toEqual({ destination: { toPosition: 1 }, source: { fromPosition: 0 } }) }) }) describe('when the event is a card move', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }] }, { id: '2', cards: [{ id: 2 }] } ] @@ -35,33 +35,33 @@ describe('#getCoordinates', () => { it('returns the card coordinates', () => { expect(getCoordinates(event, board)).toEqual({ - source: { fromLaneId: 1, fromPosition: 0 }, - destination: { toLaneId: '2', toPosition: 1 } + source: { fromColumnId: 1, fromPosition: 0 }, + destination: { toColumnId: '2', toPosition: 1 } }) }) }) }) -describe('#isALaneMove', () => { +describe('#isAColumnMove', () => { describe('when the type is "BOARD"', () => { it('returns true', () => { - expect(isALaneMove('BOARD')).toEqual(true) + expect(isAColumnMove('BOARD')).toEqual(true) }) }) describe('when the type is not "BOARD"', () => { it('returns false', () => { - expect(isALaneMove('IS_NOT_BOARD')).toEqual(false) + expect(isAColumnMove('IS_NOT_BOARD')).toEqual(false) }) }) }) describe('#getCard', () => { const board = { - lanes: [{ id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }] + columns: [{ id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }] } it('returns the card of the board from the given source', () => { - expect(getCard(board, { fromLaneId: 1, fromPosition: 1 })).toEqual({ id: 2 }) + expect(getCard(board, { fromColumnId: 1, fromPosition: 1 })).toEqual({ id: 2 }) }) }) diff --git a/src/index.spec.js b/src/index.spec.js index bcfea27f..9cfbd6c1 100644 --- a/src/index.spec.js +++ b/src/index.spec.js @@ -1,12 +1,12 @@ -import Board, { moveLane, moveCard, addLane, removeLane, changeLane, addCard, removeCard } from './' +import Board, { moveColumn, moveCard, addColumn, removeColumn, changeColumn, addCard, removeCard } from './' it('exports the Component and the helpers', () => { expect(Board).toEqual(expect.any(Function)) - expect(moveLane).toEqual(expect.any(Function)) + expect(moveColumn).toEqual(expect.any(Function)) expect(moveCard).toEqual(expect.any(Function)) - expect(addLane).toEqual(expect.any(Function)) - expect(removeLane).toEqual(expect.any(Function)) - expect(changeLane).toEqual(expect.any(Function)) + expect(addColumn).toEqual(expect.any(Function)) + expect(removeColumn).toEqual(expect.any(Function)) + expect(changeColumn).toEqual(expect.any(Function)) expect(addCard).toEqual(expect.any(Function)) expect(removeCard).toEqual(expect.any(Function)) }) diff --git a/src/services/helpers.js b/src/services/helpers.js index c3c6fb69..a549b616 100644 --- a/src/services/helpers.js +++ b/src/services/helpers.js @@ -5,74 +5,74 @@ import { replaceElementOfArray } from '@services/utils' -function reorderCardsOnLane(lane, reorderCards) { - return { ...lane, cards: reorderCards(lane.cards) } +function reorderCardsOnColumn(column, reorderCards) { + return { ...column, cards: reorderCards(column.cards) } } -function moveLane(board, { fromPosition }, { toPosition }) { - return { ...board, lanes: changeElementOfPositionInArray(board.lanes, fromPosition, toPosition) } +function moveColumn(board, { fromPosition }, { toPosition }) { + return { ...board, columns: changeElementOfPositionInArray(board.columns, fromPosition, toPosition) } } -function moveCard(board, { fromPosition, fromLaneId }, { toPosition, toLaneId }) { - const sourceLane = board.lanes.find(lane => lane.id === fromLaneId) - const destinationLane = board.lanes.find(lane => lane.id === toLaneId) +function moveCard(board, { fromPosition, fromColumnId }, { toPosition, toColumnId }) { + const sourceColumn = board.columns.find(column => column.id === fromColumnId) + const destinationColumn = board.columns.find(column => column.id === toColumnId) - const reorderLanesOnBoard = reorderLanesMapper => ({ ...board, lanes: board.lanes.map(reorderLanesMapper) }) - const reorderCardsOnSourceLane = reorderCardsOnLane.bind(null, sourceLane) - const reorderCardsOnDestinationLane = reorderCardsOnLane.bind(null, destinationLane) + const reorderColumnsOnBoard = reorderColumnsMapper => ({ ...board, columns: board.columns.map(reorderColumnsMapper) }) + const reorderCardsOnSourceColumn = reorderCardsOnColumn.bind(null, sourceColumn) + const reorderCardsOnDestinationColumn = reorderCardsOnColumn.bind(null, destinationColumn) - if (sourceLane.id === destinationLane.id) { - const reorderedCardsOnLane = reorderCardsOnSourceLane(cards => { + if (sourceColumn.id === destinationColumn.id) { + const reorderedCardsOnColumn = reorderCardsOnSourceColumn(cards => { return changeElementOfPositionInArray(cards, fromPosition, toPosition) }) - return reorderLanesOnBoard(lane => (lane.id === sourceLane.id ? reorderedCardsOnLane : lane)) + return reorderColumnsOnBoard(column => (column.id === sourceColumn.id ? reorderedCardsOnColumn : column)) } else { - const reorderedCardsOnSourceLane = reorderCardsOnSourceLane(cards => { + const reorderedCardsOnSourceColumn = reorderCardsOnSourceColumn(cards => { return removeFromArrayAtPosition(cards, fromPosition) }) - const reorderedCardsOnDestinationLane = reorderCardsOnDestinationLane(cards => { - return addInArrayAtPosition(cards, sourceLane.cards[fromPosition], toPosition) + const reorderedCardsOnDestinationColumn = reorderCardsOnDestinationColumn(cards => { + return addInArrayAtPosition(cards, sourceColumn.cards[fromPosition], toPosition) }) - return reorderLanesOnBoard(lane => { - if (lane.id === sourceLane.id) return reorderedCardsOnSourceLane - if (lane.id === destinationLane.id) return reorderedCardsOnDestinationLane - return lane + return reorderColumnsOnBoard(column => { + if (column.id === sourceColumn.id) return reorderedCardsOnSourceColumn + if (column.id === destinationColumn.id) return reorderedCardsOnDestinationColumn + return column }) } } -function addLane(board, lane) { - return { ...board, lanes: addInArrayAtPosition(board.lanes, lane, board.lanes.length) } +function addColumn(board, column) { + return { ...board, columns: addInArrayAtPosition(board.columns, column, board.columns.length) } } -function removeLane(board, lane) { - return { ...board, lanes: board.lanes.filter(({ id }) => id !== lane.id) } +function removeColumn(board, column) { + return { ...board, columns: board.columns.filter(({ id }) => id !== column.id) } } -function changeLane(board, lane, newLane) { - const changedLanes = replaceElementOfArray(board.lanes)({ - when: ({ id }) => id === lane.id, - for: value => ({ ...value, ...newLane }) +function changeColumn(board, column, newColumn) { + const changedColumns = replaceElementOfArray(board.columns)({ + when: ({ id }) => id === column.id, + for: value => ({ ...value, ...newColumn }) }) - return { ...board, lanes: changedLanes } + return { ...board, columns: changedColumns } } -function addCard(board, inLane, card, { on } = {}) { - const laneToAdd = board.lanes.find(({ id }) => id === inLane.id) - const cards = addInArrayAtPosition(laneToAdd.cards, card, on === 'top' ? 0 : laneToAdd.cards.length) - const lanes = replaceElementOfArray(board.lanes)({ - when: ({ id }) => inLane.id === id, +function addCard(board, inColumn, card, { on } = {}) { + const columnToAdd = board.columns.find(({ id }) => id === inColumn.id) + const cards = addInArrayAtPosition(columnToAdd.cards, card, on === 'top' ? 0 : columnToAdd.cards.length) + const columns = replaceElementOfArray(board.columns)({ + when: ({ id }) => inColumn.id === id, for: value => ({ ...value, cards }) }) - return { ...board, lanes } + return { ...board, columns } } -function removeCard(board, fromLane, card) { - const laneToRemove = board.lanes.find(({ id }) => id === fromLane.id) - const filteredCards = laneToRemove.cards.filter(({ id }) => card.id !== id) - const laneWithoutCard = { ...laneToRemove, cards: filteredCards } - const filteredLanes = board.lanes.map(lane => (fromLane.id === lane.id ? laneWithoutCard : lane)) - return { ...board, lanes: filteredLanes } +function removeCard(board, fromColumn, card) { + const columnToRemove = board.columns.find(({ id }) => id === fromColumn.id) + const filteredCards = columnToRemove.cards.filter(({ id }) => card.id !== id) + const columnWithoutCard = { ...columnToRemove, cards: filteredCards } + const filteredColumns = board.columns.map(column => (fromColumn.id === column.id ? columnWithoutCard : column)) + return { ...board, columns: filteredColumns } } -export { moveLane, moveCard, addLane, removeLane, changeLane, addCard, removeCard } +export { moveColumn, moveCard, addColumn, removeColumn, changeColumn, addCard, removeCard } diff --git a/src/services/helpers.spec.js b/src/services/helpers.spec.js index a48412ea..86702c96 100644 --- a/src/services/helpers.spec.js +++ b/src/services/helpers.spec.js @@ -1,18 +1,18 @@ -import { moveLane, moveCard, addLane, removeLane, changeLane, addCard, removeCard } from './helpers' +import { moveColumn, moveCard, addColumn, removeColumn, changeColumn, addCard, removeCard } from './helpers' -describe('#moveLane', () => { - it('returns a board with the lane moved to the specified position', () => { +describe('#moveColumn', () => { + it('returns a board with the column moved to the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const orderedBoard = moveLane(board, { fromPosition: 0 }, { toPosition: 1 }) + const orderedBoard = moveColumn(board, { fromPosition: 0 }, { toPosition: 1 }) expect(orderedBoard).toEqual({ - lanes: [ + columns: [ { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] }, { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] } ] @@ -21,19 +21,19 @@ describe('#moveLane', () => { }) describe('#moveCard', () => { - describe('when the card is moved in the same lane', () => { - it('returns a board with the card moved in the same lane to the specified position', () => { + describe('when the card is moved in the same column', () => { + it('returns a board with the card moved in the same column to the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const orderedBoard = moveCard(board, { fromPosition: 0, fromLaneId: 1 }, { toPosition: 2, toLaneId: 1 }) + const orderedBoard = moveCard(board, { fromPosition: 0, fromColumnId: 1 }, { toPosition: 2, toColumnId: 1 }) expect(orderedBoard).toEqual({ - lanes: [ + columns: [ { id: 1, cards: [{ id: 2 }, { id: 3 }, { id: 1 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] @@ -41,20 +41,20 @@ describe('#moveCard', () => { }) }) - describe('when the card is moved from a lane to another lane', () => { - it('returns a board with the card moved to another lane to the specified position', () => { + describe('when the card is moved from a column to another column', () => { + it('returns a board with the card moved to another column to the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] }, { id: 3, cards: [{ id: 7 }, { id: 8 }, { id: 9 }] } ] } - const orderedBoard = moveCard(board, { fromPosition: 0, fromLaneId: 1 }, { toPosition: 1, toLaneId: 2 }) + const orderedBoard = moveCard(board, { fromPosition: 0, fromColumnId: 1 }, { toPosition: 1, toColumnId: 2 }) expect(orderedBoard).toEqual({ - lanes: [ + columns: [ { id: 1, cards: [{ id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 1 }, { id: 5 }, { id: 6 }] }, { id: 3, cards: [{ id: 7 }, { id: 8 }, { id: 9 }] } @@ -64,19 +64,19 @@ describe('#moveCard', () => { }) }) -describe('#addLane', () => { - it('returns a board with the new lane at the specified position', () => { +describe('#addColumn', () => { + it('returns a board with the new column at the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const boardWithTheNewLane = addLane(board, { id: 3, cards: [{ id: 7 }] }) + const boardWithTheNewColumn = addColumn(board, { id: 3, cards: [{ id: 7 }] }) - expect(boardWithTheNewLane).toEqual({ - lanes: [ + expect(boardWithTheNewColumn).toEqual({ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] }, { id: 3, cards: [{ id: 7 }] } @@ -85,36 +85,36 @@ describe('#addLane', () => { }) }) -describe('#removeLane', () => { - it('returns a board without the specified lane', () => { +describe('#removeColumn', () => { + it('returns a board without the specified column', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const boardWithoutTheLane = removeLane(board, { id: 2 }) + const boardWithoutTheColumn = removeColumn(board, { id: 2 }) - expect(boardWithoutTheLane).toEqual({ - lanes: [{ id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }] + expect(boardWithoutTheColumn).toEqual({ + columns: [{ id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }] }) }) }) -describe('#changeLane', () => { - it('returns a board with the specified lane changed according to passed lane', () => { +describe('#changeColumn', () => { + it('returns a board with the specified column changed according to passed column', () => { const board = { - lanes: [ + columns: [ { id: 1, title: 'Doing', cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, title: 'Done', cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const boardWithTheModifiedLane = changeLane(board, { id: 1 }, { title: 'New title' }) + const boardWithTheModifiedColumn = changeColumn(board, { id: 1 }, { title: 'New title' }) - expect(boardWithTheModifiedLane).toEqual({ - lanes: [ + expect(boardWithTheModifiedColumn).toEqual({ + columns: [ { id: 1, title: 'New title', cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, title: 'Done', cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] @@ -125,20 +125,20 @@ describe('#changeLane', () => { // TODO I'm not happy with this and with the remove card method // How can we handle this better? describe('#addCard', () => { - describe('when the card is added on top of the lane', () => { - it('returns a board with the new card in the specified lane at the specified position', () => { + describe('when the card is added on top of the column', () => { + it('returns a board with the new card in the specified column at the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const lane = { id: 2 } + const column = { id: 2 } - const boardWithTheNewLane = addCard(board, lane, { id: 7 }, { on: 'top' }) + const boardWithTheNewColumn = addCard(board, column, { id: 7 }, { on: 'top' }) - expect(boardWithTheNewLane).toEqual({ - lanes: [ + expect(boardWithTheNewColumn).toEqual({ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 7 }, { id: 4 }, { id: 5 }, { id: 6 }] } ] @@ -146,20 +146,20 @@ describe('#addCard', () => { }) }) - describe('when the card is added on bottom of the lane', () => { - it('returns a board with the new card in the specified lane at the specified position', () => { + describe('when the card is added on bottom of the column', () => { + it('returns a board with the new card in the specified column at the specified position', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const inLane = { id: 2 } + const inColumn = { id: 2 } - const boardWithTheNewLane = addCard(board, inLane, { id: 7 }, { on: 'bottom' }) + const boardWithTheNewColumn = addCard(board, inColumn, { id: 7 }, { on: 'bottom' }) - expect(boardWithTheNewLane).toEqual({ - lanes: [ + expect(boardWithTheNewColumn).toEqual({ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }] } ] @@ -171,17 +171,17 @@ describe('#addCard', () => { describe('#removeCard', () => { it('returns a board without the specified card', () => { const board = { - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] } - const fromLane = { id: 1 } + const fromColumn = { id: 1 } - const boardWithoutTheCard = removeCard(board, fromLane, { id: 2 }) + const boardWithoutTheCard = removeCard(board, fromColumn, { id: 2 }) expect(boardWithoutTheCard).toEqual({ - lanes: [ + columns: [ { id: 1, cards: [{ id: 1 }, { id: 3 }] }, { id: 2, cards: [{ id: 4 }, { id: 5 }, { id: 6 }] } ] From 48f9643fa56045fe9b2871d07e35627ba41418b1 Mon Sep 17 00:00:00 2001 From: Leandro Lourenci Date: Sun, 9 Feb 2020 15:47:51 -0300 Subject: [PATCH 2/3] Rename components --- .../Board/components/{Lane => Column}/components/Card/index.js | 0 .../components/{Lane => Column}/components/Card/index.spec.js | 0 src/components/Board/components/{Lane => Column}/index.js | 0 src/components/Board/components/{Lane => Column}/index.spec.js | 0 .../LaneForm => ColumnAdder/components/ColumnForm}/index.js | 0 .../LaneForm => ColumnAdder/components/ColumnForm}/index.spec.js | 0 .../Board/components/{LaneAdder => ColumnAdder}/index.js | 0 .../Board/components/{LaneAdder => ColumnAdder}/index.spec.js | 0 .../{DefaultLaneHeader => DefaultColumnHeader}/index.js | 0 .../{DefaultLaneHeader => DefaultColumnHeader}/index.spec.js | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename src/components/Board/components/{Lane => Column}/components/Card/index.js (100%) rename src/components/Board/components/{Lane => Column}/components/Card/index.spec.js (100%) rename src/components/Board/components/{Lane => Column}/index.js (100%) rename src/components/Board/components/{Lane => Column}/index.spec.js (100%) rename src/components/Board/components/{LaneAdder/components/LaneForm => ColumnAdder/components/ColumnForm}/index.js (100%) rename src/components/Board/components/{LaneAdder/components/LaneForm => ColumnAdder/components/ColumnForm}/index.spec.js (100%) rename src/components/Board/components/{LaneAdder => ColumnAdder}/index.js (100%) rename src/components/Board/components/{LaneAdder => ColumnAdder}/index.spec.js (100%) rename src/components/Board/components/{DefaultLaneHeader => DefaultColumnHeader}/index.js (100%) rename src/components/Board/components/{DefaultLaneHeader => DefaultColumnHeader}/index.spec.js (100%) diff --git a/src/components/Board/components/Lane/components/Card/index.js b/src/components/Board/components/Column/components/Card/index.js similarity index 100% rename from src/components/Board/components/Lane/components/Card/index.js rename to src/components/Board/components/Column/components/Card/index.js diff --git a/src/components/Board/components/Lane/components/Card/index.spec.js b/src/components/Board/components/Column/components/Card/index.spec.js similarity index 100% rename from src/components/Board/components/Lane/components/Card/index.spec.js rename to src/components/Board/components/Column/components/Card/index.spec.js diff --git a/src/components/Board/components/Lane/index.js b/src/components/Board/components/Column/index.js similarity index 100% rename from src/components/Board/components/Lane/index.js rename to src/components/Board/components/Column/index.js diff --git a/src/components/Board/components/Lane/index.spec.js b/src/components/Board/components/Column/index.spec.js similarity index 100% rename from src/components/Board/components/Lane/index.spec.js rename to src/components/Board/components/Column/index.spec.js diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.js b/src/components/Board/components/ColumnAdder/components/ColumnForm/index.js similarity index 100% rename from src/components/Board/components/LaneAdder/components/LaneForm/index.js rename to src/components/Board/components/ColumnAdder/components/ColumnForm/index.js diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js b/src/components/Board/components/ColumnAdder/components/ColumnForm/index.spec.js similarity index 100% rename from src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js rename to src/components/Board/components/ColumnAdder/components/ColumnForm/index.spec.js diff --git a/src/components/Board/components/LaneAdder/index.js b/src/components/Board/components/ColumnAdder/index.js similarity index 100% rename from src/components/Board/components/LaneAdder/index.js rename to src/components/Board/components/ColumnAdder/index.js diff --git a/src/components/Board/components/LaneAdder/index.spec.js b/src/components/Board/components/ColumnAdder/index.spec.js similarity index 100% rename from src/components/Board/components/LaneAdder/index.spec.js rename to src/components/Board/components/ColumnAdder/index.spec.js diff --git a/src/components/Board/components/DefaultLaneHeader/index.js b/src/components/Board/components/DefaultColumnHeader/index.js similarity index 100% rename from src/components/Board/components/DefaultLaneHeader/index.js rename to src/components/Board/components/DefaultColumnHeader/index.js diff --git a/src/components/Board/components/DefaultLaneHeader/index.spec.js b/src/components/Board/components/DefaultColumnHeader/index.spec.js similarity index 100% rename from src/components/Board/components/DefaultLaneHeader/index.spec.js rename to src/components/Board/components/DefaultColumnHeader/index.spec.js From c8caa79074dd895d01976ea76eb8f50c5f024dfc Mon Sep 17 00:00:00 2001 From: Leandro Lourenci Date: Sun, 9 Feb 2020 15:49:52 -0300 Subject: [PATCH 3/3] Rename more lane --- src/components/Board/index.spec.js | 242 ++++++++++++++--------------- 1 file changed, 121 insertions(+), 121 deletions(-) diff --git a/src/components/Board/index.spec.js b/src/components/Board/index.spec.js index 0e1d4beb..9fec7bfb 100644 --- a/src/components/Board/index.spec.js +++ b/src/components/Board/index.spec.js @@ -338,18 +338,18 @@ describe('', () => { fireEvent.click(subject.queryByText('Add')) }) - it('calls the "onNewColumnConfirm" passing the new lane', () => { + it('calls the "onNewColumnConfirm" passing the new column', () => { expect(onNewColumnConfirm).toHaveBeenCalledTimes(1) expect(onNewColumnConfirm).toHaveBeenCalledWith({ title: 'Column Added by user', cards: [] }) }) }) - describe('when the user cancels the new lane adding', () => { + describe('when the user cancels the new column adding', () => { beforeEach(() => { fireEvent.click(subject.queryByText('Cancel')) }) - it('does not call the "onNewColumnConfirm" passing the new lane', () => { + it('does not call the "onNewColumnConfirm" passing the new column', () => { expect(onNewColumnConfirm).not.toHaveBeenCalled() }) }) @@ -357,22 +357,22 @@ describe('', () => { }) }) - describe('about custom lane adder', () => { - describe('when the component receives a custom lane adder', () => { + describe('about custom column adder', () => { + describe('when the component receives a custom column adder', () => { let renderColumnAdder describe('when the component does not receive "allowAddColumn" prop', () => { beforeEach(() => { renderColumnAdder = jest.fn(() => (
- +
)) mount({ renderColumnAdder }) it('does not renders the custom render adder', () => { - expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() + expect(subject.queryByTestId('columnAdder')).toBeInTheDocument() }) }) }) @@ -380,16 +380,16 @@ describe('', () => { describe('when the component receives the "allowAddColumn" prop', () => { beforeEach(() => { renderColumnAdder = jest.fn(() => ( -
- +
+
)) mount({ children: board, renderColumnAdder, allowAddColumn: true }) }) - it('renders the custom lane adder as the last lane to add a new lane', () => { - expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() + it('renders the custom column adder as the last column to add a new column', () => { + expect(subject.queryByTestId('columnAdder')).toBeInTheDocument() }) // TODO it needs spec for the renderColumnAdder callback @@ -398,7 +398,7 @@ describe('', () => { }) }) - describe('about the lane removing', () => { + describe('about the column removing', () => { beforeEach(() => { onColumnRemove = jest.fn() }) @@ -413,11 +413,11 @@ describe('', () => { describe('when the user clicks to remove a column', () => { beforeEach(() => { - const removeColumnButton = within(subject.queryAllByTestId('lane')[0]).queryByText('ร—') + const removeColumnButton = within(subject.queryAllByTestId('column')[0]).queryByText('ร—') fireEvent.click(removeColumnButton) }) - it('calls the "onColumnRemove" callback passing the lane to be removed', () => { + it('calls the "onColumnRemove" callback passing the column to be removed', () => { expect(onColumnRemove).toHaveBeenCalledTimes(1) expect(onColumnRemove).toHaveBeenCalledWith(expect.objectContaining({ id: 1 })) }) @@ -425,7 +425,7 @@ describe('', () => { }) }) - describe('when the component receives a custom header lane template', () => { + describe('when the component receives a custom header column template', () => { let renderColumnHeader beforeEach(() => { @@ -440,7 +440,7 @@ describe('', () => { }) }) - describe('about the lane renaming', () => { + describe('about the column renaming', () => { describe('when the component use the default header template', () => { describe('when the component receives the "allowRenameColumn" prop', () => { beforeEach(() => { @@ -454,17 +454,17 @@ describe('', () => { describe('when the user renames a column', () => { beforeEach(() => { - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog')) + fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('Column Backlog')) fireEvent.change(subject.container.querySelector('input'), { target: { value: 'New title' } }) fireEvent.click(subject.queryByText('Rename', { selector: 'button' })) }) - it('does not rename the lane', () => { + it('does not rename the column', () => { expect(subject.queryByText('Column Backlog')).toBeInTheDocument() expect(subject.queryByText('New title')).not.toBeInTheDocument() }) - it('calls the "onColumnRename" callback passing the lane to be renamed', () => { + it('calls the "onColumnRename" callback passing the column to be renamed', () => { expect(onColumnRename).toHaveBeenCalledTimes(1) expect(onColumnRename).toHaveBeenCalledWith( expect.objectContaining({ id: 1, title: 'Column Backlog' }), @@ -484,13 +484,13 @@ describe('', () => { expect(onColumnRename).not.toHaveBeenCalled() }) - it('does not show the button on lane header to remove the lane', () => { - expect(subject.queryAllByTestId('lane')[0].querySelector('button')).not.toBeInTheDocument() + it('does not show the button on column header to remove the column', () => { + expect(subject.queryAllByTestId('column')[0].querySelector('button')).not.toBeInTheDocument() }) }) }) - describe('when the component receives a custom header lane template', () => { + describe('when the component receives a custom header column template', () => { beforeEach(() => { const renderColumnHeader = ({ title }) =>
{title}
onColumnRename = jest.fn() @@ -516,7 +516,7 @@ describe('', () => { expect(onCardRemove).not.toHaveBeenCalled() }) - describe('when the user clicks to remove a card from a lane', () => { + describe('when the user clicks to remove a card from a column', () => { beforeEach(() => { const removeCardButton = within(subject.queryAllByTestId('card')[0]).queryByText('ร—') fireEvent.click(removeCardButton) @@ -574,8 +574,8 @@ describe('', () => { it('does not rerender on initialBoard change', () => { const { queryByText } = mount({ Component: UselessState }) - const lane = within(queryByText(/^Column Backlog$/).closest('[data-testid="lane"]')) - const cards = lane.queryAllByText(/^Card title/) + const column = within(queryByText(/^Column Backlog$/).closest('[data-testid="column"]')) + const cards = column.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) expect(cards[0]).toHaveTextContent(/^Card title 1$/) @@ -583,7 +583,7 @@ describe('', () => { fireEvent.click(queryByText('Move card', { selector: 'button' })) - const movedCards = lane.queryAllByText(/^Card title/) + const movedCards = column.queryAllByText(/^Card title/) expect(movedCards).toHaveLength(2) expect(movedCards[0]).toHaveTextContent(/^Card title 1$/) @@ -593,17 +593,17 @@ describe('', () => { it('renders the specified columns in the board ordered by its specified position', () => { const columns = mount().queryAllByText(/^Column/) expect(columns).toHaveLength(2) - expect(lanes[0]).toHaveTextContent(/^Column Backlog$/) - expect(lanes[1]).toHaveTextContent(/^Column Doing$/) + expect(columns[0]).toHaveTextContent(/^Column Backlog$/) + expect(columns[1]).toHaveTextContent(/^Column Doing$/) }) - it('renders the specified cards in their lanes', () => { - const lane = within( + it('renders the specified cards in their columns', () => { + const column = within( mount() .queryByText(/^Column Backlog$/) .closest('[data-testid="column"]') ) - const cards = lane.queryAllByText(/^Card title/) + const cards = column.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) }) @@ -636,7 +636,7 @@ describe('', () => { it('calls the onCardDragEnd callback passing the modified board, the card and the move coordinates', () => { const expectedBoard = { - lanes: [ + columns: [ { id: 1, title: 'Column Backlog', @@ -678,14 +678,14 @@ describe('', () => { }) }) - describe('about the lane moving', () => { + describe('about the column moving', () => { describe('when the component receives "onColumnDragEnd" callback', () => { beforeEach(() => { onColumnDragEnd = jest.fn() mount({ onColumnDragEnd }) }) - describe('when the user cancels the lane moving', () => { + describe('when the user cancels the column moving', () => { beforeEach(() => { callbacks.onDragEnd({ source: null, destination: null, type: 'BOARD' }) }) @@ -695,7 +695,7 @@ describe('', () => { }) }) - describe('when the user moves a lane to another position', () => { + describe('when the user moves a column to another position', () => { beforeEach(() => { act(() => { callbacks.onDragEnd({ source: { index: 0 }, destination: { index: 1 }, type: 'BOARD' }) @@ -704,7 +704,7 @@ describe('', () => { it('calls the onColumnDragEnd callback passing the modified board, the column, and the column move coordinates', () => { const expectedBoard = { - lanes: [ + columns: [ { id: 2, title: 'Column Doing', @@ -750,7 +750,7 @@ describe('', () => { describe("about the board's custom card", () => { let renderCard const board = { - lanes: [ + columns: [ { id: 1, title: 'Column Backlog', @@ -796,7 +796,7 @@ describe('', () => { mount({ initialBoard: board, renderCard }) }) - it("renders the custom cards on the board's lane", () => { + it("renders the custom cards on the board's column", () => { const cards = subject.queryAllByTestId('card') expect(cards).toHaveLength(3) expect(cards[0]).toHaveTextContent(/^1 - Card title - Card content$/) @@ -811,10 +811,10 @@ describe('', () => { }) }) - describe("about the lane's header", () => { + describe("about the column's header", () => { let renderColumnHeader const board = { - lanes: [ + columns: [ { id: 1, title: 'Column Backlog', @@ -832,7 +832,7 @@ describe('', () => { beforeEach(() => { renderColumnHeader = jest.fn(columnContent => (
- {laneContent.title} ({laneContent.wip}) + {columnContent.title} ({columnContent.wip})
)) @@ -840,11 +840,11 @@ describe('', () => { }) it("renders the custom header on the board's column", () => { - expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Column Backlog \(1\)$/) + expect(subject.queryAllByTestId('column-header')).toHaveLength(1) + expect(subject.queryByTestId('column-header')).toHaveTextContent(/^Column Backlog \(1\)$/) }) - it('passes the lane content, the "removeColumn" and the "renameColumn" to the "renderColumnHeader" prop', () => { + it('passes the column content, the "removeColumn" and the "renameColumn" to the "renderColumnHeader" prop', () => { expect(renderColumnHeader).toHaveBeenCalledTimes(1) expect(renderColumnHeader).toHaveBeenCalledWith( { @@ -862,20 +862,20 @@ describe('', () => { beforeEach(() => mount({ initialBoard: board })) it("renders the default header on the board's column", () => { - expect(subject.queryAllByTestId('lane-header')).toHaveLength(1) - expect(subject.queryByTestId('lane-header')).toHaveTextContent(/^Column Backlog$/) + expect(subject.queryAllByTestId('column-header')).toHaveLength(1) + expect(subject.queryByTestId('column-header')).toHaveTextContent(/^Column Backlog$/) }) }) }) - describe('about the lane adding', () => { - describe('about the default lane adder', () => { + describe('about the column adding', () => { + describe('about the default column adder', () => { describe('when the component does not receive "allowAddColumn" prop', () => { let onColumnNew, onNewColumnConfirm beforeEach(() => { onColumnNew = jest.fn() - onNewColumnConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) + onNewColumnConfirm = jest.fn(column => new Promise(resolve => resolve({ id: 999, ...column }))) mount({ allowAddColumn: false, onNewColumnConfirm, onColumnNew }) }) afterEach(() => { @@ -883,7 +883,7 @@ describe('', () => { onNewColumnConfirm = undefined }) - it('does not render the lane adder', () => { + it('does not render the column adder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) }) @@ -893,7 +893,7 @@ describe('', () => { mount({ allowAddColumn: true }) }) - it('does not render the lane adder', () => { + it('does not render the column adder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) }) @@ -903,7 +903,7 @@ describe('', () => { beforeEach(() => { onColumnNew = jest.fn() - onNewColumnConfirm = jest.fn(lane => new Promise(resolve => resolve({ id: 999, ...lane }))) + onNewColumnConfirm = jest.fn(column => new Promise(resolve => resolve({ id: 999, ...column }))) mount({ allowAddColumn: true, onNewColumnConfirm, onColumnNew }) }) afterEach(() => { @@ -911,37 +911,37 @@ describe('', () => { onNewColumnConfirm = undefined }) - it('renders the lane placeholder as the last lane to add a new lane', () => { + it('renders the column placeholder as the last column to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) - describe('when the user clicks to add a new lane', () => { + describe('when the user clicks to add a new column', () => { beforeEach(() => fireEvent.click(subject.queryByText('โž•'))) - it('hides the lane placeholder', () => { + it('hides the column placeholder', () => { expect(subject.queryByText('โž•')).not.toBeInTheDocument() }) - it('renders the input asking for a lane title', () => { + it('renders the input asking for a column title', () => { expect(subject.container.querySelector('input')).toBeInTheDocument() }) - describe('when the user confirms the new lane', () => { + describe('when the user confirms the new column', () => { beforeEach(async () => { fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Column Added by user' } }) fireEvent.click(subject.queryByText('Add')) - await waitForElement(() => subject.container.querySelector('[data-testid="lane"]:nth-child(3)')) + await waitForElement(() => subject.container.querySelector('[data-testid="column"]:nth-child(3)')) }) - it('calls the "onNewColumnConfirm" passing the new lane', () => { + it('calls the "onNewColumnConfirm" passing the new column', () => { expect(onNewColumnConfirm).toHaveBeenCalledTimes(1) expect(onNewColumnConfirm).toHaveBeenCalledWith({ title: 'Column Added by user', cards: [] }) }) it('renders the new column using the id returned on "onNewColumnConfirm"', () => { - expect(subject.queryAllByTestId('lane')).toHaveLength(3) + expect(subject.queryAllByTestId('column')).toHaveLength(3) }) it('renders the column placeholder as the last column to add a new column', () => { @@ -952,7 +952,7 @@ describe('', () => { expect(onColumnNew).toHaveBeenCalledTimes(1) expect(onColumnNew).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 }), expect.objectContaining({ id: 999 }) @@ -963,16 +963,16 @@ describe('', () => { }) }) - describe('when the user cancels the new lane adding', () => { + describe('when the user cancels the new column adding', () => { beforeEach(() => { fireEvent.click(subject.queryByText('Cancel')) }) it('does not add any new column', () => { - expect(subject.queryAllByTestId('lane')).toHaveLength(2) + expect(subject.queryAllByTestId('column')).toHaveLength(2) }) - it('renders the lane placeholder as the last lane to add a new lane', () => { + it('renders the column placeholder as the last column to add a new column', () => { expect(subject.queryByText('โž•')).toBeInTheDocument() }) }) @@ -980,22 +980,22 @@ describe('', () => { }) }) - describe('about custom lane adder', () => { - describe('when the component receives a custom lane adder', () => { + describe('about custom column adder', () => { + describe('when the component receives a custom column adder', () => { let onColumnNew, renderColumnAdder describe('when the component does not receive "allowAddColumn" prop', () => { beforeEach(() => { renderColumnAdder = jest.fn(() => (
- +
)) mount({ renderColumnAdder }) it('does not renders the custom render adder', () => { - expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() + expect(subject.queryByTestId('columnAdder')).toBeInTheDocument() }) }) }) @@ -1004,16 +1004,16 @@ describe('', () => { beforeEach(() => { onColumnNew = jest.fn() renderColumnAdder = jest.fn(({ addColumn }) => ( -
- +
+
)) mount({ children: board, renderColumnAdder, allowAddColumn: true, onColumnNew }) }) - it('renders the custom lane adder as the last lane to add a new lane', () => { - expect(subject.queryByTestId('laneAdder')).toBeInTheDocument() + it('renders the custom column adder as the last column to add a new column', () => { + expect(subject.queryByTestId('columnAdder')).toBeInTheDocument() }) it('passes the "addColumn" to the "renderColumnAdder" prop', () => { @@ -1024,23 +1024,23 @@ describe('', () => { describe('when the "addColumn" callback is called', () => { beforeEach(() => fireEvent.click(within(subject.queryByTestId('columnAdder')).queryByText('Add column'))) - it('renders the new lane', () => { - const lane = subject.queryAllByTestId('lane') + it('renders the new column', () => { + const column = subject.queryAllByTestId('column') expect(column).toHaveLength(3) - expect(lane[2]).toHaveTextContent('New lane') + expect(column[2]).toHaveTextContent('New column') }) it('calls the "onColumnNew" callback passing both the updated board and the added column', () => { expect(onColumnNew).toHaveBeenCalledTimes(1) expect(onColumnNew).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 }), - expect.objectContaining({ id: 99, title: 'New lane' }) + expect.objectContaining({ id: 99, title: 'New column' }) ] }, - expect.objectContaining({ id: 99, title: 'New lane' }) + expect.objectContaining({ id: 99, title: 'New column' }) ) }) }) @@ -1049,7 +1049,7 @@ describe('', () => { }) }) - describe('about the lane removing', () => { + describe('about the column removing', () => { beforeEach(() => { onColumnRemove = jest.fn() }) @@ -1062,22 +1062,22 @@ describe('', () => { expect(onColumnRemove).not.toHaveBeenCalled() }) - describe('when the user clicks to remove a lane', () => { + describe('when the user clicks to remove a column', () => { beforeEach(() => { const removeColumnButton = within(subject.queryAllByTestId('column')[0]).queryByText('ร—') fireEvent.click(removeColumnButton) }) - it('removes the lane', () => { - const lane = subject.queryAllByTestId('lane') + it('removes the column', () => { + const column = subject.queryAllByTestId('column') expect(column).toHaveLength(1) - expect(lane[0]).toHaveTextContent('Column Doing') + expect(column[0]).toHaveTextContent('Column Doing') }) - it('calls the "onColumnRemove" callback passing both the updated board and the removed lane', () => { + it('calls the "onColumnRemove" callback passing both the updated board and the removed column', () => { expect(onColumnRemove).toHaveBeenCalledTimes(1) expect(onColumnRemove).toHaveBeenCalledWith( - { lanes: [expect.objectContaining({ id: 2 })] }, + { columns: [expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1 }) ) }) @@ -1085,7 +1085,7 @@ describe('', () => { }) }) - describe('when the component receives a custom header lane template', () => { + describe('when the component receives a custom header column template', () => { let renderColumnHeader beforeEach(() => { @@ -1098,7 +1098,7 @@ describe('', () => { expect(onColumnRemove).not.toHaveBeenCalled() }) - it('passes the lane and the lane bag to the "renderColumnHeader"', () => { + it('passes the column and the column bag to the "renderColumnHeader"', () => { expect(renderColumnHeader).toHaveBeenCalledWith( expect.objectContaining({ id: 1, title: 'Column Backlog' }), expect.objectContaining({ removeColumn: expect.any(Function), renameColumn: expect.any(Function) }) @@ -1108,16 +1108,16 @@ describe('', () => { describe('when the "removeColumn" callback is called', () => { beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('Column Backlog'))) - it('removes the lane', () => { - const lane = subject.queryAllByTestId('lane') + it('removes the column', () => { + const column = subject.queryAllByTestId('column') expect(column).toHaveLength(1) - expect(lane[0]).toHaveTextContent('Column Doing') + expect(column[0]).toHaveTextContent('Column Doing') }) - it('calls the "onColumnRemove" callback passing both the updated board and the removed lane', () => { + it('calls the "onColumnRemove" callback passing both the updated board and the removed column', () => { expect(onColumnRemove).toHaveBeenCalledTimes(1) expect(onColumnRemove).toHaveBeenCalledWith( - { lanes: [expect.objectContaining({ id: 2 })] }, + { columns: [expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1 }) ) }) @@ -1125,7 +1125,7 @@ describe('', () => { }) }) - describe('about the lane renaming', () => { + describe('about the column renaming', () => { describe('when the component use the default header template', () => { describe('when the component receives the "allowRenameColumn" prop', () => { beforeEach(() => { @@ -1137,14 +1137,14 @@ describe('', () => { expect(onColumnRename).not.toHaveBeenCalled() }) - describe('when the user renames a lane', () => { + describe('when the user renames a column', () => { beforeEach(() => { - fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog')) + fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('Column Backlog')) fireEvent.change(subject.container.querySelector('input'), { target: { value: 'New title' } }) fireEvent.click(subject.queryByText('Rename', { selector: 'button' })) }) - it('renames the lane', () => { + it('renames the column', () => { expect(subject.queryByText('Column Backlog')).not.toBeInTheDocument() expect(subject.queryByText('New title')).toBeInTheDocument() }) @@ -1153,7 +1153,7 @@ describe('', () => { expect(onColumnRename).toHaveBeenCalledTimes(1) expect(onColumnRename).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ id: 1, title: 'New title' }), expect.objectContaining({ id: 2, title: 'Column Doing' }) ] @@ -1174,13 +1174,13 @@ describe('', () => { expect(onColumnRename).not.toHaveBeenCalled() }) - it('does not show the button on lane header to remove the lane', () => { - expect(subject.queryAllByTestId('lane')[0].querySelector('button')).not.toBeInTheDocument() + it('does not show the button on column header to remove the column', () => { + expect(subject.queryAllByTestId('column')[0].querySelector('button')).not.toBeInTheDocument() }) }) }) - describe('when the component receives a custom header lane template', () => { + describe('when the component receives a custom header column template', () => { beforeEach(() => { const renderColumnHeader = ({ title }, { renameColumn }) => (
renameColumn('New title')}>{title}
@@ -1194,17 +1194,17 @@ describe('', () => { }) describe('when the "renameColumn" callback is called', () => { - beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('lane')[0]).queryByText('Column Backlog'))) + beforeEach(() => fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('Column Backlog'))) it('renames the column', () => { - expect(subject.queryAllByTestId('lane')[0]).toHaveTextContent('New title') + expect(subject.queryAllByTestId('column')[0]).toHaveTextContent('New title') }) it('calls the "onColumnRename" callback passing both the updated board and the renamed column', () => { expect(onColumnRename).toHaveBeenCalledTimes(1) expect(onColumnRename).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ id: 1, title: 'New title' }), expect.objectContaining({ id: 2, title: 'Column Doing' }) ] @@ -1229,13 +1229,13 @@ describe('', () => { expect(onCardRemove).not.toHaveBeenCalled() }) - describe('when the user clicks to remove a card from a lane', () => { + describe('when the user clicks to remove a card from a column', () => { beforeEach(() => { const removeCardButton = within(subject.queryAllByTestId('card')[0]).queryByText('ร—') fireEvent.click(removeCardButton) }) - it('removes the card from the lane', () => { + it('removes the card from the column', () => { const cards = subject.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) expect(cards[0]).toHaveTextContent('Card title 2') @@ -1246,7 +1246,7 @@ describe('', () => { expect(onCardRemove).toHaveBeenCalledTimes(1) expect(onCardRemove).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ id: 1, cards: [expect.objectContaining({ id: 2 })] }), expect.objectContaining({ id: 2, cards: [expect.objectContaining({ id: 3 })] }) ] @@ -1282,7 +1282,7 @@ describe('', () => { describe('when the "removeCard" callback is called', () => { beforeEach(() => fireEvent.click(subject.queryByText('Card title 1'))) - it('removes the card from the lane', () => { + it('removes the card from the column', () => { const cards = subject.queryAllByText(/^Card title/) expect(cards).toHaveLength(2) expect(cards[0]).toHaveTextContent('Card title 2') @@ -1293,7 +1293,7 @@ describe('', () => { expect(onCardRemove).toHaveBeenCalledTimes(1) expect(onCardRemove).toHaveBeenCalledWith( { - lanes: [ + columns: [ expect.objectContaining({ title: 'Column Backlog' }), expect.objectContaining({ title: 'Column Doing' }) ] @@ -1307,7 +1307,7 @@ describe('', () => { }) describe('about the card adding', () => { - describe('when the component receives a custom header lane template', () => { + describe('when the component receives a custom header column template', () => { const renderColumnHeader = jest.fn((_, { addCard }) => { return }) @@ -1323,7 +1323,7 @@ describe('', () => { expect(onCardNew).not.toHaveBeenCalled() }) - it('passes the lane and the lane bag to the "renderColumnHeader"', () => { + it('passes the column and the column bag to the "renderColumnHeader"', () => { mount({ renderColumnHeader, onCardNew }) expect(renderColumnHeader).toHaveBeenCalledWith( expect.objectContaining({ id: 1, title: 'Column Backlog' }), @@ -1342,8 +1342,8 @@ describe('', () => { fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) - it('adds a new card on the bottom of the lane', () => { - const cards = within(subject.queryAllByTestId('lane')[0]).queryAllByTestId('card') + it('adds a new card on the bottom of the column', () => { + const cards = within(subject.queryAllByTestId('column')[0]).queryAllByTestId('card') expect(cards).toHaveLength(3) expect(cards[2]).toHaveTextContent('New card') }) @@ -1352,7 +1352,7 @@ describe('', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { - lanes: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] + columns: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1, @@ -1367,7 +1367,7 @@ describe('', () => { }) }) - describe('when the position is specified to add the card on the top of the lane', () => { + describe('when the position is specified to add the card on the top of the column', () => { beforeEach(() => { const renderColumnHeader = jest.fn((_, { addCard }) => { return @@ -1376,8 +1376,8 @@ describe('', () => { fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) - it('adds a new card on the top of the lane', () => { - const cards = within(subject.queryAllByTestId('lane')[0]).queryAllByTestId('card') + it('adds a new card on the top of the column', () => { + const cards = within(subject.queryAllByTestId('column')[0]).queryAllByTestId('card') expect(cards).toHaveLength(3) expect(cards[0]).toHaveTextContent('New card') }) @@ -1386,7 +1386,7 @@ describe('', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { - lanes: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] + columns: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1, @@ -1401,7 +1401,7 @@ describe('', () => { }) }) - describe('when the position is specified to add the card on the bottom of the lane', () => { + describe('when the position is specified to add the card on the bottom of the column', () => { beforeEach(() => { const renderColumnHeader = jest.fn((_, { addCard }) => { return ( @@ -1412,8 +1412,8 @@ describe('', () => { fireEvent.click(within(subject.queryAllByTestId('column')[0]).queryByText('New card')) }) - it('adds a new card on the bottom of the lane', () => { - const cards = within(subject.queryAllByTestId('lane')[0]).queryAllByTestId('card') + it('adds a new card on the bottom of the column', () => { + const cards = within(subject.queryAllByTestId('column')[0]).queryAllByTestId('card') expect(cards).toHaveLength(3) expect(cards[2]).toHaveTextContent('New card') }) @@ -1422,7 +1422,7 @@ describe('', () => { expect(onCardNew).toHaveBeenCalledTimes(1) expect(onCardNew).toHaveBeenCalledWith( { - lanes: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] + columns: [expect.objectContaining({ id: 1 }), expect.objectContaining({ id: 2 })] }, expect.objectContaining({ id: 1,