@atlaskit/adf-schema 28.1.6 → 28.1.7

package/src/__tests__/unit/schema/nodes/media.ts

@@ -0,0 +1,388 @@
+import {
+  media,
+  camelCaseToKebabCase,
+  defaultAttrs,
+  toJSON,
+  createMediaSpec,
+} from '../../../../schema/nodes/media';
+import { image as ImageNodeSpec } from '../../../../schema/nodes/image';
+import {
+  fromHTML,
+  toDOM,
+  schema,
+} from 'adf-test-helpers/src/adf-schema';
+
+// Note: We can't use dom.dataset in jest until it's upgraded to use latest version
+//       of jsdom. In the meantime we can use this helper-method.
+const getDataSet = (dom: HTMLElement) => {
+  return Object.keys({
+    ...defaultAttrs,
+    fileName: '',
+    fileSize: '',
+    fileMimeType: '',
+    displayType: '',
+    url: '',
+  }).reduce<Record<string, any>>((accum, k) => {
+    const key = camelCaseToKebabCase(k).replace(/^__/, '');
+    const value = dom.getAttribute(`data-${key}`);
+    if (value) {
+      accum[k] = value;
+    }
+
+    return accum;
+  }, {});
+};
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema media node`, () => {
+  it('should parse html', () => {
+    const doc = fromHTML(
+      `
+    <div
+      data-node-type="media"
+      data-id="id"
+      data-type="file"
+      data-collection="collection"
+      data-file-name="file.jpg"
+      data-file-size="123456"
+      data-file-mime-type="image/jpeg"
+    />
+    `,
+      schema,
+    );
+    const mediaGroup = doc.firstChild!;
+    const mediaNode = mediaGroup.firstChild!;
+
+    expect(mediaNode.type.spec).toEqual(media);
+    expect(mediaNode.attrs.id).toEqual('id');
+    expect(mediaNode.attrs.type).toEqual('file');
+    expect(mediaNode.attrs.collection).toEqual('collection');
+    expect(mediaNode.attrs.__fileName).toEqual('file.jpg');
+    expect(mediaNode.attrs.__fileSize).toEqual(123456);
+    expect(mediaNode.attrs.__fileMimeType).toEqual('image/jpeg');
+    expect(mediaNode.attrs.__displayType).toEqual(null);
+  });
+
+  it('should parse width/height as number', () => {
+    const doc = fromHTML(
+      `
+    <div
+      data-node-type="media"
+      data-width="456"
+      data-height="956"
+    />
+    `,
+      schema,
+    );
+    const mediaGroup = doc.firstChild!;
+    const mediaNode = mediaGroup.firstChild!;
+
+    expect(mediaNode.attrs.width).toEqual(456);
+    expect(mediaNode.attrs.height).toEqual(956);
+  });
+
+  it('should parse html (with occurrenceKey)', () => {
+    const doc = fromHTML(
+      `
+    <div
+      data-node-type="media"
+      data-id="id"
+      data-type="file"
+      data-collection="collection"
+      data-occurrence-key="key"
+    />
+    `,
+      schema,
+    );
+    const mediaGroup = doc.firstChild!;
+    const mediaNode = mediaGroup.firstChild!;
+
+    expect(mediaNode.type.spec).toEqual(media);
+    expect(mediaNode.attrs.id).toEqual('id');
+    expect(mediaNode.attrs.type).toEqual('file');
+    expect(mediaNode.attrs.collection).toEqual('collection');
+    expect(mediaNode.attrs.occurrenceKey).toEqual('key');
+  });
+
+  it('should encode to html', () => {
+    const mediaNode = schema.nodes.media.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      __fileName: 'file.jpg',
+      __fileSize: 123456,
+      __fileMimeType: 'image/jpeg',
+      __displayType: 'thumbnail',
+    });
+
+    const domNode = toDOM(mediaNode, schema).firstChild as HTMLElement;
+    const {
+      id,
+      type,
+      collection,
+      occurrenceKey,
+      fileName,
+      fileSize,
+      fileMimeType,
+      displayType,
+    } = getDataSet(domNode);
+
+    expect(id).toEqual('id');
+    expect(type).toEqual('file');
+    expect(collection).toEqual('collection');
+    expect(occurrenceKey).toEqual(undefined);
+    expect(fileName).toEqual('file.jpg');
+    expect(fileSize).toEqual('123456');
+    expect(fileMimeType).toEqual('image/jpeg');
+    expect(displayType).toEqual('thumbnail');
+  });
+
+  it('should encode to html (with occurrenceKey)', () => {
+    const mediaNode = schema.nodes.media.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      occurrenceKey: 'key',
+    });
+
+    const domNode = toDOM(mediaNode, schema).firstChild as HTMLElement;
+    const { id, type, collection, occurrenceKey } = getDataSet(domNode);
+    expect(id).toEqual('id');
+    expect(type).toEqual('file');
+    expect(collection).toEqual('collection');
+    expect(occurrenceKey).toEqual('key');
+  });
+
+  it('should strip optional attrs during JSON serialization', () => {
+    const mediaNode = schema.nodes.media.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      __fileName: 'file.jpg',
+      __fileSize: 123456,
+      __fileMimeType: 'image/jpeg',
+      __displayType: 'thumbnail',
+    });
+
+    expect(toJSON(mediaNode)).toEqual({
+      attrs: {
+        collection: 'collection',
+        id: 'id',
+        type: 'file',
+      },
+    });
+  });
+
+  it('should strip optional attrs during JSON serialization for inline media', () => {
+    const mediaInlineNode = schema.nodes.mediaInline.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      alt: '',
+      __fileName: 'file.jpg',
+      __fileSize: 123456,
+      __fileMimeType: 'image/jpeg',
+      __displayType: 'thumbnail',
+    });
+
+    expect(toJSON(mediaInlineNode)).toEqual({
+      attrs: {
+        collection: 'collection',
+        id: 'id',
+        type: 'file',
+      },
+    });
+  });
+
+  describe.each<['alt' | 'occurrenceKey']>([['alt'], ['occurrenceKey']])(
+    '%s attribute',
+    (attributeKey: string) => {
+      let mediaNodeConfig: { [key: string]: any };
+      beforeEach(() => {
+        mediaNodeConfig = {
+          id: 'id',
+          type: 'file',
+          collection: 'collection',
+        };
+      });
+
+      it(`should serialize ${attributeKey} when available`, () => {
+        mediaNodeConfig[attributeKey] = 'key_value';
+        const mediaNode = schema.nodes.media.create(mediaNodeConfig);
+
+        const expectedObj: any = {
+          attrs: {
+            collection: 'collection',
+            id: 'id',
+            type: 'file',
+          },
+        };
+        expectedObj.attrs[attributeKey] = 'key_value';
+
+        expect(toJSON(mediaNode)).toEqual(expectedObj);
+      });
+
+      it(`should not serialize optional ${attributeKey} with null value`, () => {
+        mediaNodeConfig[attributeKey] = null;
+        const mediaNode = schema.nodes.media.create(mediaNodeConfig);
+
+        expect(toJSON(mediaNode)).toEqual({
+          attrs: {
+            collection: 'collection',
+            id: 'id',
+            type: 'file',
+          },
+        });
+      });
+
+      it(`should not serialize optional ${attributeKey} with empty string`, () => {
+        mediaNodeConfig[attributeKey] = '';
+        const mediaNode = schema.nodes.media.create(mediaNodeConfig);
+
+        expect(toJSON(mediaNode)).toEqual({
+          attrs: {
+            collection: 'collection',
+            id: 'id',
+            type: 'file',
+          },
+        });
+      });
+    },
+  );
+
+  it('should serialize optional number keys with value 0', () => {
+    const mediaNode = schema.nodes.media.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      width: 0,
+    });
+
+    expect(toJSON(mediaNode)).toEqual({
+      attrs: {
+        collection: 'collection',
+        id: 'id',
+        type: 'file',
+        width: 0,
+      },
+    });
+  });
+
+  it('should serialize width/height as number', () => {
+    const mediaNode = schema.nodes.media.create({
+      id: 'id',
+      type: 'file',
+      collection: 'collection',
+      width: '100',
+      height: '150',
+    });
+
+    expect(toJSON(mediaNode)).toEqual({
+      attrs: {
+        collection: 'collection',
+        id: 'id',
+        type: 'file',
+        width: 100,
+        height: 150,
+      },
+    });
+  });
+
+  describe('external images', () => {
+    it('should parse html for external images', () => {
+      const doc = fromHTML(
+        `
+      <div
+        data-node-type="media"
+        data-type="external"
+        data-url="http://image.jpg"
+      />
+      `,
+        schema,
+      );
+      const mediaGroup = doc.firstChild!;
+      const mediaNode = mediaGroup.firstChild!;
+
+      expect(mediaNode.type.spec).toEqual(media);
+      expect(mediaNode.attrs.type).toEqual('external');
+      expect(mediaNode.attrs.url).toEqual('http://image.jpg');
+    });
+
+    it('should encode to html', () => {
+      const mediaNode = schema.nodes.media.create({
+        type: 'external',
+        alt: 'alt text',
+        url: 'http://image.jpg',
+      });
+
+      const domNode = toDOM(mediaNode, schema).firstChild as HTMLElement;
+      const { type, url, alt } = getDataSet(domNode);
+      expect(type).toEqual('external');
+      expect(alt).toEqual('alt text');
+      expect(url).toEqual('http://image.jpg');
+    });
+
+    it('should strip optional attrs during JSON serialization', () => {
+      const mediaNode = schema.nodes.media.create({
+        type: 'external',
+        url: 'http://image.jpg',
+        alt: 'alt text',
+      });
+
+      expect(toJSON(mediaNode)).toEqual({
+        attrs: {
+          type: 'external',
+          alt: 'alt text',
+          url: 'http://image.jpg',
+        },
+      });
+    });
+
+    it('should parse html for images with alt text', () => {
+      const doc = fromHTML(
+        `<img src="https://image.jpg" alt="Summer Rolls are the best" />`,
+        schema,
+      );
+      const paragraph = doc.firstChild!;
+      const imageNode = paragraph.firstChild!;
+
+      expect(imageNode.type.spec).toEqual(ImageNodeSpec);
+      expect(imageNode.attrs.src).toEqual('https://image.jpg');
+      expect(imageNode.attrs.alt).toEqual('Summer Rolls are the best');
+    });
+
+    it('should parse html for images without alt text', () => {
+      const doc = fromHTML(`<img src="https://no.ch/ocolate.jpg" />`, schema);
+      const paragraph = doc.firstChild!;
+      const imageNode = paragraph.firstChild!;
+
+      expect(imageNode.type.spec).toEqual(ImageNodeSpec);
+      expect(imageNode.attrs.src).toEqual('https://no.ch/ocolate.jpg');
+      expect(imageNode.attrs.alt).toEqual(null);
+    });
+  });
+
+  describe('createMediaSpec', () => {
+    it('should return a media node spec supporting attributes provided', () => {
+      const el = document.createElement('div');
+      el.setAttribute('data-foo', 'test');
+
+      const attributes = {
+        ...defaultAttrs,
+        foo: 'test',
+      } as any;
+
+      const mediaNodeSpec = createMediaSpec(attributes);
+      expect(mediaNodeSpec.attrs).toBe(attributes);
+
+      const parseRule =
+        mediaNodeSpec.parseDOM &&
+        mediaNodeSpec.parseDOM.find(({ tag }) => 'div[data-node-type="media"]');
+      expect(parseRule && parseRule.getAttrs && parseRule.getAttrs(el)).toEqual(
+        {
+          foo: 'test',
+        },
+      );
+    });
+  });
+});

package/src/__tests__/unit/schema/nodes/mention.ts

@@ -0,0 +1,115 @@
+import { createSchema } from '../../../../schema/create-schema';
+import {
+  toHTML,
+  fromHTML as fromHTML_,
+} from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+const schema = makeSchema();
+const fromHTML = (html: string) => fromHTML_(html, schema);
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema mention node`, () => {
+  it('should have mention id and display name when serializing to DOM', () => {
+    const html = toHTML(
+      schema.nodes.mention.create({ id: '@bar', text: 'foo bar' }),
+      schema,
+    );
+    expect(html).toContain('data-mention-id="@bar"');
+    expect(html).toContain('contenteditable="false"');
+    expect(html).toContain('foo bar');
+  });
+
+  it('should extract the correct values of mention id and display name', () => {
+    const doc = fromHTML("<span data-mention-id='@user-1'>foo bar</span>");
+    const mention = doc.firstChild!.firstChild!;
+
+    expect(mention.type.name).toEqual('mention');
+    expect(mention.attrs.id).toEqual('@user-1');
+    expect(mention.attrs.text).toEqual('foo bar');
+  });
+
+  it('should ignore if userType is DEFAULT', () => {
+    const html = toHTML(
+      schema.nodes.mention.create({
+        id: 'id-foo-bar',
+        text: '@foo bar',
+        userType: 'DEFAULT',
+      }),
+      schema,
+    );
+    expect(html).toContain('data-mention-id="id-foo-bar"');
+    expect(html).toContain('contenteditable="false"');
+    expect(html).toContain('data-user-type="DEFAULT"');
+    expect(html).toContain('@foo bar');
+  });
+
+  it('should have userType if it is SPECIAL', () => {
+    const html = toHTML(
+      schema.nodes.mention.create({
+        id: 'id-rick',
+        text: '@rick',
+        userType: 'SPECIAL',
+      }),
+      schema,
+    );
+    expect(html).toContain('data-mention-id="id-rick"');
+    expect(html).toContain('data-user-type="SPECIAL"');
+    expect(html).toContain('@rick');
+  });
+
+  it('should have userType if it is APP', () => {
+    const html = toHTML(
+      schema.nodes.mention.create({
+        id: 'id-coffee',
+        text: '@coffee',
+        userType: 'APP',
+      }),
+      schema,
+    );
+    expect(html).toContain('data-mention-id="id-coffee"');
+    expect(html).toContain('data-user-type="APP"');
+    expect(html).toContain('@coffee');
+  });
+
+  it('should extract the valid userTypes - SPECIAL', () => {
+    const doc = fromHTML(
+      '<span data-mention-id="id-rick" data-user-type="SPECIAL">@Rick Sanchez</span>',
+    );
+    const mention = doc.firstChild!.firstChild!;
+
+    expect(mention.type.name).toEqual('mention');
+    expect(mention.attrs.id).toEqual('id-rick');
+    expect(mention.attrs.text).toEqual('@Rick Sanchez');
+    expect(mention.attrs.userType).toEqual('SPECIAL');
+  });
+
+  it('should extract the valid userTypes - APP', () => {
+    const doc = fromHTML(
+      '<span data-mention-id="id-coffee" data-user-type="APP">@coffee</span>',
+    );
+    const mention = doc.firstChild!.firstChild!;
+
+    expect(mention.type.name).toEqual('mention');
+    expect(mention.attrs.id).toEqual('id-coffee');
+    expect(mention.attrs.text).toEqual('@coffee');
+    expect(mention.attrs.userType).toEqual('APP');
+  });
+
+  it('should not extract invalid value of userType', () => {
+    const doc = fromHTML(
+      '<span data-mention-id="id-morty" data-user-type="SIDEKICK">@Morty Smith</span>',
+    );
+    const mention = doc.firstChild!.firstChild!;
+
+    expect(mention.type.name).toEqual('mention');
+    expect(mention.attrs.id).toEqual('id-morty');
+    expect(mention.attrs.text).toEqual('@Morty Smith');
+    expect(mention.attrs.userType).toEqual(null);
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: ['doc', 'paragraph', 'text', 'mention'],
+  });
+}

