mirador-annotation-editor-video 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# CHANGELOG 
+
+## [ 1.1.16]
+
+### Change From MAE 1.0.88
+- ADD : Implement Multibody template 
+- ADD : Tags suggestion in annotation edition
+- FIX : Use selector to get config data
+- FIX : Clean translation function call
+- FIX : Simplify IIIF annotation generation
+- CLEAN : Remove unused code

package/__tests__/AnnotationCreation.test.js

@@ -1,48 +1,82 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import AnnotationCreation from '../src/AnnotationCreation';
-import AnnotationDrawing from '../src/AnnotationDrawing';
-import TextEditor from '../src/TextEditor';
-import ImageFormField from '../src/ImageFormField';
+
+import {
+  fireEvent, render, screen, waitFor,
+} from './test-utils';
+import TextCommentTemplate from '../src/annotationForm/TextCommentTemplate';
+
+const container = document.createElement('div');
+container.setAttribute('data-testid', 'drawContainer');
+
+const playerReferences = {
+  getContainer: jest.fn().mockReturnValue(container),
+  getDisplayedMediaHeight: jest.fn().mockReturnValue(100),
+  getDisplayedMediaWidth: jest.fn().mockReturnValue(200),
+  getImagePosition: jest.fn().mockReturnValue({ x: 0, y: 10 }),
+  getMediaTrueWidth: jest.fn().mockReturnValue(250),
+  getMediaType: jest.fn(),
+  getScale: jest.fn(),
+  getZoom: jest.fn(),
+};
 
 /** */
 function createWrapper(props) {
-  return shallow(
-    <AnnotationCreation
-      id="x"
-      config={{ annotation: {} }}
-      receiveAnnotation={jest.fn()}
+  const mockT = jest.fn().mockImplementation((key) => key);
+  return render(
+    <TextCommentTemplate
+      annotation={{}}
+      closeFormCompanionWindow={jest.fn()}
+      playerReferences={playerReferences}
+      saveAnnotation={jest.fn()}
+      t={mockT}
       windowId="abc"
       {...props}
     />,
   );
 }
 
-describe('AnnotationCreation', () => {
-  let wrapper;
-  it('renders a form', () => {
-    wrapper = createWrapper();
-    expect(wrapper.dive().find('form').length).toBe(1);
+describe('TextCreation', () => {
+  it('renders a note', () => {
+    createWrapper();
+    expect(screen.getAllByText('note'));
   });
-  it('form has button toggles', () => {
-    wrapper = createWrapper();
-    expect(wrapper.dive().find(ToggleButtonGroup).length).toBe(3);
+  it('has button tool selection', () => {
+    createWrapper();
+    screen.debug();
+
+    const toolSelection = screen.getByTestId('tool_selection');
+    expect(toolSelection).toBeInTheDocument();
+    const btns = screen.getAllByLabelText('select_cursor');
+    expect(btns).toHaveLength(3);
   });
   it('adds the AnnotationDrawing component', () => {
-    wrapper = createWrapper();
-    expect(wrapper.dive().find(AnnotationDrawing).length).toBe(1);
+    document.body.appendChild(container);
+    expect(screen.getByTestId('drawContainer')).toBeInTheDocument();
+
+    expect(container.querySelector('canvas')).not.toBeInTheDocument();
+    createWrapper();
+    expect(container.querySelector('canvas')).toBeInTheDocument();
+    document.body.removeChild(container);
   });
   it('adds the TextEditor component', () => {
-    wrapper = createWrapper();
-    expect(wrapper.dive().find(TextEditor).length).toBe(1);
+    createWrapper();
+    const textEditor = screen.getByTestId('textEditor');
+    expect(textEditor).toBeInTheDocument();
+  });
+  it('adds the annotation form footer', () => {
+    createWrapper();
+    expect(screen.getByRole('button', { name: 'save' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'cancel' })).toBeInTheDocument();
   });
-  it('adds the ImageFormField component', () => {
-    wrapper = createWrapper();
-    expect(wrapper.dive().find(ImageFormField).length).toBe(1);
+  it('adds the ImageFormField component', async () => {
+    createWrapper();
+    const toolSelection = screen.getByTestId('tool_selection');
+    expect(toolSelection).toBeInTheDocument();
+    expect(screen.getByLabelText('add_a_rectangle'));
+    expect(screen.getByLabelText('add_a_circle'));
   });
   it('can handle annotations without target selector', () => {
-    wrapper = createWrapper({
+    const wrapper = createWrapper({
       annotation: {
         body: {
           purpose: 'commenting',
@@ -51,6 +85,6 @@ describe('AnnotationCreation', () => {
         target: {},
       },
     });
-    wrapper.dive();
+    expect(wrapper).toBeDefined();
   });
 });

package/__tests__/AnnotationExportDialog.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import MenuItem from '@material-ui/core/MenuItem';
+
 import AnnotationExportDialog from '../src/AnnotationExportDialog';
+import { screen, render, waitFor } from './test-utils';
 
 window.URL.createObjectURL = jest.fn((data) => ('downloadurl'));
 
@@ -22,12 +22,15 @@ const adapter = jest.fn(() => (
 
 /** */
 function createWrapper(props) {
-  return shallow(
+  const mockT = jest.fn().mockImplementation((key) => key);
+  return render(
     <AnnotationExportDialog
       canvases={[]}
+      classes={{ listitem: 'testClass' }}
       config={{ annotation: { adapter } }}
       handleClose={jest.fn()}
       open
+      t={mockT}
       {...props}
     />,
   );
@@ -35,19 +38,18 @@ function createWrapper(props) {
 
 describe('AnnotationExportDialog', () => {
   it('renders download link for every annotation page', async () => {
-    let wrapper = createWrapper({
-      canvases: [
-        { id: 'canvas/1' },
-        { id: 'canvas/2' },
-      ],
-    }).dive();
-    expect(wrapper.text()).toEqual(expect.stringContaining('No annotations stored yet.'));
+    createWrapper(
+      {
+        canvases: [
+          { id: 'canvas/1' },
+          { id: 'canvas/2' },
+        ],
+      },
+    );
+    expect(screen.getByText(/no_annotation/i)).toBeInTheDocument();
 
-    wrapper.instance().componentDidUpdate({ open: false });
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    wrapper = wrapper.update();
-    expect(wrapper.text()).toEqual(expect.not.stringContaining('No annotations stored yet.'));
-    expect(wrapper.find(MenuItem).some({ 'aria-label': 'Export annotations for canvas/1' })).toBe(true);
-    expect(wrapper.find(MenuItem).some({ 'aria-label': 'Export annotations for canvas/2' })).toBe(true);
+    await waitFor(() => screen.getAllByText(/export_annotation_for/i));
+    const elements = screen.getAllByText(/export_annotation_for/);
+    expect(elements).toHaveLength(2);
   });
 });

package/__tests__/CanvasListItem.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { mount } from 'enzyme';
+
 import CanvasListItem from '../src/CanvasListItem';
 import AnnotationActionsContext from '../src/AnnotationActionsContext';
+import { render, screen, fireEvent } from './test-utils';
 
 const receiveAnnotation = jest.fn();
 const storageAdapter = jest.fn(() => (
@@ -20,7 +21,7 @@ const storageAdapter = jest.fn(() => (
 
 /** */
 function createWrapper(props, context = {}) {
-  return mount(
+  return render(
     <AnnotationActionsContext.Provider
       value={{
         canvases: [],
@@ -44,13 +45,13 @@ function createWrapper(props, context = {}) {
 }
 
 describe('CanvasListItem', () => {
-  let wrapper;
   it('wraps its children', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(CanvasListItem).find('li').text()).toBe('HelloWorld');
+    createWrapper();
+    expect(screen.getByText('HelloWorld')).toBeInTheDocument();
   });
+
   it('shows an edit and delete button when it matches an editable annotationid and is hovering', () => {
-    wrapper = createWrapper({}, {
+    createWrapper({}, {
       annotationsOnCanvases: {
         'canv/1': {
           'annoPage/1': {
@@ -58,6 +59,7 @@ describe('CanvasListItem', () => {
               items: [
                 {
                   id: 'anno/1',
+                  maeData: true,
                 },
               ],
             },
@@ -70,23 +72,55 @@ describe('CanvasListItem', () => {
         },
       ],
     });
-    wrapper.setState({ isHovering: true });
-    expect(wrapper.find('ForwardRef(ToggleButton)').length).toBe(3);
+    const annotationElement = screen.getAllByRole('listitem').find(
+      (el) => el.getAttribute('annotationid') === 'anno/1',
+    );
+
+    fireEvent.mouseEnter(annotationElement);
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(3);
+    expect(screen.getByRole('button', { name: /metadata/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /edit/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
   });
+
   it('deletes from a storageAdapter when handling deletes', async () => {
-    wrapper = createWrapper(
-      {
-        annotationid: 'anno/1',
-      },
-      {
-        canvases: [
-          {
-            id: 'canvas/1',
+    createWrapper({}, {
+      annotationEditCompanionWindowIsOpened: true,
+      annotationsOnCanvases: {
+        'canv/1': {
+          'annoPage/1': {
+            json: {
+              items: [
+                {
+                  id: 'anno/1',
+                  maeData: true,
+                },
+              ],
+            },
           },
-        ],
+        },
       },
+      canvases: [
+        {
+          id: 'canv/1',
+        },
+      ],
+    });
+
+    const annotationElement = screen.getAllByRole('listitem').find(
+      (el) => el.getAttribute('annotationid') === 'anno/1',
+    );
+    fireEvent.mouseEnter(annotationElement);
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+
+    fireEvent.click(deleteButton);
+
+    expect(storageAdapter).toHaveBeenCalledTimes(1);
+    expect(storageAdapter).toHaveBeenCalledWith(
+      'canv/1',
     );
-    await wrapper.instance().handleDelete();
-    expect(receiveAnnotation).toHaveBeenCalledWith('canvas/1', 'pageId/3', 'annoPageResultFromDelete');
   });
 });

package/__tests__/LocalStorageAdapter.test.js

@@ -1,4 +1,4 @@
-import LocalStorageAdapter from '../src/LocalStorageAdapter';
+import LocalStorageAdapter from '../src/annotationAdapter/LocalStorageAdapter';
 import fixture from '../__fixtures__/web_annotation.json';
 
 describe('LocalStorageAdapter', () => {

package/__tests__/miradorAnnotationPlugin.test.js

@@ -1,87 +1,114 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
-import LocalStorageAdapter from '../src/LocalStorageAdapter';
-import miradorAnnotationPlugin from '../src/plugins/miradorAnnotationPlugin';
+import { useDispatch } from 'react-redux';
+
+import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
+import LocalStorageAdapter from '../src/annotationAdapter/LocalStorageAdapter';
+import MiradorAnnotation from '../src/plugins/miradorAnnotationPlugin';
+import { render, screen, fireEvent } from './test-utils';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+}));
+jest.mock('mirador/dist/es/src/state/selectors', () => ({
+  getWindowViewType: jest.fn(),
+}));
+
+const defaultInitalState = {
+  config: {
+    annotation: {
+      adapter: jest.fn(),
+      exportLocalStorageAnnotations: true,
+    },
+  },
+};
 
 /** */
-function createWrapper(props) {
-  return shallow(
-    <miradorAnnotationPlugin.component
-      canvases={[]}
-      config={{}}
-      TargetComponent="<div>hello</div>"
-      targetProps={{}}
-      addCompanionWindow={jest.fn()}
-      receiveAnnotation={jest.fn()}
-      switchToSingleCanvasView={jest.fn()}
-      windowViewType="single"
-      {...props}
-    />,
-  );
+function createWrapper(props, initalState = defaultInitalState) {
+  const mockT = jest.fn().mockImplementation((key) => key);
+
+  return render(<MiradorAnnotation
+    canvases={[]}
+    config={{}}
+    TargetComponent={() => <div>hello</div>}
+    targetProps={{ windowId: 'windowId' }}
+    receiveAnnotation={jest.fn()}
+    switchToSingleCanvasView={jest.fn()}
+    annotationEditCompanionWindowIsOpened
+    t={mockT}
+    {...props}
+  />, { preloadedState: initalState });
 }
 
 describe('MiradorAnnotation', () => {
-  let wrapper;
   it('renders a create new button', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(MiradorMenuButton).props()['aria-label']).toBe('Create new annotation');
+    createWrapper();
+    const button = screen.getByRole('button', { name: /create_annotation/i });
+    expect(button).toBeInTheDocument();
   });
+
   it('opens a new companionWindow when clicked', () => {
-    const mockAddCompanionWindow = jest.fn();
-    const receiveAnnotationMock = jest.fn();
-    wrapper = createWrapper({
-      addCompanionWindow: mockAddCompanionWindow,
-      receiveAnnotation: receiveAnnotationMock,
-    });
-    wrapper.find(MiradorMenuButton).simulate('click');
-    expect(mockAddCompanionWindow).toHaveBeenCalledWith(
-      'annotationCreation',
-      {
-        position: 'right',
-      },
+    const mockDispatch = jest.fn();
+    useDispatch.mockImplementation(() => mockDispatch);
+
+    getWindowViewType.mockReturnValue('single');
+    createWrapper({});
+
+    const button = screen.getByRole('button', { name: /create_annotation/i });
+    fireEvent.click(button);
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    const dispatchedAction = mockDispatch.mock.calls[0][0];
+    expect(dispatchedAction).toEqual(
+      expect.objectContaining({
+        payload: expect.objectContaining({
+          content: 'annotationCreation',
+          position: 'right',
+        }),
+        type: 'mirador/ADD_COMPANION_WINDOW',
+        windowId: 'windowId',
+      }),
     );
   });
+
   it('opens single canvas view dialog if not in single view', () => {
-    wrapper = createWrapper({
-      windowViewType: 'book',
-    });
-    expect(wrapper.instance().state.singleCanvasDialogOpen).toBe(false);
-    wrapper.find(MiradorMenuButton).simulate('click');
-    expect(wrapper.instance().state.singleCanvasDialogOpen).toBe(true);
+    getWindowViewType.mockReturnValue('book');
+    createWrapper();
+
+    expect(screen.queryByText('switch_view')).toBeNull();
+    const button = screen.getByRole('button', { name: /create_annotation/i });
+    fireEvent.click(button);
+
+    expect(screen.queryByText('Switch to single view')).toBeInTheDocument();
   });
+
   it('renders no export button if export or LocalStorageAdapter are not configured', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(MiradorMenuButton).some({ 'aria-label': 'Export local annotations for visible items' })).toBe(false);
-
-    wrapper = createWrapper({
-      config: {
-        annotation: {
-          adapter: () => () => {},
-          exportLocalStorageAnnotations: true,
-        },
-      },
-    });
-    expect(wrapper.find(MiradorMenuButton).some({ 'aria-label': 'Export local annotations for visible items' })).toBe(false);
-
-    wrapper = createWrapper({
-      config: {
-        annotation: {
-          adapter: (canvasId) => new LocalStorageAdapter(`test://?canvasId=${canvasId}`),
-        },
-      },
-    });
-    expect(wrapper.find(MiradorMenuButton).some({ 'aria-label': 'Export local annotations for visible items' })).toBe(false);
+    // eslint-disable-next-line max-len
+    const stateWithoutLocalAdapter = { config: { annotation: { adapter: () => () => {}, exportLocalStorageAnnotations: true } } };
+    createWrapper({}, stateWithoutLocalAdapter);
+    const button = screen.queryByText(/Export local annotations for visible items/i);
+    expect(button).toBeNull();
+
+    const annotation = {
+      adapter: () => () => {}, exportLocalStorageAnnotations: false,
+    };
+
+    const stateWithFalsyExport = { config: annotation };
+    createWrapper({}, stateWithFalsyExport);
+    const button2 = screen.queryByText(/Export local annotations for visible items/i);
+    expect(button2).toBeNull();
   });
-  it('renders export button if export and LocalStorageAdapter are configured', () => {
-    wrapper = createWrapper({
-      config: {
-        annotation: {
-          adapter: (canvasId) => new LocalStorageAdapter(`test://?canvasId=${canvasId}`),
-          exportLocalStorageAnnotations: true,
-        },
-      },
-    });
-    expect(wrapper.find(MiradorMenuButton).some({ 'aria-label': 'Export local annotations for visible items' })).toBe(true);
+
+  xit('renders export button if export and LocalStorageAdapter are configured', () => {
+    const annotation = {
+      adapter: () => new LocalStorageAdapter(),
+      exportLocalStorageAnnotations: true,
+    };
+
+    const initalState = { config: { annotation } };
+    createWrapper({}, initalState);
+
+    const button = screen.getByRole('button', { name: /Export local annotations for visible items/i });
+    expect(button).toBeInTheDocument();
   });
 });

package/__tests__/style-mock.js

@@ -0,0 +1 @@
+module.exports = {};

package/__tests__/test-utils.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
+import settings from 'mirador/dist/es/src/config/settings';
+
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { render } from '@testing-library/react';
+import { createStore, applyMiddleware } from 'redux';
+import { thunk } from 'redux-thunk';
+import PropTypes from 'prop-types';
+
+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 };

package/demo/src/index.js

@@ -2,19 +2,22 @@ import mirador from 'mirador/dist/es/src/index';
 import annotationPlugins from '../../src';
 import LocalStorageAdapter from '../../src/annotationAdapter/LocalStorageAdapter';
 import { manifestsCatalog } from './manifestsCatalog';
+import { quillConfig } from './quillConfig';
 
 const config = {
   annotation: {
     adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`, 'Anonymous User'),
+    allowTargetShapesStyling: false,
     commentTemplates: [{
+      content: '<h4>Comment</h4><p>Comment content</p>',
       title: 'Template',
-      content: '<h4>Comment</h4><p>comment content</p>',
     },
     {
+      content: '<h4>Comment2</h4><p>Comment content</p>',
       title: 'Template 2',
-      content: '<h4>Comment2</h4><p>comment content</p>',
     }],
-    exportLocalStorageAnnotations: false, // display annotation JSON export button
+    exportLocalStorageAnnotations: false,
+    quillConfig,
     tagsSuggestions: ['Mirador', 'Awesome', 'Viewer', 'IIIF', 'Template'],
   },
   annotations: {
@@ -66,7 +69,9 @@ const config = {
     defaultSideBarPanel: 'annotations',
     sideBarOpenByDefault: true,
   },
-  windows: [],
+  windows: [
+    { manifestId: ' https://iiif.harvardartmuseums.org/manifests/object/299843' },
+  ],
 };
 
 mirador.viewer(config, [...annotationPlugins]);

package/demo/src/quillConfig.js

@@ -0,0 +1,34 @@
+export const quillConfig = {
+  // https://quilljs.com/docs/formats
+  formats: [
+    'header',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'blockquote',
+    'list',
+    'bullet',
+    'indent',
+    'link',
+    'image',
+    'color',
+    'background',
+  ],
+  // https://quilljs.com/docs/modules/toolbar/
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+      [
+        { list: 'ordered' },
+        { list: 'bullet' },
+        { indent: '-1' },
+        { indent: '+1' },
+      ],
+      [{ color: [] }, { background: [] }],
+      ['link', 'image'],
+      ['clean'],
+    ],
+  },
+};