forked from uber/baseweb
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(data-table): add clear selection imperitive method (uber#5162)
* feat(data-table): add clear selection imperitive method * test(vrt): update visual snapshots for 37f4bdc (uber#5163) * feat(data-table): add clear selection imperitive method * fix(e2e): improve test reliability * chore(e2e): fix lint/tsc Co-authored-by: UberOpenSourceBot <[email protected]>
- Loading branch information
1 parent
ef9cd57
commit 5dd8468
Showing
22 changed files
with
328 additions
and
227 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
src/data-table/__tests__/data-table-imperative-clear-selection.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* | ||
| Copyright (c) Uber Technologies, Inc. | ||
| This source code is licensed under the MIT license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { expect, test } from '@playwright/test'; | ||
| import { mount } from '../../test/integration'; | ||
| import { getCellContentsAtColumnIndex } from './utilities'; | ||
|
|
||
| const COLUMN_COUNT = 2; | ||
|
|
||
| test.describe('data-table imperative clear selection', () => { | ||
| test('clears selection outside of batch action', async ({ page }) => { | ||
| await mount(page, 'data-table--imperative-clear-selection'); | ||
| const batchActionRemoveButton = page.locator('text=Remove selected rows'); | ||
| const rowActionRemoveButton = page.locator('button[title="Remove row"]'); | ||
| const firstRowCheckbox = page.locator('[data-baseweb="checkbox"]').nth(1); | ||
|
|
||
| await expect(batchActionRemoveButton).toBeHidden(); | ||
| await expect(rowActionRemoveButton).toBeHidden(); | ||
| const initialActual = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0); | ||
| const initialExpected = ['1', '2', '3', '4', '5']; | ||
| expect(initialActual).toEqual(initialExpected); | ||
|
|
||
| await firstRowCheckbox.click(); | ||
| await batchActionRemoveButton.click(); | ||
| await expect(batchActionRemoveButton).toBeHidden(); | ||
| const batchActual = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0); | ||
| expect(batchActual.slice(0, 4)).toEqual(initialExpected.slice(1)); | ||
|
|
||
| await firstRowCheckbox.click(); | ||
| await expect(batchActionRemoveButton).toBeVisible(); | ||
| await rowActionRemoveButton.click(); | ||
| const rowActual = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0); | ||
| expect(rowActual.slice(0, 3)).toEqual(initialExpected.slice(2)); | ||
| }); | ||
| }); |
82 changes: 82 additions & 0 deletions
82
src/data-table/__tests__/data-table-imperative-clear-selection.scenario.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /* | ||
| Copyright (c) Uber Technologies, Inc. | ||
| This source code is licensed under the MIT license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| */ | ||
| import * as React from 'react'; | ||
|
|
||
| import Check from '../../icon/check'; | ||
|
|
||
| import NumericalColumn from '../column-numerical'; | ||
| import { StatefulDataTable } from '../stateful-data-table'; | ||
|
|
||
| type RowData = number; | ||
|
|
||
| const columns = [ | ||
| NumericalColumn({ | ||
| title: 'row-id', | ||
| mapDataToValue: (data: RowData) => data, | ||
| }), | ||
|
|
||
| NumericalColumn({ | ||
| title: 'filler', | ||
| mapDataToValue: (data: RowData) => data, | ||
| }), | ||
| ]; | ||
|
|
||
| export function Scenario() { | ||
| const controlRef = React.useRef(null); | ||
| const [rows, setRows] = React.useState([ | ||
| { id: 1, data: 1 }, | ||
| { id: 2, data: 2 }, | ||
| { id: 3, data: 3 }, | ||
| { id: 4, data: 4 }, | ||
| { id: 5, data: 5 }, | ||
| ]); | ||
|
|
||
| function removeRows(ids) { | ||
| const nextRows = rows.filter((row) => !ids.includes(row.id)); | ||
| setRows(nextRows); | ||
| } | ||
|
|
||
| const batchActions = [ | ||
| { | ||
| label: 'Remove selected rows', | ||
| onClick: ({ selection, clearSelection }) => { | ||
| removeRows(selection.map((r) => r.id)); | ||
| clearSelection(); | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| const rowActions = [ | ||
| { | ||
| label: 'Remove row', | ||
| onClick: ({ row }) => { | ||
| removeRows([row.id]); | ||
| if (controlRef.current) { | ||
| console.log('here'); | ||
| controlRef.current.clearSelection(); | ||
| } | ||
| }, | ||
| renderIcon: function RenderCheck({ size }) { | ||
| return <Check size={size} />; | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div style={{ height: '400px', width: '900px' }}> | ||
| <StatefulDataTable | ||
| batchActions={batchActions} | ||
| rowActions={rowActions} | ||
| controlRef={controlRef} | ||
| columns={columns} | ||
| rows={rows} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.