@pie-lib/editable-html 13.1.0-beta.2 → 13.1.0-beta.3

package/src/plugins/table/__tests__/index.test.jsx

@@ -1,401 +0,0 @@
-import EditTable from 'slate-edit-table';
-import TablePlugin, { parseStyleString, reactAttributes, serialization } from '../index';
-import { Block, Data, PathUtils } from 'slate';
-import React from 'react';
-
-jest.mock('slate-edit-table', () => {
-  const mock = {
-    default: jest.fn().mockReturnThis(),
-    utils: {
-      isSelectionInTable: jest.fn().mockReturnValue(true),
-      createTable: jest.fn(function (c) {
-        return {
-          toJSON: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
-        };
-      }),
-    },
-    changes: {
-      insertTable: jest.fn(function (c) {
-        return c;
-      }),
-    },
-  };
-
-  return jest.fn().mockReturnValue(mock);
-});
-
-describe('table', () => {
-  describe('toolbar', () => {
-    describe('onClick', () => {
-      let plugin;
-      let onChange;
-      let findDescendant;
-      let insertBlock;
-      let changeMock;
-
-      beforeEach(() => {
-        plugin = TablePlugin();
-        onChange = jest.fn();
-        insertBlock = jest.fn();
-        findDescendant = jest.fn();
-        changeMock = jest.fn().mockReturnValue({
-          insertBlock,
-          value: {
-            document: {
-              findDescendant,
-            },
-          },
-        });
-      });
-
-      it('calls utils.createTable', () => {
-        plugin.toolbar.onClick({ change: changeMock }, onChange);
-
-        expect(EditTable().utils.createTable).toHaveBeenCalledWith(2, 2);
-      });
-
-      it('creates table with border: 1 as default', () => {
-        plugin.toolbar.onClick({ change: changeMock }, onChange);
-
-        expect(insertBlock).toHaveBeenCalledWith(
-          Block.create({ key: '2', type: 'table', data: { border: '1', newTable: true } }),
-        );
-      });
-
-      it('moves cursor to first cell of the table and removes the newTable property', () => {
-        const dataRemoveFn = jest.fn().mockReturnValue({ border: '1' });
-        const setNodeByKey = jest.fn();
-        const newTableBlock = {
-          key: '2',
-          data: {
-            remove: dataRemoveFn,
-          },
-        };
-        const collapseToStartOf = jest.fn();
-
-        changeMock = jest.fn().mockReturnValue({
-          insertBlock,
-          collapseToStartOf,
-          setNodeByKey,
-          value: {
-            document: {
-              findDescendant: jest.fn().mockReturnValue(newTableBlock),
-            },
-          },
-        });
-        plugin.toolbar.onClick({ change: changeMock }, onChange);
-
-        expect(collapseToStartOf).toHaveBeenCalledWith(newTableBlock);
-        expect(dataRemoveFn).toHaveBeenCalledWith('newTable');
-        expect(setNodeByKey).toHaveBeenCalledWith('2', { data: { border: '1' } });
-      });
-    });
-
-    describe('supports', () => {
-      const assertSupports = (inTable, object, expected) => {
-        it(`inTable: ${inTable}, type: ${object} => ${expected}`, () => {
-          EditTable().utils.isSelectionInTable.mockReturnValue(inTable);
-          const plugin = TablePlugin();
-          const supports = plugin.toolbar.supports({ object });
-          expect(supports).toEqual(expected);
-        });
-      };
-
-      assertSupports(true, 'block', true);
-      assertSupports(false, 'block', false);
-      assertSupports(true, 'inline', false);
-      assertSupports(false, 'inline', false);
-    });
-
-    describe('customToolbar', () => {
-      describe('toggleBorder', () => {
-        const assertToggle = (border, expectedBorder) => {
-          describe(`with initial border of ${border}`, () => {
-            let change;
-            let done;
-
-            beforeEach(() => {
-              const plugin = TablePlugin();
-              change = {
-                setNodeByKey: jest.fn().mockReturnThis(),
-              };
-              plugin.utils.getTableBlock = jest.fn().mockReturnValue({
-                key: 'tableKey',
-                data: Data.create({ border }),
-              });
-              const node = { key: 'nodeKey' };
-              const value = {
-                change: jest.fn().mockReturnValue(change),
-              };
-              done = jest.fn();
-              const Comp = plugin.toolbar.customToolbar(node, value, done);
-              const c = Comp();
-              c.props.onToggleBorder();
-            });
-
-            it(`calls setNodeByKey with ${expectedBorder}`, () => {
-              expect(change.setNodeByKey).toHaveBeenCalledWith('tableKey', {
-                data: Data.create({ border: expectedBorder }),
-              });
-            });
-
-            it('calls onToolbarDone', () => {
-              expect(done).toHaveBeenCalledWith(change, false);
-            });
-          });
-        };
-
-        assertToggle(null, '1');
-        assertToggle(undefined, '1');
-        assertToggle('0', '1');
-        assertToggle('1', '0');
-        assertToggle('2', '0');
-      });
-    });
-
-    describe('normalizeNode', () => {
-      it('should exit the function if the node is not of type document', () => {
-        const tablePlugin = TablePlugin();
-        const returnValue = tablePlugin.normalizeNode({ object: 'table' });
-
-        expect(returnValue).toEqual(undefined);
-      });
-
-      it('should exit there are no changes needed', () => {
-        const tablePlugin = TablePlugin();
-        const nodes = {
-          size: 3,
-          findLastIndex: jest.fn().mockReturnValue(1),
-        };
-        const returnValue = tablePlugin.normalizeNode({
-          object: 'document',
-          nodes,
-          findDescendant: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
-          getParent: jest.fn().mockReturnValue(undefined),
-        });
-        expect(returnValue).toEqual(undefined);
-      });
-
-      it('should return a function if a table does not have a node before or after it', () => {
-        const tablePlugin = TablePlugin();
-        const nodes = [
-          {
-            object: 'block',
-            type: 'table',
-            key: '99',
-            data: Data.create({
-              newTable: true,
-            }),
-          },
-        ];
-        const findDescendant = jest.fn((callback) => {
-          nodes.forEach((n) => callback(n));
-        });
-        const change = {
-          insertNodeByPath: jest.fn(),
-          value: {
-            document: {
-              getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
-            },
-          },
-        };
-
-        const returnValue = tablePlugin.normalizeNode({
-          object: 'document',
-          findDescendant,
-          getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
-          getPreviousNode: jest.fn().mockReturnValue(undefined),
-          getNextNode: jest.fn().mockReturnValue(undefined),
-        });
-
-        expect(returnValue).toEqual(expect.any(Function));
-
-        returnValue(change);
-
-        expect(change.insertNodeByPath).toHaveBeenCalledWith([0], 0, {
-          object: 'block',
-          type: 'div',
-        });
-      });
-    });
-  });
-});
-
-describe('parseStyleString', () => {
-  const parses = (s, expected) => {
-    it(`parses ${s} -> ${JSON.stringify(expected)}`, () => {
-      const result = parseStyleString(s);
-      expect(result).toEqual(expected);
-    });
-  };
-  parses(' width: 10px ', { width: '10px' });
-  parses(' width: 10px; ', { width: '10px' });
-  parses(' border-width: 10px; ', { 'border-width': '10px' });
-  parses(' border: solid 1px red; height: 1px', {
-    border: 'solid 1px red',
-    height: '1px',
-  });
-});
-
-describe('toStyleString', () => {
-  const styleString = (o, expected) => {
-    it(`${JSON.stringify(s)} -> ${expected}`, () => {
-      const result = toStyleString(o);
-      expect(result).toEqual(expected);
-    });
-  };
-});
-
-describe('reactAttributes', () => {
-  const attributes = (o, expected) => {
-    it(`${JSON.stringify(o)} -> ${JSON.stringify(expected)}`, () => {
-      const result = reactAttributes(o);
-      expect(result).toEqual(expected);
-    });
-  };
-  attributes({ 'border-width': '10px', 'line-height': 1.56 }, { borderWidth: '10px', lineHeight: '1.56' });
-});
-
-describe('serialization', () => {
-  describe('deserialize', () => {
-    let next;
-
-    beforeEach(() => {
-      next = jest.fn().mockReturnValue([]);
-    });
-
-    describe('table', () => {
-      let el;
-      let out;
-      beforeEach(() => {
-        el = {
-          tagName: 'table',
-          children: [],
-          getAttribute: jest.fn((name) => {
-            switch (name) {
-              case 'border':
-                return '1';
-              case 'cellspacing':
-                return '2';
-              case 'cellpadding':
-                return '3';
-              case 'class':
-                return 'table-class';
-              case 'style':
-                return 'width: 10px';
-            }
-          }),
-        };
-        out = serialization.deserialize(el, next);
-      });
-
-      const assertData = (name, value) => {
-        it(`data.${name} should eql ${value}`, () => {
-          expect(out.data[name]).toEqual(value);
-        });
-      };
-
-      assertData('border', '1');
-      assertData('cellspacing', '2');
-      assertData('cellpadding', '3');
-      assertData('class', 'table-class');
-      assertData('style', { width: '10px' });
-      it('returns a table block', () => {
-        expect(out).toMatchObject({
-          object: 'block',
-          type: 'table',
-          nodes: [],
-        });
-      });
-    });
-
-    it('deserializes tr', () => {
-      const el = {
-        tagName: 'tr',
-        children: [],
-      };
-
-      const out = serialization.deserialize(el, next);
-
-      expect(out).toEqual({
-        object: 'block',
-        type: 'table_row',
-        nodes: [],
-      });
-    });
-
-    it('deserializes td', () => {
-      const el = {
-        tagName: 'td',
-        childNodes: [],
-        getAttribute: jest.fn(function (name) {
-          const o = {
-            class: 'class name',
-            colspan: '1',
-            rowspan: '1',
-          };
-          return o[name];
-        }),
-      };
-
-      const out = serialization.deserialize(el, next);
-
-      expect(out).toEqual({
-        object: 'block',
-        type: 'table_cell',
-        nodes: [],
-        data: {
-          colspan: '1',
-          rowspan: '1',
-          class: 'class name',
-          header: false,
-        },
-      });
-    });
-  });
-
-  describe('serialize', () => {
-    it('serializes table', () => {
-      const el = serialization.serialize({
-        object: 'block',
-        type: 'table',
-        nodes: [],
-        data: Data.create({
-          border: '1',
-          cellpadding: '2',
-          cellspacing: '3',
-        }),
-      });
-
-      expect(el).toEqual(
-        <table border="1" cellPadding="2" cellSpacing="3">
-          <tbody />
-        </table>,
-      );
-    });
-
-    it('serializes table_row', () => {
-      const el = serialization.serialize({
-        object: 'block',
-        type: 'table_row',
-        nodes: [],
-      });
-
-      expect(el).toEqual(<tr />);
-    });
-    it('serializes table_cell', () => {
-      const el = serialization.serialize({
-        object: 'block',
-        type: 'table_cell',
-        nodes: [],
-        data: Data.create({
-          header: false,
-          style: { width: '10px' },
-          class: 'foo',
-        }),
-      });
-
-      expect(el).toEqual(<td style={{ width: '10px' }} className={'foo'} />);
-    });
-  });
-});

