@pie-lib/graphing-solution-set 4.0.20 → 4.0.22-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -74
- package/package.json +18 -18
- package/LICENSE.md +0 -5
- package/src/__tests__/bg.test.jsx +0 -250
- package/src/__tests__/coordinates-label.test.jsx +0 -243
- package/src/__tests__/graph-with-controls.test.jsx +0 -184
- package/src/__tests__/graph.test.jsx +0 -93
- package/src/__tests__/grid-setup.test.jsx +0 -645
- package/src/__tests__/grid.test.jsx +0 -23
- package/src/__tests__/labels.test.jsx +0 -41
- package/src/__tests__/mark-label.test.jsx +0 -66
- package/src/__tests__/toggle-bar.test.jsx +0 -106
- package/src/__tests__/tool-menu.test.jsx +0 -453
- package/src/__tests__/undo-redo.test.jsx +0 -26
- package/src/__tests__/use-debounce.test.js +0 -21
- package/src/__tests__/utils.js +0 -41
- package/src/__tests__/utils.test.js +0 -105
- package/src/axis/__tests__/arrow.test.jsx +0 -43
- package/src/axis/__tests__/axes.test.jsx +0 -182
- package/src/container/__tests__/actions.test.js +0 -105
- package/src/container/__tests__/index.test.jsx +0 -227
- package/src/container/__tests__/marks.test.js +0 -172
- package/src/container/__tests__/middleware.test.js +0 -235
- package/src/container/__tests__/reducer.test.js +0 -324
- package/src/tools/line/__tests__/component.test.jsx +0 -37
- package/src/tools/polygon/__tests__/component.test.jsx +0 -487
- package/src/tools/polygon/__tests__/index.test.js +0 -65
- package/src/tools/polygon/__tests__/line.test.jsx +0 -23
- package/src/tools/polygon/__tests__/polygon.test.jsx +0 -44
- package/src/tools/shared/__tests__/arrow-head.test.jsx +0 -33
- package/src/tools/shared/line/__tests__/index.test.jsx +0 -553
- package/src/tools/shared/line/__tests__/line-path.test.jsx +0 -56
- package/src/tools/shared/line/__tests__/with-root-edge.test.jsx +0 -488
- package/src/tools/shared/point/__tests__/arrow-point.test.jsx +0 -91
- package/src/tools/shared/point/__tests__/arrow.test.jsx +0 -469
- package/src/tools/shared/point/__tests__/base-point.test.jsx +0 -87
package/CHANGELOG.md
CHANGED
|
@@ -3,80 +3,6 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [4.0.20](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.19...@pie-lib/graphing-solution-set@4.0.20) (2026-09-16)
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
9
|
-
|
|
10
|
-
## [4.0.19](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.18...@pie-lib/graphing-solution-set@4.0.19) (2026-09-03)
|
|
11
|
-
|
|
12
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
13
|
-
|
|
14
|
-
## [4.0.18](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.17...@pie-lib/graphing-solution-set@4.0.18) (2026-09-02)
|
|
15
|
-
|
|
16
|
-
### Bug Fixes
|
|
17
|
-
|
|
18
|
-
- **deps:** align versions with pie-elements-ng and upgrade [@visx](https://github.com/visx) to v4 PIE-926 ([16c5ff0](https://github.com/pie-framework/pie-lib/commit/16c5ff093a36fea98a46d5e2b37f95d9ec03025c))
|
|
19
|
-
|
|
20
|
-
## [4.0.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.16...@pie-lib/graphing-solution-set@4.0.17) (2026-08-26)
|
|
21
|
-
|
|
22
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
23
|
-
|
|
24
|
-
## [4.0.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.15...@pie-lib/graphing-solution-set@4.0.16) (2026-08-21)
|
|
25
|
-
|
|
26
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
27
|
-
|
|
28
|
-
## [4.0.15](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.14...@pie-lib/graphing-solution-set@4.0.15) (2026-08-18)
|
|
29
|
-
|
|
30
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
31
|
-
|
|
32
|
-
## [4.0.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.13...@pie-lib/graphing-solution-set@4.0.14) (2026-08-13)
|
|
33
|
-
|
|
34
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
35
|
-
|
|
36
|
-
## [4.0.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.12...@pie-lib/graphing-solution-set@4.0.13) (2026-07-31)
|
|
37
|
-
|
|
38
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
39
|
-
|
|
40
|
-
## [4.0.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.11...@pie-lib/graphing-solution-set@4.0.12) (2026-07-08)
|
|
41
|
-
|
|
42
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
43
|
-
|
|
44
|
-
## [4.0.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.10...@pie-lib/graphing-solution-set@4.0.11) (2026-07-01)
|
|
45
|
-
|
|
46
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
47
|
-
|
|
48
|
-
## [4.0.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.9...@pie-lib/graphing-solution-set@4.0.10) (2026-06-25)
|
|
49
|
-
|
|
50
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
51
|
-
|
|
52
|
-
## [4.0.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.8...@pie-lib/graphing-solution-set@4.0.9) (2026-06-19)
|
|
53
|
-
|
|
54
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
55
|
-
|
|
56
|
-
## [4.0.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.7...@pie-lib/graphing-solution-set@4.0.8) (2026-06-17)
|
|
57
|
-
|
|
58
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
59
|
-
|
|
60
|
-
## [4.0.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.6...@pie-lib/graphing-solution-set@4.0.7) (2026-06-12)
|
|
61
|
-
|
|
62
|
-
### Bug Fixes
|
|
63
|
-
|
|
64
|
-
- correct @emotion/style typo to @emotion/styled in package deps PIE-678 ([d529ac7](https://github.com/pie-framework/pie-lib/commit/d529ac7bc3dfa94d8037688452d4c70c66f2590b))
|
|
65
|
-
|
|
66
|
-
## [4.0.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.5...@pie-lib/graphing-solution-set@4.0.6) (2026-06-03)
|
|
67
|
-
|
|
68
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
69
|
-
|
|
70
|
-
## [4.0.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.4...@pie-lib/graphing-solution-set@4.0.5) (2026-06-01)
|
|
71
|
-
|
|
72
|
-
### Bug Fixes
|
|
73
|
-
|
|
74
|
-
- **graphing:** make sure evaluate mode marks are not included in undo/redo history PIE-582 ([74f4820](https://github.com/pie-framework/pie-lib/commit/74f482052b5331d918212dcfd847a477f1e5e2d4))
|
|
75
|
-
|
|
76
|
-
## [4.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.3...@pie-lib/graphing-solution-set@4.0.4) (2026-05-21)
|
|
77
|
-
|
|
78
|
-
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
|
79
|
-
|
|
80
6
|
## [4.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing-solution-set@4.0.2...@pie-lib/graphing-solution-set@4.0.3) (2026-05-15)
|
|
81
7
|
|
|
82
8
|
**Note:** Version bump only for package @pie-lib/graphing-solution-set
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.22-beta.1",
|
|
7
7
|
"description": "Graphing components",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -22,21 +22,21 @@
|
|
|
22
22
|
"@mapbox/point-geometry": "^1.1.0",
|
|
23
23
|
"@mui/icons-material": "^7.3.4",
|
|
24
24
|
"@mui/material": "^7.3.4",
|
|
25
|
-
"@pie-lib/drag": "^4.
|
|
26
|
-
"@pie-lib/editable-html-tip-tap": "^2.1.
|
|
25
|
+
"@pie-lib/drag": "^4.0.2",
|
|
26
|
+
"@pie-lib/editable-html-tip-tap": "^2.1.20-beta.1",
|
|
27
27
|
"@pie-lib/graphing-utils": "^3.0.2",
|
|
28
|
-
"@pie-lib/plot": "^4.0.
|
|
29
|
-
"@pie-lib/render-ui": "^
|
|
30
|
-
"@pie-lib/tools": "^2.0.
|
|
28
|
+
"@pie-lib/plot": "^4.0.22-beta.1",
|
|
29
|
+
"@pie-lib/render-ui": "^6.1.0",
|
|
30
|
+
"@pie-lib/tools": "^2.0.2",
|
|
31
31
|
"@pie-lib/translator": "^4.0.2",
|
|
32
|
-
"@visx/axis": "^
|
|
33
|
-
"@visx/clip-path": "^
|
|
34
|
-
"@visx/curve": "^
|
|
35
|
-
"@visx/event": "^
|
|
36
|
-
"@visx/grid": "^
|
|
37
|
-
"@visx/group": "^
|
|
38
|
-
"@visx/point": "^
|
|
39
|
-
"@visx/shape": "^
|
|
32
|
+
"@visx/axis": "^3.0.0",
|
|
33
|
+
"@visx/clip-path": "^3.0.0",
|
|
34
|
+
"@visx/curve": "^3.0.0",
|
|
35
|
+
"@visx/event": "^3.0.0",
|
|
36
|
+
"@visx/grid": "^3.0.0",
|
|
37
|
+
"@visx/group": "^3.0.0",
|
|
38
|
+
"@visx/point": "^3.0.0",
|
|
39
|
+
"@visx/shape": "^3.0.0",
|
|
40
40
|
"classnames": "^2.2.6",
|
|
41
41
|
"d3-scale": "^4.0.2",
|
|
42
42
|
"d3-selection": "^3.0.0",
|
|
@@ -46,15 +46,15 @@
|
|
|
46
46
|
"prop-types": "^15.7.2",
|
|
47
47
|
"react": "^18.2.0",
|
|
48
48
|
"react-dom": "^18.2.0",
|
|
49
|
-
"react-draggable": "^
|
|
49
|
+
"react-draggable": "^3.3.0",
|
|
50
50
|
"react-input-autosize": "^2.2.1",
|
|
51
|
-
"react-redux": "^
|
|
52
|
-
"redux": "^
|
|
51
|
+
"react-redux": "^6.0.0",
|
|
52
|
+
"redux": "^4.0.1",
|
|
53
53
|
"redux-undo": "^1.1.0"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": "^18.2.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "433bcb776c2975739e7417f133d31cd996164116",
|
|
59
59
|
"scripts": {}
|
|
60
60
|
}
|
package/LICENSE.md
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
Copyright 2019 CoreSpring Inc
|
|
2
|
-
|
|
3
|
-
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
|
|
4
|
-
|
|
5
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@pie-lib/test-utils';
|
|
3
|
-
import { select } from 'd3-selection';
|
|
4
|
-
import Bg from '../bg';
|
|
5
|
-
|
|
6
|
-
jest.mock('d3-selection', () => ({
|
|
7
|
-
select: jest.fn(),
|
|
8
|
-
pointer: jest.fn(() => [50, 50]),
|
|
9
|
-
}));
|
|
10
|
-
|
|
11
|
-
describe('Bg', () => {
|
|
12
|
-
let defaultProps;
|
|
13
|
-
let mockRect;
|
|
14
|
-
let clickHandler;
|
|
15
|
-
|
|
16
|
-
beforeEach(() => {
|
|
17
|
-
clickHandler = null;
|
|
18
|
-
mockRect = {
|
|
19
|
-
on: jest.fn((event, handler) => {
|
|
20
|
-
if (event === 'click') {
|
|
21
|
-
clickHandler = handler;
|
|
22
|
-
}
|
|
23
|
-
}),
|
|
24
|
-
node: jest.fn(() => ({})),
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
select.mockReturnValue(mockRect);
|
|
28
|
-
|
|
29
|
-
defaultProps = {
|
|
30
|
-
width: 500,
|
|
31
|
-
height: 400,
|
|
32
|
-
onClick: jest.fn(),
|
|
33
|
-
graphProps: {
|
|
34
|
-
domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
|
|
35
|
-
range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
|
|
36
|
-
size: { width: 500, height: 400 },
|
|
37
|
-
scale: {
|
|
38
|
-
x: {
|
|
39
|
-
invert: jest.fn((val) => val / 10),
|
|
40
|
-
},
|
|
41
|
-
y: {
|
|
42
|
-
invert: jest.fn((val) => val / 10),
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
describe('rendering', () => {
|
|
50
|
-
it('renders without crashing', () => {
|
|
51
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
52
|
-
expect(container).toBeTruthy();
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('renders a rect element', () => {
|
|
56
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
57
|
-
const rect = container.querySelector('rect');
|
|
58
|
-
expect(rect).toBeTruthy();
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
it('applies correct dimensions', () => {
|
|
62
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
63
|
-
const rect = container.querySelector('rect');
|
|
64
|
-
|
|
65
|
-
// Width and height should be expanded by padding * 2
|
|
66
|
-
const padding = 10; // default padding
|
|
67
|
-
expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
|
|
68
|
-
expect(rect.getAttribute('height')).toBe(String(defaultProps.height + padding * 2));
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it('applies correct transform', () => {
|
|
72
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
73
|
-
const rect = container.querySelector('rect');
|
|
74
|
-
const padding = 10;
|
|
75
|
-
|
|
76
|
-
expect(rect.getAttribute('transform')).toBe(`translate(-${padding}, -${padding})`);
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
it('sets fill opacity to make it invisible', () => {
|
|
80
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
81
|
-
const rect = container.querySelector('rect');
|
|
82
|
-
|
|
83
|
-
expect(rect.getAttribute('fill-opacity')).toBe('0.0');
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
describe('componentDidMount', () => {
|
|
88
|
-
it('attaches click handler to rect', () => {
|
|
89
|
-
render(<Bg {...defaultProps} />);
|
|
90
|
-
|
|
91
|
-
expect(select).toHaveBeenCalled();
|
|
92
|
-
expect(mockRect.on).toHaveBeenCalledWith('click', expect.any(Function));
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
describe('getRectPadding', () => {
|
|
97
|
-
it('returns 10 for normal graphs', () => {
|
|
98
|
-
const { container } = render(<Bg {...defaultProps} />);
|
|
99
|
-
const rect = container.querySelector('rect');
|
|
100
|
-
const padding = 10;
|
|
101
|
-
|
|
102
|
-
expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
it('returns 6 for graphs with thinner shapes', () => {
|
|
106
|
-
const props = {
|
|
107
|
-
...defaultProps,
|
|
108
|
-
graphProps: {
|
|
109
|
-
...defaultProps.graphProps,
|
|
110
|
-
domain: { min: -100, max: 100, step: 1, label: 'x', axisLabel: 'X' },
|
|
111
|
-
},
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
const { container } = render(<Bg {...props} />);
|
|
115
|
-
const rect = container.querySelector('rect');
|
|
116
|
-
const padding = 6;
|
|
117
|
-
|
|
118
|
-
expect(rect.getAttribute('width')).toBe(String(props.width + padding * 2));
|
|
119
|
-
});
|
|
120
|
-
});
|
|
121
|
-
|
|
122
|
-
describe('onRectClick', () => {
|
|
123
|
-
it('calls onClick with snapped coordinates', () => {
|
|
124
|
-
const { pointer } = require('d3-selection');
|
|
125
|
-
pointer.mockReturnValue([100, 100]);
|
|
126
|
-
|
|
127
|
-
render(<Bg {...defaultProps} />);
|
|
128
|
-
|
|
129
|
-
const event = new MouseEvent('click');
|
|
130
|
-
clickHandler(event);
|
|
131
|
-
|
|
132
|
-
expect(defaultProps.onClick).toHaveBeenCalled();
|
|
133
|
-
const calledWith = defaultProps.onClick.mock.calls[0][0];
|
|
134
|
-
expect(calledWith).toHaveProperty('x');
|
|
135
|
-
expect(calledWith).toHaveProperty('y');
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
it('snaps coordinates to nearest tick', () => {
|
|
139
|
-
const { pointer } = require('d3-selection');
|
|
140
|
-
|
|
141
|
-
render(<Bg {...defaultProps} />);
|
|
142
|
-
|
|
143
|
-
const event = new MouseEvent('click');
|
|
144
|
-
clickHandler(event);
|
|
145
|
-
|
|
146
|
-
expect(defaultProps.onClick).toHaveBeenCalled();
|
|
147
|
-
const { x, y } = defaultProps.onClick.mock.calls[0][0];
|
|
148
|
-
|
|
149
|
-
expect(Number.isInteger(x) || x.toString().length <= 4).toBe(true);
|
|
150
|
-
expect(Number.isInteger(y) || y.toString().length <= 4).toBe(true);
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
it('accounts for padding when converting coordinates', () => {
|
|
154
|
-
const { pointer } = require('d3-selection');
|
|
155
|
-
const coords = [50, 50];
|
|
156
|
-
pointer.mockReturnValue(coords);
|
|
157
|
-
|
|
158
|
-
render(<Bg {...defaultProps} />);
|
|
159
|
-
|
|
160
|
-
const event = new MouseEvent('click');
|
|
161
|
-
clickHandler(event);
|
|
162
|
-
|
|
163
|
-
expect(defaultProps.graphProps.scale.x.invert).toHaveBeenCalled();
|
|
164
|
-
expect(defaultProps.graphProps.scale.y.invert).toHaveBeenCalled();
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
|
|
168
|
-
describe('shouldComponentUpdate', () => {
|
|
169
|
-
it('returns true when width changes', () => {
|
|
170
|
-
const { rerender } = render(<Bg {...defaultProps} />);
|
|
171
|
-
const newProps = {
|
|
172
|
-
...defaultProps,
|
|
173
|
-
width: 600,
|
|
174
|
-
graphProps: {
|
|
175
|
-
...defaultProps.graphProps,
|
|
176
|
-
size: { width: 600, height: defaultProps.height },
|
|
177
|
-
},
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
expect(() => {
|
|
181
|
-
rerender(<Bg {...newProps} />);
|
|
182
|
-
}).not.toThrow();
|
|
183
|
-
});
|
|
184
|
-
|
|
185
|
-
it('returns true when height changes', () => {
|
|
186
|
-
const { rerender } = render(<Bg {...defaultProps} />);
|
|
187
|
-
const newProps = {
|
|
188
|
-
...defaultProps,
|
|
189
|
-
height: 500,
|
|
190
|
-
graphProps: {
|
|
191
|
-
...defaultProps.graphProps,
|
|
192
|
-
size: { width: defaultProps.width, height: 500 },
|
|
193
|
-
},
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
expect(() => {
|
|
197
|
-
rerender(<Bg {...newProps} />);
|
|
198
|
-
}).not.toThrow();
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
it('returns true when graphProps domain/range changes', () => {
|
|
202
|
-
const { rerender } = render(<Bg {...defaultProps} />);
|
|
203
|
-
const newProps = {
|
|
204
|
-
...defaultProps,
|
|
205
|
-
graphProps: {
|
|
206
|
-
...defaultProps.graphProps,
|
|
207
|
-
domain: { min: -5, max: 5, step: 1, label: 'x', axisLabel: 'X' },
|
|
208
|
-
},
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
expect(() => {
|
|
212
|
-
rerender(<Bg {...newProps} />);
|
|
213
|
-
}).not.toThrow();
|
|
214
|
-
});
|
|
215
|
-
});
|
|
216
|
-
|
|
217
|
-
describe('edge cases', () => {
|
|
218
|
-
it('handles zero dimensions', () => {
|
|
219
|
-
const props = { ...defaultProps, width: 0, height: 0 };
|
|
220
|
-
const { container } = render(<Bg {...props} />);
|
|
221
|
-
const rect = container.querySelector('rect');
|
|
222
|
-
|
|
223
|
-
expect(rect).toBeTruthy();
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
it('handles large dimensions', () => {
|
|
227
|
-
const props = { ...defaultProps, width: 10000, height: 10000 };
|
|
228
|
-
const { container } = render(<Bg {...props} />);
|
|
229
|
-
const rect = container.querySelector('rect');
|
|
230
|
-
|
|
231
|
-
expect(rect).toBeTruthy();
|
|
232
|
-
expect(rect.getAttribute('width')).toBe('10020');
|
|
233
|
-
expect(rect.getAttribute('height')).toBe('10020');
|
|
234
|
-
});
|
|
235
|
-
|
|
236
|
-
it('handles negative coordinates in domain/range', () => {
|
|
237
|
-
const props = {
|
|
238
|
-
...defaultProps,
|
|
239
|
-
graphProps: {
|
|
240
|
-
...defaultProps.graphProps,
|
|
241
|
-
domain: { min: -100, max: -10, step: 1, label: 'x', axisLabel: 'X' },
|
|
242
|
-
range: { min: -100, max: -10, step: 1, label: 'y', axisLabel: 'Y' },
|
|
243
|
-
},
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
const { container } = render(<Bg {...props} />);
|
|
247
|
-
expect(container.querySelector('rect')).toBeTruthy();
|
|
248
|
-
});
|
|
249
|
-
});
|
|
250
|
-
});
|
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@pie-lib/test-utils';
|
|
3
|
-
import { CoordinatesLabel, getLabelPosition } from '../coordinates-label';
|
|
4
|
-
|
|
5
|
-
describe('CoordinatesLabel', () => {
|
|
6
|
-
let defaultProps;
|
|
7
|
-
let graphProps;
|
|
8
|
-
|
|
9
|
-
beforeEach(() => {
|
|
10
|
-
graphProps = {
|
|
11
|
-
domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
|
|
12
|
-
range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
|
|
13
|
-
scale: {
|
|
14
|
-
x: jest.fn((val) => (val + 10) * 20),
|
|
15
|
-
y: jest.fn((val) => (10 - val) * 20),
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
defaultProps = {
|
|
20
|
-
x: 5,
|
|
21
|
-
y: 5,
|
|
22
|
-
graphProps,
|
|
23
|
-
};
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
describe('rendering', () => {
|
|
27
|
-
it('renders without crashing', () => {
|
|
28
|
-
const { container } = render(<CoordinatesLabel {...defaultProps} />);
|
|
29
|
-
expect(container).toBeTruthy();
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('displays formatted coordinates', () => {
|
|
33
|
-
const { container } = render(<CoordinatesLabel {...defaultProps} />);
|
|
34
|
-
const input = container.querySelector('input');
|
|
35
|
-
|
|
36
|
-
expect(input.value).toBe('(5, 5)');
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it('rounds coordinates to 4 decimal places', () => {
|
|
40
|
-
const props = { ...defaultProps, x: 1.123456, y: 2.987654 };
|
|
41
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
42
|
-
const input = container.querySelector('input');
|
|
43
|
-
|
|
44
|
-
expect(input.value).toBe('(1.1235, 2.9877)');
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it('handles integer coordinates', () => {
|
|
48
|
-
const props = { ...defaultProps, x: 0, y: 0 };
|
|
49
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
50
|
-
const input = container.querySelector('input');
|
|
51
|
-
|
|
52
|
-
expect(input.value).toBe('(0, 0)');
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('handles negative coordinates', () => {
|
|
56
|
-
const props = { ...defaultProps, x: -3, y: -7 };
|
|
57
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
58
|
-
const input = container.querySelector('input');
|
|
59
|
-
|
|
60
|
-
expect(input.value).toBe('(-3, -7)');
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
it('renders as an input element', () => {
|
|
64
|
-
const { container } = render(<CoordinatesLabel {...defaultProps} />);
|
|
65
|
-
const input = container.querySelector('input');
|
|
66
|
-
|
|
67
|
-
expect(input).toBeTruthy();
|
|
68
|
-
expect(input.tagName).toBe('INPUT');
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it('applies correct styles', () => {
|
|
72
|
-
const { container } = render(<CoordinatesLabel {...defaultProps} />);
|
|
73
|
-
const wrapper = container.firstChild;
|
|
74
|
-
|
|
75
|
-
expect(wrapper).toHaveStyle({ position: 'absolute' });
|
|
76
|
-
expect(wrapper).toHaveStyle({ pointerEvents: 'auto' });
|
|
77
|
-
});
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
describe('getLabelPosition', () => {
|
|
81
|
-
it('positions label to the right by default', () => {
|
|
82
|
-
const position = getLabelPosition(graphProps, 0, 0, 60);
|
|
83
|
-
|
|
84
|
-
expect(position.left).toBeGreaterThan(graphProps.scale.x(0));
|
|
85
|
-
expect(position.top).toBeDefined();
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
it('positions label to the left when near right edge', () => {
|
|
89
|
-
const x = 9; // Near max
|
|
90
|
-
const labelLength = 100;
|
|
91
|
-
const position = getLabelPosition(graphProps, x, 0, labelLength);
|
|
92
|
-
|
|
93
|
-
expect(position.left).toBeLessThan(graphProps.scale.x(x));
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
it('adjusts top position for minimum y value', () => {
|
|
97
|
-
const position = getLabelPosition(graphProps, 0, -10, 60);
|
|
98
|
-
|
|
99
|
-
expect(position.top).toBe(graphProps.scale.y(-10) - 16);
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
it('adjusts top position for maximum y value', () => {
|
|
103
|
-
const position = getLabelPosition(graphProps, 0, 10, 60);
|
|
104
|
-
|
|
105
|
-
expect(position.top).toBe(graphProps.scale.y(10) - 0);
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
it('centers label vertically for middle values', () => {
|
|
109
|
-
const position = getLabelPosition(graphProps, 0, 0, 60);
|
|
110
|
-
|
|
111
|
-
expect(position.top).toBe(graphProps.scale.y(0) - 8);
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
it('applies left shift consistently', () => {
|
|
115
|
-
const leftShift = 10;
|
|
116
|
-
const labelLength = 60;
|
|
117
|
-
|
|
118
|
-
const rightPos = getLabelPosition(graphProps, 0, 0, labelLength);
|
|
119
|
-
expect(rightPos.left).toBe(graphProps.scale.x(0) + leftShift);
|
|
120
|
-
|
|
121
|
-
const leftPos = getLabelPosition(graphProps, 9, 0, labelLength);
|
|
122
|
-
expect(leftPos.left).toBe(graphProps.scale.x(9) - leftShift - labelLength);
|
|
123
|
-
});
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
describe('label width calculation', () => {
|
|
127
|
-
it('calculates width based on label length', () => {
|
|
128
|
-
const props = { ...defaultProps, x: 1, y: 2 };
|
|
129
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
130
|
-
const wrapper = container.firstChild;
|
|
131
|
-
|
|
132
|
-
const expectedWidth = 6 * 6;
|
|
133
|
-
expect(wrapper).toHaveStyle({ width: `${expectedWidth}px` });
|
|
134
|
-
});
|
|
135
|
-
|
|
136
|
-
it('adjusts width for longer coordinates', () => {
|
|
137
|
-
const props = { ...defaultProps, x: -10.123, y: 10.456 };
|
|
138
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
139
|
-
const wrapper = container.firstChild;
|
|
140
|
-
|
|
141
|
-
const style = window.getComputedStyle(wrapper);
|
|
142
|
-
expect(parseInt(style.width)).toBeGreaterThan(42);
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
describe('edge cases', () => {
|
|
147
|
-
it('handles very small coordinates', () => {
|
|
148
|
-
const props = { ...defaultProps, x: 0.0001, y: 0.0002 };
|
|
149
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
150
|
-
const input = container.querySelector('input');
|
|
151
|
-
|
|
152
|
-
expect(input.value).toContain('(');
|
|
153
|
-
expect(input.value).toContain(')');
|
|
154
|
-
expect(input.value).toContain(',');
|
|
155
|
-
});
|
|
156
|
-
|
|
157
|
-
it('handles very large coordinates', () => {
|
|
158
|
-
const props = { ...defaultProps, x: 999999, y: 888888 };
|
|
159
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
160
|
-
const input = container.querySelector('input');
|
|
161
|
-
|
|
162
|
-
expect(input.value).toBe('(999999, 888888)');
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
it('handles zero coordinates', () => {
|
|
166
|
-
const props = { ...defaultProps, x: 0, y: 0 };
|
|
167
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
168
|
-
const input = container.querySelector('input');
|
|
169
|
-
|
|
170
|
-
expect(input.value).toBe('(0, 0)');
|
|
171
|
-
});
|
|
172
|
-
|
|
173
|
-
it('handles coordinates at domain/range boundaries', () => {
|
|
174
|
-
const props = { ...defaultProps, x: 10, y: 10 };
|
|
175
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
176
|
-
const input = container.querySelector('input');
|
|
177
|
-
|
|
178
|
-
expect(input.value).toBe('(10, 10)');
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
it('handles negative boundaries', () => {
|
|
182
|
-
const props = { ...defaultProps, x: -10, y: -10 };
|
|
183
|
-
const { container } = render(<CoordinatesLabel {...props} />);
|
|
184
|
-
const input = container.querySelector('input');
|
|
185
|
-
|
|
186
|
-
expect(input.value).toBe('(-10, -10)');
|
|
187
|
-
});
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
describe('prop types and validation', () => {
|
|
191
|
-
it('accepts required props', () => {
|
|
192
|
-
expect(() => {
|
|
193
|
-
render(<CoordinatesLabel {...defaultProps} />);
|
|
194
|
-
}).not.toThrow();
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
it('renders with missing optional props', () => {
|
|
198
|
-
const props = {
|
|
199
|
-
x: 1,
|
|
200
|
-
y: 2,
|
|
201
|
-
graphProps,
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
expect(() => {
|
|
205
|
-
render(<CoordinatesLabel {...props} />);
|
|
206
|
-
}).not.toThrow();
|
|
207
|
-
});
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
describe('updates', () => {
|
|
211
|
-
it('updates when x coordinate changes', () => {
|
|
212
|
-
const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
|
|
213
|
-
let input = container.querySelector('input');
|
|
214
|
-
expect(input.value).toBe('(5, 5)');
|
|
215
|
-
|
|
216
|
-
rerender(<CoordinatesLabel {...defaultProps} x={7} />);
|
|
217
|
-
input = container.querySelector('input');
|
|
218
|
-
expect(input.value).toBe('(7, 5)');
|
|
219
|
-
});
|
|
220
|
-
|
|
221
|
-
it('updates when y coordinate changes', () => {
|
|
222
|
-
const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
|
|
223
|
-
let input = container.querySelector('input');
|
|
224
|
-
expect(input.value).toBe('(5, 5)');
|
|
225
|
-
|
|
226
|
-
rerender(<CoordinatesLabel {...defaultProps} y={3} />);
|
|
227
|
-
input = container.querySelector('input');
|
|
228
|
-
expect(input.value).toBe('(5, 3)');
|
|
229
|
-
});
|
|
230
|
-
|
|
231
|
-
it('updates position when coordinates change', () => {
|
|
232
|
-
const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
|
|
233
|
-
const initialStyle = window.getComputedStyle(container.firstChild);
|
|
234
|
-
const initialLeft = initialStyle.left;
|
|
235
|
-
|
|
236
|
-
rerender(<CoordinatesLabel {...defaultProps} x={8} />);
|
|
237
|
-
const newStyle = window.getComputedStyle(container.firstChild);
|
|
238
|
-
const newLeft = newStyle.left;
|
|
239
|
-
|
|
240
|
-
expect(newLeft).not.toBe(initialLeft);
|
|
241
|
-
});
|
|
242
|
-
});
|
|
243
|
-
});
|