[SharedUX] Add unit tests for the feedback snippet component (#235943)

Closes #234445

## Summary

- Added unit tests for the feedback snippet component.
- Followed the GIVEN, WHEN, THEN pattern for `feedback_snippet` test
file which is the one carrying most of the user interaction logic
(inspired by #232925).
- Included snapshot tests for both the panel and the button test files.

## Testing
You can run them with: `node scripts/jest
--config=src/platform/packages/shared/shared-ux/feedback_snippet/jest.config.js`

**Test coverage:** 

(Stories and confetti animation have no tests)

File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s

-----------------------------------------|---------|----------|---------|---------|------------------------------------------
shared-ux/feedback_snippet/src | 91.66 | 100 | 92.85 | 91.48 |
feedback_button.tsx | 100 | 100 | 100 | 100 |
feedback_panel.tsx | 100 | 100 | 100 | 100 |
feedback_snippet.stories.tsx | 0 | 100 | 0 | 0 | 14-37
feedback_snippet.tsx | 100 | 100 | 100 | 100 |
shared-ux/feedback_snippet/src/confetti | 0 | 0 | 0 | 0 |
confetti.component.tsx | 0 | 0 | 0 | 0 | 14-38

Author: angeles-mb

src/platform/packages/shared/shared-ux/feedback_snippet/README.md

@@ -21,3 +21,8 @@ The component has two main states:
 - **Prompt:** The panel shows a custom `promptViewMessage` to gather feedback from the user.
 - **Positive:** The panel shows a thank you message and then automatically dismisses itself.
 - **Negative:** The panel updates to show a custom `surveyUrl` call-to-action button. The panel remains visible until the user explicitly dismisses it or navigates to the survey (which opens in a new tab).
+
+## Running tests
+You can run tests with:
+
+`node scripts/jest --config=src/platform/packages/shared/shared-ux/feedback_snippet/jest.config.js`

src/platform/packages/shared/shared-ux/feedback_snippet/jest.config.js

@@ -8,7 +8,7 @@
  */
 
 module.exports = {
-  preset: '@kbn/test/jest_node',
+  preset: '@kbn/test',
   rootDir: '../../../../../..',
   roots: ['<rootDir>/src/platform/packages/shared/shared-ux/feedback_snippet'],
 };

src/platform/packages/shared/shared-ux/feedback_snippet/src/__snapshots__/feedback_button.test.tsx.snap

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { FeedbackButton } from './feedback_button';
+
+describe('FeedbackButton', () => {
+  const handleOpenSurveyMock = jest.fn();
+  beforeEach(() => {
+    render(
+      <FeedbackButton
+        feedbackButtonMessage={'Got feedback?'}
+        feedbackSnippetId={'feedbackSnippetTestId'}
+        handleOpenSurvey={handleOpenSurveyMock}
+      />
+    );
+  });
+
+  it('renders with the expected id', () => {
+    const button = screen.getByRole('button', { name: 'Feedback button' });
+    expect(button).toHaveAttribute('id', 'feedbackSnippetTestIdButtonSurveyLink');
+    expect(button).toMatchSnapshot();
+  });
+
+  it('calls open survey handler when clicked', async () => {
+    const button = screen.getByRole('button', { name: 'Feedback button' });
+    await userEvent.click(button);
+    expect(handleOpenSurveyMock).toHaveBeenCalledTimes(1);
+  });
+});

src/platform/packages/shared/shared-ux/feedback_snippet/src/__snapshots__/feedback_panel.test.tsx.snap

@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { FeedbackPanel } from './feedback_panel';
+import type { FeedbackView } from './feedback_snippet';
+import { I18nProvider } from '@kbn/i18n-react';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('./confetti');
+
+describe('FeedbackPanel', () => {
+  const handleDismissPanel = jest.fn();
+  const handleOpenSurveyAndDismissPanel = jest.fn();
+  const handleNegativeFeedback = jest.fn();
+  const handlePositiveFeedback = jest.fn();
+  const testCases: Array<{ view: FeedbackView; expectedElements: Array<() => HTMLElement> }> = [
+    {
+      view: 'prompt',
+      expectedElements: [
+        () => screen.getByRole('button', { name: 'Thumb down' }),
+        () => screen.getByRole('button', { name: 'Thumb up' }),
+        () => screen.getByRole('button', { name: 'Close feedback panel' }),
+      ],
+    },
+    {
+      view: 'positive',
+      expectedElements: [() => screen.getByTestId('feedbackSnippetPanelPositiveIcon')],
+    },
+    {
+      view: 'negative',
+      expectedElements: [() => screen.getByRole('button', { name: 'Take quick survey' })],
+    },
+  ];
+  const renderPanel = (view: FeedbackView) => {
+    return render(
+      <I18nProvider>
+        <FeedbackPanel
+          feedbackSnippetId="feedbackSnippetTestId"
+          feedbackView={view}
+          promptViewMessage="Was this page helpful?"
+          handleDismissPanel={handleDismissPanel}
+          handleOpenSurveyAndDismissPanel={handleOpenSurveyAndDismissPanel}
+          handleNegativeFeedback={handleNegativeFeedback}
+          handlePositiveFeedback={handlePositiveFeedback}
+        />
+      </I18nProvider>
+    );
+  };
+
+  it.each(testCases)(
+    'renders with the expected inner components based on the feedback view: $view',
+    async ({ view, expectedElements }) => {
+      renderPanel(view);
+      const panel = await screen.findByTestId('feedbackSnippetPanel');
+      for (const findElement of expectedElements) {
+        const element = findElement();
+        expect(element).toBeInTheDocument();
+        expect(panel.contains(element)).toBe(true);
+      }
+      expect(panel).toMatchSnapshot();
+    }
+  );
+
+  it('calls handlePositiveFeedback when thumb up is clicked', async () => {
+    renderPanel('prompt');
+    const button = screen.getByRole('button', { name: 'Thumb up' });
+    await userEvent.click(button);
+    expect(handlePositiveFeedback).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls handleNegativeFeedback when thumb down is clicked', async () => {
+    renderPanel('prompt');
+    const button = screen.getByRole('button', { name: 'Thumb down' });
+    await userEvent.click(button);
+    expect(handleNegativeFeedback).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls handleDismissPanel when close is clicked', async () => {
+    renderPanel('prompt');
+    const button = screen.getByRole('button', { name: 'Close feedback panel' });
+    await userEvent.click(button);
+    expect(handleDismissPanel).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls handleOpenSurveyAndDismissPanel when survey button is clicked', async () => {
+    renderPanel('negative');
+    const button = screen.getByRole('button', { name: 'Take quick survey' });
+    await userEvent.click(button);
+    expect(handleOpenSurveyAndDismissPanel).toHaveBeenCalledTimes(1);
+  });
+});

src/platform/packages/shared/shared-ux/feedback_snippet/src/feedback_button.test.tsx

@@ -137,7 +137,13 @@ export const FeedbackPanel = ({
 
   const positiveFooter = (
     <EuiFlexItem grow={false}>
-      <EuiIcon type="faceHappy" color="success" size="l" aria-label={faceHappyIconLabel} />
+      <EuiIcon
+        data-test-subj="feedbackSnippetPanelPositiveIcon"
+        type="faceHappy"
+        color="success"
+        size="l"
+        aria-label={faceHappyIconLabel}
+      />
     </EuiFlexItem>
   );