Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Ensure that components are still in the DOM when they are loading. #740

Merged
merged 28 commits into from
Apr 9, 2020
Merged

Ensure that components are still in the DOM when they are loading. #740

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8e181d7
Ensure that components are still in the DOM when they are loading.
Jan 22, 2020
73db3ca
Define style prop for spinners as object and not bool.
Jan 22, 2020
377004b
Fix CSS property names.
Jan 22, 2020
a09a508
Merge branch 'dev' into 674-map-uirevision
Jan 22, 2020
284c3a3
Update loading component tests.
Jan 23, 2020
a90af15
Merge branch 'dev' into 674-map-uirevision
Feb 3, 2020
ceff132
Merge branch 'dev' into 674-map-uirevision
Feb 4, 2020
6167e15
Merge branch 'dev' into 674-map-uirevision
Marc-Andre-Rivet Mar 2, 2020
bfe6d15
Fix test name.
shammamah-zz Mar 3, 2020
8dc4529
Lock circleci python versions.
shammamah-zz Mar 3, 2020
1ead9bc
Merge branch 'dev' into 674-map-uirevision
Mar 5, 2020
ef5d193
Merge branch 'dev' into 674-map-uirevision
Mar 10, 2020
1cb8da3
Update CHANGELOG.
Mar 10, 2020
49fc1ea
Merge branch 'dev' into 674-map-uirevision
alexcjohnson Apr 9, 2020
f985ece
revert python version lock on CI
alexcjohnson Apr 9, 2020
01425ff
pyest.ini - mainly to speed up test discovery with `testpaths`
alexcjohnson Apr 9, 2020
6d398a2
extend --pause option to dashdcc fixture
alexcjohnson Apr 9, 2020
aa4fce7
fix typo in test_graph_basics that somehow we didn't care about before
alexcjohnson Apr 9, 2020
600a09f
more consistent structure for Loading component
alexcjohnson Apr 9, 2020
386137e
robustify store test
alexcjohnson Apr 9, 2020
22a1975
port loading component tests to dash.testing - without fixing them
alexcjohnson Apr 9, 2020
2bfaa28
update loading component tests for new class usage
alexcjohnson Apr 9, 2020
8bf9fbf
black test_loading_component
alexcjohnson Apr 9, 2020
26c6533
test that children retain identity inside loading components
alexcjohnson Apr 9, 2020
a80f0db
Update CHANGELOG.md
alexcjohnson Apr 9, 2020
4fc809a
include computed visibility in the loading/graph test
alexcjohnson Apr 9, 2020
fb15aa9
Merge branch '674-map-uirevision' of github.com:plotly/dash-core-comp…
alexcjohnson Apr 9, 2020
2b41ea0
robustify store test_data_lifecycle
alexcjohnson Apr 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions src/components/Loading.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,27 @@ export default class Loading extends Component {
if (loading_state && loading_state.is_loading) {
const Spinner = getSpinner(spinnerType);
return (
<Spinner
className={className}
style={style}
status={loading_state}
color={color}
debug={debug}
fullscreen={fullscreen}
/>
<div style={{visibility: 'hidden', position: 'relative'}}>
{this.props.children}
<Spinner
className={className}
style={{
visibility: 'visible',
position: 'absolute',
top: '0',
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...style,
}}
status={loading_state}
color={color}
debug={debug}
fullscreen={fullscreen}
/>
</div>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/Loading/spinners/CircleSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ CircleSpinner.propTypes = {
color: PropTypes.string,
className: PropTypes.string,
fullscreen: PropTypes.bool,
style: PropTypes.bool,
style: PropTypes.object,
debug: PropTypes.bool,
};

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/Loading/spinners/CubeSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ CubeSpinner.propTypes = {
color: PropTypes.string,
className: PropTypes.string,
fullscreen: PropTypes.bool,
style: PropTypes.bool,
style: PropTypes.object,
debug: PropTypes.bool,
};

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/Loading/spinners/DefaultSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ DefaultSpinner.propTypes = {
color: PropTypes.string,
className: PropTypes.string,
fullscreen: PropTypes.bool,
style: PropTypes.bool,
style: PropTypes.object,
debug: PropTypes.bool,
};

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/Loading/spinners/DotSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ DotSpinner.propTypes = {
color: PropTypes.string,
className: PropTypes.string,
fullscreen: PropTypes.bool,
style: PropTypes.bool,
style: PropTypes.object,
debug: PropTypes.bool,
};

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/Loading/spinners/GraphSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ GraphSpinner.propTypes = {
color: PropTypes.string,
className: PropTypes.string,
fullscreen: PropTypes.bool,
style: PropTypes.bool,
style: PropTypes.object,
debug: PropTypes.bool,
};

Expand Down
28 changes: 24 additions & 4 deletions tests/unit/Loading.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ test('Loading renders', () => {
</Loading>
);

expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
expect(
loading
.find('.dash-spinner')
.parent()
.html()
).toMatchSnapshot('Loading with is_loading=true');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the corresponding snapshot baseline in this PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This snapshot is already here:

dash-core-components/tests/unit/__snapshots__/Loading.test.js.snap

Line 224 in 803b67b

exports[`Loading renders: Loading with is_loading=true 1`] = `

The baseline is the same, but the test itself had to change because I moved things "down" in the DOM.

});
test('Loading renders without loading_state', () => {
const loading = render(
Expand Down Expand Up @@ -49,7 +54,12 @@ test('Loading renders without prop_name', () => {
</Loading>
);

expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
expect(
loading
.find('.dash-spinner')
.parent()
.html()
).toMatchSnapshot('Loading with is_loading=true');
});
test('Loading renders without loading_state.component_name', () => {
const statusMock = {
Expand All @@ -62,7 +72,12 @@ test('Loading renders without loading_state.component_name', () => {
</Loading>
);

expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
expect(
loading
.find('.dash-spinner')
.parent()
.html()
).toMatchSnapshot('Loading with is_loading=true');
});
test('Loading renders with multiple children', () => {
const statusMock = {
Expand All @@ -78,7 +93,12 @@ test('Loading renders with multiple children', () => {
</Loading>
);

expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
expect(
loading
.find('.dash-spinner')
.parent()
.html()
).toMatchSnapshot('Loading with is_loading=true');
});

test("Loading checks all it's children for a loading_state", () => {
Expand Down