From 9501bbbfe2f24541e4a8db3ab7192702653744d7 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Tue, 6 Sep 2022 15:51:15 -0700
Subject: [PATCH] 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        | 26 ++++++++++++++++++++++-
 src/routes/[slug]/+page.svelte     |  2 +-
 tests/element-detail-pages.test.ts | 34 ++++++++++++++++++++++++++++++
 tsconfig.json                      |  2 +-
 4 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 tests/element-detail-pages.test.ts

diff --git a/src/lib/ElementPhoto.svelte b/src/lib/ElementPhoto.svelte
index 9d0ac16..4851691 100644
--- a/src/lib/ElementPhoto.svelte
+++ b/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,6 +16,11 @@
 
 {#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>
@@ -22,6 +28,24 @@
     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>
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 71fa45c..b5a0d25 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/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)} />
diff --git a/tests/element-detail-pages.test.ts b/tests/element-detail-pages.test.ts
new file mode 100644
index 0000000..35eb85a
--- /dev/null
+++ b/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()
+    }
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index c575a51..909c60e 100644
--- a/tsconfig.json
+++ b/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.