@atlaskit/adf-schema 28.1.6 → 28.1.8

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

@@ -0,0 +1,180 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { createSchema, SchemaConfig } from '../../../../schema/create-schema';
+import { toHTML, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { panel } from '../../../../schema/nodes/panel';
+
+const schema = makeSchema();
+const schemaWithAllowCustomPanel = makeSchema({
+  panel: panel(true),
+});
+
+const schemaWithoutCustomPanel = makeSchema({
+  panel: panel(false),
+});
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+function expectHtmlWithData(html: string, expectedData: Object) {
+  const parser = new DOMParser();
+  const dom = parser.parseFromString(html, 'text/html');
+  const htmlNode = dom.body?.firstChild as HTMLElement;
+  expect(htmlNode).toBeTruthy();
+  expect(htmlNode.dataset).toEqual(expect.objectContaining(expectedData));
+}
+
+describe(`${packageName}/schema panel node `, () => {
+  describe('With default panel NodeSpec ', () => {
+    it('should have data-panel-type when serializing to DOM', () => {
+      const html = toHTML(
+        schema.nodes.panel.create({ panelType: 'info' }),
+        schema,
+      );
+      expectHtmlWithData(html, {
+        panelType: 'info',
+      });
+    });
+
+    it('should have info panel type by default', () => {
+      const html = toHTML(schema.nodes.panel.create(), schema);
+      expectHtmlWithData(html, {
+        panelType: 'info',
+      });
+    });
+  });
+
+  describe('With CustomPanel NodeSpec FF On ', () => {
+    it('should have data-panel-icon, data-panel-color, data-panel-icon-id and data-panel-icon-text when serializing to DOM', () => {
+      const html = toHTML(
+        schemaWithAllowCustomPanel.nodes.panel.create({
+          panelType: 'custom',
+          panelIcon: ':smiley:',
+          panelColor: '#33FF33',
+          panelIconId: '1f603',
+          panelIconText: '😃',
+        }),
+        schemaWithAllowCustomPanel,
+      );
+
+      expectHtmlWithData(html, {
+        panelType: 'custom',
+        panelIcon: ':smiley:',
+        panelColor: '#33FF33',
+        panelIconId: '1f603',
+        panelIconText: '😃',
+      });
+    });
+
+    describe.each([
+      {
+        subject: 'panelType',
+        html: '<div data-panel-type="tip"><p>testing</p></div>',
+        expected: {
+          panelType: 'tip',
+          panelColor: null,
+          panelIcon: null,
+          panelIconId: null,
+          panelIconText: null,
+        },
+      },
+      {
+        subject: 'icon and color',
+        html: '<div data-panel-type="custom" data-panel-icon=":smiley:" data-panel-color="#33FF33" data-panel-icon-id="1f603" data-panel-icon-text="😃"><p>testing</p></div>',
+        expected: {
+          panelType: 'custom',
+          panelColor: '#33FF33',
+          panelIcon: ':smiley:',
+          panelIconId: '1f603',
+          panelIconText: '😃',
+        },
+      },
+    ])('extract correct values', ({ html, subject, expected }) => {
+      it(`for ${subject}`, () => {
+        const doc = fromHTML(html, schemaWithAllowCustomPanel);
+        const panel = doc.firstChild!;
+        expect(panel.type.name).toContain('panel');
+        expect(panel.attrs).toEqual(expected);
+      });
+    });
+
+    it('should extract the correct attributes of panelType', () => {
+      const doc = fromHTML(
+        "<div data-panel-type='tip' data-panel-icon=':smiley:' data-panel-color='#33FF33' data-panel-icon-id='1f603' data-panel-icon-text='😃'><p>testing</p></div>",
+        schemaWithAllowCustomPanel,
+      );
+      const panel = doc.firstChild;
+      expect(panel?.type?.name).toContain('panel');
+      expect(panel?.attrs).toEqual(
+        expect.objectContaining({
+          panelIcon: ':smiley:',
+          panelColor: '#33FF33',
+          panelIconId: '1f603',
+          panelIconText: '😃',
+        }),
+      );
+    });
+  });
+
+  describe('With CustomPanel NodeSpec FF Off ', () => {
+    describe.each([
+      {
+        subject: 'panelType',
+        html: '<div data-panel-type="info"><p>testing</p></div>',
+        expected: {
+          panelType: 'info',
+          panelColor: null,
+          panelIcon: null,
+          panelIconId: null,
+          panelIconText: null,
+        },
+      },
+      {
+        subject: 'icon and color',
+        html: '<div data-panel-type="custom" data-panel-icon=":smiley:" data-panel-color="#33FF33"><p>testing</p></div>',
+        expected: {
+          panelType: 'info',
+          panelColor: null,
+          panelIcon: null,
+          panelIconId: null,
+          panelIconText: null,
+        },
+      },
+    ])('extract correct values', ({ html, subject, expected }) => {
+      it(`for ${subject}`, () => {
+        const doc = fromHTML(html, schemaWithoutCustomPanel);
+        const panel = doc.firstChild!;
+        expect(panel.type.name).toContain('panel');
+        expect(panel.attrs).toEqual(expected);
+      });
+    });
+
+    it('should have data-panel-type when serializing to DOM', () => {
+      const html = toHTML(
+        schemaWithoutCustomPanel.nodes.panel.create({
+          panelType: 'info',
+        }),
+        schemaWithoutCustomPanel,
+      );
+
+      expectHtmlWithData(html, {
+        panelType: 'info',
+      });
+    });
+  });
+});
+
+function makeSchema(customNodeSpecs?: { [key: string]: NodeSpec }) {
+  const config: SchemaConfig = {
+    nodes: [
+      'doc',
+      'paragraph',
+      'heading',
+      'text',
+      'panel',
+      'orderedList',
+      'bulletList',
+      'listItem',
+    ],
+  };
+  return customNodeSpecs
+    ? createSchema({ ...config, customNodeSpecs })
+    : createSchema(config);
+}

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

@@ -0,0 +1,25 @@
+import { createSchema } from '../../../../schema/create-schema';
+import { fromHTML, toHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+const schema = makeSchema();
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema paragraph node`, () => {
+  it('serializes to <p>', () => {
+    const html = toHTML(schema.nodes.paragraph.create(), schema);
+    expect(html).toContain('<p>');
+  });
+
+  it('matches <p>', () => {
+    const doc = fromHTML('<p>Hello World</p>', schema);
+    const p = doc.firstChild!;
+    expect(p.type.name).toEqual('paragraph');
+    expect(p.firstChild!.text!).toEqual('Hello World');
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: ['doc', 'paragraph', 'text'],
+  });
+}

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

@@ -0,0 +1,46 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { placeholder } from '../../../..';
+import { schema } from 'adf-test-helpers/src/adf-schema'
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema placeholder node`, () => {
+  describe('parse html', () => {
+    it('converts to date PM node', () => {
+      const doc = fromHTML(
+        '<span data-placeholder="Type something..." />',
+        schema,
+      );
+      const node = doc.firstChild!.firstChild!;
+      expect(node.type.spec).toEqual(placeholder);
+    });
+
+    it('gets attributes from html', () => {
+      const doc = fromHTML(
+        '<span data-placeholder="Type something..." />',
+        schema,
+      );
+      const node = doc.firstChild!.firstChild!;
+      expect(node.attrs.text).toEqual('Type something...');
+    });
+  });
+
+  describe('encode html', () => {
+    it('converts html data attributes to node attributes', () => {
+      const attrs = { text: 'Type something...' };
+      // extension node can contain no content
+      const node = schema.nodes.placeholder.createChecked(attrs);
+      const dom = toDOM(node, schema).firstChild! as HTMLElement;
+      expect(dom.getAttribute('data-placeholder')).toEqual('Type something...');
+    });
+
+    it('encodes and decodes to the same node', () => {
+      const attrs = { text: 'Type something...' };
+      const node = schema.nodes.placeholder.createChecked(attrs);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+      const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!
+        .firstChild!;
+      expect(parsedNode).toEqual(node);
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+import { createSchema } from '../../../../schema/create-schema';
+import { fromHTML, toHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+const schema = makeSchema();
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema rule node`, () => {
+  it('serializes to <hr/>', () => {
+    const html = toHTML(schema.nodes.rule.create(), schema);
+    expect(html).toContain('<hr>');
+  });
+
+  it('matches <hr/>', () => {
+    const doc = fromHTML('<hr/>', schema);
+    const p = doc.firstChild!;
+    expect(p.type.name).toEqual('rule');
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: ['doc', 'rule', 'text'],
+  });
+}

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

@@ -0,0 +1,120 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { status } from '../../../..';
+import { StatusLocalIdRegex } from 'adf-test-helpers/src/constants';
+import { schema } from 'adf-test-helpers/src/adf-schema'
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema status node`, () => {
+  describe('parse html', () => {
+    it('converts to status PM node', () => {
+      const doc = fromHTML('<span data-node-type="status" />', schema);
+      const node = doc.firstChild!.firstChild!;
+      expect(node.type.spec).toEqual(status);
+    });
+
+    it('gets attributes from html', () => {
+      const color = 'blue';
+      const localId = '6c5e5301-1311-42e2-aa80-1b7557140b3d';
+      const style = 'bold';
+      const doc = fromHTML(
+        `
+        <span
+          data-node-type="status"
+          data-color="${color}"
+          data-local-id="${localId}"
+          data-style="${style}"
+        >
+          In progress
+        </span>
+      `,
+        schema,
+      );
+      const node = doc.firstChild!.firstChild!;
+      expect(node.attrs).toMatchObject({
+        text: 'In progress',
+        color,
+        localId: expect.stringMatching(StatusLocalIdRegex),
+        style,
+      });
+
+      expect(node.attrs.localId).not.toEqual(localId);
+    });
+
+    it('gets attributes from html without optional ones', () => {
+      const color = 'blue';
+      const doc = fromHTML(
+        `
+        <span
+          data-node-type="status"
+          data-color="${color}"
+        >
+          In progress
+        </span>
+      `,
+        schema,
+      );
+      const node = doc.firstChild!.firstChild!;
+
+      expect(node.attrs).toMatchObject({
+        text: 'In progress',
+        color,
+        localId: expect.stringMatching(StatusLocalIdRegex),
+      });
+    });
+  });
+
+  describe('encode html', () => {
+    it('converts html status attributes to node attributes', () => {
+      const attrs = {
+        text: 'In progress',
+        color: 'blue',
+        localId: '3fba07fc-0458-449c-bba9-04d5555164ea',
+        style: 'subtle',
+      };
+      const node = schema.nodes.status.create(attrs);
+      const dom = toDOM(node, schema).firstChild! as HTMLElement;
+      expect(dom.getAttribute('data-node-type')).toEqual('status');
+      expect(dom.textContent).toEqual(attrs.text);
+      expect(dom.getAttribute('data-color')).toEqual(attrs.color);
+      expect(dom.getAttribute('data-local-id')).toEqual(attrs.localId);
+      expect(dom.getAttribute('data-style')).toEqual(attrs.style);
+    });
+
+    it('encodes and decodes to the same node', () => {
+      const attrs = {
+        text: 'In progress',
+        color: 'blue',
+        localId: '3fba07fc-0458-449c-bba9-04d5555164ea',
+        style: 'bold',
+      };
+      const node = schema.nodes.status.create(attrs);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+      const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!
+        .firstChild!;
+
+      expect(parsedNode.attrs).toMatchObject({
+        text: 'In progress',
+        color: 'blue',
+        localId: expect.stringMatching(StatusLocalIdRegex),
+        style: 'bold',
+      });
+
+      expect(parsedNode.attrs.localId).not.toEqual(attrs.localId);
+    });
+
+    it('converts html status attributes to node attributes without style', () => {
+      const attrs = {
+        text: 'In progress',
+        color: 'blue',
+        localId: '3fba07fc-0458-449c-bba9-04d5555164ea',
+      };
+      const node = schema.nodes.status.create(attrs);
+      const dom = toDOM(node, schema).firstChild! as HTMLElement;
+      expect(dom.getAttribute('data-node-type')).toEqual('status');
+      expect(dom.textContent).toEqual(attrs.text);
+      expect(dom.getAttribute('data-color')).toEqual(attrs.color);
+      expect(dom.getAttribute('data-local-id')).toEqual(attrs.localId);
+      expect(dom.getAttribute('data-style')).toEqual('');
+    });
+  });
+});