From 79b1eb4e1e856336b891d31950fda3b4ac66e528 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sun, 19 Mar 2023 11:41:27 -0700
Subject: [PATCH] add prop text_color to ElementTile

add test for props props show_symbol, show_number, show_name
---
 src/lib/ColorBar.svelte                   |  2 +-
 src/lib/ElementTile.svelte                |  6 ++-
 src/routes/(demos)/element-tile/+page.svx |  4 +-
 tests/unit/element-tile.test.ts           | 49 +++++++++++------------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/lib/ColorBar.svelte b/src/lib/ColorBar.svelte
index 863c309..e7fc054 100644
--- a/src/lib/ColorBar.svelte
+++ b/src/lib/ColorBar.svelte
@@ -9,7 +9,7 @@
   export let text_style: string | null = null
   export let wrapper_style: string | null = null
   export let tick_labels: (string | number)[] | number = 0
-  export let range: [number, number] = []
+  export let range: [number, number] = [0, 1]
   export let tick_side: 'top' | 'bottom' | 'center' = `bottom`
   // TODO vertical not fully implemented yet
   export let orientation: 'horizontal' | 'vertical' = `horizontal`
diff --git a/src/lib/ElementTile.svelte b/src/lib/ElementTile.svelte
index 4730c38..b37ee17 100644
--- a/src/lib/ElementTile.svelte
+++ b/src/lib/ElementTile.svelte
@@ -17,6 +17,7 @@
   export let href: string | null = null
   // at what background color lightness text color switches from black to white
   export let text_color_threshold = 0.7
+  export let text_color: string | null = null
 
   type $$Events = PeriodicTableEvents // for type-safe event listening on this component
 
@@ -51,8 +52,9 @@
   }
 
   let tile: HTMLElement
-  $: text_color =
-    luminance(get_bg_color(tile, bg_color)) > text_color_threshold ? `black` : `white`
+  $: if (text_color_threshold != null)
+    text_color =
+      luminance(get_bg_color(tile, bg_color)) > text_color_threshold ? `black` : `white`
 </script>
 
 <svelte:element
diff --git a/src/routes/(demos)/element-tile/+page.svx b/src/routes/(demos)/element-tile/+page.svx
index 8d38901..a3ee107 100644
--- a/src/routes/(demos)/element-tile/+page.svx
+++ b/src/routes/(demos)/element-tile/+page.svx
@@ -1,4 +1,6 @@
-`ElementTile.svelte` automatically changes text color to ensure high contrast with its background. If its background is transparent, it traverses up the DOM tree to find the first element with non-transparent background color.
+`ElementTile.svelte` automatically changes text color to ensure high contrast with its background. If its background is transparent, it traverses up the DOM tree to find the first element with non-transparent background color. This an, of course, go wrong e.g. if the tile is absolutely positioned outside its parent element. In that case, pass an explicit `text_color` prop and `text_color_threshold={null}` to `ElementTile` to override the automatic color selection.
+
+```svelte example stackblitz code_above
 
 ```svelte example stackblitz code_above
 <script>
diff --git a/tests/unit/element-tile.test.ts b/tests/unit/element-tile.test.ts
index 8b04f72..85aae1e 100644
--- a/tests/unit/element-tile.test.ts
+++ b/tests/unit/element-tile.test.ts
@@ -53,7 +53,7 @@ describe(`ElementTile`, () => {
       props: { element: rand_element, bg_color: `red` },
     })
 
-    const node = doc_query(`.element-tile`) as HTMLElement
+    const node = doc_query(`.element-tile`)
 
     expect(node.style.backgroundColor).toBe(`red`)
   })
@@ -121,29 +121,26 @@ describe(`ElementTile`, () => {
       }
     )
   })
-  // test(`show_symbol, show_name and show_number props control labels`, async () => {
-  //   // test all 2^3 true/false combinations of show_symbol, show_name, show_number
-  //   for (let idx = 0; idx < 1 << 3; idx++) {
-  //     // const show_name = Boolean(idx & 1)
-  //     const show_name = true
-  //     // const show_number = Boolean(idx & (1 << 1))
-  //     const show_number = true
-  //     const show_symbol = Boolean(idx & (1 << 2))
-  //     // const show_symbol = true
-
-  //     let expected = ``
-  //     if (show_number) expected += rand_element.number
-  //     if (show_symbol) expected += ` ${rand_element.symbol}`
-  //     if (show_name) expected += `  ${rand_element.name}`
-  //     new ElementTile({
-  //       target: document.body,
-  //       props: { element: rand_element, show_symbol, show_name, show_number },
-  //     })
-
-  //     const div = document.querySelector(`.element-tile`)
-  //     console.log(`node.innerHTML`, div.innerHTML)
-
-  //     expect(div.textContent?.trim()).toBe(expected.trim())
-  //   }
-  // })
+  test.each([
+    [true, true, true],
+    [false, false, false],
+    [true, false, true],
+    [false, false, true],
+  ])(
+    `props show_symbol = %s, show_number = %s, show_name = %s`,
+    async (show_name, show_number, show_symbol) => {
+      let expected = ``
+      if (show_number) expected += rand_element.number
+      if (show_symbol) expected += ` ${rand_element.symbol}`
+      if (show_name) expected += ` ${rand_element.name}`
+      new ElementTile({
+        target: document.body,
+        props: { element: rand_element, show_symbol, show_name, show_number },
+      })
+
+      const tile = doc_query(`.element-tile`)
+
+      expect(tile.textContent?.trim()).toBe(expected.trim())
+    }
+  )
 })