refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/NavTabs/NavTabs.test.tsx

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { NavTabs, Option } from './NavTabs';
+
+test('should show titles', async () => {
+  const options = [
+    { children: 'Content 1', id: 'option1', label: 'Option 1' },
+    { children: 'Content 2', id: 'option2', label: 'Option 2' },
+  ];
+  const { findByText } = renderComponent(options);
+
+  const heading = await findByText(options[0].label);
+  expect(heading).toBeTruthy();
+
+  const heading2 = await findByText(options[1].label);
+  expect(heading2).toBeTruthy();
+});
+
+test('should show selected id content', async () => {
+  const options = [
+    { children: 'Content 1', id: 'option1', label: 'Option 1' },
+    { children: 'Content 2', id: 'option2', label: 'Option 2' },
+  ];
+
+  const selected = options[1];
+
+  const { findByText } = renderComponent(options, selected.id);
+
+  const content = await findByText(selected.children);
+  expect(content).toBeTruthy();
+});
+
+test('should call onSelect when clicked with id', async () => {
+  const options = [
+    { children: 'Content 1', id: 'option1', label: 'Option 1' },
+    { children: 'Content 2', id: 'option2', label: 'Option 2' },
+  ];
+
+  const onSelect = jest.fn();
+
+  const { findByText } = renderComponent(options, options[1].id, onSelect);
+
+  const heading = await findByText(options[0].label);
+  userEvent.click(heading);
+
+  expect(onSelect).toHaveBeenCalledWith(options[0].id);
+});
+
+function renderComponent(
+  options: Option[] = [],
+  selectedId?: string | number,
+  onSelect?: (id: string | number) => void
+) {
+  return render(
+    <NavTabs options={options} selectedId={selectedId} onSelect={onSelect} />
+  );
+}