Skip to content

Commit 4fc7e38

Browse files
gordonwoodhullclaude
gordonwoodhull
and
claude
committed
claude: Add sidebar logo tests for size preference and mode-first search
This commit adds tests for sidebar logo behavior: 1. Size preference order test (sidebar/size-preference-order) - Tests that sidebar logos follow the preference order: medium → small → large - Verifies that when medium.dark is missing but small.dark and large.dark exist, it correctly selects small.dark due to the preference order 2. Mode-first search algorithm test (sidebar/mode-first-search) - Tests that light/dark modes independently search through all sizes before considering the other mode - Verifies that it searches through all sizes for dark mode before considering any light mode variants These tests confirm that sidebar logo behavior follows the same mode-first search principles as dashboard logos, but with a different size preference order (medium → small → large for sidebars vs medium → large → small for dashboard). 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 7538c8a commit 4fc7e38

File tree

12 files changed

+152
-0
lines changed

12 files changed

+152
-0
lines changed

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
/.quarto/

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/_brand.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
color:
2+
background:
3+
light: "#fff"
4+
dark: "#111"
5+
foreground:
6+
light: "#111"
7+
dark: "#fff"
8+
logo:
9+
images:
10+
light-small:
11+
path: light-small.png
12+
alt: light small logo
13+
light-medium:
14+
path: light-medium.png
15+
alt: light medium logo
16+
dark-large:
17+
path: dark-large.png
18+
alt: dark large logo
19+
# Create specific case to test mode-first search algorithm
20+
# Define light variants for small and medium, dark variant only for large
21+
small:
22+
light: light-small
23+
medium:
24+
light: light-medium
25+
large:
26+
dark: dark-large

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/_quarto.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
project:
2+
type: website
3+
theme:
4+
light: brand
5+
dark: [brand, dark-fixups.scss]
6+
website:
7+
sidebar:
8+
style: "docked"
9+
search: true
10+
contents:
11+
- index.qmd
12+
- conclusion.qmd

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/conclusion.qmd‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: conclusion
3+
---

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/dark-fixups.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*-- scss:rules --*/
2+
3+
nav.sidebar.sidebar-navigation:not(.rollup) {
4+
background-color: #282b30;
5+
}
6+
7+
nav.navbar {
8+
background-color: rgba(13, 108, 251, 25%);
9+
}

‎tests/docs/smoke-all/brand/logo/sidebar/mode-first-search/index.qmd‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Sidebar Mode-First Search Algorithm
3+
_quarto:
4+
tests:
5+
html:
6+
ensureHtmlElements:
7+
-
8+
# For light mode, medium size is preferred (medium → small → large)
9+
# For dark mode, check that it searches all sizes in dark mode first
10+
# before considering any light mode variants
11+
- 'img[class*="light-content"][src="./light-medium.png"][alt="light medium logo"]'
12+
- 'img[class*="dark-content"][src="./dark-large.png"][alt="dark large logo"]'
13+
- []
14+
---
15+
16+
This test verifies that sidebar logos follow a mode-first search algorithm:
17+
18+
1. For light mode: medium.light exists, so it's used
19+
2. For dark mode:
20+
- medium.dark doesn't exist, try small.dark (preferred backup size)
21+
- small.dark doesn't exist, try large.dark
22+
- large.dark exists, so it's used
23+
- It never falls back to any light variant
24+
25+
This demonstrates the mode-first search algorithm, where it exhaustively searches
26+
for a specific mode across all sizes before considering the other mode.

‎tests/docs/smoke-all/brand/logo/sidebar/size-preference-order/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
/.quarto/

‎tests/docs/smoke-all/brand/logo/sidebar/size-preference-order/_brand.yml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
color:
2+
background:
3+
light: "#fff"
4+
dark: "#111"
5+
foreground:
6+
light: "#111"
7+
dark: "#fff"
8+
logo:
9+
images:
10+
small-logo:
11+
path: small-logo.png
12+
alt: small logo
13+
medium-logo:
14+
path: medium-logo.png
15+
alt: medium logo
16+
large-logo:
17+
path: large-logo.png
18+
alt: large logo
19+
# Define all three sizes to test the preference order
20+
small:
21+
light: small-logo
22+
dark: small-logo
23+
medium:
24+
# Only define light in medium to test fallback behavior
25+
light: medium-logo
26+
large:
27+
# Only define dark in large
28+
dark: large-logo

‎tests/docs/smoke-all/brand/logo/sidebar/size-preference-order/_quarto.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
project:
2+
type: website
3+
theme:
4+
light: brand
5+
dark: [brand, dark-fixups.scss]
6+
website:
7+
sidebar:
8+
style: "docked"
9+
search: true
10+
contents:
11+
- index.qmd
12+
- conclusion.qmd

‎tests/docs/smoke-all/brand/logo/sidebar/size-preference-order/conclusion.qmd‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: conclusion
3+
---

0 commit comments

Comments
 (0)