Merge pull request #555 from nyaruka/copilot/fix-554

Add markdown support in form field errors

Author: ericnewcomer

screenshots/truth/formfield/markdown-errors.png

@@ -1,5 +1,6 @@
 import { TemplateResult, html, css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { renderMarkdown } from '../markdown';
 
 /**
  * A small wrapper to display labels and help text in a smartmin style.
@@ -94,7 +95,9 @@ export class FormField extends LitElement {
   public render(): TemplateResult {
     const errors = !this.hideErrors
       ? (this.errors || []).map((error: string) => {
-          return html` <div class="alert-error">${error}</div> `;
+          return html`
+            <div class="alert-error">${renderMarkdown(error)}</div>
+          `;
         })
       : [];
 

screenshots/truth/formfield/no-errors.png

@@ -0,0 +1,121 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { FormField } from '../src/formfield/FormField';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('temba-field', () => {
+  it('renders field with plain text errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${['This is a plain text error', 'Another error message']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+    expect(errorElements[0].textContent.trim()).to.equal(
+      'This is a plain text error'
+    );
+    expect(errorElements[1].textContent.trim()).to.equal(
+      'Another error message'
+    );
+
+    await assertScreenshot('formfield/plain-text-errors', getClip(formField));
+  });
+
+  it('renders field with markdown errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${[
+          'This is **bold** text',
+          'This has a [link](https://example.com)',
+          'This is *italic* and **bold** with a [link](https://example.com)'
+        ]}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(3);
+
+    // First error should have bold text
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('bold');
+
+    // Second error should have a link
+    const secondError = errorElements[1];
+    const linkElement = secondError.querySelector('a');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+    expect(linkElement.textContent).to.equal('link');
+
+    // Third error should have both bold, italic, and link
+    const thirdError = errorElements[2];
+    const thirdBoldElement = thirdError.querySelector('strong');
+    const thirdItalicElement = thirdError.querySelector('em');
+    const thirdLinkElement = thirdError.querySelector('a');
+    expect(thirdBoldElement).to.not.be.null;
+    expect(thirdItalicElement).to.not.be.null;
+    expect(thirdLinkElement).to.not.be.null;
+
+    await assertScreenshot('formfield/markdown-errors', getClip(formField));
+  });
+
+  it('renders field without errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field label="Test Field" name="test">
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that no errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(0);
+
+    await assertScreenshot('formfield/no-errors', getClip(formField));
+  });
+
+  it('renders in widget-only mode with errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        widget_only
+        .errors=${['Widget only **error** with [link](https://example.com)']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that error is rendered in widget-only mode
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(1);
+
+    const errorElement = errorElements[0];
+    const boldElement = errorElement.querySelector('strong');
+    const linkElement = errorElement.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(linkElement).to.not.be.null;
+
+    await assertScreenshot(
+      'formfield/widget-only-markdown-errors',
+      getClip(formField)
+    );
+  });
+});

screenshots/truth/formfield/plain-text-errors.png

@@ -0,0 +1,45 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Checkbox } from '../src/checkbox/Checkbox';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('FormElement markdown integration', () => {
+  it('renders checkbox with markdown errors', async () => {
+    const checkbox: Checkbox = await fixture(html`
+      <temba-checkbox
+        label="Accept Terms"
+        .errors=${[
+          'Please read the **terms and conditions** at [this link](https://example.com)',
+          'This field *requires* acceptance'
+        ]}
+      ></temba-checkbox>
+    `);
+
+    await checkbox.updateComplete;
+
+    // Check that errors are rendered with markdown
+    const errorElements = checkbox.shadowRoot
+      .querySelectorAll('temba-field')[0]
+      .shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+
+    // First error should have bold text and link
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    const linkElement = firstError.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('terms and conditions');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+
+    // Second error should have italic text
+    const secondError = errorElements[1];
+    const italicElement = secondError.querySelector('em');
+    expect(italicElement).to.not.be.null;
+    expect(italicElement.textContent).to.equal('requires');
+
+    await assertScreenshot(
+      'integration/checkbox-markdown-errors',
+      getClip(checkbox)
+    );
+  });
+});