package/src/__tests__/unit/schema/nodes/nestedExpand.ts

@@ -0,0 +1,72 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { nestedExpand } from '../../../..';
+import { Schema, Node } from '@atlaskit/editor-prosemirror/model';
+import { schema } from 'adf-test-helpers/src/adf-schema'
+
+const findNestedExpand = (doc: Node, schema: Schema) => {
+  let expand: Node | null = null;
+  doc.nodesBetween(0, doc.nodeSize - 2, (node) => {
+    if (!expand && node.type === schema.nodes.nestedExpand) {
+      expand = node;
+    }
+  });
+
+  return expand as Node | null;
+};
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema nestedExpand node`, () => {
+  describe('parse html', () => {
+    it('converts to PM node', () => {
+      const doc = fromHTML('<div data-node-type="nestedExpand" />', schema);
+      const node = findNestedExpand(doc, schema)!;
+      expect(node.type.spec).toEqual(nestedExpand);
+    });
+
+    it('gets attributes from html', () => {
+      const title = 'Homer Simpson';
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="nestedExpand"
+          data-title="${title}"
+        ><p>hello</p></div>
+      `,
+        schema,
+      );
+
+      const node = findNestedExpand(doc, schema)!;
+      expect(node.attrs.title).toEqual(title);
+    });
+  });
+
+  describe('encode html', () => {
+    it('converts html data attributes to node attributes', () => {
+      const title = 'Homer Simpson';
+      const content = schema.nodes.paragraph.create(schema.text('hello'));
+      const node = schema.nodes.nestedExpand.create({ title }, content);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+
+      expect(dom.getAttribute('data-node-type')).toEqual('nestedExpand');
+      expect(dom.getAttribute('data-title')).toEqual(title);
+    });
+
+    it('encodes and decodes to the same node', () => {
+      const { paragraph, nestedExpand, table, tableRow, tableCell } =
+        schema.nodes;
+
+      const title = 'Homer Simpson';
+      const content = paragraph.create(schema.text('hello'));
+      const node = nestedExpand.create({ title }, content);
+
+      // We must create a table wrapper since nestedExpands are only allow inside tables.
+      const cell = tableCell.createChecked(undefined, node);
+      const row = tableRow.createChecked(undefined, cell);
+      const tableWrapper = table.createChecked(undefined, row);
+
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+      const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!;
+      expect(parsedNode).toEqual(tableWrapper);
+    });
+  });
+});

