@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/tests/mockResourceBrowserContext.tsx

@@ -0,0 +1,99 @@
+import React, { ReactNode } from 'react';
+import {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+  MatrixResourceBrowserPluginProps,
+} from '@squiz/matrix-resource-browser-plugin';
+
+import { fireEvent, screen } from '@testing-library/react';
+import { DeepPartial } from '../src/types';
+
+export type MockResourceBrowserContextOptions = DeepPartial<{
+  sources: Source[];
+  resources: Resource[];
+  pluginProps?: MatrixResourceBrowserPluginProps;
+}>;
+
+export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
+  ({
+    id: 'default-resource',
+    name: 'Default resource',
+    url: 'https://default-resource/',
+    urls: [],
+    childCount: 0,
+    type: {
+      code: 'unspecified',
+      name: 'Unspecified',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    source: {
+      id: '1',
+      type: 'matrix' as ResourceBrowserPluginType,
+    },
+    ...resource,
+  } as Resource);
+
+export const mockSource = (source: DeepPartial<Source> = {}): Source => ({
+  id: 'default-source',
+  name: 'Default source',
+  ...source,
+  nodes: (source.nodes || [mockResource()]).map((resource) => mockResource(resource)),
+});
+
+export const mockResourceBrowserContext = ({ sources, resources, pluginProps }: MockResourceBrowserContextOptions) => {
+  sources = (sources || []).map((source) => mockSource(source));
+  resources = (resources || []).map((resource) => mockResource(resource));
+
+  const onRequestSources = pluginProps?.onRequestSources || jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = pluginProps?.onRequestChildren || jest.fn().mockResolvedValue(resources);
+  const onRequestResource =
+    pluginProps?.onRequestResource ||
+    jest
+      .fn()
+      .mockImplementation((reference: ResourceReference) =>
+        Promise.resolve(resources?.find((resource) => resource.id === reference.resource) || null),
+      );
+
+  return {
+    MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix API',
+                id: 'matrix-api-identifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            } as MatrixResourceBrowserPluginProps),
+          ],
+        }}
+      >
+        {children}
+      </ResourceBrowserContextProvider>
+    ),
+    selectResource: async (opener: HTMLElement, resourceName: string) => {
+      const sourceLabel = `Drill down to ${sources?.[0]?.nodes?.[0]?.name} children`;
+
+      fireEvent.click(opener);
+      fireEvent.click((await screen.findAllByRole('button', { name: sourceLabel }))[0]);
+      fireEvent.click(await screen.findByTitle(resourceName));
+      fireEvent.click(await screen.findByRole('button', { name: 'Select' }));
+    },
+  };
+};

package/tests/renderWithContext.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import merge from 'deepmerge';
+import { EditorContext } from '../src';
+import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
+import { DeepPartial } from '../src/types';
+import {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin from '@squiz/matrix-resource-browser-plugin';
+import { mockSource } from './mockResourceBrowserContext';
+
+export type ContextRenderOptions = RenderOptions & {
+  context?: DeepPartial<{
+    editor: EditorContextOptions;
+  }>;
+};
+
+export const renderWithContext = (ui: ReactElement | null, options?: ContextRenderOptions): RenderResult => {
+  const editorContext = merge(defaultEditorContext, options?.context?.editor || {}) as EditorContextOptions;
+  const sources = mockSource();
+  const resources = [
+    {
+      id: 'default-resource',
+      name: 'Default resource',
+      url: 'https://default-resource/',
+      urls: [],
+      childCount: 0,
+      type: {
+        code: 'unspecified',
+        name: 'Unspecified',
+      },
+      status: {
+        code: 'live',
+        name: 'Live',
+      },
+      source: {
+        id: '1',
+        type: 'matrix' as ResourceBrowserPluginType,
+      },
+    },
+  ];
+  const onRequestSources = jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = jest.fn().mockResolvedValue(resources);
+  const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
+  editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
+
+  return render(
+    <EditorContext.Provider value={editorContext}>
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix',
+                id: 'matrixIdentifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            }),
+          ],
+        }}
+      >
+        {ui}
+      </ResourceBrowserContextProvider>
+    </EditorContext.Provider>,
+  );
+};

package/tests/renderWithEditor.tsx

