fix(test): make section-sheet tests independent of the wall clock

package.json

@@ -19,6 +19,7 @@
   },
   "jest": {
     "preset": "jest-expo",
+    "testTimeout": 30000,
     "setupFilesAfterEnv": [
       "<rootDir>/jest.setup.js"
     ],

src/components/report/DelaysSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,15 +10,30 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { DelaysSectionSheet } from './DelaysSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this single test also pays the suite's one-time
+// cost of lazily requiring the RN/Expo component stack during its first
+// `render`. Waiting the 400ms debounce on the wall clock puts both inside one
+// 5s jest budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add delay writes an entry', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <DelaysSectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Add delay'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'delays', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <DelaysSectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Add delay'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'delays', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });

src/components/report/DeliveriesSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,15 +10,35 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { DeliveriesSectionSheet } from './DeliveriesSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add delivery writes an entry', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <DeliveriesSectionSheet visible reportId="r1" initial={{ entries: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Add delivery'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'deliveries', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <DeliveriesSectionSheet
+          visible
+          reportId="r1"
+          initial={{ entries: [] }}
+          onClose={jest.fn()}
+        />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Add delivery'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'deliveries', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });

src/components/report/EquipmentSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,16 +10,31 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { EquipmentSectionSheet } from './EquipmentSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add equipment writes a row', async () => {
-  const { getByPlaceholderText, getByLabelText } = render(
-    <ThemeProvider>
-      <EquipmentSectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.changeText(getByPlaceholderText('Equipment name'), 'Excavator');
-  fireEvent.press(getByLabelText('Add equipment'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'equipment', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByPlaceholderText, getByLabelText } = render(
+      <ThemeProvider>
+        <EquipmentSectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
+      </ThemeProvider>,
+    );
+    fireEvent.changeText(getByPlaceholderText('Equipment name'), 'Excavator');
+    fireEvent.press(getByLabelText('Add equipment'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'equipment', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });

src/components/report/InspectionsSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,20 +10,35 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { InspectionsSectionSheet } from './InspectionsSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add inspection writes an entry', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <InspectionsSectionSheet
-        visible
-        reportId="r1"
-        initial={{ entries: [] }}
-        onClose={jest.fn()}
-      />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Add inspection'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'inspections', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <InspectionsSectionSheet
+          visible
+          reportId="r1"
+          initial={{ entries: [] }}
+          onClose={jest.fn()}
+        />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Add inspection'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'inspections', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });

src/components/report/RfisSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,15 +10,30 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { RfisSectionSheet } from './RfisSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add item writes an entry', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <RfisSectionSheet visible reportId="r1" initial={{ entries: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Add item'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'rfis', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <RfisSectionSheet visible reportId="r1" initial={{ entries: [] }} onClose={jest.fn()} />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Add item'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'rfis', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });

src/components/report/SafetySectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,21 +10,36 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { SafetySectionSheet } from './SafetySectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
 beforeEach(() => {
   mockUpdateSection.mockClear();
 });
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Nothing to report marks the section complete', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <SafetySectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Nothing to report'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'safety', expect.anything(), true),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <SafetySectionSheet visible reportId="r1" initial={{ rows: [] }} onClose={jest.fn()} />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Nothing to report'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'safety', expect.anything(), true);
+  } finally {
+    jest.useRealTimers();
+  }
 });
 
 test('readOnly renders content but hides None today and never writes', async () => {

src/components/report/VisitorsSectionSheet.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../theme';
 
@@ -10,15 +10,30 @@ jest.mock('../../data', () => ({
 
 // eslint-disable-next-line import/first
 import { VisitorsSectionSheet } from './VisitorsSectionSheet';
+// eslint-disable-next-line import/first
+import { SECTION_DRAFT_DEBOUNCE_MS } from './useSectionDraft';
 
+// Fake timers, not `waitFor`: this test also pays the suite's one-time cost of
+// lazily requiring the RN/Expo component stack during its first `render`.
+// Waiting the 400ms debounce on the wall clock puts both inside one jest test
+// budget, which a cold transform cache blows through. Repo precedent:
+// CrewWorkSheet.test.tsx and useSectionDraft.test.tsx.
 test('Add visitor writes an entry', async () => {
-  const { getByLabelText } = render(
-    <ThemeProvider>
-      <VisitorsSectionSheet visible reportId="r1" initial={{ entries: [] }} onClose={jest.fn()} />
-    </ThemeProvider>,
-  );
-  fireEvent.press(getByLabelText('Add visitor'));
-  await waitFor(() =>
-    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'visitors', expect.anything(), false),
-  );
+  jest.useFakeTimers();
+  try {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <VisitorsSectionSheet visible reportId="r1" initial={{ entries: [] }} onClose={jest.fn()} />
+      </ThemeProvider>,
+    );
+    fireEvent.press(getByLabelText('Add visitor'));
+    jest.advanceTimersByTime(SECTION_DRAFT_DEBOUNCE_MS);
+    // Flush the microtask chain the debounced callback kicks off (issueWrite
+    // chains through a Promise) — fake timers don't do this for us.
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockUpdateSection).toHaveBeenCalledWith('r1', 'visitors', expect.anything(), false);
+  } finally {
+    jest.useRealTimers();
+  }
 });