refactor: migrate SmartSnippetSuggestions Functional Components (#6599)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: alexprudhomme <[email protected]>

Author: Copilot

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/answer-and-source-wrapper.spec.ts

@@ -0,0 +1,46 @@
+import {html} from 'lit';
+import {describe, expect, it} from 'vitest';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {
+  type AnswerAndSourceWrapperProps,
+  renderAnswerAndSourceWrapper,
+} from './answer-and-source-wrapper';
+
+describe('#renderAnswerAndSourceWrapper', () => {
+  const renderComponent = async (
+    props: Partial<AnswerAndSourceWrapperProps> = {},
+    children = html`<div>Answer Content</div>`
+  ) => {
+    const element = await renderFunctionFixture(
+      html`${renderAnswerAndSourceWrapper({
+        props: {
+          id: 'answer-1',
+          ...props,
+        },
+      })(children)}`
+    );
+
+    return element.querySelector('div') as HTMLElement;
+  };
+
+  it('should render a div element', async () => {
+    const wrapper = await renderComponent();
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper.tagName.toLowerCase()).toBe('div');
+  });
+
+  it('should render with answer-and-source part', async () => {
+    const wrapper = await renderComponent();
+    expect(wrapper.getAttribute('part')).toBe('answer-and-source');
+  });
+
+  it('should render with correct id', async () => {
+    const wrapper = await renderComponent({id: 'custom-id'});
+    expect(wrapper.getAttribute('id')).toBe('custom-id');
+  });
+
+  it('should render children', async () => {
+    const wrapper = await renderComponent({}, html`<p>Custom Answer</p>`);
+    expect(wrapper.textContent).toContain('Custom Answer');
+  });
+});

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/answer-and-source-wrapper.ts

@@ -0,0 +1,23 @@
+import {html} from 'lit';
+import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
+
+export interface AnswerAndSourceWrapperProps {
+  /**
+   * The ID of the answer.
+   */
+  id: string;
+}
+
+export const renderAnswerAndSourceWrapper: FunctionalComponentWithChildren<
+  AnswerAndSourceWrapperProps
+> =
+  ({props}) =>
+  (children) => {
+    return html`<div
+      part="answer-and-source"
+      class="pr-6 pb-6 pl-10"
+      id=${props.id}
+    >
+      ${children}
+    </div>`;
+  };

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/footer.spec.ts

@@ -0,0 +1,54 @@
+import type {i18n} from 'i18next';
+import {html} from 'lit';
+import {beforeAll, describe, expect, it} from 'vitest';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {createTestI18n} from '@/vitest-utils/testing-helpers/i18n-utils';
+import {type FooterProps, renderFooter} from './footer';
+
+describe('#renderFooter', () => {
+  let i18n: i18n;
+
+  beforeAll(async () => {
+    i18n = await createTestI18n();
+  });
+
+  const renderComponent = async (
+    props: Partial<FooterProps> = {},
+    children = html`<a href="#">Source</a>`
+  ) => {
+    const element = await renderFunctionFixture(
+      html`${renderFooter({
+        props: {
+          i18n,
+          ...props,
+        },
+      })(children)}`
+    );
+
+    return element.querySelector('footer') as HTMLElement;
+  };
+
+  it('should render a footer element', async () => {
+    const footer = await renderComponent();
+    expect(footer).toBeInTheDocument();
+    expect(footer.tagName.toLowerCase()).toBe('footer');
+  });
+
+  it('should render with footer part', async () => {
+    const footer = await renderComponent();
+    expect(footer.getAttribute('part')).toBe('footer');
+  });
+
+  it('should have correct aria-label with translated text', async () => {
+    const footer = await renderComponent();
+    expect(footer.getAttribute('aria-label')).toBe('Source of the answer');
+  });
+
+  it('should render children', async () => {
+    const footer = await renderComponent(
+      {},
+      html`<a href="#">Custom Source</a>`
+    );
+    expect(footer.textContent).toContain('Custom Source');
+  });
+});

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/footer.ts

@@ -0,0 +1,21 @@
+import type {i18n} from 'i18next';
+import {html} from 'lit';
+import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
+
+export interface FooterProps {
+  /**
+   * The i18n instance for translations.
+   */
+  i18n: i18n;
+}
+
+export const renderFooter: FunctionalComponentWithChildren<FooterProps> =
+  ({props}) =>
+  (children) => {
+    return html`<footer
+      part="footer"
+      aria-label=${props.i18n.t('smart-snippet-source')}
+    >
+      ${children}
+    </footer>`;
+  };

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/get-question-part.spec.ts

@@ -0,0 +1,21 @@
+import {describe, expect, it} from 'vitest';
+import {getQuestionPart} from './get-question-part';
+
+describe('#getQuestionPart', () => {
+  it('should return collapsed part when expanded is false', () => {
+    expect(getQuestionPart('button', false)).toBe('question-button-collapsed');
+    expect(getQuestionPart('text', false)).toBe('question-text-collapsed');
+    expect(getQuestionPart('icon', false)).toBe('question-icon-collapsed');
+  });
+
+  it('should return expanded part when expanded is true', () => {
+    expect(getQuestionPart('button', true)).toBe('question-button-expanded');
+    expect(getQuestionPart('text', true)).toBe('question-text-expanded');
+    expect(getQuestionPart('icon', true)).toBe('question-icon-expanded');
+  });
+
+  it('should handle various base values', () => {
+    expect(getQuestionPart('custom', false)).toBe('question-custom-collapsed');
+    expect(getQuestionPart('another', true)).toBe('question-another-expanded');
+  });
+});

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/get-question-part.ts

