Merge pull request #8358 from quarto-dev/bugfix/docusaurus-chap-2

Docusaurus - add more snapshot tests

Author: cscheid

dev-docs/feature-format-matrix/qmd-files/code-annotation/docusaurus.qmd

@@ -0,0 +1,17 @@
+---
+format: docusaurus-md
+code-annotations: true
+code-line-numbers: true
+---
+
+```r
+library(tidyverse)
+library(palmerpenguins)
+penguins |>                                      # <1>
+  mutate(                                        # <2>
+    bill_ratio = bill_depth_mm / bill_length_mm, # <2>
+    bill_area  = bill_depth_mm * bill_length_mm  # <2>
+  )                                              # <2>
+```
+1. Take `penguins`, and then,
+2. add new columns for the bill ratio and bill area.

dev-docs/feature-format-matrix/qmd-files/format/docusaurus/raw-mdx-block/docusaurus.qmd

@@ -0,0 +1,21 @@
+---
+format: docusaurus-md
+---
+
+```{=mdx}
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}>
+    {children}
+  </span>
+);
+```
+
+<Highlight color="#25c2a0">Docusaurus GREEN</Highlight> and <Highlight color="#1877F2">Rams blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

dev-docs/feature-format-matrix/qmd-files/layout/tabset/docusaurus.qmd

@@ -0,0 +1,34 @@
+---
+format: docusaurus-md
+---
+
+::: {.panel-tabset}
+## R
+
+``` {.r}
+fizz_buzz <- function(fbnums = 1:50) {
+  output <- dplyr::case_when(
+    fbnums %% 15 == 0 ~ "FizzBuzz",
+    fbnums %% 3 == 0 ~ "Fizz",
+    fbnums %% 5 == 0 ~ "Buzz",
+    TRUE ~ as.character(fbnums)
+  )
+  print(output)
+}
+```
+
+## Python
+
+``` {.python}
+def fizz_buzz(num):
+  if num % 15 == 0:
+    print("FizzBuzz")
+  elif num % 5 == 0:
+    print("Buzz")
+  elif num % 3 == 0:
+    print("Fizz")
+  else:
+    print(num)
+```
+
+:::

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-code-annotations.mdx.snapshot

@@ -0,0 +1,25 @@
+---
+format: docusaurus-md
+code-annotations: true
+code-line-numbers: true
+---
+
+
+
+
+
+```r showLineNumbers
+library(tidyverse)
+library(palmerpenguins)
+penguins |>
+  mutate(
+    bill_ratio = bill_depth_mm / bill_length_mm,
+    bill_area  = bill_depth_mm * bill_length_mm
+  )
+```
+
+Line 3  
+Take `penguins`, and then,
+
+Lines 4-7  
+add new columns for the bill ratio and bill area.

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-code-annotations.qmd

@@ -0,0 +1,21 @@
+---
+format: docusaurus-md
+code-annotations: true
+code-line-numbers: true
+_quarto:
+  tests:
+    docusaurus-md:
+      ensureSnapshotMatches: true
+---
+
+```r
+library(tidyverse)
+library(palmerpenguins)
+penguins |>                                      # <1>
+  mutate(                                        # <2>
+    bill_ratio = bill_depth_mm / bill_length_mm, # <2>
+    bill_area  = bill_depth_mm * bill_length_mm  # <2>
+  )                                              # <2>
+```
+1. Take `penguins`, and then,
+2. add new columns for the bill ratio and bill area.

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-raw-mdx-test.mdx.snapshot

@@ -0,0 +1,25 @@
+---
+format: docusaurus-md
+---
+
+
+
+
+````mdx-code-block
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}>
+    {children}
+  </span>
+);
+````
+
+<Highlight color="#25c2a0">Docusaurus GREEN</Highlight> and
+<Highlight color="#1877F2">Rams blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my *JSX*!

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-raw-mdx-test.qmd

@@ -0,0 +1,25 @@
+---
+format: docusaurus-md
+_quarto:
+  tests:
+    docusaurus-md:
+      ensureSnapshotMatches: true
+---
+
+```{=mdx}
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}>
+    {children}
+  </span>
+);
+```
+
+<Highlight color="#25c2a0">Docusaurus GREEN</Highlight> and <Highlight color="#1877F2">Rams blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-tabsets.mdx.snapshot

@@ -0,0 +1,42 @@
+---
+format: docusaurus-md
+---
+
+
+
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="R">
+
+```r
+fizz_buzz <- function(fbnums = 1:50) {
+  output <- dplyr::case_when(
+    fbnums %% 15 == 0 ~ "FizzBuzz",
+    fbnums %% 3 == 0 ~ "Fizz",
+    fbnums %% 5 == 0 ~ "Buzz",
+    TRUE ~ as.character(fbnums)
+  )
+  print(output)
+}
+```
+
+</TabItem>
+<TabItem value="Python">
+
+```python
+def fizz_buzz(num):
+  if num % 15 == 0:
+    print("FizzBuzz")
+  elif num % 5 == 0:
+    print("Buzz")
+  elif num % 3 == 0:
+    print("Fizz")
+  else:
+    print(num)
+```
+
+</TabItem>
+</Tabs>

tests/docs/smoke-all/2024/01/19/docusaurus/docusaurus-tabsets.qmd

@@ -0,0 +1,38 @@
+---
+format: docusaurus-md
+_quarto:
+  tests:
+    docusaurus-md:
+      ensure-snapshot-matches: true
+---
+
+::: {.panel-tabset}
+## R
+
+``` {.r}
+fizz_buzz <- function(fbnums = 1:50) {
+  output <- dplyr::case_when(
+    fbnums %% 15 == 0 ~ "FizzBuzz",
+    fbnums %% 3 == 0 ~ "Fizz",
+    fbnums %% 5 == 0 ~ "Buzz",
+    TRUE ~ as.character(fbnums)
+  )
+  print(output)
+}
+```
+
+## Python
+
+``` {.python}
+def fizz_buzz(num):
+  if num % 15 == 0:
+    print("FizzBuzz")
+  elif num % 5 == 0:
+    print("Buzz")
+  elif num % 3 == 0:
+    print("Fizz")
+  else:
+    print(num)
+```
+
+:::