UIPCIR-77: Jest/RTL: Cover CirculationNoteFields component with unit …

…tests (#206)

(cherry picked from commit b672dbf)

CHANGELOG.md

@@ -1,8 +1,9 @@
 # Change history for ui-plugin-create-inventory-records
 
-## 5.1.0 (In progress)
+## [5.1.0] (IN PROGRESS)
 
 * Jest/RTL: Cover `ContributorFields` component with unit tests. Refs UIPCIR-76.
+* Jest/RTL: Cover CirculationNoteFields component with unit tests. Refs (UIPCIR-77)
 
 ## [5.0.0](https://github.com/folio-org/ui-plugin-create-inventory-records/tree/v5.0.0) (2024-10-30)
 [Full Changelog](https://github.com/folio-org/ui-plugin-create-inventory-records/compare/v4.1.0...v5.0.0)

package.json

@@ -124,7 +124,7 @@
     "@folio/stripes-cli": "^3.2.0",
     "@folio/stripes-components": "^12.2.0",
     "@folio/stripes-core": "^10.2.0",
-    "@folio/stripes-testing": "^4.7.0",
+    "@folio/stripes-testing": "^4.9.1",
     "@formatjs/cli": "^6.1.3",
     "core-js": "^3.6.4",
     "react": "^18.2.0",

src/components/CirculationNoteFields/CirculationNoteFields.test.js

@@ -0,0 +1,71 @@
+import {
+  fireEvent,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+import { runAxeTest } from '@folio/stripes-testing';
+
+import {
+  renderWithIntl,
+  renderWithRouter,
+  translationsProperties,
+  renderWithFinalForm,
+} from '../../../test/jest/helpers';
+
+import CirculationNoteFields from './CirculationNoteFields';
+
+const renderCirculationNoteFields = () => {
+  return renderWithIntl(
+    renderWithRouter(renderWithFinalForm(<CirculationNoteFields />)),
+    translationsProperties,
+  );
+};
+
+describe('CirculationNoteFields component', () => {
+  it('should be rendered with no axe errors', async () => {
+    const { container } = renderCirculationNoteFields();
+
+    await runAxeTest({ rootNode: container });
+  });
+
+  it('should render correct group of fields', () => {
+    renderCirculationNoteFields();
+
+    expect(screen.getByRole('group', { name: /item notes/i })).toBeInTheDocument();
+  });
+
+  it('should render "Add check in / check out note" button', () => {
+    renderCirculationNoteFields();
+
+    expect(screen.getByRole('button', { name: /add check in \/ check out note/i })).toBeInTheDocument();
+  });
+
+  describe('when clicking "Add check in / check out note" button', () => {
+    it('should render fields with no axe errors', async () => {
+      const { container } = renderCirculationNoteFields();
+
+      fireEvent.click(screen.getByRole('button', { name: /add check in \/ check out note/i }));
+
+      await runAxeTest({ rootNode: container });
+    });
+
+    it('should render correct fields', () => {
+      renderCirculationNoteFields();
+
+      fireEvent.click(screen.getByRole('button', { name: /add check in \/ check out note/i }));
+
+      expect(screen.getByRole('combobox', { name: /note type/i })).toBeInTheDocument();
+      expect(screen.getByRole('textbox', { name: /note/i })).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: /staff only/i })).toBeInTheDocument();
+    });
+
+    it('should render correct "Note type" dropdown options', () => {
+      renderCirculationNoteFields();
+
+      fireEvent.click(screen.getByRole('button', { name: /add check in \/ check out note/i }));
+      fireEvent.click(screen.getByRole('combobox', { name: /note type/i }));
+
+      expect(screen.getByRole('option', { name: /check in note/i })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: /check out note/i })).toBeInTheDocument();
+    });
+  });
+});