@eeacms/volto-tabs-block 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [5.0.5](https://github.com/eea/volto-tabs-block/compare/5.0.4...5.0.5) - 4 July 2023
+
+#### :hammer_and_wrench: Others
+
+- set gutter on carousel [Miu Razvan - [`ccea0b6`](https://github.com/eea/volto-tabs-block/commit/ccea0b6c4c5dd49afe8de127df10751239f6a5fa)]
+### [5.0.4](https://github.com/eea/volto-tabs-block/compare/5.0.3...5.0.4) - 13 June 2023
+
+#### :hammer_and_wrench: Others
+
+- test: add unit tests for helpers - refs #253277 [ana-oprea - [`aa270d7`](https://github.com/eea/volto-tabs-block/commit/aa270d7db0da5086d48378a6ccf503e563805d72)]
 ### [5.0.3](https://github.com/eea/volto-tabs-block/compare/5.0.2...5.0.3) - 12 June 2023
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "5.0.3",
+  "version": "5.0.5",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/templates/accordion/Edit.jsx

@@ -8,10 +8,8 @@ import Tabs from 'react-responsive-tabs';
 import AnimateHeight from 'react-animate-height';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import { BlocksForm } from '@plone/volto/components';
-import { Icon } from 'semantic-ui-react';
-import { Menu, Input } from 'semantic-ui-react';
-import { Icon as VoltoIcon } from '@plone/volto/components';
+import { Menu, Input, Icon } from 'semantic-ui-react';
+import { Icon as VoltoIcon, BlocksForm } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';

package/src/helpers.test.js

@@ -0,0 +1,118 @@
+import {
+  empty,
+  emptyTab,
+  scrollToTarget,
+  getParentTabFromHash,
+} from './helpers';
+import { emptyBlocksForm } from '@plone/volto/helpers';
+import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
+
+jest.mock('@plone/volto/helpers', () => ({
+  emptyBlocksForm: jest.fn(),
+}));
+
+jest.mock('@eeacms/volto-anchors/helpers', () => ({
+  visitBlocks: jest.fn(),
+  toSlug: jest.fn(),
+}));
+
+describe('empty function', () => {
+  it('returns a tab block with unique ID', () => {
+    emptyBlocksForm.mockReturnValue({});
+    const result = empty();
+    expect(Object.keys(result.blocks)).toHaveLength(1);
+    expect(result.blocks[Object.keys(result.blocks)[0]]['@type']).toEqual(
+      'tab',
+    );
+    expect(result.blocks_layout.items).toEqual([Object.keys(result.blocks)[0]]);
+  });
+});
+
+describe('emptyTab function', () => {
+  it('returns a tab block', () => {
+    emptyBlocksForm.mockReturnValue({});
+    const result = emptyTab();
+    expect(result['@type']).toEqual('tab');
+  });
+});
+
+describe('scrollToTarget', () => {
+  it('should call window.scrollTo with the correct arguments', () => {
+    window.scrollTo = jest.fn();
+
+    const mockElement = {
+      getBoundingClientRect: jest.fn(),
+    };
+
+    document.body.getBoundingClientRect = jest.fn(() => ({ top: 100 }));
+    mockElement.getBoundingClientRect.mockReturnValue({ top: 200 });
+
+    scrollToTarget(mockElement, 50);
+
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      top: 50,
+      behavior: 'smooth',
+    });
+  });
+
+  it('should call window.scrollTo with the correct arguments with offsetHeight not provided', () => {
+    window.scrollTo = jest.fn();
+
+    const mockElement = {
+      getBoundingClientRect: jest.fn(),
+    };
+
+    document.body.getBoundingClientRect = jest.fn(() => ({ top: 100 }));
+    mockElement.getBoundingClientRect.mockReturnValue({ top: 200 });
+
+    scrollToTarget(mockElement);
+
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      top: 100,
+      behavior: 'smooth',
+    });
+  });
+});
+
+describe('getParentTabFromHash function', () => {
+  beforeEach(() => {
+    visitBlocks.mockClear();
+    toSlug.mockClear();
+  });
+
+  it('returns parentBlockId if slug is not matching urlHash', () => {
+    const urlHash = 'slug';
+    const tabsBlockData = { data: 'test' };
+    const parentBlockId = 'parentBlockId';
+    const dataForCallback = { '@type': 'tab', plaintext: urlHash };
+
+    visitBlocks.mockImplementation((data, callback) => {
+      callback([parentBlockId, dataForCallback]);
+    });
+    toSlug.mockReturnValue(urlHash);
+
+    const result = getParentTabFromHash(tabsBlockData, urlHash);
+    expect(result).toEqual(parentBlockId);
+  });
+
+  it('returns null if slug is matching urlHash', () => {
+    const urlHash = 'slug';
+    const tabsBlockData = { data: 'test' };
+    const parentBlockId = 'parentBlockId';
+    const dataForCallback = { '@type': 'tab', plaintext: 'notMatchingSlug' };
+
+    visitBlocks.mockImplementation((data, callback) => {
+      callback([parentBlockId, dataForCallback]);
+    });
+    toSlug.mockReturnValue('notMatchingSlug');
+
+    const result = getParentTabFromHash(tabsBlockData, urlHash);
+    expect(result).toEqual(null);
+  });
+
+  it('returns null if urlHash is not provided', () => {
+    const tabsBlockData = { data: 'test' };
+    const result = getParentTabFromHash(tabsBlockData, null);
+    expect(result).toEqual(null);
+  });
+});

