apps/userdashboard: add test for AiReportExplanation component

apps/userdashboard/assets/js/a4_candy_userdashboard/__tests__/AiReportExplanation.jest.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { AiReportExplanation } from '../AiReportExplanation'
+
+test('Snapshot Read More <AiReportExplanation>', () => {
+  const { container } = render(
+    <AiReportExplanation AiReport="This is the ai report" />
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('Snapshot Read Less <AiReportExplanation>', () => {
+  const { container } = render(
+    <AiReportExplanation AiReport="This is the ai report" />
+  )
+  const button = screen.getByRole('button')
+  fireEvent.click(button)
+  expect(container).toMatchSnapshot()
+})
+
+test('Render <AiReportExplanation>', () => {
+  render(<AiReportExplanation AiReport="This is the ai report" />)
+  const comment = screen.getByText('Read more')
+  expect(comment).toBeTruthy()
+})
+
+test('Read More <AiReportExplanation>', () => {
+  render(<AiReportExplanation AiReport="This is the ai report" />)
+  const readMore = screen.getByText('Read more')
+  expect(readMore).toBeTruthy()
+  const button = screen.getByRole('button')
+  expect(button).toBeTruthy()
+  fireEvent.click(button)
+  const readLess = screen.getByText('Read less')
+  expect(readLess).toBeTruthy()
+})

apps/userdashboard/assets/js/a4_candy_userdashboard/__tests__/__snapshots__/AiReportExplanation.jest.jsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Read Less <AiReportExplanation> 1`] = `
+<div>
+  <li
+    class="alert alert--danger d-flex text-start mb-3"
+  >
+    <i
+      aria-hidden="True"
+      class="fas fa-exclamation-circle text-danger pt-1 pe-2"
+    />
+    <p>
+      This comment contains disinformation. Defakts uses an Artificial Intelligence to scan content for disinformation. Disinformation often shows certain characteristics that allow for a reliable identification. 
+      This is the ai report 
+      <button
+        aria-label="Click to hide the AI explanation for reporting this comment."
+        class="btn--link text-danger"
+        type="button"
+      >
+        Read less
+      </button>
+    </p>
+  </li>
+</div>
+`;
+
+exports[`Snapshot Read More <AiReportExplanation> 1`] = `
+<div>
+  <li
+    class="alert alert--danger d-flex text-start mb-3"
+  >
+    <i
+      aria-hidden="True"
+      class="fas fa-exclamation-circle text-danger pt-1 pe-2"
+    />
+    <p>
+      This comment contains disinformation. Defakts uses an Artificial Intelligence to scan content for disinformation. Disinformation often shows certain characteristics that allow for a reliable identification. 
+      <button
+        aria-label="Click to view the AI explanation for reporting this comment."
+        class="btn--link text-danger"
+        type="button"
+      >
+        Read more
+      </button>
+    </p>
+  </li>
+</div>
+`;