chore: add rendering test

qlik-oss · Dec 9, 2022 · 348ac10 · 348ac10
1 parent 0160dba
commit 348ac10
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 0 deletions.
diff --git a/apis/enigma-mocker/src/mocks/get-object-mock.js b/apis/enigma-mocker/src/mocks/get-object-mock.js
@@ -67,6 +67,7 @@ function createMock(genericObject, options) {
       }),
       {}
     ),
+    genericType: genericObject.type,
   };
   return { [qId]: mock };
 }

diff --git a/apis/nucleus/src/components/Sheet.jsx b/apis/nucleus/src/components/Sheet.jsx
@@ -6,6 +6,17 @@ import uid from '../object/uid';
 import { resolveBgColor, resolveBgImage } from '../utils/background-props';
 import InstanceContext from '../contexts/InstanceContext';
 
+/**
+ * @interface
+ * @extends HTMLElement
+ * @experimental
+ * @since 3.1.0
+ */
+const SheetElement = {
+  /** @type {'njs-sheet'} */
+  className: 'njs-sheet',
+};
+
 function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
   const { x, y, width, height } = cell.bounds;
   return (
@@ -117,6 +128,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
   }
   return (
     <div
+      className={SheetElement.className}
       style={{
         width: `100%`,
         height,

diff --git a/test/rendering/sheet/configured.js b/test/rendering/sheet/configured.js
@@ -0,0 +1,42 @@
+const pie = {
+  component: {
+    mounted(el) {
+      // eslint-disable-next-line
+      el.innerHTML = '<div id="pie" style="background: blue; height:100%; width:100%;">Hello pie</div>';
+    },
+  },
+};
+
+const bar = function (env) {
+  env.translator.add({
+    id: 'hello',
+    locale: {
+      'sv-SE': 'Hej {0}!',
+    },
+  });
+  return {
+    component: {
+      mounted(el) {
+        // eslint-disable-next-line
+        el.innerHTML = `<div id="bar" style="font-size: 64px; background: red; height:100%; width:100%;">${env.translator.get(
+          'hello',
+          ['bar']
+        )}</div>`;
+      },
+    },
+  };
+};
+
+// eslint-disable-next-line
+const configured = stardust.embed.createConfiguration({
+  types: [
+    {
+      name: 'piechart',
+      load: () => Promise.resolve(pie),
+    },
+    {
+      name: 'barchart',
+      load: () => Promise.resolve(bar),
+    },
+  ],
+});
diff --git a/test/rendering/sheet/sheet-data.js b/test/rendering/sheet/sheet-data.js
@@ -0,0 +1,50 @@
+/* eslint arrow-body-style: 0 */
+
+window.getFuncs = function getFuncs() {
+  return {
+    getSheetLayout: () => {
+      return {
+        qInfo: {
+          qId: 'sheet',
+        },
+        visualization: 'sheet',
+        cells: [
+          {
+            name: 'bar',
+            bounds: {
+              x: 0,
+              y: 0,
+              width: 50,
+              height: 50,
+            },
+          },
+          {
+            name: 'pie',
+            bounds: {
+              x: 50,
+              y: 50,
+              width: 50,
+              height: 50,
+            },
+          },
+        ],
+      };
+    },
+    getBarLayout: () => {
+      return {
+        qInfo: {
+          qId: 'bar',
+        },
+        visualization: 'barchart',
+      };
+    },
+    getPieLayout: () => {
+      return {
+        qInfo: {
+          qId: 'pie',
+        },
+        visualization: 'piechart',
+      };
+    },
+  };
+};
diff --git a/test/rendering/sheet/sheet.html b/test/rendering/sheet/sheet.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="stardust.js"></script>
+    <script src="configured.js"></script>
+    <script src="sheet-data.js"></script>
+    <script defer src="sheet.js"></script>
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      #object {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="object" data-type="sheet"></div>
+  </body>
+</html>
diff --git a/test/rendering/sheet/sheet.js b/test/rendering/sheet/sheet.js
@@ -0,0 +1,46 @@
+/* global configured */
+/* eslint no-underscore-dangle: 0 */
+(() => {
+  async function getMocks(EnigmaMocker) {
+    const { getSheetLayout, getBarLayout, getPieLayout } = window.getFuncs();
+
+    const obj = [
+      {
+        id: `sheet`,
+        type: 'sheet',
+        getLayout: () => getSheetLayout(),
+      },
+      {
+        id: `bar`,
+        type: 'barchart',
+        getLayout: () => getBarLayout(),
+      },
+      {
+        id: `pie`,
+        type: 'piechart',
+        getLayout: () => getPieLayout(),
+      },
+    ];
+
+    const app = await EnigmaMocker.fromGenericObjects(obj);
+
+    return {
+      obj,
+      app,
+    };
+  }
+
+  const init = async () => {
+    const element = document.querySelector('#object');
+    const { app } = await getMocks(window.stardust.EnigmaMocker);
+
+    const nebbie = configured(app);
+
+    const inst = await nebbie.render({ id: 'sheet', element });
+    return () => {
+      inst?.unmount(element);
+    };
+  };
+
+  return init();
+})();
diff --git a/test/rendering/sheet/sheet.spec.js b/test/rendering/sheet/sheet.spec.js
@@ -0,0 +1,30 @@
+const getPage = require('../setup');
+const startServer = require('../server');
+const { looksLike } = require('../testUtils');
+
+describe('listbox mashup rendering test', () => {
+  const object = '[data-type="sheet"]';
+  let page;
+  let takeScreenshot;
+  let destroyServer;
+  let destroyBrowser;
+  const PAGE_OPTIONS = { width: 300, height: 500 };
+
+  beforeEach(async () => {
+    ({ destroy: destroyServer } = await startServer());
+    ({ page, takeScreenshot, destroy: destroyBrowser } = await getPage(PAGE_OPTIONS));
+  });
+
+  afterEach(async () => {
+    await Promise.all([destroyServer(), destroyBrowser()]);
+  });
+
+  it('selecting two values should result in two green rows', async () => {
+    const FILE_NAME = 'sheet_basic_EH.png';
+    const snapshotElement = await page.$(object);
+    await page.$('#bar');
+    await page.$('#pie');
+    const { path: capturedPath } = await takeScreenshot(FILE_NAME, snapshotElement);
+    await looksLike(FILE_NAME, capturedPath);
+  });
+});