test(atomic): test localized-string directive (#4895)

https://coveord.atlassian.net/browse/KIT-3895

packages/atomic/src/directives/localized-string.spec.ts

@@ -0,0 +1,110 @@
+import i18next, {i18n as I18n} from 'i18next';
+import {html, render} from 'lit';
+import {localizedString, LocalizedStringProps} from './localized-string';
+
+describe('localizedString', () => {
+  let container: HTMLElement;
+  let i18n: I18n;
+
+  beforeEach(() => {
+    i18n = i18next.createInstance();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should render a localized string with placeholders', async () => {
+    await i18n.init({
+      lng: 'en',
+      resources: {
+        en: {
+          translation: {
+            'test.key': 'Hello, {{name}}!',
+          },
+        },
+      },
+    });
+
+    const props: LocalizedStringProps = {
+      i18n,
+      key: 'test.key',
+      params: {name: 'World'},
+    };
+
+    render(html`<div>${localizedString(props)}</div>`, container);
+
+    expect(container.textContent).toContain('Hello, World!');
+  });
+
+  it('should render a localized string with multiple placeholders', async () => {
+    await i18n.init({
+      lng: 'en',
+      resources: {
+        en: {
+          translation: {
+            'test.key': 'Hello, {{name}}! You have {{count}} messages.',
+          },
+        },
+      },
+    });
+
+    const props: LocalizedStringProps = {
+      i18n,
+      key: 'test.key',
+      params: {name: 'World', count: '5'},
+    };
+
+    render(html`<div>${localizedString(props)}</div>`, container);
+
+    expect(container.textContent).toContain(
+      'Hello, World! You have 5 messages.'
+    );
+  });
+
+  it('should render a localized string with HTML template parameters', async () => {
+    await i18n.init({
+      lng: 'en',
+      resources: {
+        en: {
+          translation: {
+            'test.key': 'Hello, {{name}}! Here is a link: {{link}}.',
+          },
+        },
+      },
+    });
+
+    const props: LocalizedStringProps = {
+      i18n,
+      key: 'test.key',
+      params: {
+        name: 'World',
+        link: html`<a href="https://example.com">example</a>`,
+      },
+    };
+
+    render(html`<div>${localizedString(props)}</div>`, container);
+
+    expect(container.textContent).toContain(
+      'Hello, World! Here is a link: example'
+    );
+    const link = container.querySelector('a');
+    expect(link).toBeTruthy();
+    expect(link?.getAttribute('href')).toBe('https://example.com');
+    expect(link?.textContent).toBe('example');
+  });
+
+  it('should throw an error if used in an unsupported part type', () => {
+    const props: LocalizedStringProps = {
+      i18n,
+      key: 'test.key',
+      params: {name: 'World'},
+    };
+
+    expect(() => {
+      render(html`<div .prop=${localizedString(props)}></div>`, container);
+    }).toThrow('localizedString can only be used in child bindings');
+  });
+});

packages/atomic/src/directives/localized-string.ts

@@ -9,7 +9,6 @@ export interface LocalizedStringProps {
   count?: number;
 }
 
-// TODO: KIT-3822: add unit tests to this directive
 class LocalizedStringDirective extends Directive {
   private readonly delimitingCharacter = '\u001d'; // Unicode group separator
   private readonly placeholderPrefixCharacter = '\u001a'; // Unicode substitute character