@wix/patterns-fields 1.0.0

package/src/__tests__/data_types/time.spec.ts

@@ -0,0 +1,88 @@
+import { isValid, hardConvert } from '../../validations/time';
+
+describe('Time validation', () => {
+  const VALID_TIME_INPUTS = [
+    { in: '19:30', out: '19:30:00.000' },
+    { in: '21:00', out: '21:00:00.000' },
+    { in: '0:00:00.000', out: '00:00:00.000' },
+    { in: '00:00:00', out: '00:00:00.000' },
+    { in: '0:00:00', out: '00:00:00.000' },
+    { in: '00:00:00.000', out: '00:00:00.000' },
+  ];
+
+  const INVALID_TIME_INPUTS = [
+    '19.30',
+    '07.30pm',
+    '730am',
+    '0730am',
+    '07.00',
+    'am730',
+    'pm 830',
+    'Am1230',
+    'pm 745',
+    '26:00:01',
+    'aM 1330',
+    '2500',
+    '0:60:00.000',
+  ];
+
+  describe('isValid', () => {
+    it('validates correct time formats', () => {
+      expect(isValid('23:45:55.555')).toBe(true);
+      expect(isValid('23:45:55')).toBe(true);
+      expect(isValid('99:99:99')).toBe(false);
+
+      expect(isValid(true)).toBe(false);
+      expect(isValid('')).toBe(false);
+      expect(isValid(1)).toBe(false);
+      expect(isValid(Infinity)).toBe(false);
+      expect(isValid([])).toBe(false);
+      expect(isValid({})).toBe(false);
+      expect(isValid(new Date())).toBe(false);
+
+      for (const input of VALID_TIME_INPUTS) {
+        expect(isValid(input.in)).toEqual(true);
+      }
+
+      for (const input of INVALID_TIME_INPUTS) {
+        expect(isValid(input)).toEqual(false);
+      }
+    });
+  });
+
+  describe('hardConvert', () => {
+    it('should convert "10:00"', () => {
+      expect(hardConvert('10:00')).toEqual('10:00:00.000');
+    });
+
+    it('should convert "10:59:58"', () => {
+      expect(hardConvert('10:59:58')).toEqual('10:59:58.000');
+    });
+
+    it('should convert "10:59:58.01"', () => {
+      expect(hardConvert('10:59:58.01')).toEqual('10:59:58.010');
+    });
+
+    it('should throw error for "10"', () => {
+      expect(() => hardConvert('10')).toThrow();
+    });
+
+    it('should throw error for "10:65"', () => {
+      expect(() => hardConvert('10:65')).toThrow();
+    });
+
+    it('should properly convert different time formats', () => {
+      for (const input of VALID_TIME_INPUTS) {
+        expect(hardConvert(input.in)).toEqual(input.out);
+      }
+    });
+
+    it('should throw error for completely invalid inputs', () => {
+      // Test only inputs that are definitely unparsable
+      expect(() => hardConvert('not-a-time')).toThrow(); // completely invalid string
+      expect(() => hardConvert(123 as any)).toThrow(); // wrong type
+      expect(() => hardConvert(null as any)).toThrow(); // null value
+      expect(() => hardConvert(undefined as any)).toThrow(); // undefined value
+    });
+  });
+});

package/src/__tests__/drivers/base.driver.ts

