@eeacms/volto-eea-website-theme 1.22.1 → 1.24.0

package/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.test.jsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import ObjectBrowserWidgetComponent from './ObjectBrowserWidget';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore();
+let store;
+let history;
+
+describe('ObjectBrowserWidgetComponent', () => {
+  beforeEach(() => {
+    store = mockStore({
+      search: {
+        subrequests: {
+          'testBlock-multiple': {},
+          'testBlock-link': {},
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    history = createMemoryHistory();
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing with values, mode different than multiple, and description', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            value={[{ '@id': 'http://locahost:3000/test' }, { title: 'test2' }]}
+            mode="custom"
+            description="My description"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing with values, mode different than multiple and triggers the cancel function', () => {
+    const { container, getByPlaceholderText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            mode="custom"
+            description="My description"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+            allowExternals={true}
+            placeholder="My placeholder"
+          />
+        </Router>
+      </Provider>,
+    );
+
+    fireEvent.change(getByPlaceholderText('My placeholder'), {
+      target: { value: 'http://localhost:8080/Plone/test' },
+    });
+
+    expect(container.querySelector('button.cancel')).toBeInTheDocument();
+    fireEvent.click(container.querySelector('button.cancel'));
+
+    expect(container.querySelector('button.action')).toBeInTheDocument();
+    fireEvent.click(container.querySelector('button.action'));
+  });
+
+  it('renders without crashing with values, mode different than multiple with placeholder and triggers the cancel function', () => {
+    const { container, getByPlaceholderText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            mode="custom"
+            description="My description"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+            allowExternals={true}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(getByPlaceholderText('No items selected')).toBeInTheDocument();
+    fireEvent.change(getByPlaceholderText('No items selected'), {
+      target: { value: 'test' },
+    });
+
+    expect(container.querySelector('button.cancel')).toBeInTheDocument();
+    fireEvent.click(container.querySelector('button.cancel'));
+
+    expect(container.querySelector('button.action')).toBeInTheDocument();
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing with values, mode different than multiple and triggers for keydown, change and submit', () => {
+    const { container, getByPlaceholderText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            mode="custom"
+            description="My description"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+            allowExternals={true}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(getByPlaceholderText('No items selected')).toBeInTheDocument();
+    fireEvent.keyDown(getByPlaceholderText('No items selected'), {
+      key: 'Enter',
+      code: 'Enter',
+      charCode: 13,
+    });
+    fireEvent.keyDown(getByPlaceholderText('No items selected'), {
+      key: 'Escape',
+      code: 'Escape',
+      charCode: 27,
+    });
+    fireEvent.keyDown(getByPlaceholderText('No items selected'), {
+      key: 'A',
+      code: 'KeyA',
+    });
+
+    fireEvent.change(getByPlaceholderText('No items selected'), {
+      target: { value: 'http://localhost:3000/Plone/test' },
+    });
+
+    expect(container.querySelector('button.primary')).toBeInTheDocument();
+    fireEvent.click(container.querySelector('button.primary'));
+
+    fireEvent.click(container.querySelector('button.action'));
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing with values, mode different than multiple and triggers for click on the Popup', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ObjectBrowserWidgetComponent
+            id="my-widget"
+            title="My widget"
+            value={[{ '@id': 'http://locahost:3000/test', title: 'Title 1' }]}
+            description="My description"
+            onChange={() => {}}
+            openObjectBrowser={() => {}}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container.querySelector('.icon.right')).toBeInTheDocument();
+    fireEvent.click(container.querySelector('.icon.right'));
+    expect(container).toBeTruthy();
+  });
+});

package/src/customizations/volto/components/theme/Comments/Comments.test.jsx

@@ -0,0 +1,407 @@
+import React from 'react';
+import { Provider } from 'react-intl-redux';
+import { render, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import Comments from './Comments';
+import thunk from 'redux-thunk';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+
+const middleware = [thunk];
+const mockStore = configureStore(middleware);
+
+jest.mock('moment', () =>
+  jest.fn(() => ({
+    format: jest.fn(() => 'Tuesday, August 1, 2023 12:09 PM'),
+    fromNow: jest.fn(() => 'a few seconds ago'),
+  })),
+);
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+describe('Comments', () => {
+  it('renders a comments component', () => {
+    const props = {
+      addComment: jest.fn(),
+      deleteComment: jest.fn(),
+      listComments: jest.fn(),
+      listMoreComments: jest.fn(),
+      pathname: '/comments',
+      items: [
+        {
+          author_name: 'test',
+          creation_date: '2021-01-01',
+          text: {
+            data: 'test',
+            'mime-type': 'text/plain',
+          },
+          is_deletable: true,
+          is_editable: true,
+        },
+      ],
+      addRequest: { loading: false, loaded: false },
+      deleteRequest: { loading: false, loaded: false },
+    };
+    const store = mockStore({
+      comments: {
+        items: [
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171408',
+            author_name: 'admin',
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171409',
+            author_name: undefined,
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment', 'mime-type': 'text/html' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+        ],
+        permissions: {
+          view_comments: true,
+          can_reply: true,
+        },
+        add: {
+          loading: false,
+          loaded: true,
+        },
+        delete: {
+          loading: false,
+          loaded: true,
+        },
+        update: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Comments {...props} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a comments component withour viewing the comments', () => {
+    const props = {
+      addComment: jest.fn(),
+      deleteComment: jest.fn(),
+      listComments: jest.fn(),
+      listMoreComments: jest.fn(),
+      pathname: '/comments',
+      items: [
+        {
+          author_name: 'test',
+          creation_date: '2021-01-01',
+          text: {
+            data: 'test',
+            'mime-type': 'text/plain',
+          },
+          is_deletable: true,
+          is_editable: true,
+        },
+      ],
+      addRequest: { loading: false, loaded: false },
+      deleteRequest: { loading: false, loaded: false },
+    };
+    const store = mockStore({
+      comments: {
+        items: [
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171408',
+            author_name: 'admin',
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171409',
+            author_name: undefined,
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment', 'mime-type': 'text/html' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+        ],
+        permissions: {
+          view_comments: false,
+          can_reply: true,
+        },
+        add: {
+          loading: false,
+          loaded: true,
+        },
+        delete: {
+          loading: false,
+          loaded: true,
+        },
+        update: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Comments {...props} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a comments component without permissions', () => {
+    const props = {
+      addComment: jest.fn(),
+      deleteComment: jest.fn(),
+      listComments: jest.fn(),
+      listMoreComments: jest.fn(),
+      pathname: '/comments',
+      items: [
+        {
+          author_name: 'test',
+          creation_date: '2021-01-01',
+          text: {
+            data: 'test',
+            'mime-type': 'text/plain',
+          },
+          is_deletable: true,
+          is_editable: true,
+        },
+      ],
+      addRequest: { loading: false, loaded: false },
+      deleteRequest: { loading: false, loaded: false },
+    };
+    const store = mockStore({
+      comments: {
+        items: [
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171408',
+            author_name: 'admin',
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171409',
+            author_name: undefined,
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment', 'mime-type': 'text/html' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+        ],
+        permissions: undefined,
+        add: {
+          loading: false,
+          loaded: true,
+        },
+        delete: {
+          loading: false,
+          loaded: true,
+        },
+        update: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Comments {...props} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a comments component, fires onClick events on comment and rerenders', () => {
+    const props = {
+      addComment: jest.fn(),
+      deleteComment: jest.fn(),
+      listComments: jest.fn(),
+      listMoreComments: jest.fn(),
+      pathname: '/comments',
+      items: [
+        {
+          '@id': 'someurl',
+          comment_id: '1614094601171408',
+          author_name: 'admin',
+          creation_date: '2017-11-06T19:36:01',
+          text: { data: 'Some comment' },
+          is_deletable: true,
+          is_editable: true,
+          can_reply: true,
+        },
+        {
+          '@id': 'someurl',
+          comment_id: '1614094601171409',
+          author_name: undefined,
+          creation_date: '2017-11-06T19:36:01',
+          text: { data: 'Some comment', 'mime-type': 'text/html' },
+          is_deletable: true,
+          is_editable: true,
+          can_reply: true,
+          in_reply_to: '1614094601171408',
+        },
+        {
+          '@id': 'someurl',
+          comment_id: '1614094601171410',
+          author_name: undefined,
+          creation_date: '2017-11-06T19:36:01',
+          text: { data: 'Some comment', 'mime-type': 'text/html' },
+          is_deletable: true,
+          is_editable: true,
+          can_reply: true,
+          in_reply_to: '1614094601171408',
+        },
+      ],
+      items_total: 4,
+      addRequest: { loading: true, loaded: false },
+      deleteRequest: { loading: true, loaded: false },
+    };
+    const store = mockStore({
+      comments: {
+        items: [
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171408',
+            author_name: 'admin',
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+          },
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171409',
+            author_name: undefined,
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment', 'mime-type': 'text/html' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+            in_reply_to: '1614094601171408',
+          },
+          {
+            '@id': 'someurl',
+            comment_id: '1614094601171410',
+            author_name: undefined,
+            creation_date: '2017-11-06T19:36:01',
+            text: { data: 'Some comment', 'mime-type': 'text/html' },
+            is_deletable: true,
+            is_editable: true,
+            can_reply: true,
+            in_reply_to: '1614094601171408',
+          },
+        ],
+        items_total: 4,
+        permissions: {
+          view_comments: true,
+          can_reply: true,
+        },
+        add: {
+          loading: true,
+          loaded: false,
+        },
+        delete: {
+          loading: true,
+          loaded: false,
+        },
+        update: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const { container, rerender } = render(
+      <Provider store={store}>
+        <Comments {...props} />
+      </Provider>,
+    );
+
+    const actions = container.querySelectorAll('.actions a');
+
+    fireEvent.click(container.querySelector('a[aria-label="Reply"]'));
+    fireEvent.click(container.querySelector('a[aria-label="Edit"]'));
+    fireEvent.click(container.querySelector('a[aria-label="Delete"]'));
+    fireEvent.click(actions[actions.length - 1]);
+    fireEvent.click(
+      container.querySelector('#comment-add-id button[aria-label="Comment"]'),
+    );
+    fireEvent.click(container.querySelector('.ui.blue.basic.fluid.button'));
+
+    rerender(
+      <Provider store={store}>
+        <Comments
+          {...props}
+          pathname={'/new-comments'}
+          addRequest={{ loading: true, loaded: true }}
+        />
+      </Provider>,
+    );
+
+    rerender(
+      <Provider store={store}>
+        <Comments
+          {...props}
+          pathname={'/new-comments'}
+          addRequest={{ loading: true, loaded: true }}
+        />
+      </Provider>,
+    );
+
+    rerender(
+      <Provider store={store}>
+        <Comments
+          {...props}
+          pathname={'/new-comments'}
+          addRequest={{ loading: false, loaded: false }}
+          deleteRequest={{ loading: true, loaded: true }}
+        />
+      </Provider>,
+    );
+  });
+});