Reorganized screenshots

deephaven#1634

packages/code-studio/src/styleguide/Grids.tsx

@@ -27,34 +27,52 @@ function Grids(): ReactElement {
   const [contextTheme] = useState<Partial<GridThemeType>>({ rowHeight: 40 });
 
   return (
-    <div {...sampleSectionIdAndClasses('grids')}>
+    <div>
       <ThemeContext.Provider value={contextTheme}>
         <h2 className="ui-title">Grid</h2>
-        <div>
+        <div {...sampleSectionIdAndClasses('grids-grid')}>
           <Grid model={model} theme={theme} />
         </div>
         <h2 className="ui-title">Static Data</h2>
-        <div style={{ height: 200 }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-static')}
+          style={{ height: 200 }}
+        >
           <StaticExample />
         </div>
         <h2 className="ui-title">Data Bar</h2>
-        <div style={{ height: 500 }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-data-bar')}
+          style={{ height: 500 }}
+        >
           <DataBarExample />
         </div>
         <h2 className="ui-title">Quadrillion rows and columns</h2>
-        <div style={{ height: 500, position: 'relative' }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-quadrillion')}
+          style={{ height: 500, position: 'relative' }}
+        >
           <QuadrillionExample />
         </div>
         <h2 className="ui-title">Async example</h2>
-        <div style={{ height: 500, position: 'relative' }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-async')}
+          style={{ height: 500, position: 'relative' }}
+        >
           <AsyncExample />
         </div>
         <h2 className="ui-title">Tree Grid</h2>
-        <div style={{ height: 500 }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-tree')}
+          style={{ height: 500 }}
+        >
           <TreeExample />
         </div>
         <h2 className="ui-title">Iris Grid</h2>
-        <div style={{ height: 500 }}>
+        <div
+          {...sampleSectionIdAndClasses('grids-iris')}
+          style={{ height: 500 }}
+        >
           <IrisGrid model={irisGridModel} />
         </div>
       </ThemeContext.Provider>

packages/code-studio/src/styleguide/ThemeColors.tsx

@@ -158,8 +158,8 @@ function extractColorVars(
   const varNames = styleText
     .split(/[\n;]/g)
     // Non-minified css will have leading 2 spaces in front of each css variable
-    // declaration. Minified has no space except for first line which will have
-    // :root{ prefix.
+    // declaration. Minified has no prefix except for the first line which will
+    // have ':root{' prefix.
     .map(line => /^(?:\s{2}|:root\{)?(--dh-color-(?:[^:]+))/.exec(line)?.[1])
     .filter((match): match is string => Boolean(match));
 

packages/code-studio/src/styleguide/utils.ts

@@ -17,6 +17,11 @@ export function* pseudoRandomWithSeed(
   }
 }
 
+/**
+ * Returns a callback that will generate pseudo random numbers based on the
+ * given seed.
+ * @param seed
+ */
 export function useSeededRandomNumberCallback(seed = 1): () => number {
   const [randomGenerator] = useState(() => pseudoRandomWithSeed(seed));
 

tests/styleguide.spec.ts

@@ -12,16 +12,22 @@ test.afterEach(async () => {
   await page.close();
 });
 
+// Iterate over all sample sections and take a screenshot of each one.
 test('UI regression test', async () => {
   const sampleSections = page.locator('.sample-section');
-  await expect(sampleSections).toHaveCount(33);
+  await expect(sampleSections).toHaveCount(39);
 
   for (let i = 0; i < (await sampleSections.count()); i += 1) {
     const sampleSection = sampleSections.nth(i);
-    const id = await sampleSection.getAttribute('id');
+    const id = String(await sampleSection.getAttribute('id'));
 
+    // Scroll to the section. This is technically not necessary, but it mimics
+    // the user experience a little better and mimics the behavior of the fixed
+    // menu + scroll-to-top button that change based on scroll position.
     await page.goto(`/ide/styleguide#${id}`);
 
-    await expect(sampleSection).toHaveScreenshot();
+    await expect(sampleSection).toHaveScreenshot(
+      `${id.replace(/^sample-section-/, '')}.png`
+    );
   }
 });