package/src/less/carousel.less

@@ -301,6 +301,7 @@
           &.ui.container {
             margin-right: 1.5rem !important;
             margin-left: 1.5em !important;
+            --m-gutter: 1.5em;
           }
         }
       }

package/src/utils/SimpleMarkdown.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SimpleMarkdown from './SimpleMarkdown';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('SimpleMarkdown', () => {
+  it('renders empty when no markdown is provided', () => {
+    const { container } = render(<SimpleMarkdown />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders pararaph with the tag provided when no text is provided with the markdown', () => {
+    const { getByText } = render(<SimpleMarkdown md="#" />);
+    expect(getByText('#').tagName).toBe('P');
+  });
+
+  it('renders paragraph when no tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="test test" />);
+    expect(getByText('test test').tagName).toBe('P');
+  });
+
+  it('renders h1 when # tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="# test test" />);
+    expect(getByText('test test').tagName).toBe('H1');
+  });
+
+  it('renders h2 when ## tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="## test test" />);
+    expect(getByText('test test').tagName).toBe('H2');
+  });
+
+  it('renders h3 when ### tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="### test test" />);
+    expect(getByText('test test').tagName).toBe('H3');
+  });
+
+  it('renders h4 when #### tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="#### test test" />);
+    expect(getByText('test test').tagName).toBe('H4');
+  });
+
+  it('renders h5 when ##### tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="##### test test" />);
+    expect(getByText('test test').tagName).toBe('H5');
+  });
+  it('renders h6 when ###### tag is provided', () => {
+    const { getByText } = render(<SimpleMarkdown md="###### test test" />);
+    expect(getByText('test test').tagName).toBe('H6');
+  });
+});

package/src/utils/dimensions.test.js