@@ -0,0 +1,5 @@
+/**
+ * Helper function to get the question part name based on the base and expanded state.
+ */
+export const getQuestionPart = (base: string, expanded: boolean): string =>
+  `question-${base}-${expanded ? 'expanded' : 'collapsed'}`;

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/question-wrapper.spec.ts

@@ -0,0 +1,49 @@
+import {html} from 'lit';
+import {describe, expect, it} from 'vitest';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {
+  type QuestionWrapperProps,
+  renderQuestionWrapper,
+} from './question-wrapper';
+
+describe('#renderQuestionWrapper', () => {
+  const renderComponent = async (
+    props: Partial<QuestionWrapperProps> = {},
+    children = html`<div>Question Content</div>`
+  ) => {
+    const element = await renderFunctionFixture(
+      html`${renderQuestionWrapper({
+        props: {
+          expanded: false,
+          key: 'question-1',
+          ...props,
+        },
+      })(children)}`
+    );
+
+    return element.querySelector('li') as HTMLElement;
+  };
+
+  it('should render an li element', async () => {
+    const wrapper = await renderComponent();
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper.tagName.toLowerCase()).toBe('li');
+  });
+
+  it('should render with collapsed part when not expanded', async () => {
+    const wrapper = await renderComponent({expanded: false});
+    expect(wrapper.getAttribute('part')).toBe('question-answer-collapsed');
+  });
+
+  it('should render with expanded part when expanded', async () => {
+    const wrapper = await renderComponent({expanded: true});
+    expect(wrapper.getAttribute('part')).toBe('question-answer-expanded');
+  });
+
+  it('should render children inside article', async () => {
+    const wrapper = await renderComponent({}, html`<div>Custom Content</div>`);
+    const article = wrapper.querySelector('article');
+    expect(article).toBeInTheDocument();
+    expect(article?.textContent).toContain('Custom Content');
+  });
+});

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/question-wrapper.ts

@@ -0,0 +1,30 @@
+import {html} from 'lit';
+import {keyed} from 'lit/directives/keyed.js';
+import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
+
+export interface QuestionWrapperProps {
+  /**
+   * Whether the question is expanded.
+   */
+  expanded: boolean;
+  /**
+   * The key for the question.
+   */
+  key: string;
+}
+
+export const renderQuestionWrapper: FunctionalComponentWithChildren<
+  QuestionWrapperProps
+> =
+  ({props}) =>
+  (children) => {
+    return html`${keyed(
+      props.key,
+      html`<li
+        part=${`question-answer-${props.expanded ? 'expanded' : 'collapsed'}`}
+        class="flex flex-col"
+      >
+        <article class="contents">${children}</article>
+      </li>`
+    )}`;
+  };

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/question.spec.ts

@@ -0,0 +1,102 @@
+import {html} from 'lit';
+import {describe, expect, it, vi} from 'vitest';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {type QuestionProps, renderQuestion} from './question';
+
+describe('#renderQuestion', () => {
+  const renderComponent = async (
+    props: Partial<QuestionProps> = {},
+    children = html``
+  ) => {
+    const element = await renderFunctionFixture(
+      html`${renderQuestion({
+        props: {
+          ariaControls: 'answer-1',
+          expanded: false,
+          onClick: vi.fn(),
+          question: 'What is the answer?',
+          ...props,
+        },
+      })(children)}`
+    );
+
+    return element.querySelector('button') as HTMLButtonElement;
+  };
+
+  it('should render a button', async () => {
+    const button = await renderComponent();
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should render with collapsed button part when not expanded', async () => {
+    const button = await renderComponent({expanded: false});
+    expect(button.getAttribute('part')).toBe('question-button-collapsed');
+  });
+
+  it('should render with expanded button part when expanded', async () => {
+    const button = await renderComponent({expanded: true});
+    expect(button.getAttribute('part')).toBe('question-button-expanded');
+  });
+
+  it('should render heading with question text', async () => {
+    const button = await renderComponent({question: 'What is AI?'});
+    const headingElement = button.querySelector('[part*="question-text"]');
+    expect(headingElement?.textContent).toContain('What is AI?');
+  });
+
+  it('should render heading with correct level when headingLevel is provided', async () => {
+    const button = await renderComponent({
+      headingLevel: 2,
+      question: 'Question?',
+    });
+    const heading = button.querySelector('h3');
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('should render heading with collapsed text part when not expanded', async () => {
+    const button = await renderComponent({expanded: false});
+    const headingElement = button.querySelector('[part*="question-text"]');
+    expect(headingElement?.getAttribute('part')).toBe(
+      'question-text-collapsed'
+    );
+  });
+
+  it('should render heading with expanded text part when expanded', async () => {
+    const button = await renderComponent({expanded: true});
+    const headingElement = button.querySelector('[part*="question-text"]');
+    expect(headingElement?.getAttribute('part')).toBe('question-text-expanded');
+  });
+
+  it('should have aria-expanded when expanded', async () => {
+    const button = await renderComponent({expanded: true});
+    expect(button.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have aria-expanded set to false when not expanded', async () => {
+    const button = await renderComponent({expanded: false});
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should have aria-controls when expanded', async () => {
+    const button = await renderComponent({
+      expanded: true,
+      ariaControls: 'custom-id',
+    });
+    expect(button.getAttribute('aria-controls')).toBe('custom-id');
+  });
+
+  it('should have aria-controls when not expanded', async () => {
+    const button = await renderComponent({
+      expanded: false,
+      ariaControls: 'custom-id',
+    });
+    expect(button.getAttribute('aria-controls')).toBe('custom-id');
+  });
+
+  it('should render children before question text', async () => {
+    const button = await renderComponent({}, html`<span class="icon">→</span>`);
+    const icon = button.querySelector('.icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon?.textContent).toBe('→');
+  });
+});