@@ -0,0 +1,144 @@
+import type { MatcherOptions, waitForOptions } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import type { VanillaTestkitParams } from '@wix/design-system/dist/testkit';
+
+import type { render } from '../test-utils';
+import {
+  queryAllByDataHook,
+  queryByDataHook,
+  getAllByDataHook,
+  getByDataHook,
+  findAllByDataHook,
+  findByDataHook,
+  within,
+} from '../test-utils';
+
+function rootLocator(root: HTMLElement): ElementWrapper {
+  const getElement = () => root;
+  const getElements = () => [root];
+  const getElementAsync = () => Promise.resolve(root);
+  const getElementsAsync = () => Promise.resolve([root]);
+
+  return {
+    queryAll: getElements,
+    query: getElement,
+    getAll: getElements,
+    get: getElement,
+    findAll: getElementsAsync,
+    find: getElementAsync,
+
+    waitToBePresent: getElementAsync,
+    within: () => within(getElement()),
+    locate: (...ids: string[]) => elementLocator(getElement(), ...ids),
+    select: (...selectors: string[]) =>
+      selector(elementLocator, root, [], ...selectors),
+    debug: (node: HTMLElement = root) => screen.debug(node),
+  };
+}
+
+function elementLocator(root: HTMLElement, ...testId: string[]) {
+  return {
+    queryAll: (options?: MatcherOptions) =>
+      queryAllByDataHook(root, testId, options),
+    query: (options?: MatcherOptions) => queryByDataHook(root, testId, options),
+    getAll: (options?: MatcherOptions) =>
+      getAllByDataHook(root, testId, options),
+    get: (options?: MatcherOptions) => getByDataHook(root, testId, options),
+    findAll: (
+      options?: MatcherOptions,
+      waitForElementOptions?: waitForOptions,
+    ) => findAllByDataHook(root, testId, options, waitForElementOptions),
+    find: (options?: MatcherOptions, waitForElementOptions?: waitForOptions) =>
+      findByDataHook(root, testId, options, waitForElementOptions),
+
+    waitToBePresent: (waitForElementOptions?: waitForOptions) =>
+      findByDataHook(root, testId, {}, waitForElementOptions),
+    within: (options?: MatcherOptions) =>
+      within(getByDataHook(root, testId, options)),
+    locate: (...ids: string[]) => locator(getByDataHook(root, testId), ...ids),
+    select: (...selectors: string[]) =>
+      selector(locator, root, testId, ...selectors),
+    debug: (node: HTMLElement = root) => screen.debug(node),
+  };
+}
+
+export function locator(
+  root: HTMLElement,
+  ...testId: string[]
+): ElementWrapper {
+  return testId.length ? elementLocator(root, ...testId) : rootLocator(root);
+}
+
+function selector(
+  locate: typeof elementLocator,
+  root: HTMLElement,
+  rootSelector: string | string[],
+  ...selectors: string[]
+) {
+  const locatorArgs = Array.isArray(rootSelector)
+    ? rootSelector
+    : [rootSelector];
+
+  return selectors.reduce(
+    (element, selector) => locate(element.get(), selector),
+    locate(root, ...locatorArgs),
+  );
+}
+
+export type ElementWrapper = ReturnType<typeof elementLocator>;
+export type RendererWrapper = ReturnType<typeof render>;
+
+export class BaseDriver {
+  static testId: string;
+
+  public root: ElementWrapper;
+
+  public get node() {
+    return this.root.get();
+  }
+
+  constructor(root: ElementWrapper | RendererWrapper) {
+    this.root =
+      'baseElement' in root ? locator(root.baseElement as HTMLElement) : root;
+  }
+
+  public debug(node: HTMLElement = this.node, maxLength?: number): void {
+    return screen.debug(node, maxLength);
+  }
+
+  public select(testId: string, ...testIds: string[]) {
+    return selector(locator, this.node, testId, ...testIds);
+  }
+
+  public locate(...testIds: string[]) {
+    return locator(this.node, ...testIds);
+  }
+
+  public globalLocate(...testIds: string[]) {
+    return locator(document.body, ...testIds);
+  }
+
+  public async waitToBePresent(options: waitForOptions = { timeout: 30000 }) {
+    return waitFor(() => expect(this.root.get()).toBeInTheDocument(), options);
+  }
+
+  public async waitToBeAbsent(options: waitForOptions = { timeout: 5000 }) {
+    return waitFor(
+      () => expect(this.root.query()).not.toBeInTheDocument(),
+      options,
+    );
+  }
+
+  public initTestkit<T>(
+    factory: (params: VanillaTestkitParams) => T,
+    dataHook: string,
+    locate = this.locate.bind(this),
+  ) {
+    return factory({
+      dataHook,
+      get wrapper() {
+        return locate(dataHook).query()!;
+      },
+    });
+  }
+}

package/src/__tests__/drivers/paste-url-modal.driver.ts

@@ -0,0 +1,40 @@
+import {
+  InputTestkit,
+  CustomModalLayoutTestkit,
+} from '@wix/design-system/dist/testkit';
+
+import type { ElementWrapper, RendererWrapper } from './base.driver';
+import { BaseDriver } from './base.driver';
+
+export class PasterUrlModalDriver extends BaseDriver {
+  private dataHook: string;
+
+  constructor(root: ElementWrapper | RendererWrapper, dataHook: string) {
+    super(root);
+    this.dataHook = dataHook;
+  }
+
+  static testId = 'paste-url-modal.layout';
+
+  get layoutTestkit() {
+    return this.initTestkit(
+      CustomModalLayoutTestkit,
+      `${this.dataHook}.layout`,
+      this.globalLocate,
+    );
+  }
+
+  get urlInputTestkit() {
+    return this.initTestkit(
+      InputTestkit,
+      `${this.dataHook}.urlInput`,
+      this.globalLocate,
+    );
+  }
+
+  async enterUrlAndSave(url: string) {
+    await this.urlInputTestkit.enterText(url);
+    const saveButton = await this.layoutTestkit.getPrimaryButtonDriver();
+    await saveButton.click();
+  }
+}

