feat(widget): Display "no metadata found" in the details pane (#219)

* It was already displayed but now it's styled like the mockup and there are tests
* Also renames test fixture files to explain what's inside of them.

packages/widget/src/detail-view.ts

@@ -124,8 +124,8 @@ const createGridItem = (
 };
 
 const emptyMetadataMessage = (): HTMLTemplateResult => {
-  return html` <div class="metadata-item">
-    <div class="metadata-key">no metadata found</div>
+  return html` <div class="no-metadata-found-grid">
+    <div class="metadata-grid-item">no metadata found</div>
   </div>`;
 };
 

packages/widget/src/styles.ts

@@ -123,13 +123,24 @@ export const customCss: CSSResult = css`
         overflow-x: hidden;
     }
 
+    .no-metadata-found-grid {
+        max-height: 100%;
+        max-width: 100%;
+        display: grid;
+        grid-template-columns: auto;
+        grid-gap: 0;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+
     .metadata-grid-item {
         min-height: 47px;
         max-width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        padding-left: 33px;
+        padding-left: 36px;
         word-wrap: break-word;
         overflow-wrap: break-word;
         word-break: break-all;

packages/widget/test/fixtures/docmapWithNoMetadata.ts

@@ -0,0 +1,38 @@
+export default {
+  "id": "https://sciety.org/docmaps/v1/articles/10.21203/rs.4.rs-1043992/v1/biophysics-colab.docmap.json",
+  "type": "docmap",
+  "created": "2022-04-19T11:40:09.289Z",
+  "publisher": {
+    "id": "https://biophysics.sciencecolab.org",
+    "homepage": "https://biophysics.sciencecolab.org/",
+    "logo": "https://sciety.org/static/groups/biophysics-colab--4bbf0c12-629b-4bb8-91d6-974f4df8efb2.png",
+    "name": "Biophysics Colab",
+    "account": {
+      "id": "https://sciety.org/groups/biophysics-colab",
+      "service": "https://sciety.org/"
+    }
+  },
+  "first-step": "_:b1",
+  "steps": {
+    "_:b1": {
+      "inputs": [
+        {
+          "doi": "10.21203/rs.4.rs-1043992/v1",
+          "url": "https://doi.org/10.21203/rs.4.rs-1043992/v1"
+        }
+      ],
+      "actions": [
+        {
+          "participants": [],
+          "outputs": [
+            {
+              "type": "review-article"
+            }
+          ]
+        }
+      ],
+      "assertions": []
+    }
+  },
+  "@context": "https://w3id.org/docmaps/context.jsonld"
+}

packages/widget/test/fixtures/fake-docmap-with-every-thing-type.ts

@@ -1,4 +1,4 @@
-// This is a copy of elife-docmap-1.ts but with every supported display type in the last step
+// This is a copy of docmapWithMultipleSteps.ts but with every supported display type in the last step
 
 export default {
     "@context": "https://w3id.org/docmaps/context.jsonld",

packages/widget/test/fixtures/fake-docmap-with-two-lonely-nodes.ts

@@ -1,4 +1,4 @@
-// This is a copy of elife-docmap-1.ts but with every supported display type in the last step
+// This docmap's display objects form a graph 3 layers deep, with the first and second layers only having one node each.
 
 export default {
   "@context": "https://w3id.org/docmaps/context.jsonld",

packages/widget/test/integration/docmaps-widget.test.ts

@@ -1,9 +1,10 @@
 import { expect, Locator, test } from '@playwright/test';
-import docmapWithMultipleSteps from '../fixtures/elife-docmap-1';
-import docmapWithOneStep from '../fixtures/sciety-docmap-1';
-import anotherDocmapWithOneStep from '../fixtures/sciety-docmap-2';
+import docmapWithMultipleSteps from '../fixtures/docmapWithMultipleSteps';
+import docmapWithOneStep from '../fixtures/docmapWithOneStep';
+import anotherDocmapWithOneStep from '../fixtures/anotherDocmapWithOneStep';
 import fakeDocmapWithEveryType from '../fixtures/fake-docmap-with-every-thing-type';
 import fakeDocmapWithTwoLonelyNodes from '../fixtures/fake-docmap-with-two-lonely-nodes';
+import docmapWithNoMetadata from '../fixtures/docmapWithNoMetadata';
 import {
   renderWidgetWithDocmapLiteral,
   renderWidgetWithServerMock,
@@ -34,6 +35,10 @@ const fixtures: { [docmapName: string]: { docmap: any; types: string[] } } = {
     docmap: fakeDocmapWithTwoLonelyNodes,
     types: ['P', 'RA', 'RA', 'RA', '', 'JA'],
   },
+  docmapWithNoMetadata: {
+    docmap: docmapWithNoMetadata,
+    types: ['', 'RA'],
+  }
 };
 
 [
@@ -369,6 +374,16 @@ test('When the docmap cannot be found, the empty screen is shown', async ({ page
   await expect(widget).toContainText('No data found for DOI unknown-doi');
 });
 
+test('Can render a docmap with no metadata', async ({ page }) => {
+  const widget = await renderWidgetWithServerMock(page, 'docmap-with-no-metadata', docmapWithNoMetadata);
+  await expect(widget.locator('.node')).toHaveCount(2);
+
+  const nodeWithoutMetadata = widget.locator('.node').last();
+  await nodeWithoutMetadata.click({ force: true });
+
+  await expect(widget.locator('.detail-body')).toContainText('no metadata found');
+})
+
 async function assertGraphTooltipAppearsOnHover(
   widget: Locator,
   thingToHoverOver: Locator,

packages/widget/test/integration/util.ts

@@ -1,6 +1,6 @@
 import { Page, Request, Route } from '@playwright/test';
 import { DocmapsWidget } from '../../src';
-import docmapWithOneStep from '../fixtures/sciety-docmap-1';
+import docmapWithOneStep from '../fixtures/docmapWithOneStep';
 
 
 const STAGING_SERVER_URL: string = 'https://example.com';

packages/widget/test/unit/docmap-controller.test.ts

@@ -1,9 +1,9 @@
 import test from 'ava';
 import { getSteps, stepsToGraph } from '../../src';
 import type { DisplayObjectEdge } from '../../src/util';
-import smallDocmapWithOneStep from '../fixtures/sciety-docmap-1';
-import largeDocmapWithOneStep from '../fixtures/sciety-docmap-2';
-import docmapWithMultipleSteps from '../fixtures/elife-docmap-1';
+import smallDocmapWithOneStep from '../fixtures/docmapWithOneStep';
+import largeDocmapWithOneStep from '../fixtures/anotherDocmapWithOneStep';
+import docmapWithMultipleSteps from '../fixtures/docmapWithMultipleSteps';
 
 interface Item {
   type: string;