forked from spotify/reactochart
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add YTicks spec * XGrid spec * Add XGrid spec static test * YGrid spec * XYPlot spec * Separate test dom and lint * Lint browser tests * AreaChart spec * LineChart spec
- Loading branch information
Kris Salvador
authored
Jun 12, 2018
1 parent
8565c13
commit b5c9a6d
Showing
15 changed files
with
641 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,14 @@ | ||
| require('./spec/XAxis.spec'); | ||
| // require('./spec/examples.spec'); | ||
| require("./spec/XAxis.spec"); | ||
|
|
||
| // some tests must be run in a browser environment | ||
| // also it can be easier to debug tests in browser thanks to chrome debugger | ||
| // place browser tests in tests/browser/spec and run `npm run test-browser` | ||
|
|
||
| // run mocha | ||
| (function() { | ||
| if (window.mochaPhantomJS) { | ||
| mochaPhantomJS.run(); | ||
| } else { | ||
| mocha.run(); | ||
| } | ||
| if (window.mochaPhantomJS) { | ||
| mochaPhantomJS.run(); | ||
| } else { | ||
| mocha.run(); | ||
| } | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,57 @@ | ||
| var path = require('path'); | ||
| var webpack = require('webpack'); | ||
| var _ = require('lodash'); | ||
| var HtmlPlugin = require('html-webpack-plugin'); | ||
| var CleanPlugin = require('clean-webpack-plugin'); | ||
| var path = require("path"); | ||
| var webpack = require("webpack"); | ||
| var _ = require("lodash"); | ||
| var HtmlPlugin = require("html-webpack-plugin"); | ||
| var CleanPlugin = require("clean-webpack-plugin"); | ||
|
|
||
| console.log('dirname', __dirname); | ||
| console.log("dirname", __dirname); | ||
| module.exports = { | ||
| context: __dirname, | ||
| entry: [ | ||
| path.join(__dirname, 'index.js') | ||
| ], | ||
| entry: [path.join(__dirname, "index.js")], | ||
| output: { | ||
| path: path.join(__dirname, 'build'), | ||
| filename: 'bundle.[hash].js', | ||
| path: path.join(__dirname, "build"), | ||
| filename: "bundle.[hash].js" | ||
| }, | ||
| devtool: 'source-map', | ||
| devtool: "source-map", | ||
| plugins: [ | ||
| new webpack.NoEmitOnErrorsPlugin(), | ||
| new HtmlPlugin({ | ||
| title: "Reactochart Tests", | ||
| template: path.join(__dirname, 'index_html.ejs'), | ||
| template: path.join(__dirname, "index_html.ejs") | ||
| }), | ||
| new CleanPlugin([path.join(__dirname, 'build')]) | ||
| new CleanPlugin([path.join(__dirname, "build")]) | ||
| ], | ||
| resolve: { | ||
| extensions: ['.js', '.jsx'], | ||
| extensions: [".js", ".jsx"], | ||
| modules: ["node_modules", path.resolve(__dirname, "../..")] | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.jsx?$/, | ||
| exclude: /node_modules/, | ||
| use: [{loader: 'babel-loader'}] | ||
| use: [{ loader: "babel-loader" }] | ||
| }, | ||
| { | ||
| test: /\.less?$/, | ||
| use: [ | ||
| {loader: 'style-loader'}, | ||
| {loader: 'css-loader'}, | ||
| {loader: 'less-loader'} | ||
| { loader: "style-loader" }, | ||
| { loader: "css-loader" }, | ||
| { loader: "less-loader" } | ||
| ] | ||
| }, | ||
| { | ||
| test: /\.json$/, | ||
| use: [{loader: 'json-loader'}] | ||
| use: [{ loader: "json-loader" }] | ||
| } | ||
| ] | ||
| }, | ||
| // https://github.com/airbnb/enzyme/issues/503 | ||
| externals: { | ||
| 'jsdom': 'window', | ||
| 'cheerio': 'window', | ||
| 'react/lib/ExecutionEnvironment': true, | ||
| 'react/addons': true, | ||
| 'react/lib/ReactContext': 'window' | ||
| }, | ||
| jsdom: "window", | ||
| cheerio: "window", | ||
| "react/lib/ExecutionEnvironment": true, | ||
| "react/addons": true, | ||
| "react/lib/ReactContext": "window" | ||
| } | ||
| }; | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import React from "react"; | ||
| import * as d3 from "d3"; | ||
| import { expect } from "chai"; | ||
| import { mount } from "enzyme"; | ||
| import _ from "lodash"; | ||
| import { AreaChart } from "../../../src/index.js"; | ||
|
|
||
| import { combineDatasets } from "../../../src/utils/Data.js"; | ||
|
|
||
| function randomWalk(length = 100, start = 0, variance = 10) { | ||
| return _.reduce( | ||
| _.range(length - 1), | ||
| (sequence, i) => { | ||
| return sequence.concat(_.last(sequence) + _.random(-variance, variance)); | ||
| }, | ||
| [start] | ||
| ); | ||
| } | ||
|
|
||
| function randomWalkTimeSeries( | ||
| length = 100, | ||
| start = 0, | ||
| variance = 10, | ||
| startDate = new Date(2015, 0, 1) | ||
| ) { | ||
| let date = startDate; | ||
| return randomWalk(length, start, variance).map((n, i) => { | ||
| date = new Date(date.getTime() + 24 * 60 * 60 * 1000); | ||
| return [date, n]; | ||
| }); | ||
| } | ||
|
|
||
| describe("AreaChart", () => { | ||
| const areaChartProps = { | ||
| data: _.range(41), | ||
| x: d => d, | ||
| y: d => Math.sin(d / 10) * 10, | ||
| yEnd: d => Math.cos((d + 1) / 10) * 10, | ||
| pathClassName: "my-path", | ||
| xScale: d3.scaleLinear().domain([0, 41]), | ||
| yScale: d3.scaleLinear().domain([0, 10]), | ||
| pathStyle: { fill: "red" } | ||
| }; | ||
|
|
||
| const data1 = randomWalkTimeSeries(115).map(([x, y]) => ({ x, y })); | ||
| const data2 = randomWalkTimeSeries(115).map(([x, y]) => ({ x, y })); | ||
|
|
||
| // we have two datasets, but AreaChart takes one combined dataset | ||
| // so combine the two datasets into one using the combineDatasets utility function | ||
| // (from 'reactochart/utils/Data') | ||
| const combined = combineDatasets( | ||
| [ | ||
| { data: data1, combineKey: "x", dataKeys: { y: "y0" } }, | ||
| { data: data2, combineKey: "x", dataKeys: { y: "y1" } } | ||
| ], | ||
| "x" | ||
| ); | ||
|
|
||
| const differenceAreaChartProps = { | ||
| data: combined, | ||
| isDifference: true, | ||
| pathStylePositive: { fill: "blue" }, | ||
| pathStyleNegative: { fill: "green" }, | ||
| x: d => d.x, | ||
| y: d => d.y0, | ||
| yEnd: d => d.y1 | ||
| }; | ||
|
|
||
| it("passes props correctly to path", () => { | ||
| let chart = mount(<AreaChart {...areaChartProps} />); | ||
| let path = chart.find("path"); | ||
|
|
||
| expect(path.props().className).to.contain("my-path"); | ||
| expect(path.props().style).to.equal(areaChartProps.pathStyle); | ||
|
|
||
| chart = mount( | ||
| <AreaChart {...areaChartProps} {...differenceAreaChartProps} /> | ||
| ); | ||
| path = chart.find("path"); | ||
|
|
||
| path.forEach((p, index) => { | ||
| if (index < 2) { | ||
| expect(p.props().className).to.not.contain( | ||
| areaChartProps.pathClassName | ||
| ); | ||
| } else if (index == 3) { | ||
| expect(p.props().style.fill).to.equal( | ||
| differenceAreaChartProps.pathStyleNegative.fill | ||
| ); | ||
| expect(p.props().className).to.contain(areaChartProps.pathClassName); | ||
| } else { | ||
| expect(p.props().style.fill).to.equal( | ||
| differenceAreaChartProps.pathStylePositive.fill | ||
| ); | ||
| expect(p.props().className).to.contain(areaChartProps.pathClassName); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| it("renders the expected group and the expected number of paths", () => { | ||
| let chart = mount(<AreaChart {...areaChartProps} />); | ||
| let path = chart.find("path"); | ||
| let group = chart.find("g"); | ||
|
|
||
| expect(group.length).to.equal(1); | ||
| expect(group.props().className).to.equal("rct-area-chart"); | ||
| expect(path.length).to.equal(1); | ||
|
|
||
| chart = mount( | ||
| <AreaChart {...areaChartProps} {...differenceAreaChartProps} /> | ||
| ); | ||
| path = chart.find("path"); | ||
| group = chart.find("g"); | ||
|
|
||
| expect(group.length).to.equal(1); | ||
| expect(group.props().className).to.equal("rct-area-chart--difference"); | ||
| expect(path.length).to.equal(4); | ||
| }); | ||
|
|
||
| it("getDomain returns correctly", () => { | ||
| const domainProps = { | ||
| data: _.range(10), | ||
| x: () => x, | ||
| y: () => 0, | ||
| yEnd: d => d + 2 | ||
| }; | ||
| const domain = { yDomain: [0, 11] }; | ||
|
|
||
| expect(AreaChart.getDomain(domainProps)).to.eql(domain); | ||
| }); | ||
| }); |
Oops, something went wrong.