Add component testing and remove vega warnings

This commit is contained in:
Sam Nolan 2022-09-30 15:19:49 +10:00
parent 33c16bd072
commit 5d38871e25
6 changed files with 50 additions and 37 deletions

View File

@ -1,5 +1,6 @@
/** @type {import('ts-jest').JestConfigWithTsJest} */ /** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = { module.exports = {
preset: 'ts-jest', preset: "ts-jest",
testEnvironment: 'jsdom', setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
testEnvironment: "jsdom",
}; };

View File

@ -81,7 +81,8 @@
"lint": "prettier --check .", "lint": "prettier --check .",
"format": "prettier --write .", "format": "prettier --write .",
"prepack": "yarn run build:cjs && yarn run bundle", "prepack": "yarn run build:cjs && yarn run bundle",
"test": "jest" "test": "jest",
"test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

View File

@ -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) { if (widthProp < 20) {
console.warn( console.warn(
`Width of Distribution is set to ${widthProp}, which is too small` `Width of Distribution is set to ${widthProp}, which is too small`
); );
widthProp = 20; 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 ( return (
<div style={{ width: widthProp }}> <div style={{ width: widthProp }}>

View File

@ -298,7 +298,9 @@ export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
{() => ( {() => (
<div> <div>
<span>No display for type: </span>{" "} <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> </div>
)} )}
</VariableList> </VariableList>

View File

@ -26,7 +26,6 @@ export const linearXScale: LinearScale = {
range: "width", range: "width",
zero: false, zero: false,
nice: false, nice: false,
domain: { data: "domain", field: "x" },
}; };
export const logXScale: LogScale = { export const logXScale: LogScale = {
@ -37,7 +36,6 @@ export const logXScale: LogScale = {
base: 10, base: 10,
nice: false, nice: false,
clamp: true, clamp: true,
domain: { data: "domain", field: "x" },
}; };
export const timeXScale: TimeScale = { export const timeXScale: TimeScale = {
@ -46,7 +44,6 @@ export const timeXScale: TimeScale = {
type: "time", type: "time",
range: "width", range: "width",
nice: false, nice: false,
domain: { data: "domain", field: "x" },
}; };
/** Y Scales */ /** Y Scales */
@ -55,7 +52,6 @@ export const linearYScale: LinearScale = {
type: "linear", type: "linear",
range: "height", range: "height",
zero: true, zero: true,
domain: { data: "domain", field: "y" },
}; };
export const expYScale: PowScale = { export const expYScale: PowScale = {
@ -65,7 +61,6 @@ export const expYScale: PowScale = {
range: "height", range: "height",
zero: true, zero: true,
nice: false, nice: false,
domain: { data: "domain", field: "y" },
}; };
export const defaultTickFormat = ".9~s"; export const defaultTickFormat = ".9~s";
@ -73,9 +68,17 @@ export const timeTickFormat = "%b %d, %Y %H:%M";
const width = 500; const width = 500;
export function buildVegaSpec( export function buildVegaSpec(
specOptions: DistributionChartSpecOptions specOptions: DistributionChartSpecOptions & { maxY: number }
): VisualizationSpec { ): VisualizationSpec {
const { title, minX, maxX, logX, expY, xAxisType = "number" } = specOptions; const {
title,
minX,
maxX,
logX,
expY,
xAxisType = "number",
maxY,
} = specOptions;
const dateTime = xAxisType === "dateTime"; const dateTime = xAxisType === "dateTime";
@ -88,13 +91,15 @@ export function buildVegaSpec(
let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale; let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale;
if (minX !== undefined && Number.isFinite(minX)) { xScale = {
xScale = { ...xScale, domainMin: minX }; ...xScale,
} domain: [minX ?? 0, maxX ?? 1],
domainMin: minX,
domainMax: maxX,
};
if (maxX !== undefined && Number.isFinite(maxX)) { let yScale = expY ? expYScale : linearYScale;
xScale = { ...xScale, domainMax: maxX }; yScale = { ...yScale, domain: [0, maxY ?? 1], domainMin: 0, domainMax: maxY };
}
const spec: VisualizationSpec = { const spec: VisualizationSpec = {
$schema: "https://vega.github.io/schema/vega/v5.json", $schema: "https://vega.github.io/schema/vega/v5.json",
@ -128,7 +133,7 @@ export function buildVegaSpec(
], ],
scales: [ scales: [
xScale, xScale,
expY ? expYScale : linearYScale, yScale,
{ {
name: "color", name: "color",
type: "ordinal", type: "ordinal",

View File

@ -1,13 +1,13 @@
import {render} from '@testing-library/react' import { render } from "@testing-library/react";
import React from 'react' import React from "react";
import '@testing-library/jest-dom' import "@testing-library/jest-dom";
import { SquiggleChart } from '../src/index' 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)"} />) expect(console.warn).not.toBeCalled();
unmount() expect(console.error).not.toBeCalled();
});
expect(console.warn).not.toBeCalled()
expect(console.error).not.toBeCalled()
})