cmte/src/core/task/__tests__/template-interpolation.test.js

Design by Committee™ except it's just you and LLMs

import { TemplateRenderer } from "../../../templates/renderer.js";
describe('Complex Variable Interpolation', () => {
  let renderer;
  beforeEach(() => {
    renderer = new TemplateRenderer({});
  });
  describe('nested object access', () => {
    test('handles deeply nested objects', async () => {
      const context = {
        user: {
          profile: {
            name: 'Test User',
            settings: {
              theme: 'dark',
              notifications: {
                email: true,
                push: false
              }
            }
          }
        }
      };
      renderer = new TemplateRenderer(context);
      const template = `
# User Profile
Name: {{user.profile.name}}
Theme: {{user.profile.settings.theme}}
Email Notifications: {{user.profile.settings.notifications.email}}
Push Notifications: {{user.profile.settings.notifications.push}}
`;
      const result = await renderer.render(template);
      expect(result).toContain('Name: Test User');
      expect(result).toContain('Theme: dark');
      expect(result).toContain('Email Notifications: true');
      expect(result).toContain('Push Notifications: false');
    });
  });
  describe('array access and iteration', () => {
    test('handles array indexing and iteration', async () => {
      const context = {
        items: ['first', 'second', 'third'],
        users: [{
          name: 'Alice',
          role: 'admin'
        }, {
          name: 'Bob',
          role: 'user'
        }, {
          name: 'Charlie',
          role: 'user'
        }]
      };
      renderer = new TemplateRenderer(context);
      const template = `
# Array Tests
First Item: {{items.0}}
Second Item: {{items.1}}

## Users
{{#users}}
- {{name}} ({{role}})
{{/users}}
`;
      const result = await renderer.render(template);
      expect(result).toContain('First Item: first');
      expect(result).toContain('Second Item: second');
      expect(result).toContain('- Alice (admin)');
      expect(result).toContain('- Bob (user)');
      expect(result).toContain('- Charlie (user)');
    });
  });
  describe('section blocks', () => {
    test('handles conditional sections and inverted sections', async () => {
      const context = {
        hasAccess: true,
        noAccess: false,
        emptyList: [],
        nonEmptyList: ['item'],
        user: {
          isAdmin: true,
          permissions: ['read', 'write']
        }
      };
      renderer = new TemplateRenderer(context);
      const template = `
# Access Control
{{#hasAccess}}
User has access
{{/hasAccess}}
{{^noAccess}}
User is not blocked
{{/noAccess}}

# Lists
{{#nonEmptyList}}
Has items
{{/nonEmptyList}}
{{^emptyList}}
List is empty
{{/emptyList}}

# Admin Features
{{#user.isAdmin}}
Admin Controls:
{{#user.permissions}}
- {{.}}
{{/user.permissions}}
{{/user.isAdmin}}
`;
      const result = await renderer.render(template);
      expect(result).toContain('User has access');
      expect(result).toContain('User is not blocked');
      expect(result).toContain('Has items');
      expect(result).toContain('List is empty');
      expect(result).toContain('Admin Controls:');
      expect(result).toContain('- read');
      expect(result).toContain('- write');
    });
  });
  describe('nested iteration with conditionals', () => {
    test('handles nested iterations with conditional rendering', async () => {
      const context = {
        departments: [{
          name: 'Engineering',
          teams: [{
            name: 'Frontend',
            hasProjects: true,
            projects: ['UI', 'Design System']
          }, {
            name: 'Backend',
            hasProjects: true,
            projects: ['API', 'Database']
          }, {
            name: 'DevOps',
            hasProjects: false,
            projects: []
          }]
        }, {
          name: 'Marketing',
          teams: [{
            name: 'Digital',
            hasProjects: true,
            projects: ['SEO', 'Social Media']
          }, {
            name: 'Events',
            hasProjects: false,
            projects: []
          }]
        }]
      };
      renderer = new TemplateRenderer(context);
      const template = `
# Department Structure
{{#departments}}
## {{name}}
{{#teams}}
### {{name}}
{{#hasProjects}}
Projects:
{{#projects}}
- {{.}}
{{/projects}}
{{/hasProjects}}
{{^hasProjects}}
No active projects
{{/hasProjects}}
{{/teams}}
{{/departments}}
`;
      const result = await renderer.render(template);
      expect(result).toContain('## Engineering');
      expect(result).toContain('### Frontend');
      expect(result).toContain('- UI');
      expect(result).toContain('- Design System');
      expect(result).toContain('### DevOps');
      expect(result).toContain('No active projects');
      expect(result).toContain('## Marketing');
      expect(result).toContain('### Digital');
      expect(result).toContain('- SEO');
      expect(result).toContain('### Events');
      expect(result).toContain('No active projects');
    });
  });
});