tests for coverage (#1825)

* stack rejects an invalid order

* these tests used the default labelAnchor

* test curve tension

* coverage: valid and invalid curves

* move curve tests to a features directory

* test channel scales: false, invalid

* invalid domain sort options

* The aspectRatio option rejects unsupported scale type

* test style

* test polish

* add missing test

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

package.json

@@ -53,6 +53,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@types/d3": "^7.4.0",
+    "@types/mocha": "^10.0.1",
     "@types/node": "^20.5.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
@@ -77,8 +78,13 @@
   },
   "c8": {
     "all": true,
-    "include": ["src/**/*.js"],
-    "reporter": ["text", "lcov"]
+    "include": [
+      "src/**/*.js"
+    ],
+    "reporter": [
+      "text",
+      "lcov"
+    ]
   },
   "dependencies": {
     "d3": "^7.8.0",

test/mark-test.ts

@@ -0,0 +1,17 @@
+import * as Plot from "@observablehq/plot";
+import assert from "assert";
+import it from "./jsdom.js";
+
+it("mark(data, {sort}) needs y1 and y2 when sorting by height", () => {
+  assert.throws(() => Plot.dot([], {sort: {x: "height"}}).plot(), /^Error: missing channel: y1$/);
+  assert.throws(() => Plot.dot([], {channels: {y1: "1"}, sort: {x: "height"}}).plot(), /^Error: missing channel: y2$/);
+});
+
+it("mark(data, {sort}) needs x1 and x2 when sorting by width", () => {
+  assert.throws(() => Plot.dot([], {sort: {y: "width"}}).plot(), /^Error: missing channel: x1$/);
+  assert.throws(() => Plot.dot([], {channels: {x1: "1"}, sort: {y: "width"}}).plot(), /^Error: missing channel: x2$/);
+});
+
+it("mark(data, {sort}) rejects an invalid order", () => {
+  assert.throws(() => Plot.dotY([0, 1], {sort: {y: {value: "x", order: "neo" as any}}}).plot(), /^Error: invalid order: neo$/); // prettier-ignore
+});

test/marks/line-test.js

@@ -1,5 +1,6 @@
 import * as Plot from "@observablehq/plot";
 import {curveStep} from "d3";
+import {curveAuto} from "../../src/curve.js";
 import assert from "assert";
 
 it("line() has the expected defaults", () => {
@@ -114,3 +115,12 @@ it("line(data, {curve}) specifies a named curve or function", () => {
   assert.strictEqual(Plot.line(undefined, {curve: "step"}).curve, curveStep);
   assert.strictEqual(Plot.line(undefined, {curve: curveStep}).curve, curveStep);
 });
+
+it("line(data, {curve}) rejects an invalid curve", () => {
+  assert.throws(() => Plot.lineY([], {y: 1, curve: "neo"}), /^Error: unknown curve: neo$/);
+  assert.throws(() => Plot.lineY([], {y: 1, curve: 42}), /^Error: unknown curve: 42$/);
+});
+
+it("line(data, {curve}) accepts the explicit auto curve", () => {
+  assert.strictEqual(Plot.lineY([], {y: 1, curve: "auto"}).curve, curveAuto);
+});

test/output/curves.svg

@@ -0,0 +1,8 @@
+import * as Plot from "@observablehq/plot";
+import assert from "assert";
+import it from "./jsdom.js";
+
+it("plot({aspectRatio}) rejects unsupported scale types", () => {
+  assert.throws(() => Plot.dot([]).plot({aspectRatio: true, x: {type: "symlog"}}), /^Error: unsupported x scale for aspectRatio: symlog$/); // prettier-ignore
+  assert.throws(() => Plot.dot([]).plot({aspectRatio: true, y: {type: "symlog"}}), /^Error: unsupported y scale for aspectRatio: symlog$/); // prettier-ignore
+});

test/plot-test.ts

@@ -0,0 +1,26 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function curves() {
+  const random = d3.randomLcg(42);
+  const values = d3.ticks(0, 1, 11).map((t) => {
+    const r = 1 + 2 * random();
+    return [r * Math.cos(t * 2 * Math.PI), r * Math.sin(t * 2 * Math.PI)];
+  });
+  return Plot.plot({
+    width: 500,
+    axis: null,
+    aspectRatio: true,
+    inset: 10,
+    marks: [
+      d3
+        .ticks(0, 1, 4)
+        .map((tension) => [
+          Plot.line(values, {curve: "bundle", tension, stroke: "red", mixBlendMode: "multiply"}),
+          Plot.line(values, {curve: "cardinal-closed", tension, stroke: "green", mixBlendMode: "multiply"}),
+          Plot.line(values, {curve: "catmull-rom-closed", tension, stroke: "blue", mixBlendMode: "multiply"})
+        ]),
+      Plot.dot(values, {stroke: "white", fill: "black"})
+    ]
+  });
+}

test/plots/curves.ts

@@ -58,6 +58,7 @@ export * from "./crimean-war-line.js";
 export * from "./crimean-war-overlapped.js";
 export * from "./crimean-war-stacked.js";
 export * from "./crosshair.js";
+export * from "./curves.js";
 export * from "./d3-survey-2015-comfort.js";
 export * from "./d3-survey-2015-why.js";
 export * from "./darker-dodge.js";

test/plots/index.ts

@@ -5,15 +5,8 @@ export async function usCongressAgeColorExplicit() {
   const data = await d3.csv<any>("data/us-congress-members.csv", d3.autoType);
   return Plot.plot({
     height: 300,
-    x: {
-      nice: true,
-      label: "Age",
-      labelAnchor: "right"
-    },
-    y: {
-      grid: true,
-      label: "Frequency"
-    },
+    x: {nice: true, label: "Age"},
+    y: {grid: true, label: "Frequency"},
     marks: [
       Plot.dot(
         data,

test/plots/us-congress-age-color-explicit.ts

@@ -5,11 +5,7 @@ export async function usCongressAgeGender() {
   const data = await d3.csv<any>("data/us-congress-members.csv", d3.autoType);
   return Plot.plot({
     height: 300,
-    x: {
-      nice: true,
-      label: "Age",
-      labelAnchor: "right"
-    },
+    x: {nice: true, label: "Age"},
     y: {
       grid: true,
       label: "← Women · Men →",

test/plots/us-congress-age-gender.ts

@@ -5,15 +5,8 @@ export async function usCongressAgeSymbolExplicit() {
   const data = await d3.csv<any>("data/us-congress-members.csv", d3.autoType);
   return Plot.plot({
     height: 300,
-    x: {
-      nice: true,
-      label: "Age",
-      labelAnchor: "right"
-    },
-    y: {
-      grid: true,
-      label: "Frequency"
-    },
+    x: {nice: true, label: "Age"},
+    y: {grid: true, label: "Frequency"},
     marks: [
       Plot.dot(
         data,

test/plots/us-congress-age-symbol-explicit.ts

@@ -5,15 +5,8 @@ export async function usCongressAge() {
   const data = await d3.csv<any>("data/us-congress-members.csv", d3.autoType);
   return Plot.plot({
     height: 300,
-    x: {
-      nice: true,
-      label: "Age",
-      labelAnchor: "right"
-    },
-    y: {
-      grid: true,
-      label: "Frequency"
-    },
+    x: {nice: true, label: "Age"},
+    y: {grid: true, label: "Frequency"},
     marks: [
       Plot.dot(data, Plot.stackY2({x: (d) => 2021 - d.birth, fill: "currentColor", title: "full_name"})),
       Plot.ruleY([0])