@@ -0,0 +1,130 @@
+import {
+  positionedOffset,
+  getDocumentHeight,
+  getDocumentWidth,
+} from './dimensions';
+
+describe('positionedOffset', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `<div id="container">
+        <div id="element" style="height: 50px; width: 50px;"></div>
+      </div>`;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('returns correct offset position', () => {
+    const element = document.querySelector('#element');
+    const container = document.querySelector('#container');
+
+    jest.spyOn(element, 'offsetTop', 'get').mockReturnValue(100);
+    jest.spyOn(element, 'offsetLeft', 'get').mockReturnValue(200);
+    jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetWidth', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetParent', 'get').mockReturnValue(container);
+
+    jest.spyOn(container, 'scrollHeight', 'get').mockReturnValue(500);
+    jest.spyOn(container, 'scrollWidth', 'get').mockReturnValue(500);
+
+    const result = positionedOffset(element, container);
+
+    expect(result).toEqual({
+      top: 100,
+      left: 200,
+      bottom: 350,
+      right: 250,
+      _container: container,
+    });
+  });
+
+  it('returns correct offset position when container is undefined', () => {
+    document.body.innerHTML = `
+      <div id="element" style="height: 50px; width: 50px;" />
+    `;
+    const element = document.getElementById('element');
+
+    jest.spyOn(element, 'offsetTop', 'get').mockReturnValue(100);
+    jest.spyOn(element, 'offsetLeft', 'get').mockReturnValue(200);
+    jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetWidth', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetParent', 'get').mockReturnValue(document.body);
+
+    jest.spyOn(document.body, 'scrollHeight', 'get').mockReturnValue(500);
+    jest.spyOn(document.body, 'scrollWidth', 'get').mockReturnValue(500);
+
+    const result = positionedOffset(element, undefined);
+    expect(result).toEqual({
+      top: 100,
+      left: 200,
+      bottom: 350,
+      right: 250,
+      _container: document.documentElement,
+    });
+  });
+
+  it('returns undefined when container is not an HTML element', () => {
+    document.body.innerHTML = `
+      <div id="element" style="height: 50px; width: 50px;" />
+    `;
+    const element = document.getElementById('element');
+
+    jest.spyOn(element, 'offsetTop', 'get').mockReturnValue(100);
+    jest.spyOn(element, 'offsetLeft', 'get').mockReturnValue(200);
+    jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetWidth', 'get').mockReturnValue(50);
+    jest.spyOn(element, 'offsetParent', 'get').mockReturnValue(document.body);
+
+    jest.spyOn(document.body, 'scrollHeight', 'get').mockReturnValue(500);
+    jest.spyOn(document.body, 'scrollWidth', 'get').mockReturnValue(500);
+
+    const result = positionedOffset(element, 'not an HTML element');
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined when element is not part of DOM', () => {
+    const detachedElement = document.createElement('div');
+    const result = positionedOffset(detachedElement, null);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined when documentElement does not exist', () => {
+    document.body.innerHTML = `
+      <div id="element" style="height: 50px; width: 50px;" />
+    `;
+    const element = document.getElementById('element');
+
+    jest.spyOn(document, 'documentElement', 'get').mockReturnValue(null);
+
+    const result = positionedOffset(element, null);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined when ownerDocument does not exist', () => {
+    document.body.innerHTML = `
+      <div id="element" style="height: 50px; width: 50px;" />
+    `;
+
+    const element = document.getElementById('element');
+
+    jest.spyOn(element, 'ownerDocument', 'get').mockReturnValue(null);
+
+    const result = positionedOffset(element, null);
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('getDocumentHeight', () => {
+  it('returns maximum height', () => {
+    const result = getDocumentHeight(document.body, document.documentElement);
+    expect(result).toBe(0);
+  });
+});
+
+describe('getDocumentWidth', () => {
+  it('returns maximum width', () => {
+    const result = getDocumentWidth(document.body, document.documentElement);
+    expect(result).toBe(0);
+  });
+});

package/src/utils/index.test.js

@@ -0,0 +1,84 @@
+import { getMenuPosition, toggleItem } from './index';
+
+describe('getMenuPosition', () => {
+  it('returns correct position object for top', () => {
+    expect(getMenuPosition({ menuPosition: 'top' })).toEqual({
+      direction: 'top',
+    });
+  });
+
+  it('returns correct position object for bottom', () => {
+    expect(getMenuPosition({ menuPosition: 'bottom' })).toEqual({
+      attached: 'bottom',
+      direction: 'bottom',
+    });
+  });
+
+  it('returns correct position object for left side', () => {
+    expect(getMenuPosition({ menuPosition: 'left side' })).toEqual({
+      vertical: true,
+      direction: 'left',
+    });
+  });
+
+  it('returns correct position object for right side', () => {
+    expect(getMenuPosition({ menuPosition: 'right side' })).toEqual({
+      vertical: true,
+      direction: 'right',
+    });
+  });
+});
+
+describe('toggleItem', () => {
+  it('toggles visibility of item and related item', () => {
+    document.body.innerHTML = `<div id="container">
+        <div id="item"></div>
+        <div id="relatedItem"></div>
+      </div>`;
+    const container = document.getElementById('container');
+    const item = document.getElementById('item');
+    const relatedItem = document.getElementById('relatedItem');
+
+    relatedItem.setAttribute('underline-item-data', 'test-data');
+    item.setAttribute('item-data', 'test-data');
+
+    item.style.visibility = '';
+    relatedItem.hidden = false;
+
+    toggleItem(container, item, true);
+    expect(item.style.visibility).toBe('hidden');
+  });
+
+  it('handles when no related item is present', () => {
+    document.body.innerHTML = `<div id="container">
+        <div id="item"></div>
+      </div>`;
+    const container = document.getElementById('container');
+    const item = document.getElementById('item');
+    item.setAttribute('item-data', 'test-data');
+
+    item.style.visibility = '';
+
+    toggleItem(container, item, true);
+    expect(item.style.visibility).toBe('hidden');
+
+    toggleItem(container, item, false);
+    expect(item.style.visibility).toBe('');
+  });
+
+  it('handles when no item-data is present', () => {
+    document.body.innerHTML = `<div id="container">
+        <div id="item"></div>
+      </div>`;
+    const container = document.getElementById('container');
+    const item = document.getElementById('item');
+
+    item.style.visibility = '';
+
+    toggleItem(container, item, true);
+    expect(item.style.visibility).toBe('hidden');
+
+    toggleItem(container, item, false);
+    expect(item.style.visibility).toBe('');
+  });
+});