Add component testing and remove vega warnings
This commit is contained in:
parent
33c16bd072
commit
5d38871e25
|
@ -1,5 +1,6 @@
|
|||
/** @type {import('ts-jest').JestConfigWithTsJest} */
|
||||
module.exports = {
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'jsdom',
|
||||
preset: "ts-jest",
|
||||
setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
|
||||
testEnvironment: "jsdom",
|
||||
};
|
||||
|
|
|
@ -81,7 +81,8 @@
|
|||
"lint": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"prepack": "yarn run build:cjs && yarn run bundle",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
|
|
@ -83,22 +83,26 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
|
|||
}
|
||||
}
|
||||
|
||||
const spec = buildVegaSpec(props);
|
||||
const domain = shapes.value.flatMap((shape) =>
|
||||
shape.discrete.concat(shape.continuous)
|
||||
);
|
||||
|
||||
let widthProp = width ? width : (isFinite(size.width) ? size.width : 400);
|
||||
const spec = buildVegaSpec({
|
||||
...props,
|
||||
minX: props.minX ?? Math.min(...domain.map((x) => x.x)),
|
||||
maxX: props.minX ?? Math.max(...domain.map((x) => x.x)),
|
||||
maxY: Math.max(...domain.map((x) => x.y)),
|
||||
});
|
||||
|
||||
let widthProp = width ? width : isFinite(size.width) ? size.width : 400;
|
||||
if (widthProp < 20) {
|
||||
console.warn(
|
||||
`Width of Distribution is set to ${widthProp}, which is too small`
|
||||
);
|
||||
widthProp = 20;
|
||||
}
|
||||
const domain = shapes.value.flatMap((shape) =>
|
||||
shape.discrete.concat(shape.continuous)
|
||||
);
|
||||
|
||||
const vegaData = {data: shapes.value, domain, samples}
|
||||
|
||||
console.log(vegaData)
|
||||
const vegaData = { data: shapes.value, samples };
|
||||
|
||||
return (
|
||||
<div style={{ width: widthProp }}>
|
||||
|
|
|
@ -298,7 +298,9 @@ export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
|
|||
{() => (
|
||||
<div>
|
||||
<span>No display for type: </span>{" "}
|
||||
<span className="font-semibold text-slate-600">{(value as {tag: string}).tag}</span>
|
||||
<span className="font-semibold text-slate-600">
|
||||
{(value as { tag: string }).tag}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</VariableList>
|
||||
|
|
|
@ -26,7 +26,6 @@ export const linearXScale: LinearScale = {
|
|||
range: "width",
|
||||
zero: false,
|
||||
nice: false,
|
||||
domain: { data: "domain", field: "x" },
|
||||
};
|
||||
|
||||
export const logXScale: LogScale = {
|
||||
|
@ -37,7 +36,6 @@ export const logXScale: LogScale = {
|
|||
base: 10,
|
||||
nice: false,
|
||||
clamp: true,
|
||||
domain: { data: "domain", field: "x" },
|
||||
};
|
||||
|
||||
export const timeXScale: TimeScale = {
|
||||
|
@ -46,7 +44,6 @@ export const timeXScale: TimeScale = {
|
|||
type: "time",
|
||||
range: "width",
|
||||
nice: false,
|
||||
domain: { data: "domain", field: "x" },
|
||||
};
|
||||
|
||||
/** Y Scales */
|
||||
|
@ -55,7 +52,6 @@ export const linearYScale: LinearScale = {
|
|||
type: "linear",
|
||||
range: "height",
|
||||
zero: true,
|
||||
domain: { data: "domain", field: "y" },
|
||||
};
|
||||
|
||||
export const expYScale: PowScale = {
|
||||
|
@ -65,7 +61,6 @@ export const expYScale: PowScale = {
|
|||
range: "height",
|
||||
zero: true,
|
||||
nice: false,
|
||||
domain: { data: "domain", field: "y" },
|
||||
};
|
||||
|
||||
export const defaultTickFormat = ".9~s";
|
||||
|
@ -73,9 +68,17 @@ export const timeTickFormat = "%b %d, %Y %H:%M";
|
|||
const width = 500;
|
||||
|
||||
export function buildVegaSpec(
|
||||
specOptions: DistributionChartSpecOptions
|
||||
specOptions: DistributionChartSpecOptions & { maxY: number }
|
||||
): VisualizationSpec {
|
||||
const { title, minX, maxX, logX, expY, xAxisType = "number" } = specOptions;
|
||||
const {
|
||||
title,
|
||||
minX,
|
||||
maxX,
|
||||
logX,
|
||||
expY,
|
||||
xAxisType = "number",
|
||||
maxY,
|
||||
} = specOptions;
|
||||
|
||||
const dateTime = xAxisType === "dateTime";
|
||||
|
||||
|
@ -88,13 +91,15 @@ export function buildVegaSpec(
|
|||
|
||||
let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale;
|
||||
|
||||
if (minX !== undefined && Number.isFinite(minX)) {
|
||||
xScale = { ...xScale, domainMin: minX };
|
||||
}
|
||||
xScale = {
|
||||
...xScale,
|
||||
domain: [minX ?? 0, maxX ?? 1],
|
||||
domainMin: minX,
|
||||
domainMax: maxX,
|
||||
};
|
||||
|
||||
if (maxX !== undefined && Number.isFinite(maxX)) {
|
||||
xScale = { ...xScale, domainMax: maxX };
|
||||
}
|
||||
let yScale = expY ? expYScale : linearYScale;
|
||||
yScale = { ...yScale, domain: [0, maxY ?? 1], domainMin: 0, domainMax: maxY };
|
||||
|
||||
const spec: VisualizationSpec = {
|
||||
$schema: "https://vega.github.io/schema/vega/v5.json",
|
||||
|
@ -128,7 +133,7 @@ export function buildVegaSpec(
|
|||
],
|
||||
scales: [
|
||||
xScale,
|
||||
expY ? expYScale : linearYScale,
|
||||
yScale,
|
||||
{
|
||||
name: "color",
|
||||
type: "ordinal",
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {render} from '@testing-library/react'
|
||||
import React from 'react'
|
||||
import '@testing-library/jest-dom'
|
||||
import { SquiggleChart } from '../src/index'
|
||||
import { render } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { SquiggleChart } from "../src/index";
|
||||
|
||||
test('Logs no warnings or errors', async () => {
|
||||
test("Logs no warnings or errors", async () => {
|
||||
debugger;
|
||||
const { unmount } = render(<SquiggleChart code={"normal(0, 1)"} />);
|
||||
unmount();
|
||||
|
||||
const { unmount } = render(<SquiggleChart code={"normal(0, 1)"} />)
|
||||
unmount()
|
||||
|
||||
expect(console.warn).not.toBeCalled()
|
||||
expect(console.error).not.toBeCalled()
|
||||
})
|
||||
expect(console.warn).not.toBeCalled();
|
||||
expect(console.error).not.toBeCalled();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Block a user