increase test coverage

src/helpers/useClickOutside.test.js

@@ -0,0 +1,63 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useClickOutside from './useClickOutside';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+jest.mock('semantic-ui-react/dist/commonjs/lib', () => ({
+  doesNodeContainClick: jest.fn(),
+}));
+
+describe('useClickOutside', () => {
+  let ref;
+  let callback;
+
+  beforeEach(() => {
+    ref = { current: {} };
+    callback = jest.fn();
+  });
+
+  it('does not call callback function when clicked inside', () => {
+    doesNodeContainClick.mockImplementation(() => true);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside and no refs', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() => useClickOutside({ callback }));
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+});

src/helpers/useFirstVisited.test.js

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useFirstVisited from './useFirstVisited';
+
+describe('useFirstVisited', () => {
+  let observe;
+  let unobserve;
+  let callback;
+  let disconnect;
+
+  beforeEach(() => {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+
+    window.IntersectionObserver = jest.fn(function (cb) {
+      this.observe = observe;
+      this.unobserve = unobserve;
+      this.disconnect = disconnect;
+      callback = cb;
+    });
+  });
+  it('should set intersected to true when element is intersecting', async () => {
+    const ref = { current: document.createElement('div') };
+    const { result } = renderHook(() => useFirstVisited(ref));
+    const entry = { isIntersecting: true };
+
+    expect(result.current).toBe(false); // Initial state
+    callback([entry]);
+    expect(result.current).toBe(true);
+  });
+
+  it('should unobserve and disconnect when ref changes or component unmounts', () => {
+    const ref = { current: document.createElement('div') };
+    const newRef = { current: document.createElement('div') };
+    const { unmount, rerender } = renderHook(
+      ({ ref }) => useFirstVisited(ref),
+      {
+        initialProps: { ref },
+      },
+    );
+
+    expect(unobserve).not.toHaveBeenCalled();
+    expect(disconnect).not.toHaveBeenCalled();
+
+    rerender({ ref: newRef });
+    expect(unobserve).toHaveBeenCalled();
+    expect(disconnect).toHaveBeenCalled();
+
+    unmount();
+
+    expect(unobserve).toHaveBeenCalledTimes(2);
+    expect(disconnect).toHaveBeenCalledTimes(2);
+  });
+});

src/ui/Accordion/Accordion.stories.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default } from './Accordion.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly and fires keyDown Enter events', () => {
+    const { getByText, getAllByText } = render(<Default {...Default.args} />);
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+  });
+
+  it('renders correctly and fires keyDown A event', () => {
+    const { getByText, getAllByText } = render(
+      <Default {...Default.args} title_size={'h1'} />,
+    );
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'A',
+      code: 'KeyA',
+    });
+  });
+});