@@ -0,0 +1,123 @@
+import React, { ReactElement, useContext, useEffect } from 'react';
+import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
+import { CorePreset } from '@remirror/preset-core';
+import { BuiltinPreset } from 'remirror';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import { RemirrorTestChain } from 'jest-remirror';
+import { createExtensions } from '../src/Extensions/Extensions';
+import { EditorContext } from '../src';
+import { FloatingToolbar } from '../src/EditorToolbar';
+import { renderWithContext, ContextRenderOptions } from './renderWithContext';
+import { act } from '@testing-library/react';
+
+export type EditorRenderOptions = ContextRenderOptions & {
+  content?: RemirrorContentType;
+  editable?: boolean;
+  extensions?: Extension[];
+};
+
+type TestEditorProps = EditorRenderOptions & {
+  children: ReactElement | null;
+  onReady: (manager: RemirrorManager<Extension>) => void;
+};
+
+export type EditorRenderResult = {
+  editor: RemirrorTestChain<Extension | CorePreset | BuiltinPreset>;
+  getHtmlContent: () => string | undefined;
+  getJsonContent: () => any;
+  getSelectedText: () => string | undefined;
+  elements: {
+    editor: HTMLDivElement;
+  };
+};
+
+const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
+  const context = useContext(EditorContext);
+  const { manager, state, setState } = useRemirror({
+    extensions: () => extensions || createExtensions(context)(),
+    content: content,
+    selection: 'start',
+    stringHandler: 'html',
+    onError: ({ error }) => {
+      throw error;
+    },
+  });
+
+  useEffect(() => {
+    onReady(manager);
+  }, []);
+
+  return (
+    <Remirror
+      manager={manager}
+      state={state}
+      editable={editable}
+      onChange={(params) => {
+        setState(params.state);
+      }}
+    >
+      {children}
+      <EditorComponent />
+      {editable && <FloatingToolbar />}
+    </Remirror>
+  );
+};
+
+/**
+ * Renders a React component alongside a very minimalistic editor within a Remirror context.
+ *
+ * We are using the "jest-remirror" library to expose some helper functions via the "editor" property we return.
+ *
+ * When interacting with the editor helper functions you should wrap calls in an "act" and await on it to avoid
+ * console errors during tests.
+ *
+ * We are NOT using the "renderEditor" method exposed by that library as it is not suitable for our use case.
+ * Its purpose is for rendering a plain Remirror editor outside of the context of React. This allows for testing
+ * extension logic but not testing any interaction between the extension logic and UI components.
+ *
+ * Interacting with the editor should typically trigger a re-render of components that use the Remirror hooks.
+ * Note that the "useRemirrorContext" hook has an "autoUpdate" option which controls if the hook re-renders on
+ * all changes. This defaults to false, some hooks which use this internally (eg. "useCommands") and
+ * leave this as the default.
+ *
+ * @param {ReactElement}        ui      The React component to render alongside the editor.
+ * @param {EditorRenderOptions} options Options to configure initial content, loaded extensions, etc.
+ *
+ * @return {Promise<EditorRenderResult>}
+ */
+export const renderWithEditor = async (
+  ui: ReactElement | null,
+  options?: EditorRenderOptions,
+): Promise<EditorRenderResult> => {
+  const result: Partial<EditorRenderResult> = {
+    getHtmlContent: () => document.querySelector('.remirror-editor')?.innerHTML,
+    getJsonContent: () => result.editor?.state.doc.content.child(0).toJSON(),
+    getSelectedText: () => result.editor?.state.doc.textBetween(result.editor?.from, result.editor?.to),
+  };
+  let isReady = false;
+
+  const { container } = await act(() =>
+    renderWithContext(
+      <TestEditor
+        onReady={(manager) => {
+          result.editor = RemirrorTestChain.create(manager);
+          isReady = true;
+        }}
+        {...options}
+      >
+        {ui}
+      </TestEditor>,
+      options,
+    ),
+  );
+
+  if (!isReady) {
+    throw new Error('The editor component did not mount.');
+  }
+
+  result.elements = {
+    editor: container.querySelector('.remirror-editor') as HTMLDivElement,
+  };
+
+  return result as EditorRenderResult;
+};

package/tests/select.ts

@@ -0,0 +1,16 @@
+import { fireEvent } from '@testing-library/react';
+
+export const select = (element: Element, optionText: string) => {
+  fireEvent.click(element);
+
+  const menuItems = element.parentElement ? Array.from(element.parentElement.querySelectorAll('li')) : [];
+  const itemToSelect = Array.from(menuItems).find((item) => item.textContent === optionText);
+
+  if (menuItems.length === 0) {
+    throw new Error('Cannot find menu items for select field.');
+  } else if (!itemToSelect) {
+    throw new Error(`Cannot find option with text ${optionText} in select field.`);
+  }
+
+  fireEvent.click(itemToSelect);
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./lib"
+  },
+  "files": ["src/index.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+// Dependencies from within the monorepo need to be configured in a special way, relates to:
+// https://github.com/vitejs/vite/issues/5668
+export default defineConfig({
+  root: 'demo',
+  optimizeDeps: {
+    include: [],
+  },
+  build: {
+    outDir: 'build/demo',
+    commonjsOptions: {
+      include: [/node_modules/],
+    },
+  },
+  plugins: [
+    react({
+      babel: {
+        parserOpts: {
+          plugins: ['decorators-legacy'],
+        },
+      },
+    }),
+  ],
+});