test - Add a test for plotly subfigures

Author: cderv

tests/docs/smoke-all/jupyter/subfigures/plotly.qmd

@@ -0,0 +1,45 @@
+---
+title: "Bugged plotly figure: phantom subfigure"
+keep-ipynb: true
+keep-md: true
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - 
+          - 'figure.quarto-float-fig div#fig-gapminder-1 figure.quarto-subfloat-fig div.plotly-graph-div'
+          - 'figure.quarto-float-fig div#fig-gapminder-2 figure.quarto-subfloat-fig div.plotly-graph-div'
+      ensureHtmlElementContents:
+        selectors: 
+          - 'div#fig-gapminder-1 figcaption.quarto-subfloat-caption'
+          - 'div#fig-gapminder-2 figcaption.quarto-subfloat-caption'
+        matches: ['\((a|b)\) Gapminder: (1957|2007)']
+      ensureHtmlElementCount:
+        selectors: ['figure.quarto-float-fig figure.quarto-subfloat-fig']
+        counts: [2]
+---
+
+```{python}
+#| label: fig-gapminder
+#| fig-cap: "Life Expectancy and GDP"
+#| fig-subcap:
+#|   - "Gapminder: 1957"
+#|   - "Gapminder: 2007"
+#| layout-ncol: 2
+#| column: page
+
+import plotly.express as px
+import plotly.io as pio
+gapminder = px.data.gapminder()
+def gapminder_plot(year):
+    gapminderYear = gapminder.query("year == " + 
+                                    str(year))
+    fig = px.scatter(gapminderYear, 
+                     x="gdpPercap", y="lifeExp",
+                     size="pop", size_max=60,
+                     hover_name="country")
+    fig.show()
+    
+gapminder_plot(1957)
+gapminder_plot(2007)
+```

tests/pyproject.toml

@@ -18,4 +18,5 @@ dependencies = [
     "great-tables>=0.17.0",
     "polars>=1.29.0",
     "pyarrow>=20.0.0",
+    "plotly>=6.1.1",
 ]

tests/smoke/smoke-all.test.ts

@@ -36,7 +36,8 @@ import {
   ensureLatexFileRegexMatches,
   printsMessage,
   shouldError,
-  ensureHtmlElementContents
+  ensureHtmlElementContents,
+  ensureHtmlElementCount,
 } from "../verify.ts";
 import { readYamlFromMarkdown } from "../../src/core/yaml.ts";
 import { findProjectDir, findProjectOutputDir, outputForInput } from "../utils.ts";
@@ -130,6 +131,7 @@ function resolveTestSpecs(
     ensureEpubFileRegexMatches,
     ensureHtmlElements,
     ensureHtmlElementContents,
+    ensureHtmlElementCount,
     ensureFileRegexMatches,
     ensureLatexFileRegexMatches,
     ensureTypstFileRegexMatches,

tests/uv.lock

@@ -402,6 +402,39 @@ export const ensureHtmlElementContents = (
 
 }
 
+export const ensureHtmlElementCount = (
+  file: string,
+  options: {
+    selectors: string[] | string,
+    counts: number[] | number
+  }
+): Verify => {
+  return {
+    name: "Verify number of elements for selectors",
+    verify: async (_output: ExecuteOutput[]) => {
+      const htmlInput = await Deno.readTextFile(file);
+      const doc = new DOMParser().parseFromString(htmlInput, "text/html")!;
+      
+      // Convert single values to arrays for unified processing
+      const selectorsArray = Array.isArray(options.selectors) ? options.selectors : [options.selectors];
+      const countsArray = Array.isArray(options.counts) ? options.counts : [options.counts];
+      
+      if (selectorsArray.length !== countsArray.length) {
+        throw new Error("Selectors and counts arrays must have the same length");
+      }
+      
+      selectorsArray.forEach((selector, index) => {
+        const expectedCount = countsArray[index];
+        const elements = doc.querySelectorAll(selector);
+        assert(
+          elements.length === expectedCount,
+          `Selector '${selector}' matched ${elements.length} elements, expected ${expectedCount}.`
+        );
+      });
+    }
+  };
+};
+
 export const ensureSnapshotMatches = (
   file: string,
 ): Verify => {