From dd5aae4c706975fba227619c2a66562c0feffcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Maa=C3=9F?= <mathias.maass@uni-leipzig.de>
Date: Fri, 22 Mar 2019 15:56:32 +0100
Subject: [PATCH] basic plugin tests (delete, replace, wrap, add)
---
.../integration/mirador/plugins/add.html | 51 +++++++++++++++++++
.../integration/mirador/plugins/add.test.js | 13 +++++
.../integration/mirador/plugins/delete.html | 28 ++++++++++
.../mirador/plugins/delete.test.js | 12 +++++
.../integration/mirador/plugins/replace.html | 36 +++++++++++++
.../mirador/plugins/replace.test.js | 13 +++++
.../integration/mirador/plugins/wrap.html | 37 ++++++++++++++
.../integration/mirador/plugins/wrap.test.js | 12 +++++
.../WorkspaceControlPanelButtons.js | 5 +-
9 files changed, 205 insertions(+), 2 deletions(-)
create mode 100644 __tests__/integration/mirador/plugins/add.html
create mode 100644 __tests__/integration/mirador/plugins/add.test.js
create mode 100644 __tests__/integration/mirador/plugins/delete.html
create mode 100644 __tests__/integration/mirador/plugins/delete.test.js
create mode 100644 __tests__/integration/mirador/plugins/replace.html
create mode 100644 __tests__/integration/mirador/plugins/replace.test.js
create mode 100644 __tests__/integration/mirador/plugins/wrap.html
create mode 100644 __tests__/integration/mirador/plugins/wrap.test.js
diff --git a/__tests__/integration/mirador/plugins/add.html b/__tests__/integration/mirador/plugins/add.html
new file mode 100644
index 000000000..e9614e60c
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/add.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function AddPluginComponentA(props) {
+ return (
+ <div id="add-plugin-component-a">
+ Plugin A
+ </div>
+ );
+ }
+
+ function AddPluginComponentB(props) {
+ return (
+ <div id="add-plugin-component-b">
+ Plugin B
+ </div>
+ );
+ }
+
+ const addPluginA = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'add',
+ component: AddPluginComponentA,
+ };
+
+ const addPluginB = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'add',
+ component: AddPluginComponentB,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/add.test.js b/__tests__/integration/mirador/plugins/add.test.js
new file mode 100644
index 000000000..bf91b2f68
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/add.test.js
@@ -0,0 +1,13 @@
+
+describe('"add" mode plugins', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/add.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('adds to <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).toMatchElement('.mirador-workspace-control-panel-buttons #add-plugin-component-a');
+ await expect(page).toMatchElement('.mirador-workspace-control-panel-buttons #add-plugin-component-b');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/delete.html b/__tests__/integration/mirador/plugins/delete.html
new file mode 100644
index 000000000..de1148229
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/delete.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ const deletePlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'delete',
+ }
+
+ Mirador.viewer(config, [deletePlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/delete.test.js b/__tests__/integration/mirador/plugins/delete.test.js
new file mode 100644
index 000000000..6d4d487a9
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/delete.test.js
@@ -0,0 +1,12 @@
+
+describe('"delete" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/delete.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('deletes <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).not.toMatchElement('.mirador-workspace-control-panel-buttons');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/replace.html b/__tests__/integration/mirador/plugins/replace.html
new file mode 100644
index 000000000..e6de84252
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/replace.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function ReplacePluginComponent(props) {
+ return (
+ <div id="replace-plugin-component">
+ </div>
+ );
+ }
+
+ const replacePlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'replace',
+ component: ReplacePluginComponent,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [replacePlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/replace.test.js b/__tests__/integration/mirador/plugins/replace.test.js
new file mode 100644
index 000000000..196c6408b
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/replace.test.js
@@ -0,0 +1,13 @@
+
+describe('"replace" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/replace.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('replaces <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).not.toMatchElement('.mirador-workspace-panel-buttons');
+ await expect(page).toMatchElement('#replace-plugin-component');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/wrap.html b/__tests__/integration/mirador/plugins/wrap.html
new file mode 100644
index 000000000..9e0ed69d3
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/wrap.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function WrapPluginComponent(props) {
+ return (
+ <div id="wrap-plugin-component">
+ <props.TargetComponent {...props} />
+ </div>
+ );
+ }
+
+ const wrapPlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'wrap',
+ component: WrapPluginComponent,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [wrapPlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/wrap.test.js b/__tests__/integration/mirador/plugins/wrap.test.js
new file mode 100644
index 000000000..20c927a61
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/wrap.test.js
@@ -0,0 +1,12 @@
+
+describe('"wrap" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/wrap.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('wraps <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).toMatchElement('#wrap-plugin-component .mirador-workspace-control-panel-buttons');
+ });
+});
diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js
index b4150e929..0aaf8af86 100644
--- a/src/components/WorkspaceControlPanelButtons.js
+++ b/src/components/WorkspaceControlPanelButtons.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import ns from '../config/css-ns';
import WorkspaceFullScreenButton from '../containers/WorkspaceFullScreenButton';
import WorkspaceAddButton from '../containers/WorkspaceAddButton';
import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
@@ -25,12 +26,12 @@ export class WorkspaceControlPanelButtons extends Component {
*/
render() {
return (
- <>
+ <div className={ns('workspace-control-panel-buttons')}>
<WorkspaceAddButton />
<WorkspaceMenuButton />
<WorkspaceFullScreenButton />
<PluginHook {...this.props} />
- </>
+ </div>
);
}
}
--
GitLab