package/src/plugins/table/__tests__/table-toolbar.test.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { TableToolbar } from '../table-toolbar';
-
-describe('table-toolbar', () => {
-  let onDone, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow, onRemoveTable, onToggleBorder;
-
-  beforeEach(() => {
-    onAddColumn = jest.fn();
-    onAddRow = jest.fn();
-    onRemoveColumn = jest.fn();
-    onRemoveRow = jest.fn();
-    onRemoveTable = jest.fn();
-    onDone = jest.fn();
-    onToggleBorder = jest.fn();
-  });
-
-  const renderComponent = (extras = {}) => {
-    const props = {
-      onDone,
-      onAddRow,
-      onRemoveRow,
-      onAddColumn,
-      onRemoveColumn,
-      onRemoveTable,
-      hasBorder: true,
-      onToggleBorder,
-      classes: {
-        tableToolbar: 'table-toolbar',
-      },
-      plugins: [],
-      value: {},
-      onChange: jest.fn(),
-      ...extras,
-    };
-
-    return render(<TableToolbar {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders toolbar without crashing', () => {
-      const { container } = renderComponent();
-
-      // Check that the toolbar container is rendered
-      expect(container.firstChild).toBeInTheDocument();
-
-      // Check for Done button (only one with aria-label)
-      expect(screen.getByLabelText('Done')).toBeInTheDocument();
-
-      // Check that there are multiple buttons (table manipulation buttons)
-      const buttons = container.querySelectorAll('button');
-      expect(buttons.length).toBeGreaterThan(1);
-    });
-
-    it('renders with hasBorder prop', () => {
-      const { container } = renderComponent({ hasBorder: false });
-
-      expect(container.firstChild).toBeInTheDocument();
-
-      // Verify hasBorder affects rendering - button with aria-pressed attribute
-      const borderButton = container.querySelector('button[aria-pressed]');
-      expect(borderButton).toBeInTheDocument();
-      expect(borderButton).toHaveAttribute('aria-pressed', 'false');
-    });
-
-    it('renders with hasBorder true', () => {
-      const { container } = renderComponent({ hasBorder: true });
-
-      // Verify hasBorder affects rendering
-      const borderButton = container.querySelector('button[aria-pressed]');
-      expect(borderButton).toBeInTheDocument();
-      expect(borderButton).toHaveAttribute('aria-pressed', 'true');
-    });
-  });
-});

