fix scatter plot not showing on element detail pages without photo

show fallback colored gradient in src/lib/ElementPhoto.svelte when photo is missing and missing_msg is set
add playwright tests for element detail pages

src/lib/ElementPhoto.svelte

@@ -5,6 +5,7 @@
   export let style: string | null = null
   // element defaults to active_element store but can be pinned by passing it as prop
   export let element: ChemicalElement | undefined = undefined
+  export let missing_msg = ``
 
   $: elem = element ?? $active_element
 
@@ -15,13 +16,36 @@
 
 {#if elem}
   <img {src} alt={elem?.name} on:error={() => (hidden = true)} {style} {hidden} />
+  {#if hidden && missing_msg}
+    <div {style}>
+      <span>{missing_msg} {elem.name}</span>
+    </div>
+  {/if}
 {/if}
 
 <style>
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 1pt;
+  }
+  div {
+    aspect-ratio: 1;
+    display: flex;
+    place-content: center;
+    place-items: center;
+    background-image: linear-gradient(
+      to top left,
+      rgba(0, 100, 0, 0.5),
+      rgba(0, 0, 100, 0.3)
+    );
+    border-radius: 4pt;
+    overflow: hidden;
+  }
+  div > span {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 1ex 1em;
+    border-radius: 1em;
+    margin: 1em;
   }
 </style>

src/routes/[slug]/+page.svelte

@@ -44,7 +44,7 @@
 <PropertySelect selected={[initial_heatmap]} />
 
 <section>
-  <ElementPhoto />
+  <ElementPhoto missing_msg="No image for" />
 
   <!-- on:mouseleave makes ScatterPlot always show current element unless user actively hovers another element -->
   <ScatterPlot ylim={[0, null]} on:mouseleave={() => ($active_element = element)} />

tests/element-detail-pages.test.ts

@@ -0,0 +1,34 @@
+import element_data from '$lib/periodic-table-data.ts'
+import { expect, test } from '@playwright/test'
+
+export const category_counts: Record<string, number> = {}
+
+for (const { category } of element_data) {
+  category_counts[category] = (category_counts[category] ?? 0) + 1
+}
+
+test.describe(`Element detail page`, async () => {
+  test(`has periodicity plot`, async ({ page }) => {
+    // test any 5 random elements
+    for (const _ of [...Array(5)]) {
+      const rand_idx = Math.floor(Math.random() * element_data.length)
+      const random_element = element_data[rand_idx]
+
+      await page.goto(`/${random_element.name.toLowerCase()}`, {
+        waitUntil: `networkidle`,
+      })
+
+      // titles should have dash-separated element number and name
+      expect(await page.textContent(`h2`)).toContain(
+        `${random_element.number} - ${random_element.name}`
+      )
+
+      // should have brief element description
+      const description = await page.$(`text=${random_element.summary}`)
+      expect(description).toBeTruthy()
+
+      // should have Bohr model SVG
+      expect(await page.$(`svg > circle.nucleus + text + g.shell`)).toBeTruthy()
+    }
+  })
+})

tsconfig.json

@@ -4,7 +4,7 @@
     "strict": true,
     "module": "esnext",
     "target": "esnext",
-    "moduleResolution": "node", // needed for import { ... } from 'svelte' in TS files
+    "moduleResolution": "node",
 
     // To have warnings/errors of the Svelte compiler at the correct position,
     // enable source maps by default.