test: add unit tests for helpers - refs #253277

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);
+  });
+});

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');
+  });
+});

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);
+  });
+});

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('');
+  });
+});