package/src/__tests__/unit/schema/nodes/ordered-list.ts

@@ -0,0 +1,49 @@
+import { toHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { schema } from 'adf-test-helpers/src/adf-schema'
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema orderedList node`, () => {
+  it('should be possible to create an ordered list item with an order attribute', () => {
+    const html = toHTML(
+      schema.nodes.orderedList.create(
+        { order: 6 },
+        schema.nodes.listItem.create({}, schema.nodes.paragraph.create()),
+      ),
+      schema,
+    );
+    expect(html).toContain('<ol start="6" class="ak-ol"><li><p></p></li></ol>');
+  });
+
+  it('should not be possible to have an ordered list starting from a negative number', () => {
+    const html = toHTML(
+      schema.nodes.orderedList.create(
+        { order: -6 },
+        schema.nodes.listItem.create({}, schema.nodes.paragraph.create()),
+      ),
+      schema,
+    );
+    expect(html).toContain('<ol class="ak-ol"><li><p></p></li></ol>');
+  });
+
+  it('should not be possible to have an ordered list with order of a string', () => {
+    const html = toHTML(
+      schema.nodes.orderedList.create(
+        { order: 'string' },
+        schema.nodes.listItem.create({}, schema.nodes.paragraph.create()),
+      ),
+      schema,
+    );
+    expect(html).toContain('<ol class="ak-ol"><li><p></p></li></ol>');
+  });
+
+  it('should not be possible to have an ordered list with order of a decimal number', () => {
+    const html = toHTML(
+      schema.nodes.orderedList.create(
+        { order: 2.9 },
+        schema.nodes.listItem.create({}, schema.nodes.paragraph.create()),
+      ),
+      schema,
+    );
+    expect(html).toContain('<ol start="2" class="ak-ol"><li><p></p></li></ol>');
+  });
+});