Merge pull request #49 from ProjectMirador/mirador4-compat-clean

Update plugin for Mirador 4

.eslintrc

@@ -4,15 +4,16 @@
   "globals": {
     "document": true
   },
-  "parser": "babel-eslint",
-  "plugins": ["babel", "jest"],
+  "parser": "@babel/eslint-parser",
+  "plugins": ["babel", "jest", "react", "react-hooks"],
   "rules": {
     "import/prefer-default-export": "off",
     "import/no-extraneous-dependencies": "off",
     "no-console": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/jsx-fragments": "off",
     "react/jsx-props-no-spreading": "off",
-    "react/prefer-stateless-function": "off"
+    "react/prefer-stateless-function": "off",
+    "react/function-component-definition": "off"
   }
 }

.github/workflows/node.js.yml

@@ -12,14 +12,18 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]    
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js 14.x
-      uses: actions/setup-node@v1
+    - uses: actions/checkout@v4
+    - name: Use Node.js  ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
       with:
-        node-version: 14.x
-    - run: npm install -g codecov
+        node-version:  ${{ matrix.node-version }}
     - run: npm install
     - run: npm test
-    - run: codecov
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v4
+

__tests__/MiradorImageTools.test.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from './test-utils';
 import { TestableImageTools as MiradorImageTools } from '../src/plugins/MiradorImageTools';
-import ImageTool from '../src/plugins/ImageTool';
-import ImageRotation from '../src/plugins/ImageRotation';
-import ImageFlip from '../src/plugins/ImageFlip';
 
 const mockPalette = {
   palette: {
@@ -12,8 +9,12 @@ const mockPalette = {
   },
 };
 
+jest.mock('@custom-react-hooks/use-element-size', () => ({
+  useElementSize: () => ([undefined, { width: 100, height: 200 }]),
+}));
+
 function createWrapper(props) {
-  return shallow(
+  return render(
     <MiradorImageTools
       classes={{}}
       viewer={{}}
@@ -22,24 +23,31 @@ function createWrapper(props) {
       windowId="x"
       width="sm"
       theme={mockPalette}
-      t={() => {}}
+      t={(k) => k}
       {...props}
     />,
   );
 }
 
 describe('MiradorImageTools', () => {
-  let wrapper;
-  it('renders ImageTools', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageTool).length).toBe(5);
+  it('renders buttons', async () => {
+    createWrapper();
+
+    expect(screen.getByRole('button', { name: 'brightness' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'contrast' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'saturation' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'greyscale' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'invert' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'revert' })).toBeInTheDocument();
   });
   it('renders ImageRotation', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageRotation).length).toBe(2);
+    createWrapper();
+
+    expect(screen.getByRole('button', { name: 'rotateLeft' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'rotateRight' })).toBeInTheDocument();
   });
   it('renders ImageFlip', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageFlip).length).toBe(1);
+    createWrapper();
+    expect(screen.getByRole('button', { name: 'flip' })).toBeInTheDocument();
   });
 });

__tests__/test-utils.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { createStore, applyMiddleware } from 'redux';
+import { thunk } from 'redux-thunk';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { rootReducer as createRootReducer, settings } from 'mirador';
+
+const rootReducer = createRootReducer();
+const theme = createTheme(settings.theme);
+
+/**
+ * Hook up our rendered object to redux
+ */
+function renderWithProviders(
+  ui,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
+    ...renderOptions
+  } = {},
+) {
+  /** :nodoc: */
+  function Wrapper({ children }) {
+    return (
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Provider store={store}>{children}</Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  const rendered = render(ui, { wrapper: Wrapper, ...renderOptions });
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    ...rendered,
+    rerender: (newUi, options) => render(
+      newUi,
+      { container: rendered.container, wrapper: Wrapper, ...options },
+    ),
+  };
+}
+
+export * from '@testing-library/react';
+export { renderWithProviders as render };

babel.config.js

@@ -1,13 +1,93 @@
-module.exports = {
+const moduleFormatMap = {
+  cjs: 'commonjs',
+  es: false,
+};
+
+module.exports = (api) => ({
   presets: [
-    [
+    api.env('test') && [
       '@babel/preset-env',
       {
+        modules: 'commonjs',
         targets: {
           node: 'current',
         },
       },
     ],
-    '@babel/preset-react',
-  ],
-};
+    (api.env('production') || api.env('development')) && [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        exclude: ['transform-typeof-symbol'],
+        forceAllTransforms: true,
+        modules: moduleFormatMap[process.env.MODULE_FORMAT] || false,
+        useBuiltIns: 'entry',
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        development: api.env('development') || api.env('test'),
+        runtime: 'automatic',
+        useBuiltIns: true,
+      },
+    ],
+  ].filter(Boolean),
+  plugins: [
+    'babel-plugin-macros',
+    '@babel/plugin-transform-destructuring',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        loose: true,
+      },
+    ],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {
+        useBuiltIns: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: false,
+        helpers: false, // Needed to support IE/Edge
+        regenerator: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-regenerator',
+      {
+        async: false,
+      },
+    ],
+    ['transform-react-remove-prop-types',
+      {
+        ignoreFilenames: ['node_modules'],
+        removeImport: true,
+      },
+    ],
+    [
+      "@emotion",
+      {
+        importMap: {
+          "@mui/system": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/system", "styled"]
+            }
+          },
+          "@mui/material/styles": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/material/styles", "styled"]
+            }
+          }
+        }
+      }
+    ]
+  ].filter(Boolean)
+});

demo/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+</head>
+
+<body>
+  <div id="demo"></div>
+</body>
+
+</html>

demo/src/index.js

@@ -1,4 +1,4 @@
-import Mirador from 'mirador/dist/es/src/index';
+import Mirador from 'mirador';
 import { miradorImageToolsPlugin } from '../../src';
 
 const config = {

jest.config.js

@@ -7,11 +7,15 @@ module.exports = {
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/setupJest.js',
   ],
   // Ignore Mirador code from jest transforms
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!mirador)',
+    '<rootDir>/node_modules/(?!mirador|@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)',
+  ],
+  testEnvironment: "jsdom",
+  testPathIgnorePatterns: [
+    "<rootDir>/__tests__/test-utils.js",
   ],
 };