package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Value } from 'slate';
-import { DefaultToolbar } from '../default-toolbar';
-
-// Mock the DoneButton component directly to avoid styled component issues
-jest.mock('../done-button', () => ({
-  DoneButton: (props) => (
-    <button aria-label="Done" onClick={props.onClick} data-testid="done-button">
-      Done
-    </button>
-  ),
-  RawDoneButton: (props) => (
-    <button aria-label="Done" onClick={props.onClick} className="RawDoneButton">
-      Done
-    </button>
-  ),
-}));
-
-describe('default-toolbar', () => {
-  let onDone;
-  let onChange;
-  let getFocusedValue;
-  let defaultProps;
-
-  beforeEach(() => {
-    onDone = jest.fn();
-    onChange = jest.fn();
-    getFocusedValue = jest.fn();
-
-    defaultProps = {
-      classes: {},
-      value: Value.fromJSON({}),
-      plugins: [],
-      className: 'className',
-      onDone,
-      onChange,
-      getFocusedValue,
-      deletable: false,
-      showDone: true,
-    };
-  });
-
-  describe('rendering', () => {
-    it('renders toolbar', () => {
-      const { container } = render(<DefaultToolbar {...defaultProps} deletable={false} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with 1 plugin', () => {
-      const { container } = render(
-        <DefaultToolbar {...defaultProps} plugins={[{ toolbar: { icon: <span>Icon1</span> }, name: 'plugin-one' }]} />,
-      );
-
-      expect(container.firstChild).toBeInTheDocument();
-      // Should render plugin toolbar button
-    });
-
-    it('renders with 2 plugins', () => {
-      const { container } = render(
-        <DefaultToolbar
-          {...defaultProps}
-          plugins={[
-            { toolbar: { icon: <span>Icon1</span> }, name: 'plugin-one' },
-            { toolbar: { icon: <span>Icon2</span> }, name: 'plugin-two' },
-          ]}
-        />,
-      );
-
-      expect(container.firstChild).toBeInTheDocument();
-      // Should render both plugin toolbar buttons
-    });
-
-    it('renders only enabled plugins when one is disabled', () => {
-      const { container } = render(
-        <DefaultToolbar
-          {...defaultProps}
-          pluginProps={{
-            'plugin-one': {
-              disabled: true,
-            },
-          }}
-          plugins={[
-            { toolbar: { icon: <span>Icon1</span> }, name: 'plugin-one' },
-            { toolbar: { icon: <span>Icon2</span> }, name: 'plugin-two' },
-          ]}
-        />,
-      );
-
-      expect(container.firstChild).toBeInTheDocument();
-      // Only plugin-two should be rendered (plugin-one is disabled)
-    });
-
-    it('renders done button when not deletable', () => {
-      render(<DefaultToolbar {...defaultProps} deletable={false} />);
-
-      expect(screen.getByLabelText('Done')).toBeInTheDocument();
-    });
-
-    it('does not render done button when deletable', () => {
-      render(<DefaultToolbar {...defaultProps} deletable={true} />);
-
-      expect(screen.queryByLabelText('Done')).not.toBeInTheDocument();
-    });
-
-    it('does not render done button when showDone is false', () => {
-      render(<DefaultToolbar {...defaultProps} showDone={false} deletable={false} />);
-
-      expect(screen.queryByLabelText('Done')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('interactions', () => {
-    it('calls onDone when done button is clicked', async () => {
-      render(<DefaultToolbar {...defaultProps} deletable={false} />);
-
-      const doneButton = screen.getByLabelText('Done');
-      fireEvent.click(doneButton);
-
-      expect(onDone).toHaveBeenCalled();
-    });
-  });
-});

package/src/plugins/toolbar/__tests__/editor-and-toolbar.test.jsx

@@ -1,40 +0,0 @@
-import { classObject, mockIconButton } from '../../../__tests__/utils';
-
-import { Value } from 'slate';
-import { EditorAndToolbar } from '../editor-and-toolbar';
-import React from 'react';
-import debug from 'debug';
-import { render, screen } from '@testing-library/react';
-
-jest.mock('../toolbar', () => () => <div>---- toolbar ------ </div>);
-
-mockIconButton();
-
-const log = debug('@pie-lib:editable-html:test:editor-and-toolbar');
-
-describe('toolbar', () => {
-  let onDelete, classes;
-
-  beforeEach(() => {
-    onDelete = jest.fn();
-    classes = classObject('root', 'editorHolder', 'editorInFocus');
-  });
-
-  it('renders EditorAndToolbar component', () => {
-    const value = Value.fromJSON({});
-    Object.defineProperty(value, 'isFocused', { get: jest.fn(() => true) });
-
-    const { container } = render(
-      <EditorAndToolbar classes={classes} value={value} plugins={[]} onDone={jest.fn()} onChange={jest.fn()}>
-        children
-      </EditorAndToolbar>,
-    );
-
-    // Verify component rendered
-    expect(container.firstChild).toBeInTheDocument();
-    // Verify toolbar is present
-    expect(screen.getByText('---- toolbar ------')).toBeInTheDocument();
-    // Verify children are rendered
-    expect(screen.getByText('children')).toBeInTheDocument();
-  });
-});