Add fuzzing tests

.gitignore

@@ -19,7 +19,11 @@ formats/*.js
 modules/*.js
 themes/*.js
 ui/*.js
-test/random.js
+
+test/**/*.js
+!test/helpers/**/*.js
+!test/unit/**/*.js
+!test/unit.js
 
 core.js
 quill.js

_develop/karma.config.js

@@ -15,6 +15,7 @@ module.exports = config => {
       },
       { pattern: 'dist/quill.snow.css', nocache: true },
       { pattern: 'dist/unit.js', nocache: true },
+      { pattern: 'dist/fuzzing.js', nocache: true },
       { pattern: 'dist/*.map', included: false, served: true, nocache: true },
       { pattern: 'assets/favicon.png', included: false, served: true },
     ],

_develop/webpack.config.js

@@ -65,6 +65,7 @@ const baseConfig = {
     'quill.bubble': './assets/bubble.styl',
     'quill.snow': './assets/snow.styl',
     'unit.js': './test/unit.js',
+    'fuzzing.js': './test/fuzzing.ts',
   },
   output: {
     filename: '[name]',

package.json

@@ -99,12 +99,11 @@
     "website:build": "npm run build -w website",
     "website:serve": "npm run serve -w website -- --port $npm_package_config_ports_gatsby",
     "website:develop": "npm run develop -w website -- --port $npm_package_config_ports_gatsby",
-    "test": "npm run test:unit; npm run test:random",
-    "test:all": "npm run test:unit; npm run test:functional; npm run test:random",
+    "test": "npm run test:unit",
+    "test:all": "npm run test:unit; npm run test:functional",
     "test:e2e": "npx playwright test",
     "test:unit": "npm run build; karma start _develop/karma.config.js",
     "test:unit:ci": "npm run build; karma start _develop/karma.config.js --reporters dots,saucelabs",
-    "test:random": "ts-node --preferTsExts -O '{\"module\":\"commonjs\"}' ./node_modules/.bin/jasmine test/random.ts",
     "test:coverage": "webpack --env.coverage --config _develop/webpack.config.js; karma start _develop/karma.config.js --reporters coverage"
   },
   "overrides": {

test/fuzzing.ts

@@ -0,0 +1,2 @@
+import './fuzzing/applyDelta.test';
+import './fuzzing/tableEmbed.test';

test/fuzzing/applyDelta.test.ts

@@ -0,0 +1,224 @@
+import Delta, { AttributeMap, Op } from 'quill-delta';
+import { choose, randomInt } from './utils';
+import { AlignClass } from '../../formats/align';
+import { FontClass } from '../../formats/font';
+import { SizeClass } from '../../formats/size';
+import Quill from '../../quill';
+
+type AttributeDef = { name: string; values: (number | string | boolean)[] };
+const BLOCK_EMBED_NAME = 'video';
+const INLINE_EMBED_NAME = 'image';
+
+const attributeDefs: {
+  text: AttributeDef[];
+  newline: AttributeDef[];
+  inlineEmbed: AttributeDef[];
+  blockEmbed: AttributeDef[];
+} = {
+  text: [
+    { name: 'color', values: ['#ffffff', '#000000', '#ff0000', '#ffff00'] },
+    { name: 'bold', values: [true] },
+    { name: 'code', values: [true] },
+    // @ts-expect-error
+    { name: 'font', values: FontClass.whitelist },
+    // @ts-expect-error
+    { name: 'size', values: SizeClass.whitelist },
+  ],
+  newline: [
+    // @ts-expect-error
+    { name: 'align', values: AlignClass.whitelist },
+    { name: 'header', values: [1, 2, 3, 4, 5] },
+    { name: 'blockquote', values: [true] },
+    { name: 'list', values: ['ordered', 'bullet', 'checked', 'unchecked'] },
+  ],
+  inlineEmbed: [
+    { name: 'width', values: ['100', '200', '300'] },
+    { name: 'height', values: ['100', '200', '300'] },
+  ],
+  blockEmbed: [
+    { name: 'width', values: ['100', '200', '300'] },
+    { name: 'height', values: ['100', '200', '300'] },
+  ],
+};
+
+const isLineFinished = (delta: Delta) => {
+  const lastOp = delta.ops[delta.ops.length - 1];
+  if (!lastOp) return false;
+  if (typeof lastOp.insert === 'string') {
+    return lastOp.insert.endsWith('\n');
+  }
+  if (typeof lastOp.insert === 'object') {
+    const key = Object.keys(lastOp.insert)[0];
+    return key === BLOCK_EMBED_NAME;
+  }
+  throw new Error('invalid op');
+};
+
+const generateAttributes = (scope: keyof typeof attributeDefs) => {
+  const attributeCount =
+    scope === 'newline'
+      ? // Some block-level formats are exclusive so we only pick one for now for simplicity
+        choose([0, 0, 1])
+      : choose([0, 0, 0, 0, 0, 1, 2, 3, 4]);
+  const attributes: AttributeMap = {};
+  for (let i = 0; i < attributeCount; i += 1) {
+    const def = choose(attributeDefs[scope]);
+    attributes[def.name] = choose(def.values);
+  }
+  return attributes;
+};
+
+const generateRandomText = () => {
+  return choose([
+    'hi',
+    'world',
+    'Slab',
+    ' ',
+    'this is a long text that contains spaces',
+  ]);
+};
+
+type SingleInsertValue =
+  | string
+  | { [INLINE_EMBED_NAME]: string }
+  | { [BLOCK_EMBED_NAME]: string };
+
+const generateSingleInsertDelta = (): Delta['ops'][number] & {
+  insert: SingleInsertValue;
+} => {
+  const operation = choose<keyof typeof attributeDefs>([
+    'text',
+    'text',
+    'text',
+    'newline',
+    'inlineEmbed',
+    'blockEmbed',
+  ]);
+
+  let insert: SingleInsertValue;
+  switch (operation) {
+    case 'text':
+      insert = generateRandomText();
+      break;
+    case 'newline':
+      insert = '\n';
+      break;
+    case 'inlineEmbed':
+      insert = { [INLINE_EMBED_NAME]: 'https://example.com' };
+      break;
+    case 'blockEmbed': {
+      insert = { [BLOCK_EMBED_NAME]: 'https://example.com' };
+      break;
+    }
+  }
+
+  const attributes = generateAttributes(operation);
+  const op: Op & { insert: SingleInsertValue } = { insert };
+  if (Object.keys(attributes).length) {
+    op.attributes = attributes;
+  }
+  return op;
+};
+
+const safePushInsert = (delta: Delta) => {
+  const op = generateSingleInsertDelta();
+  if (typeof op.insert === 'object' && op.insert[BLOCK_EMBED_NAME]) {
+    delta.insert('\n');
+  }
+  delta.push(op);
+};
+
+const generateDocument = () => {
+  const delta = new Delta();
+  const operationCount = 2 + randomInt(20);
+  for (let i = 0; i < operationCount; i += 1) {
+    safePushInsert(delta);
+  }
+  return delta;
+};
+
+const generateChange = (doc: Delta, changeCount: number) => {
+  const docLength = doc.length();
+  const skipLength = randomInt(docLength);
+  let change = new Delta().retain(skipLength);
+  const action = choose(['insert', 'delete', 'retain']);
+  const nextOp = doc.slice(skipLength).ops[0];
+  if (!nextOp) throw new Error('nextOp expected');
+  const needNewline = !isLineFinished(doc.slice(0, skipLength));
+  switch (action) {
+    case 'insert': {
+      const delta = new Delta();
+      const operationCount = randomInt(5) + 1;
+      for (let i = 0; i < operationCount; i += 1) {
+        safePushInsert(delta);
+      }
+      if (
+        needNewline ||
+        (typeof nextOp.insert === 'object' && !!nextOp.insert[BLOCK_EMBED_NAME])
+      ) {
+        delta.insert('\n');
+      }
+      change = change.concat(delta);
+      break;
+    }
+    case 'delete': {
+      const lengthToDelete = randomInt(docLength - skipLength - 1) + 1;
+      const nextOpAfterDelete = doc.slice(skipLength + lengthToDelete).ops[0];
+      if (
+        needNewline &&
+        (!nextOpAfterDelete ||
+          (typeof nextOpAfterDelete.insert === 'object' &&
+            !!nextOpAfterDelete.insert[BLOCK_EMBED_NAME]))
+      ) {
+        change.insert('\n');
+      }
+      change.delete(lengthToDelete);
+      break;
+    }
+    case 'retain': {
+      const retainLength =
+        typeof nextOp.insert === 'string'
+          ? randomInt(nextOp.insert.length - 1) + 1
+          : 1;
+      if (typeof nextOp.insert === 'string') {
+        if (
+          nextOp.insert.includes('\n') &&
+          nextOp.insert.replace(/\n/g, '').length
+        ) {
+          break;
+        }
+        if (nextOp.insert.includes('\n')) {
+          change.retain(
+            retainLength,
+            AttributeMap.diff(nextOp.attributes, generateAttributes('newline')),
+          );
+        } else {
+          change.retain(
+            retainLength,
+            AttributeMap.diff(nextOp.attributes, generateAttributes('text')),
+          );
+        }
+        break;
+      }
+      break;
+    }
+  }
+  changeCount -= 1;
+  return changeCount <= 0
+    ? change
+    : change.compose(generateChange(doc.compose(change), changeCount));
+};
+
+describe('applyDelta', () => {
+  it('random', () => {
+    const container = document.createElement('div');
+    const quill = new Quill(container);
+    quill.setContents(generateDocument());
+    for (let i = 0; i < 1000; i += 1) {
+      const doc = quill.getContents();
+      const change = generateChange(doc, randomInt(4) + 1);
+      const diff = quill.updateContents(change);
+      expect(change).toEqual(diff);
+    }
+  });
+});