package/src/__tests__/drivers/rich-text.driver.ts

@@ -0,0 +1,127 @@
+import type { RefObject } from 'react';
+
+import {
+  ToggleButtonTestkit,
+  DropdownBaseTestkit,
+} from '@wix/design-system/dist/testkit';
+
+import type {
+  RichTextEditor,
+  EditorName,
+} from '../../components/rich-text/rich-text-input/rich-text-editor';
+
+import { richTextToolbarDataHook } from '../../components/rich-text/rich-text-input/data-hooks';
+import {
+  RichTextToolbarButton,
+  RichTextToolbarDropdown,
+} from '../../components/rich-text/types';
+
+import { nextRender, getActiveElement } from '../test-utils';
+
+import { BaseDriver } from './base.driver';
+import { PasterUrlModalDriver } from './paste-url-modal.driver';
+
+export class RichTextEditorDriver extends BaseDriver {
+  public async selectText(
+    ref: RefObject<RichTextEditor>,
+    editor: EditorName = 'main',
+    tag?: string,
+    text?: string,
+  ) {
+    await this.focus();
+
+    const elementToSelect =
+      tag && text
+        ? this.getElementByTagAndText(tag, text)
+        : this.contentEditable;
+
+    const range = document.createRange();
+    range.selectNodeContents(elementToSelect);
+
+    const selection = window.getSelection()!;
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    (ref.current?.editors[editor]?.editor as any)._onSelect(
+      new Event('select', {
+        bubbles: true,
+        cancelable: false,
+      }),
+    );
+
+    return nextRender();
+  }
+
+  private getElementByTagAndText(tag: string, text: string) {
+    const contentNodes = Array.from(this.contentEditable.querySelectorAll(tag));
+
+    const targetElement = contentNodes.find((node) =>
+      node.textContent?.includes(text),
+    );
+
+    if (!targetElement) {
+      throw new Error(`List item with text "${text}" not found`);
+    }
+
+    return targetElement;
+  }
+
+  public async focus() {
+    this.contentEditable.focus();
+    await nextRender();
+  }
+
+  public async blur() {
+    getActiveElement()?.blur();
+    document.body.focus();
+    await nextRender();
+  }
+
+  public get contentEditable() {
+    return this.node.querySelector('[contenteditable]') as HTMLElement;
+  }
+
+  public get toolbar() {
+    return this.select(`${richTextToolbarDataHook}.toolbar`);
+  }
+
+  public getToolbarButtonTestkit(type: RichTextToolbarButton) {
+    return this.initTestkit(
+      ToggleButtonTestkit,
+      `${richTextToolbarDataHook}.button.${type}`,
+    );
+  }
+
+  public getToolbarDropdownTestkit(type: RichTextToolbarDropdown) {
+    const dropdownBase = this.initTestkit(
+      DropdownBaseTestkit,
+      `${richTextToolbarDataHook}.dropdown.${type}`,
+    );
+    return {
+      ...dropdownBase,
+      selectOption: (value: string) =>
+        dropdownBase.selectOptionByDataHook(
+          `${richTextToolbarDataHook}.dropdownOption.${value}`,
+        ),
+    };
+  }
+
+  private _linkModalDriver?: PasterUrlModalDriver;
+
+  public get linkModalDriver() {
+    if (!this._linkModalDriver) {
+      const dataHook = `${richTextToolbarDataHook}.linkModal`;
+      this._linkModalDriver = new PasterUrlModalDriver(
+        this.globalLocate(dataHook),
+        dataHook,
+      );
+    }
+    return this._linkModalDriver;
+  }
+
+  public async addLink(href: string) {
+    await this.getToolbarButtonTestkit('link').click();
+    await this.linkModalDriver.waitToBePresent();
+    await this.linkModalDriver.enterUrlAndSave(href);
+  }
+}

package/src/__tests__/spec-setup.ts

@@ -0,0 +1,7 @@
+import { configure } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.setTimeout(45000);
+jest.useFakeTimers();
+
+configure({ testIdAttribute: 'data-hook' });

package/src/__tests__/test-utils/active-element.ts

@@ -0,0 +1,9 @@
+export const getActiveElement = () =>
+  document.activeElement as HTMLElement | null;
+
+export const isActiveElement = <E extends HTMLElement>(element?: E | null) =>
+  element === getActiveElement();
+
+export const containsActiveElement = <E extends HTMLElement>(
+  element?: E | null,
+) => !!element?.contains(getActiveElement());

package/src/__tests__/test-utils/array-utils.ts

