diff --git a/apis/enigma-mocker/src/mocks/get-object-mock.js b/apis/enigma-mocker/src/mocks/get-object-mock.js
index cad65eccc..d6352818f 100644
--- 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
index ac892694d..673c7ac69 100644
--- 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 (
${env.translator.get(
+ 'hello',
+ ['bar']
+ )}
`;
+ },
+ },
+ };
+};
+
+// 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
new file mode 100644
index 000000000..0eae89c61
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0de3d84bc
--- /dev/null
+++ b/test/rendering/sheet/sheet.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/rendering/sheet/sheet.js b/test/rendering/sheet/sheet.js
new file mode 100644
index 000000000..4b3742a0c
--- /dev/null
+++ 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
new file mode 100644
index 000000000..c28e7b357
--- /dev/null
+++ 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);
+ });
+});