From 5d38871e2569ee11232f89065640c4fdbf963cfa Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Fri, 30 Sep 2022 15:19:49 +1000 Subject: [PATCH] Add component testing and remove vega warnings --- packages/components/jest.config.js | 5 +-- packages/components/package.json | 3 +- .../src/components/DistributionChart.tsx | 20 ++++++----- .../SquiggleViewer/ExpressionViewer.tsx | 4 ++- .../src/lib/distributionSpecBuilder.ts | 33 +++++++++++-------- packages/components/test/basic.test.tsx | 22 ++++++------- 6 files changed, 50 insertions(+), 37 deletions(-) diff --git a/packages/components/jest.config.js b/packages/components/jest.config.js index b9148150..223b20e6 100644 --- a/packages/components/jest.config.js +++ b/packages/components/jest.config.js @@ -1,5 +1,6 @@ /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { - preset: 'ts-jest', - testEnvironment: 'jsdom', + preset: "ts-jest", + setupFilesAfterEnv: ["/test/setup.js"], + testEnvironment: "jsdom", }; diff --git a/packages/components/package.json b/packages/components/package.json index c4dd40b3..f6013baf 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -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": [ diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index 8eedde1c..f89ee47e 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -83,22 +83,26 @@ export const DistributionChart: React.FC = (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 (
diff --git a/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx b/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx index c2677789..cb40c509 100644 --- a/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx +++ b/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx @@ -298,7 +298,9 @@ export const ExpressionViewer: React.FC = ({ value, width }) => { {() => (
No display for type: {" "} - {(value as {tag: string}).tag} + + {(value as { tag: string }).tag} +
)} diff --git a/packages/components/src/lib/distributionSpecBuilder.ts b/packages/components/src/lib/distributionSpecBuilder.ts index d48078d3..a97248b7 100644 --- a/packages/components/src/lib/distributionSpecBuilder.ts +++ b/packages/components/src/lib/distributionSpecBuilder.ts @@ -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", diff --git a/packages/components/test/basic.test.tsx b/packages/components/test/basic.test.tsx index 3e25e715..9eb4973a 100644 --- a/packages/components/test/basic.test.tsx +++ b/packages/components/test/basic.test.tsx @@ -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(); + unmount(); - const { unmount } = render() - unmount() - - expect(console.warn).not.toBeCalled() - expect(console.error).not.toBeCalled() -}) + expect(console.warn).not.toBeCalled(); + expect(console.error).not.toBeCalled(); +});