@pie-lib/editable-html 13.0.13 → 13.0.14-beta.2

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

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

@@ -1,97 +0,0 @@
-import { classObject } from '../../../__tests__/utils';
-import { RawButton, RawMarkButton } from '../toolbar-buttons';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// Mock IconButton
-jest.mock('@mui/material/IconButton', () => {
-  return function IconButton({ children, onClick, className }) {
-    return (
-      <button onClick={onClick} className={className} data-testid="icon-button">
-        {children}
-      </button>
-    );
-  };
-});
-
-describe('Button', () => {
-  const onClick = jest.fn();
-
-  beforeEach(() => {
-    onClick.mockClear();
-  });
-
-  it('renders with children', () => {
-    const classes = classObject('root');
-    render(
-      <RawButton onClick={onClick} classes={classes}>
-        children
-      </RawButton>,
-    );
-
-    expect(screen.getByText('children')).toBeInTheDocument();
-  });
-
-  it('calls onClick when clicked', async () => {
-    const user = userEvent.setup();
-    const classes = classObject('root');
-    render(
-      <RawButton onClick={onClick} classes={classes}>
-        children
-      </RawButton>,
-    );
-
-    const button = screen.getByText('children');
-    await user.click(button);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-});
-
-describe('MarkButton', () => {
-  const classes = classObject('button', 'root', 'active');
-  const onToggle = jest.fn();
-
-  beforeEach(() => {
-    onToggle.mockClear();
-  });
-
-  it('renders when not active', () => {
-    render(
-      <RawMarkButton mark={'i'} onToggle={onToggle} active={false} classes={classes}>
-        children
-      </RawMarkButton>,
-    );
-
-    const button = screen.getByText('children');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-pressed', 'false');
-  });
-
-  it('renders when active', () => {
-    render(
-      <RawMarkButton mark={'i'} onToggle={onToggle} active={true} classes={classes}>
-        children
-      </RawMarkButton>,
-    );
-
-    const button = screen.getByText('children');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('calls onToggle when clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <RawMarkButton mark={'i'} onToggle={onToggle} active={false} classes={classes}>
-        children
-      </RawMarkButton>,
-    );
-
-    const button = screen.getByText('children');
-    await user.click(button);
-
-    expect(onToggle).toHaveBeenCalled();
-  });
-});

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

@@ -1,112 +0,0 @@
-import { classObject, mockMathInput } from '../../../__tests__/utils';
-import { Inline, Value } from 'slate';
-import { Toolbar } from '../toolbar';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-mockMathInput();
-
-jest.mock('@mui/material/IconButton', () => {
-  return (props) => {
-    const { children, onClick, buttonRef, ...rest } = props;
-    return (
-      <button onClick={onClick} {...rest}>
-        {children}
-      </button>
-    );
-  };
-});
-
-let node = Inline.fromJSON({ type: 'i' });
-let parentNode = Inline.fromJSON({
-  type: 'i',
-});
-let value;
-
-describe('toolbar', () => {
-  let onDelete, classes, document, toolbarOpts;
-
-  beforeEach(() => {
-    onDelete = jest.fn();
-
-    toolbarOpts = {
-      position: 'bottom',
-      alwaysVisible: false,
-    };
-
-    value = Value.fromJSON({});
-    document = {
-      getClosestInline: jest.fn().mockReturnValue(node),
-      getParent: jest.fn().mockReturnValue(),
-    };
-
-    Object.defineProperties(value, {
-      isCollapsed: {
-        get: jest.fn(() => true),
-      },
-      startKey: {
-        get: jest.fn(() => '1'),
-      },
-      document: {
-        get: jest.fn(() => document),
-      },
-    });
-
-    classes = classObject('iconRoot', 'inline', 'toolbar', 'focused', 'shared', 'inline', 'pie-toolbar');
-  });
-
-  test('renders custom toolbar', () => {
-    const plugins = [
-      {
-        deleteNode: () => true,
-        toolbar: {
-          supports: () => true,
-          customToolbar: () => () => <div>custom toolbar content</div>,
-        },
-      },
-    ];
-
-    const { container } = render(
-      <Toolbar
-        toolbarOpts={toolbarOpts}
-        plugins={plugins}
-        classes={classes}
-        value={value}
-        onDone={jest.fn()}
-        onChange={jest.fn()}
-      />,
-    );
-
-    // Verify the custom toolbar content is rendered
-    expect(container.firstChild).toBeInTheDocument();
-    expect(screen.getByText('custom toolbar content')).toBeInTheDocument();
-  });
-
-  describe('default', () => {
-    let plugins;
-
-    beforeEach(() => {
-      plugins = [];
-    });
-
-    test('renders default toolbar', () => {
-      const { container } = render(
-        <Toolbar
-          toolbarOpts={toolbarOpts}
-          plugins={plugins}
-          classes={classes}
-          value={value}
-          onDone={jest.fn()}
-          onChange={jest.fn()}
-        />,
-      );
-
-      // Verify the toolbar is rendered
-      expect(container.firstChild).toBeInTheDocument();
-
-      // The default toolbar should render the DefaultToolbar component
-      // which includes a Done button
-      expect(screen.getByLabelText('Done')).toBeInTheDocument();
-    });
-  });
-});