@atlaskit/adf-schema 28.1.6 → 28.1.8

package/src/__tests__/unit/schema/nodes/layout-column.ts

@@ -0,0 +1,54 @@
+import { createSchema } from '../../../../schema/create-schema';
+import {
+  fromHTML,
+  toHTML,
+  toContext,
+} from 'adf-test-helpers/src/adf-schema/html-helpers';
+import {
+  layoutSection,
+  layoutColumn,
+  doc,
+  p,
+} from 'adf-test-helpers/src/doc-builder';
+
+const schema = makeSchema();
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema layout-column node`, () => {
+  it('serializes to <div data-layout-column />', () => {
+    const html = toHTML(schema.nodes.layoutColumn.create(), schema);
+    expect(html).toContain('<div data-layout-column="true">');
+  });
+
+  it('matches <div data-layout-column /> inside layoutSection', () => {
+    const doc = fromHTML(
+      '<div data-layout-section="true"><div data-layout-column/></div>',
+      schema,
+    );
+    const node = doc.firstChild!.firstChild!;
+    expect(node.type.name).toEqual('layoutColumn');
+  });
+
+  it('should not match <div data-layout-column /> when pasted inside layoutSection/layoutColumn', () => {
+    const document = doc(
+      layoutSection(
+        layoutColumn({ width: 50 })(p('{<>}')),
+        layoutColumn({ width: 50 })(p('')),
+      ),
+    );
+    const context = toContext(document, schema);
+    const pmDoc = fromHTML(
+      '<div data-layout-column><p>Text</p></div>',
+      schema,
+      { context },
+    );
+    const node = pmDoc.firstChild!;
+    expect(node.type.name).toEqual('paragraph');
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: ['doc', 'layoutSection', 'layoutColumn', 'paragraph', 'text'],
+  });
+}

package/src/__tests__/unit/schema/nodes/layout-section.ts

@@ -0,0 +1,95 @@
+import { createSchema } from '../../../../schema/create-schema';
+import { fromHTML, toHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import {
+  unsupportedBlock,
+  layoutSection,
+  doc,
+  layoutColumn,
+  p,
+} from 'adf-test-helpers/src/doc-builder';
+
+const schema = makeSchema();
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema layout-section node`, () => {
+  it('serializes to <div data-layout-section="true"/>', () => {
+    const html = toHTML(schema.nodes.layoutSection.create(), schema);
+    expect(html).toContain('<div data-layout-section="true">');
+  });
+
+  it('matches <div data-layout-section="true" />', () => {
+    const doc = fromHTML('<div data-layout-section="true" />', schema);
+    const node = doc.firstChild!;
+    expect(node.type.name).toEqual('layoutSection');
+  });
+
+  describe('when there is multiple unsupportedBlock after some layoutColumn', () => {
+    it('should not throw an invalid content exception', () => {
+      const documentRaw = doc(
+        // prettier-ignore
+        layoutSection(
+          layoutColumn({ width: 33 })(
+            p(''),
+          ),
+          layoutColumn({ width: 33 })(
+            p(''),
+          ),
+          layoutColumn({ width: 33 })(
+            p(''),
+          ),
+
+          unsupportedBlock({})(),
+        ),
+      );
+
+      expect(() => {
+        documentRaw(schema);
+      }).not.toThrow();
+    });
+  });
+
+  describe('when there is only one unsupportedBlock inside a layoutSection', () => {
+    it('should not throw an invalid content exception', () => {
+      const documentRaw = doc(
+        // prettier-ignore
+        layoutSection(
+          unsupportedBlock({})(),
+        ),
+      );
+
+      expect(() => {
+        documentRaw(schema);
+      }).not.toThrow();
+    });
+  });
+
+  describe('when there is only one layoutColumn inside a layoutSection', () => {
+    it('should throw an invalid content exception', () => {
+      const documentRaw = doc(
+        // prettier-ignore
+        layoutSection(
+          layoutColumn({ width: 100 })(
+            p(''),
+          ),
+        ),
+      );
+
+      expect(() => {
+        documentRaw(schema);
+      }).not.toThrow();
+    });
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: [
+      'doc',
+      'unsupportedBlock',
+      'layoutSection',
+      'layoutColumn',
+      'paragraph',
+      'text',
+    ],
+  });
+}

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

