3.1 issue132 readonly tests #134

Marc-Andre-Rivet · 2018-10-11T20:35:44Z

adding tests (1 for readonly text|numeric, 1 for dropdown)
fixing issues as they were found
- column editable prop was not applied correctly

* refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - fix pr comment - fix for IE/Edge * clean up

* refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * cleaup offsets * triad validation * - define external facing classes and attributes * fix regression, update build * fix test regression (invalid props) * update test name * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - control columns into visible columns - cleanup "hidden" conditional processing * update changelog * clean up header factory * apply style on first controlled table render * typo/merge miss * derived visible columns * - visual tests for hidden columns * rename functions * - fix dropdown styling regression * lint

* props fixes * update changelog * bump version * filter typing * Update derivedViewport_test.ts Add basic viewport test with |df| > page_size

see discussion in #108

* props fixes * update changelog * bump version * filter typing * - delete unused usage files - restructure tests folder * - separate cypress and visual tests into 2 ci jobs * - build before tests! * add browsers to the node image for visual-test

# Conflicts: # dash_table/bundle.js # dash_table/demo.js # src/dash-table/components/ControlledTable/index.tsx # src/dash-table/components/HeaderFactory.tsx # src/dash-table/components/Table/Table.less # src/dash-table/components/Table/props.ts

💯 add percent examples

107 save on tab -> develop

* WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * fix style application on mount * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test

* WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * add width percentage support + content_style * fix style application on mount * fix visual regression with empty df * only apply row style when necessary * fix tab test (no offset) * clean up header styling * use dash-* classes * support default column width (override input behavior) * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test * fit to content behavior * fix regressions * fix lint * add column width visual tests * fix dropdown minimum size when using default width * sizing examples * black * fix navigation test regression * fix regressions in visual tests * default column width - fix dropdown width eval * default width columns - fix width when first content row is search filter * percy - add delay before screenshot (attempt to fix FF visual tests) * debugging selenium * fix black * debug selenium * debug selenium * fix black * debug selenium * debug selenium * debug selenium * undo all selenium modifications * default column width - filter inputs behave like cell inputs (do not affect width) * - fixed rows+columns height evaluated correctly * remove dead code * remove .only from tests * add data-dash-column to filter cells

# Conflicts: # CHANGELOG.md # dash_table/bundle.js # dash_table/demo.js # dash_table/package.json # package.json # src/dash-table/components/ControlledTable/index.tsx # src/dash-table/components/HeaderFactory.tsx # src/dash-table/components/Table/Table.less # src/dash-table/components/Table/props.ts

* 🌈 styling examples examples that represent of the level of customization that we need in dash-table. The examples are implemented with HTML tables to demonstrate the intended behaviour. I’d like to see each of these examples implemented with the `dash_table` syntax. We’ll use these examples as our `dash-table` documentation * ❌ removing black and pylint this keeps tripping us up and I don’t think it’s worth the pain right now.

* 🏭 backend computed data usage examples * 📊 tying it together w a graph * ❓ not sure what `displayed_pages` does?

* ⬇️ dropdown usage examples * add conditional dropdown example

- fixes for editable/readonly

…ly-tests # Conflicts: # CHANGELOG.md # dash_table/bundle.js # dash_table/demo.js # dash_table/package.json # package.json # src/dash-table/components/CellInput/index.tsx # src/dash-table/derived/cell/inputs.tsx # src/dash-table/derived/cell/wrappers.tsx # tests/cypress/tests/standalone/edit_cell_test.ts # tests/visual/percy-storybook/Width.defaults.percy.tsx # tests/visual/percy-storybook/Width.min.percy.tsx # tests/visual/percy-storybook/Width.percy.tsx

Marc-Andre-Rivet · 2018-10-11T20:35:56Z

dash_table/package.json

@@ -1,6 +1,6 @@
 {
  "name": "dash-table",
-  "version": "3.1.0rc4",
+  "version": "3.1.0rc5",


bump version

Marc-Andre-Rivet · 2018-10-11T20:36:13Z

demo/data.js

+        type: 'numeric',
+        editable: false,
+        width: 150,
+        data: gendata(i => i + 1),


adding two additional readonly fields to the demo app to test out readonly cases

Marc-Andre-Rivet · 2018-10-11T20:37:15Z

src/dash-table/components/CellInput/index.tsx

@@ -88,7 +108,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
            onDoubleClick: onDoubleClick
        };

-        const readonly = !active && this.state.value === this.props.value;
+        const readonly = (!active && this.state.value === this.props.value) || !editable;


cell content is readonly if not focused or if not editable (table+column configuration)

Marc-Andre-Rivet · 2018-10-11T20:38:09Z

src/dash-table/derived/cell/inputs.tsx

