From 1f62303d4ccc91c55d5d5131cf26ab281f2a4afc Mon Sep 17 00:00:00 2001
From: Christophe Dervieux <christophe.dervieux@gmail.com>
Date: Mon, 31 Mar 2025 13:00:54 +0200
Subject: [PATCH] Add a test for creating tabsets using jupyter cell

---
 .../html/tabsets/jupyter-tabsets.qmd          | 25 +++++++++++++++++++
 .../playwright/tests/html-tabsets.spec.ts     | 20 +++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 tests/docs/playwright/html/tabsets/jupyter-tabsets.qmd
 create mode 100644 tests/integration/playwright/tests/html-tabsets.spec.ts

diff --git a/tests/docs/playwright/html/tabsets/jupyter-tabsets.qmd b/tests/docs/playwright/html/tabsets/jupyter-tabsets.qmd
new file mode 100644
index 00000000000..c139786c10b
--- /dev/null
+++ b/tests/docs/playwright/html/tabsets/jupyter-tabsets.qmd
@@ -0,0 +1,25 @@
+---
+title: "mwe"
+---
+
+## Quarto
+
+From https://github.com/quarto-dev/quarto-cli/issues/1456
+
+```{python}
+from IPython.display import display, Markdown
+import matplotlib.pyplot as plt
+```
+
+::: {.panel-tabset}
+
+```{python}
+#| output: asis
+for i in ["tab1 inside for loop", "tab2 inside for loop"]:
+    display(Markdown(f"\n# {i}:\n"))
+    fig = plt.figure()
+    ax = fig.add_subplot(111)
+    plt.show()
+```
+
+:::
diff --git a/tests/integration/playwright/tests/html-tabsets.spec.ts b/tests/integration/playwright/tests/html-tabsets.spec.ts
new file mode 100644
index 00000000000..38f5e78a7c2
--- /dev/null
+++ b/tests/integration/playwright/tests/html-tabsets.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('Jupyter - Creates working tabsets from for loops', async ({ page }) => {
+  await page.goto('/html/tabsets/jupyter-tabsets.html');
+  const tab1 = page.getByRole('tab', { name: 'tab1 inside for loop:' });
+  await expect(tab1).toHaveClass(/active/);
+  const tabContent = page.locator('div.tab-content')
+  await expect(tabContent).toBeVisible();
+  const tab1Content = tabContent.locator('div.tab-pane').first(); 
+  await expect(tab1Content).toHaveClass(/active/);
+  await expect(tab1Content.locator('img')).toBeVisible();
+  const tab2 = page.getByRole('tab', { name: 'tab2 inside for loop:' })
+  await tab2.click();
+  await expect(tab1).not.toHaveClass(/active/);
+  await expect(tab1Content).not.toHaveClass(/active/);
+  await expect(tab2).toHaveClass(/active/);
+  const tab2Content = tabContent.locator('div.tab-pane').nth(1); 
+  await expect(tab2Content).toHaveClass(/active/);
+  await expect(tab2Content.locator('img')).toBeVisible();
+});
\ No newline at end of file