redefined-designs/backend/tests/unit/emailTemplates.test.ts

import {
  TEMPLATES,
  TemplateKey,
  missingPlaceholders,
  renderTemplate,
  SAMPLE_VALUES
} from '../../src/emailTemplates';

const KEYS: TemplateKey[] = [
  'verification',
  'passwordReset',
  'favoriteSold',
  'favoriteWithdrawn',
  'cartReminder',
  'emailChanged'
];

describe('the built-in templates', () => {
  it.each(KEYS)('%s has a default subject and body', (key) => {
    expect(TEMPLATES[key].defaultSubject.trim()).not.toBe('');
    expect(TEMPLATES[key].defaultBody.trim()).not.toBe('');
  });

  // A default that would be refused on save is a default nobody can edit and
  // put back.
  it.each(KEYS)('%s default body satisfies its own required placeholders', (key) => {
    expect(missingPlaceholders(key, TEMPLATES[key].defaultBody)).toEqual([]);
  });
});

describe('missingPlaceholders', () => {
  it('names the placeholder a body has dropped', () => {
    expect(missingPlaceholders('passwordReset', 'Hello, no link here.')).toEqual(['resetUrl']);
  });

  it('is satisfied once the placeholder is present', () => {
    expect(missingPlaceholders('passwordReset', 'Reset it [here]({{resetUrl}}).')).toEqual([]);
  });

  it('reports every missing placeholder rather than the first', () => {
    const missing = missingPlaceholders('cartReminder', 'You have things.');
    expect(missing).toContain('itemList');
    expect(missing).toContain('cartUrl');
  });

  it('tolerates whitespace inside the braces', () => {
    expect(missingPlaceholders('passwordReset', 'Go [here]({{ resetUrl }}).')).toEqual([]);
  });
});

describe('renderTemplate', () => {
  const resetValues = { resetUrl: 'https://shop.test/reset-password?token=abc' };

  it('substitutes a placeholder into the rendered body', () => {
    const { html } = renderTemplate('passwordReset', {}, resetValues);
    expect(html).toContain('https://shop.test/reset-password?token=abc');
    expect(html).not.toContain('{{resetUrl}}');
  });

  it('renders markdown as HTML', () => {
    const { html } = renderTemplate(
      'passwordReset',
      { body: 'Use **this** [link]({{resetUrl}}).' },
      resetValues
    );
    expect(html).toContain('<strong>this</strong>');
    expect(html).toContain('<a href="https://shop.test/reset-password?token=abc"');
  });

  // The reason markdown-it runs with html disabled. An admin editing copy must
  // not be able to put script into a customer's inbox, and sanitising after the
  // fact is a weaker guarantee than never emitting it.
  it('escapes raw HTML in a stored body rather than passing it through', () => {
    const { html } = renderTemplate(
      'passwordReset',
      { body: '<script>alert(1)</script> [link]({{resetUrl}})' },
      resetValues
    );
    expect(html).not.toContain('<script>');
    expect(html).toContain('&lt;script&gt;');
  });

  it('falls back to the built-in body when nothing is stored', () => {
    const stored = renderTemplate('passwordReset', {}, resetValues);
    const explicit = renderTemplate(
      'passwordReset',
      { body: TEMPLATES.passwordReset.defaultBody },
      resetValues
    );
    expect(stored.html).toBe(explicit.html);
  });

  it('uses a stored subject over the default, and substitutes into it', () => {
    const { subject } = renderTemplate(
      'favoriteSold',
      { subject: '{{itemName}} is gone' },
      { itemName: 'Oak table', siteUrl: 'https://shop.test' }
    );
    expect(subject).toBe('Oak table is gone');
  });

  // Values are substituted into the markdown source, so a value that needs to
  // become a list has to arrive as markdown. Emitting HTML here would be
  // escaped and shown to the customer as literal tags.
  it('renders a markdown list supplied as a placeholder value', () => {
    const { html } = renderTemplate(
      'cartReminder',
      {},
      {
        greeting: 'Hi Thom,',
        itemList: '- Oak table\n- Brass lamp',
        cartUrl: 'https://shop.test/cart'
      }
    );
    expect(html).toContain('<ul>');
    expect(html).toContain('<li>Oak table</li>');
  });

  // The consent sentence explains why the email is lawful to send. It is
  // appended by the server precisely so that editing the copy cannot remove it.
  it.each(['favoriteSold', 'favoriteWithdrawn'] as TemplateKey[])(
    'appends the unremovable consent footer to %s',
    (key) => {
      const { html } = renderTemplate(
        key,
        { body: 'Short replacement copy about {{itemName}}.' },
        { itemName: 'Oak table', siteUrl: 'https://shop.test' }
      );
      expect(html).toContain('favorited');
      expect(html).toContain('account page');
    }
  );

  it('does not append that footer to templates it does not belong to', () => {
    const { html } = renderTemplate('passwordReset', {}, resetValues);
    expect(html).not.toContain('account page');
  });

  // An unsubstituted placeholder in the output means a caller forgot a value,
  // and shipping "{{resetUrl}}" to a customer is worse than failing.
  it('leaves no unsubstituted placeholders when every value is supplied', () => {
    const { html, subject } = renderTemplate(
      'cartReminder',
      {},
      { greeting: 'Hi Thom,', itemList: '- One thing', cartUrl: 'https://shop.test/cart' }
    );
    expect(html).not.toMatch(/\{\{\s*\w+\s*\}\}/);
    expect(subject).not.toMatch(/\{\{\s*\w+\s*\}\}/);
  });
});

describe('SAMPLE_VALUES, which the admin preview renders with', () => {
  // A missing sample renders the preview with a literal {{placeholder}} in it,
  // which teaches the admin their copy is broken when it is not. Adding a
  // placeholder to a template must mean adding a sample for it.
  it.each(KEYS)('%s has a sample for every placeholder it accepts', (key) => {
    const missing = TEMPLATES[key].available.filter((name) => !(name in SAMPLE_VALUES));
    expect(missing).toEqual([]);
  });

  it.each(KEYS)('%s previews with no placeholder left unsubstituted', (key) => {
    const { html, subject } = renderTemplate(key, {}, SAMPLE_VALUES);
    expect(html).not.toMatch(/\{\{\s*\w+\s*\}\}/);
    expect(subject).not.toMatch(/\{\{\s*\w+\s*\}\}/);
  });
});