@@ -0,0 +1,49 @@
+import { toHTML, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+import { doc, ol, li, p } from 'adf-test-helpers/src/adf-schema/schema-builder';
+
+import { schema } from 'adf-test-helpers/src/adf-schema'
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema listItem node`, () => {
+  it('should be possible to create a list item with a single paragraph', () => {
+    const html = toHTML(
+      schema.nodes.listItem.create({}, schema.nodes.paragraph.create()),
+      schema,
+    );
+    expect(html).toContain('<li><p></p></li>');
+  });
+
+  it('should not be possible to have blockquote inside list', () => {
+    const docFromHTML = fromHTML(
+      '<ol><li><blockquote>text</blockquote></li></ol>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(doc(ol()(li(p('text')))).toJSON());
+  });
+
+  it('should be possible to have paragraph inside list', () => {
+    const docFromHTML = fromHTML('<ol><li><p>text</p></li></ol>', schema);
+    expect(docFromHTML.toJSON()).toEqual(doc(ol()(li(p('text')))).toJSON());
+  });
+
+  it('should be possible to have sublist inside list', () => {
+    const docFromHTML = fromHTML(
+      '<ol><li><p>text</p><ol><li><p>sublist</p></li></ol></li></ol>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(
+      doc(ol()(li(p('text'), ol()(li(p('sublist')))))).toJSON(),
+    );
+  });
+
+  it('should not be possible to have sublist and first child inside list', () => {
+    const docFromHTML = fromHTML(
+      '<ol><li><ol><li><p>sublist</p></li></ol><p>text</p></li></ol>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(
+      doc(ol()(li(p('sublist'), p('text')))).toJSON(),
+    );
+  });
+});

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

@@ -0,0 +1,67 @@
+import { fromHTML, toDOM } 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 mediaGroup node`, () => {
+  describe('parse html', () => {
+    it('gets attributes from html', () => {
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="mediaGroup"
+        />
+        `,
+        schema,
+      );
+
+      const mediaGroupNode = doc.firstChild!;
+
+      expect(mediaGroupNode.type).toEqual(schema.nodes.mediaGroup);
+    });
+
+    it('auto creates a media node inside mediaSingle node', () => {
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="mediaGroup"
+        />
+        `,
+        schema,
+      );
+
+      const mediaGroupNode = doc.firstChild!;
+
+      expect(mediaGroupNode.childCount).toEqual(1);
+      expect(mediaGroupNode.child(0)).toEqual(schema.nodes.media.create());
+    });
+  });
+
+  describe('encode node', () => {
+    it('converts attributes to related data attribute in html', () => {
+      const mediaGroupNode = schema.nodes.mediaGroup.create();
+
+      const mediaGroupDom = toDOM(mediaGroupNode, schema)
+        .firstChild as HTMLElement;
+      const nodeType = mediaGroupDom.getAttribute('data-node-type');
+
+      expect(nodeType).toEqual('mediaGroup');
+    });
+  });
+
+  it('encodes and decodes to the same node', () => {
+    const { mediaGroup, media } = schema.nodes;
+    const mediaGroupNode = mediaGroup.create({}, media.create());
+
+    const mediaGroupDom = toDOM(mediaGroupNode, schema)
+      .firstChild as HTMLElement;
+
+    const parsedMediaGroup = fromHTML(
+      mediaGroupDom.outerHTML,
+      schema,
+    ).firstChild;
+
+    expect(parsedMediaGroup).toEqual(mediaGroupNode);
+  });
+});

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

