chore: add html tests

Related to #1004
bpmn-io · Jan 26, 2024 · f0efa3b · f0efa3b
1 parent c64d69e
commit f0efa3b
Showing 1 changed file with 152 additions and 0 deletions.
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Html.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Html.spec.js
@@ -0,0 +1,152 @@
+import { render } from '@testing-library/preact/pure';
+
+import { Html } from '../../../../../src/render/components/form-fields/Html';
+
+import {
+  createFormContainer,
+} from '../../../../TestHelper';
+
+import { MockFormContext } from '../helper';
+
+let container;
+
+describe('Html', function() {
+
+  beforeEach(function() {
+    container = createFormContainer();
+  });
+
+  afterEach(function() {
+    container.remove();
+  });
+
+
+  it('should render', function() {
+
+    // when
+    const { container } = createHtmlComponent();
+
+    // then
+    const formField = container.querySelector('.fjs-form-field');
+    expect(formField).to.exist;
+    expect(formField.innerHTML).to.eql(`<div>${defaultField.content}</div>`);
+  });
+
+
+  it('should render HTML content with inline styles', function() {
+
+    // given
+    const content = '<div style="font-size: 20px; color: blue;"><p>Some styled content</p></div>';
+
+    // when
+    const { container } = createHtmlComponent({
+      field: { ...defaultField, content }
+    });
+
+    // then
+    const formField = container.querySelector('.fjs-form-field');
+    expect(formField).to.exist;
+    expect(formField.innerHTML).to.eql(`<div>${content}</div>`);
+  });
+
+
+  it('should ignore style tags', function() {
+
+    // given
+    const content = `
+      <style>
+        .test-style { color: red; }
+      </style>
+      <div class="test-style">Content with class style</div>
+    `;
+
+    // when
+    const { container } = createHtmlComponent({
+      field: { ...defaultField, content }
+    });
+
+    // then
+    const formField = container.querySelector('.fjs-form-field');
+    expect(formField).to.exist;
+    expect(formField.innerHTML).to.include('Content with class style');
+
+    const styledDiv = formField.querySelector('.test-style');
+    expect(styledDiv).to.exist;
+
+    // Checking that the style defined in <style> tag is not applied
+    expect(styledDiv.style.color).not.to.equal('red');
+  });
+
+
+  it('should not render Markdown', function() {
+
+    // given
+    const markdownContent = '# Heading\n* Bullet Point';
+
+    // when
+    const { container } = createHtmlComponent({
+      field: { ...defaultField, content: markdownContent }
+    });
+
+    // then
+    const formField = container.querySelector('.fjs-form-field');
+    expect(formField).to.exist;
+    expect(formField.innerHTML).not.to.include('<h1>Heading</h1>');
+    expect(formField.innerHTML).not.to.include('<ul><li>Bullet Point</li></ul>');
+  });
+
+
+  it('should render template insert with HTML content', function() {
+
+    // given
+    const content = 'foo <span>{{foo2}}</span>';
+    const initialData = {
+      foo2: 'bar'
+    };
+
+    // when
+    const { container } = createHtmlComponent({
+      initialData,
+      field: {
+        ...defaultField,
+        content
+      }
+    });
+
+    // then
+    const formField = container.querySelector('.fjs-form-field');
+    expect(formField).to.exist;
+
+    expect(formField.innerHTML).to.eql('<div>foo <span>bar</span></div>');
+  });
+
+
+});
+
+// helpers //////////
+
+const defaultField = {
+  content: '<p>Hello World</p>',
+  type: 'html'
+};
+
+function createHtmlComponent({ services, ...restOptions } = {}) {
+  const options = {
+    domId: 'test-html-component',
+    field: defaultField,
+    ...restOptions
+  };
+
+  return render(
+    <MockFormContext
+      services={ services }
+      options={ options }>
+      <Html
+        domId={ options.domId }
+        errors={ options.errors }
+        field={ options.field } />
+    </MockFormContext>, {
+      container: options.container || container.querySelector('.fjs-form')
+    }
+  );
+}