Add component testing and remove vega warnings

packages/components/jest.config.js

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

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": [

packages/components/src/components/DistributionChart.tsx

@@ -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 }}>

packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx

@@ -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>

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 = { ...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 = {
     $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",

packages/components/test/basic.test.tsx

@@ -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()
-})