@oanda/labs-widget-common 1.0.197 → 1.0.199
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 +1564 -0
- package/dist/main/chart/BaseChart.js +35 -0
- package/dist/main/chart/BaseChart.js.map +1 -0
- package/dist/main/chart/index.js +22 -0
- package/dist/main/chart/index.js.map +1 -1
- package/dist/main/chart/types.js +6 -0
- package/dist/main/chart/types.js.map +1 -0
- package/dist/module/chart/BaseChart.js +26 -0
- package/dist/module/chart/BaseChart.js.map +1 -0
- package/dist/module/chart/index.js +2 -0
- package/dist/module/chart/index.js.map +1 -1
- package/dist/module/chart/types.js +2 -0
- package/dist/module/chart/types.js.map +1 -0
- package/dist/types/chart/BaseChart.d.ts +7 -0
- package/dist/types/chart/index.d.ts +2 -0
- package/dist/types/chart/types.d.ts +2 -0
- package/package.json +2 -2
- package/src/chart/BaseChart.tsx +37 -0
- package/src/chart/index.ts +2 -0
- package/src/chart/types.ts +3 -0
- package/test/chart/BaseChart.test.tsx +121 -0
- package/test/setup.ts +16 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BaseChart = void 0;
|
|
7
|
+
var _core = _interopRequireDefault(require("echarts-for-react/lib/core"));
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
const BaseChart = exports.BaseChart = (0, _react.forwardRef)((_ref, ref) => {
|
|
14
|
+
let {
|
|
15
|
+
isDark,
|
|
16
|
+
chartHeight,
|
|
17
|
+
...props
|
|
18
|
+
} = _ref;
|
|
19
|
+
const [ready, setReady] = (0, _react.useState)(false);
|
|
20
|
+
(0, _react.useEffect)(() => {
|
|
21
|
+
void document.fonts.ready.then(() => setReady(true));
|
|
22
|
+
}, []);
|
|
23
|
+
return _react.default.createElement(_core.default, _extends({}, props, {
|
|
24
|
+
ref: ref,
|
|
25
|
+
"data-testid": "charts-container",
|
|
26
|
+
showLoading: !ready,
|
|
27
|
+
style: {
|
|
28
|
+
height: `${chartHeight}px`,
|
|
29
|
+
width: '100%'
|
|
30
|
+
},
|
|
31
|
+
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
32
|
+
}));
|
|
33
|
+
});
|
|
34
|
+
BaseChart.displayName = 'BaseChart';
|
|
35
|
+
//# sourceMappingURL=BaseChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseChart.js","names":["_core","_interopRequireDefault","require","_react","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseChart","exports","forwardRef","_ref","ref","isDark","chartHeight","props","ready","setReady","useState","useEffect","document","fonts","then","createElement","showLoading","style","height","width","theme","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n showLoading={!ready}\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":"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","ignoreList":[]}
|
package/dist/main/chart/index.js
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
var _BaseChart = require("./BaseChart");
|
|
7
|
+
Object.keys(_BaseChart).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _BaseChart[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _BaseChart[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
6
17
|
var _getGridLines = require("./getGridLines");
|
|
7
18
|
Object.keys(_getGridLines).forEach(function (key) {
|
|
8
19
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -47,4 +58,15 @@ Object.keys(_sharedOptions).forEach(function (key) {
|
|
|
47
58
|
}
|
|
48
59
|
});
|
|
49
60
|
});
|
|
61
|
+
var _types = require("./types");
|
|
62
|
+
Object.keys(_types).forEach(function (key) {
|
|
63
|
+
if (key === "default" || key === "__esModule") return;
|
|
64
|
+
if (key in exports && exports[key] === _types[key]) return;
|
|
65
|
+
Object.defineProperty(exports, key, {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function () {
|
|
68
|
+
return _types[key];
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
});
|
|
50
72
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_BaseChart","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_getGridLines","_getTheme","_getZoomControls","_sharedOptions","_types"],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './BaseChart';\nexport * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\nexport * from './types';\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,aAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,aAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,aAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,aAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,SAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,SAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,SAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,SAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,gBAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,gBAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,gBAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,gBAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,cAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,cAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,cAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,cAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,MAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,MAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,MAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,MAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/chart/types.ts"],"sourcesContent":["import type ReactEChartsCore from 'echarts-for-react/lib/core';\n\nexport type BaseChartRef = ReactEChartsCore;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
3
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
|
4
|
+
export const BaseChart = forwardRef((_ref, ref) => {
|
|
5
|
+
let {
|
|
6
|
+
isDark,
|
|
7
|
+
chartHeight,
|
|
8
|
+
...props
|
|
9
|
+
} = _ref;
|
|
10
|
+
const [ready, setReady] = useState(false);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
void document.fonts.ready.then(() => setReady(true));
|
|
13
|
+
}, []);
|
|
14
|
+
return React.createElement(ReactEChartsCore, _extends({}, props, {
|
|
15
|
+
ref: ref,
|
|
16
|
+
"data-testid": "charts-container",
|
|
17
|
+
showLoading: !ready,
|
|
18
|
+
style: {
|
|
19
|
+
height: `${chartHeight}px`,
|
|
20
|
+
width: '100%'
|
|
21
|
+
},
|
|
22
|
+
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
23
|
+
}));
|
|
24
|
+
});
|
|
25
|
+
BaseChart.displayName = 'BaseChart';
|
|
26
|
+
//# sourceMappingURL=BaseChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseChart.js","names":["ReactEChartsCore","React","forwardRef","useEffect","useState","BaseChart","_ref","ref","isDark","chartHeight","props","ready","setReady","document","fonts","then","createElement","_extends","showLoading","style","height","width","theme","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n showLoading={!ready}\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":";AAAA,OAAOA,gBAAgB,MAAM,4BAA4B;AAEzD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAS9D,OAAO,MAAMC,SAAS,GAAGH,UAAU,CACjC,CAAAI,IAAA,EAAoCC,GAAG,KAAK;EAAA,IAA3C;IAAEC,MAAM;IAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAChC,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAC,KAAK,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACd,KAAKU,QAAQ,CAACC,KAAK,CAACH,KAAK,CAACI,IAAI,CAAC,MAAMH,QAAQ,CAAC,IAAI,CAAC,CAAC;EACtD,CAAC,EAAE,EAAE,CAAC;EAEN,OACEX,KAAA,CAAAe,aAAA,CAAChB,gBAAgB,EAAAiB,QAAA,KAEXP,KAAK;IACTH,GAAG,EAAEA,GAAI;IACT,eAAY,kBAAkB;IAC9BW,WAAW,EAAE,CAACP,KAAM;IACpBQ,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGX,WAAW,IAAI;MAC1BY,KAAK,EAAE;IACT,CAAE;IACFC,KAAK,EAAEd,MAAM,GAAG,YAAY,GAAG;EAAc,EAC9C,CAAC;AAEN,CACF,CAAC;AAEDH,SAAS,CAACkB,WAAW,GAAG,WAAW","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,iBAAiB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './BaseChart';\nexport * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,SAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/chart/types.ts"],"sourcesContent":["import type ReactEChartsCore from 'echarts-for-react/lib/core';\n\nexport type BaseChartRef = ReactEChartsCore;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
2
|
+
import type { EChartsReactProps } from 'echarts-for-react/lib/types';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export declare const BaseChart: React.ForwardRefExoticComponent<EChartsReactProps & {
|
|
5
|
+
isDark: boolean;
|
|
6
|
+
chartHeight: number;
|
|
7
|
+
} & React.RefAttributes<ReactEChartsCore>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-widget-common",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.199",
|
|
4
4
|
"description": "Labs Widget Common",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
"tailwind-merge": "2.2.2",
|
|
22
22
|
"usehooks-ts": "3.0.2"
|
|
23
23
|
},
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "3dfe7ead22512a95865181411932a6db617fca25"
|
|
25
25
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
2
|
+
import type { EChartsReactProps } from 'echarts-for-react/lib/types';
|
|
3
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
import type { BaseChartRef } from './types';
|
|
6
|
+
|
|
7
|
+
type BaseChartProps = EChartsReactProps & {
|
|
8
|
+
isDark: boolean;
|
|
9
|
+
chartHeight: number;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(
|
|
13
|
+
({ isDark, chartHeight, ...props }, ref) => {
|
|
14
|
+
const [ready, setReady] = useState(false);
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
void document.fonts.ready.then(() => setReady(true));
|
|
18
|
+
}, []);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<ReactEChartsCore
|
|
22
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
23
|
+
{...props}
|
|
24
|
+
ref={ref}
|
|
25
|
+
data-testid="charts-container"
|
|
26
|
+
showLoading={!ready}
|
|
27
|
+
style={{
|
|
28
|
+
height: `${chartHeight}px`,
|
|
29
|
+
width: '100%',
|
|
30
|
+
}}
|
|
31
|
+
theme={isDark ? 'dark_theme' : 'light_theme'}
|
|
32
|
+
/>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
BaseChart.displayName = 'BaseChart';
|
package/src/chart/index.ts
CHANGED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/* eslint-disable react/jsx-props-no-spreading */
|
|
2
|
+
import { act, render, screen } from '@testing-library/react';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
import { BaseChart } from '../../src/chart/BaseChart';
|
|
6
|
+
import type { BaseChartRef } from '../../src/chart/types';
|
|
7
|
+
|
|
8
|
+
jest.mock('echarts-for-react/lib/core', () => {
|
|
9
|
+
const ReactMock = require('react');
|
|
10
|
+
const MockEChartsCore = ReactMock.forwardRef(
|
|
11
|
+
(props: any, ref: React.Ref<any>) => (
|
|
12
|
+
<div
|
|
13
|
+
ref={ref as any}
|
|
14
|
+
data-loading={props.showLoading}
|
|
15
|
+
data-testid="charts-container"
|
|
16
|
+
data-theme={props.theme}
|
|
17
|
+
style={props.style}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
MockEChartsCore.displayName = 'MockEChartsCore';
|
|
22
|
+
return MockEChartsCore;
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
describe('BaseChart component', () => {
|
|
26
|
+
const defaultProps = {
|
|
27
|
+
isDark: false,
|
|
28
|
+
chartHeight: 400,
|
|
29
|
+
option: {
|
|
30
|
+
xAxis: {
|
|
31
|
+
type: 'category',
|
|
32
|
+
data: ['Mon', 'Tue', 'Wed'],
|
|
33
|
+
},
|
|
34
|
+
yAxis: {
|
|
35
|
+
type: 'value',
|
|
36
|
+
},
|
|
37
|
+
series: [
|
|
38
|
+
{
|
|
39
|
+
data: [120, 200, 150],
|
|
40
|
+
type: 'line',
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
let resolveFontsReady: (value?: unknown) => void;
|
|
47
|
+
|
|
48
|
+
beforeEach(() => {
|
|
49
|
+
Object.defineProperty(document, 'fonts', {
|
|
50
|
+
value: {
|
|
51
|
+
ready: new Promise((resolve) => {
|
|
52
|
+
resolveFontsReady = resolve;
|
|
53
|
+
}),
|
|
54
|
+
},
|
|
55
|
+
writable: true,
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('should show loading state initially', () => {
|
|
60
|
+
render(<BaseChart {...defaultProps} />);
|
|
61
|
+
const chart = screen.getByTestId('charts-container');
|
|
62
|
+
expect(chart).toHaveAttribute('data-loading', 'true');
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it('should render chart after fonts are ready', async () => {
|
|
66
|
+
render(<BaseChart {...defaultProps} />);
|
|
67
|
+
|
|
68
|
+
const chart = screen.getByTestId('charts-container');
|
|
69
|
+
expect(chart).toHaveAttribute('data-loading', 'true');
|
|
70
|
+
|
|
71
|
+
await act(async () => {
|
|
72
|
+
resolveFontsReady();
|
|
73
|
+
await document.fonts.ready;
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
expect(chart).toHaveAttribute('data-loading', 'false');
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
it('should apply dark theme when isDark is true', async () => {
|
|
80
|
+
render(<BaseChart {...defaultProps} isDark={true} />);
|
|
81
|
+
|
|
82
|
+
await act(async () => {
|
|
83
|
+
resolveFontsReady();
|
|
84
|
+
await document.fonts.ready;
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
const chart = screen.getByTestId('charts-container');
|
|
88
|
+
expect(chart).toHaveAttribute('data-theme', 'dark_theme');
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('should apply light theme when isDark is false', async () => {
|
|
92
|
+
render(<BaseChart {...defaultProps} isDark={false} />);
|
|
93
|
+
|
|
94
|
+
await act(async () => {
|
|
95
|
+
resolveFontsReady();
|
|
96
|
+
await document.fonts.ready;
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
const chart = screen.getByTestId('charts-container');
|
|
100
|
+
expect(chart).toHaveAttribute('data-theme', 'light_theme');
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
it('should set correct chart height', async () => {
|
|
104
|
+
const height = 500;
|
|
105
|
+
render(<BaseChart {...defaultProps} chartHeight={height} />);
|
|
106
|
+
|
|
107
|
+
await act(async () => {
|
|
108
|
+
resolveFontsReady();
|
|
109
|
+
await document.fonts.ready;
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
const chart = screen.getByTestId('charts-container');
|
|
113
|
+
expect(chart).toHaveStyle({ height: `${height}px` });
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
it('should forward ref to BaseChartRef', () => {
|
|
117
|
+
const ref = React.createRef<BaseChartRef>();
|
|
118
|
+
render(<BaseChart {...defaultProps} ref={ref} />);
|
|
119
|
+
expect(ref.current).toBeTruthy();
|
|
120
|
+
});
|
|
121
|
+
});
|
package/test/setup.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// Mock document.fonts.ready
|
|
2
|
+
if (!document.fonts) {
|
|
3
|
+
Object.defineProperty(document, 'fonts', {
|
|
4
|
+
value: {
|
|
5
|
+
ready: Promise.resolve(),
|
|
6
|
+
check: () => true,
|
|
7
|
+
load: () => Promise.resolve([]),
|
|
8
|
+
},
|
|
9
|
+
configurable: true,
|
|
10
|
+
});
|
|
11
|
+
} else if (!('ready' in document.fonts)) {
|
|
12
|
+
Object.defineProperty(document.fonts, 'ready', {
|
|
13
|
+
value: Promise.resolve(),
|
|
14
|
+
configurable: true,
|
|
15
|
+
});
|
|
16
|
+
}
|