@@ -0,0 +1,13 @@
+export const toArray = <T>(items: T | T[]) =>
+  Array.isArray(items) ? items : [items];
+
+export const filterStringsOnly = (array: any[]): string[] =>
+  array.filter((item) => typeof item === 'string');
+
+export const sumOfItems = (array: any[]): number =>
+  array
+    .filter((item) => typeof item === 'number')
+    .reduce((sum, item) => sum + item, 0);
+
+export const isEmptyArray = (array: unknown) =>
+  Array.isArray(array) && array.length === 0;

package/src/__tests__/test-utils/index.ts

@@ -0,0 +1,5 @@
+export * from './active-element';
+export * from './array-utils';
+export * from './render';
+export * from './press-key';
+export * from './testing-library';

package/src/__tests__/test-utils/press-key.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from '@testing-library/react';
+
+import { getActiveElement } from './active-element';
+
+export type KeydownOptions = {
+  shiftKey?: boolean;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+};
+
+export const pressKeyOnActiveElement = (
+  key: string,
+  options?: KeydownOptions,
+) => {
+  const target = getActiveElement()!;
+  expect(target).toBeInTheDocument();
+  fireEvent.keyDown(target, { key, code: key, ...options });
+};

package/src/__tests__/test-utils/render.ts

@@ -0,0 +1,2 @@
+export const nextRender = () =>
+  new Promise((resolve) => requestAnimationFrame(resolve));

package/src/__tests__/test-utils/testing-library.ts

@@ -0,0 +1,110 @@
+import type {
+  Matcher,
+  MatcherOptions,
+  RenderResult,
+} from '@testing-library/react';
+import {
+  render as defaultRender,
+  getQueriesForElement as defaultGetQueriesForElement,
+  screen as defaultScreen,
+  queries,
+  queryHelpers,
+  buildQueries,
+} from '@testing-library/react';
+
+export * from '@testing-library/react';
+
+import { toArray } from './array-utils';
+
+export const DATA_HOOK_ATTRIBUTE = 'data-hook';
+
+const getMultipleError = (_: Element | null, value: any) =>
+  `Found multiple elements with the specified attribute value of: ${value}`;
+const getMissingError = (_: Element | null, value: any) =>
+  `Unable to find an element with the specified attribute value of: ${value}`;
+
+export const queryAllByAttribute = (
+  container: HTMLElement,
+  attribute: string,
+  value: Matcher,
+  options?: MatcherOptions,
+) => queryHelpers.queryAllByAttribute(attribute, container, value, options);
+
+const normalizeTestId = (testId: string) => testId.split(/\s+/);
+
+const includesTestId = (
+  content: string,
+  testId: string,
+  { exact = true }: MatcherOptions = { exact: true },
+) =>
+  normalizeTestId(content).some((id) =>
+    exact ? id === testId : id.includes(testId),
+  );
+
+const queryAllCreator =
+  (testAttribute: string) =>
+  (
+    container: HTMLElement,
+    testId: string | string[],
+    options?: MatcherOptions,
+  ) =>
+    queryAllByAttribute(
+      container,
+      testAttribute,
+      (content) =>
+        toArray(testId)
+          .flatMap(normalizeTestId)
+          .every((id) => includesTestId(content, id, options)),
+      options,
+    );
+
+export const queryAllByDataHook = queryAllCreator(DATA_HOOK_ATTRIBUTE);
+
+export const [
+  queryByAttribute,
+  getAllByAttribute,
+  getByAttribute,
+  findAllByAttribute,
+  findByAttribute,
+] = buildQueries(queryAllByAttribute, getMultipleError, getMissingError);
+
+export const [
+  queryByDataHook,
+  getAllByDataHook,
+  getByDataHook,
+  findAllByDataHook,
+  findByDataHook,
+] = buildQueries(queryAllByDataHook, getMultipleError, getMissingError);
+
+export const customQueries = {
+  // By attribute
+  queryByAttribute,
+  getAllByAttribute,
+  getByAttribute,
+  findAllByAttribute,
+  findByAttribute,
+  // By data-hook
+  queryByDataHook,
+  getAllByDataHook,
+  getByDataHook,
+  findAllByDataHook,
+  findByDataHook,
+};
+
+export function render(ui: any): RenderResult {
+  return defaultRender(ui, {
+    queries: { ...queries, ...customQueries },
+  });
+}
+
+export function getQueriesForElement(element: HTMLElement) {
+  return defaultGetQueriesForElement(element, { ...queries, ...customQueries });
+}
+
+export const within = getQueriesForElement;
+
+const boundQueries = within(document.body);
+export const screen: typeof defaultScreen & typeof boundQueries = {
+  ...defaultScreen,
+  ...boundQueries,
+};