@@ -0,0 +1,171 @@
+import { toDOM, fromHTML } 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 mediaSingle node`, () => {
+  describe('parse html', () => {
+    it('gets attributes from html', () => {
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="mediaSingle"
+          data-layout="wrap-right"
+          data-width="32.3"
+          data-width-type="percentage"
+        />
+        `,
+        schema,
+      );
+
+      const mediaSingleNode = doc.firstChild!;
+
+      expect(mediaSingleNode.type).toEqual(schema.nodes.mediaSingle);
+      expect(mediaSingleNode.attrs.layout).toEqual('wrap-right');
+      expect(mediaSingleNode.attrs.width).toEqual(32.3);
+      expect(mediaSingleNode.attrs.widthType).toEqual('percentage');
+    });
+
+    it('defaults to align center', () => {
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="mediaSingle"
+        />
+        `,
+        schema,
+      );
+
+      const mediaSingleNode = doc.firstChild!;
+
+      expect(mediaSingleNode.type).toEqual(schema.nodes.mediaSingle);
+      expect(mediaSingleNode.attrs.layout).toEqual('center');
+      expect(mediaSingleNode.attrs.width).toBeNull();
+      expect(mediaSingleNode.attrs.widthType).toBeNull();
+    });
+
+    it('auto creates a media node inside mediaSingle node', () => {
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="mediaSingle"
+          data-alignment="left"
+          data-display="block"
+        />
+        `,
+        schema,
+      );
+
+      const mediaSingleNode = doc.firstChild!;
+
+      expect(mediaSingleNode.childCount).toEqual(1);
+      expect(mediaSingleNode.child(0)).toEqual(schema.nodes.media.create());
+    });
+  });
+
+  describe('encode node', () => {
+    it('converts layout and nodetype to html data attribute', () => {
+      const mediaSingleNode = schema.nodes.mediaSingle.create({
+        layout: 'center',
+      });
+
+      const mediaSingleDom = toDOM(mediaSingleNode, schema)
+        .firstChild as HTMLElement;
+      const layout = mediaSingleDom.getAttribute('data-layout');
+      const nodeType = mediaSingleDom.getAttribute('data-node-type');
+
+      expect(layout).toEqual('center');
+      expect(nodeType).toEqual('mediaSingle');
+    });
+  });
+
+  it('converts attributes to related data attribute in html with', () => {
+    const mediaSingleNode = schema.nodes.mediaSingle.create({
+      layout: 'center',
+      width: 64.333333,
+    });
+
+    const mediaSingleDom = toDOM(mediaSingleNode, schema)
+      .firstChild as HTMLElement;
+    const layout = mediaSingleDom.getAttribute('data-layout');
+    const width = mediaSingleDom.getAttribute('data-width');
+
+    expect(layout).toEqual('center');
+    expect(width).toEqual('64.33');
+  });
+
+  it('converts attributes with integer width', () => {
+    const mediaSingleNode = schema.nodes.mediaSingle.create({
+      layout: 'center',
+      width: 64,
+    });
+
+    const mediaSingleDom = toDOM(mediaSingleNode, schema)
+      .firstChild as HTMLElement;
+    const layout = mediaSingleDom.getAttribute('data-layout');
+    const width = mediaSingleDom.getAttribute('data-width');
+
+    expect(layout).toEqual('center');
+    expect(width).toEqual('64');
+  });
+
+  it('converts attributes with widthType', () => {
+    const mediaSingleNode = schema.nodes.mediaSingle.create({
+      layout: 'center',
+      width: 640,
+      widthType: 'pixel',
+    });
+
+    const mediaSingleDom = toDOM(mediaSingleNode, schema)
+      .firstChild as HTMLElement;
+    const layout = mediaSingleDom.getAttribute('data-layout');
+    const width = mediaSingleDom.getAttribute('data-width');
+    const widthType = mediaSingleDom.getAttribute('data-width-type');
+
+    expect(layout).toEqual('center');
+    expect(width).toEqual('640');
+    expect(widthType).toEqual('pixel');
+  });
+
+  it('encodes and decodes wide mediaSingle to the same node', () => {
+    const { mediaSingle, media } = schema.nodes;
+    const mediaSingleNode = mediaSingle.create(
+      {
+        layout: 'wide',
+      },
+      media.create(),
+    );
+
+    const mediaSingleDom = toDOM(mediaSingleNode, schema)
+      .firstChild as HTMLElement;
+
+    const parsedMediaSingle = fromHTML(
+      mediaSingleDom.outerHTML,
+      schema,
+    ).firstChild;
+
+    expect(parsedMediaSingle).toEqual(mediaSingleNode);
+  });
+
+  it('encodes and decodes mediaSingle with width to the same node', () => {
+    const { mediaSingle, media } = schema.nodes;
+    const mediaSingleNode = mediaSingle.create(
+      {
+        layout: 'center',
+        width: 32.5,
+      },
+      media.create(),
+    );
+
+    const mediaSingleDom = toDOM(mediaSingleNode, schema)
+      .firstChild as HTMLElement;
+
+    const parsedMediaSingle = fromHTML(
+      mediaSingleDom.outerHTML,
+      schema,
+    ).firstChild;
+
+    expect(parsedMediaSingle).toEqual(mediaSingleNode);
+  });
+});