@@ -43,7 +44,7 @@ const getter = (
                clearable={column.clearable}
                datum={datum}
                dropdown={dropdown}
-                editable={editable}
+                editable={colIsEditable(editable, column)}


calculate readonly/readwrite based on table and column props

Slightly nitpicky (sorry) but I think the derivedState.js name is a little confusing. I see you've got files like derived/cell/isActive, couldn't it go in something like that? Like derived/columns/isEditable.

Hadn't renamed it because I hadn't moved it from js to typescript.. but sure, I'll do it now.

Marc-Andre-Rivet · 2018-10-11T20:39:12Z

tests/cypress/src/DashTable.ts

@@ -3,6 +3,10 @@ export default class DashTable {
        return cy.get(`#table tbody tr td.column-${column}`).eq(row);
    }

+    static getCellById(row: number, column: number | string) {
+        return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+    }


new selector for tests that uses the column id attribute instead of the index -- when applied to everything, will make tests more robust to changes in the demo app

valentijnnieman

Looks good, copy paste tests are still failing on my end though. New tests look fine and pass so 💃

valentijnnieman · 2018-10-12T15:52:48Z

src/dash-table/derived/cell/inputs.tsx

@@ -43,7 +44,7 @@ const getter = (
                clearable={column.clearable}
                datum={datum}
                dropdown={dropdown}
-                editable={editable}
+                editable={colIsEditable(editable, column)}


Slightly nitpicky (sorry) but I think the derivedState.js name is a little confusing. I see you've got files like derived/cell/isActive, couldn't it go in something like that? Like derived/columns/isEditable.

Marc-Andre-Rivet · 2018-10-12T17:24:17Z

src/dash-table/derived/cell/isEditable.ts

+export default (
+    editable: boolean,
+    column: IVisibleColumn
+): boolean => editable && (column.editable === undefined || column.editable);


@valentijnnieman As per suggestion, renaming and TS-ing

Marc-Andre-Rivet and others added 26 commits September 25, 2018 13:22

3.1 props fixes (#112)

33a1511

* props fixes * update changelog * bump version * filter typing * Update derivedViewport_test.ts Add basic viewport test with |df| > page_size

☝️ 3 new review / documentation / target apps

8bbcb1c

see discussion in #108

🙈 forgot file

724481f

📝 incorporate @cldougl suggestions 🙇

5499429

3.1 refactor tests (#113)

b83cb97

* props fixes * update changelog * bump version * filter typing * - delete unused usage files - restructure tests folder * - separate cypress and visual tests into 2 ci jobs * - build before tests! * add browsers to the node image for visual-test

💯 add percent examples

e98dfd8

📝 title/example clarification

877dd7c

Merge pull request #116 from plotly/percent_ex

96df001

💯 add percent examples

reformat sizing test app for failing tests (#125)

14fdde7

Merged with develop & fixed merge conflicts

a2217e3

Removed .only from dash_test.ts

bcd1b49

Production build instead of dev 🙈

957e147

Fix failing tests

43b0182

Merge pull request #126 from plotly/107-save-on-tab

fb418fc

107 save on tab -> develop

Backend examples (#119)

d87b866

* 🏭 backend computed data usage examples * 📊 tying it together w a graph * ❓ not sure what `displayed_pages` does?

Dropdown usage examples (#120)

8a3dc8b

* ⬇️ dropdown usage examples * add conditional dropdown example

- additional tests for editable/readonly

682feaa

- fixes for editable/readonly

bump version

f40ab2c

Marc-Andre-Rivet requested review from cldougl and valentijnnieman October 11, 2018 20:35

Marc-Andre-Rivet commented Oct 11, 2018

View reviewed changes

chriddyp temporarily deployed to dash-table-review-pr-134 October 11, 2018 20:35 Inactive

Marc-Andre-Rivet commented Oct 11, 2018

View reviewed changes

remove useless test column

f059bcc

chriddyp temporarily deployed to dash-table-review-pr-134 October 11, 2018 20:37 Inactive

Marc-Andre-Rivet commented Oct 11, 2018

View reviewed changes

Marc-Andre-Rivet mentioned this pull request Oct 11, 2018

add test for semi editable table #132

Closed

add editable prop to fixtures

d2431c1

chriddyp temporarily deployed to dash-table-review-pr-134 October 11, 2018 20:44 Inactive

update tests to take into account readonly 'rows' column

77a7a53

chriddyp temporarily deployed to dash-table-review-pr-134 October 11, 2018 20:57 Inactive

valentijnnieman approved these changes Oct 12, 2018

View reviewed changes

- refactor column isEditable calculation

b3df3bb

chriddyp deployed to dash-table-review-pr-134 October 12, 2018 17:23 View deployment

Marc-Andre-Rivet commented Oct 12, 2018

View reviewed changes

Marc-Andre-Rivet merged commit 3eee16e into master Oct 12, 2018

Marc-Andre-Rivet deleted the 3.1-issue132-readonly-tests branch July 18, 2019 12:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3.1 issue132 readonly tests #134

3.1 issue132 readonly tests #134

Marc-Andre-Rivet commented Oct 11, 2018

Marc-Andre-Rivet Oct 11, 2018

Marc-Andre-Rivet Oct 11, 2018

Marc-Andre-Rivet Oct 11, 2018

Marc-Andre-Rivet Oct 11, 2018

valentijnnieman Oct 12, 2018

Marc-Andre-Rivet Oct 12, 2018

Marc-Andre-Rivet Oct 11, 2018

valentijnnieman left a comment

valentijnnieman Oct 12, 2018

Marc-Andre-Rivet Oct 12, 2018

3.1 issue132 readonly tests #134

3.1 issue132 readonly tests #134

Conversation

Marc-Andre-Rivet commented Oct 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

valentijnnieman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment