mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Add integration test(s) for Web (#10563)
Adds a basic react integration test
This commit is contained in:
parent
3123a133fe
commit
1551537a40
@ -1 +1,2 @@
|
|||||||
dist/*
|
dist/*
|
||||||
|
test/integration/react-browser/*
|
||||||
|
@ -7,6 +7,11 @@ const childProcess = require('child_process');
|
|||||||
|
|
||||||
const {describe, it} = require('mocha');
|
const {describe, it} = require('mocha');
|
||||||
|
|
||||||
|
const platforms = [
|
||||||
|
'node',
|
||||||
|
'react-browser'
|
||||||
|
];
|
||||||
|
|
||||||
function exec(command, options = {}) {
|
function exec(command, options = {}) {
|
||||||
const output = childProcess.execSync(command, {
|
const output = childProcess.execSync(command, {
|
||||||
encoding: 'utf-8',
|
encoding: 'utf-8',
|
||||||
@ -27,7 +32,7 @@ describe('Integration Tests', () => {
|
|||||||
path.join(tmpDir, 'package.tgz'),
|
path.join(tmpDir, 'package.tgz'),
|
||||||
);
|
);
|
||||||
|
|
||||||
function testOnNodeProject(projectName) {
|
function testProjectOnPlatform(projectName) {
|
||||||
const projectPath = path.join(__dirname, projectName);
|
const projectPath = path.join(__dirname, projectName);
|
||||||
|
|
||||||
const packageJSONPath = path.join(projectPath, 'package.json');
|
const packageJSONPath = path.join(projectPath, 'package.json');
|
||||||
@ -42,5 +47,7 @@ describe('Integration Tests', () => {
|
|||||||
}).timeout(5 * 60 * 1000);
|
}).timeout(5 * 60 * 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
testOnNodeProject('node');
|
for (const platform of platforms) {
|
||||||
|
testProjectOnPlatform(platform)
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
26
test/integration/react-browser/package.json
Normal file
26
test/integration/react-browser/package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"description": "chart.js should work in react-browser (Web)",
|
||||||
|
"dependencies": {
|
||||||
|
"chart.js": "file:../package.tgz",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "react-scripts build"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
36
test/integration/react-browser/public/index.html
Normal file
36
test/integration/react-browser/public/index.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>Chartjs test React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
30
test/integration/react-browser/src/App.js
vendored
Normal file
30
test/integration/react-browser/src/App.js
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import {Chart, DoughnutController, ArcElement} from 'chart.js';
|
||||||
|
import {merge} from 'chart.js/helpers';
|
||||||
|
|
||||||
|
Chart.register(DoughnutController, ArcElement);
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
useEffect(() => {
|
||||||
|
const c = Chart.getChart('myChart');
|
||||||
|
if(c) c.destroy();
|
||||||
|
|
||||||
|
new Chart('myChart', {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
labels: ['Chart', 'JS'],
|
||||||
|
datasets: [{
|
||||||
|
data: [2, 3]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<canvas id="myChart"></canvas>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
10
test/integration/react-browser/src/index.js
vendored
Normal file
10
test/integration/react-browser/src/index.js
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
Loading…
Reference in New Issue
Block a user