Fix flaky JS tests (1/2).

[techanvil]

Feature Description

This is an issue to address the latest round of JS tests which are failing sporadically. The task has been split into two issues in order to make it easier to investigate and fix. See #10097.

useDisplayCTAWidget hook › should return false if the Analytics data is not available on load

Example: https://github.com/google/site-kit-wp/actions/runs/12861112806/job/35854005306#step:7:701

Details

FAIL assets/js/components/KeyMetrics/hooks/useDisplayCTAWidget.test.js
  ● useDisplayCTAWidget hook › should return false if the Analytics data is not available on load

    expect(jest.fn()).not.toHaveWarned(expected)

    Expected mock function not to be called but it was called with:
    ["Unmatched POST to /google-site-kit/v1/modules/analytics-4/data/data-available?_locale=user"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

  ● useDisplayCTAWidget hook › should return false if the Analytics data is not available on load

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Google Site Kit API Error", "method:POST", "datapoint:data-available", "type:modules", "identifier:analytics-4", "error:\"fetch-mock: No fallback response defined for POST to /google-site-kit/v1/modules/analytics-4/data/data-available?_locale=user\""]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

AudienceTile › AudienceErrorModal › insufficient permissions modal › should show the insufficient permission error modal when the user does not have the required permissions

Example: https://github.com/google/site-kit-wp/actions/runs/12794669197/job/35670303767#step:7:742

Details

FAIL assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.test.js (5.733 s)
  ● AudienceTile › AudienceErrorModal › insufficient permissions modal › should show the insufficient permission error modal when the user does not have the required permissions

    You can't have a focus-trap without at least one focusable element

      at getInitialFocusNode (node_modules/@material/react-dialog/dist/webpack:/packages/dialog/node_modules/@material/dialog/node_modules/focus-trap/index.js:214:13)
      at updateTabbableNodes (node_modules/@material/react-dialog/dist/webpack:/packages/dialog/node_modules/@material/dialog/node_modules/focus-trap/index.js:284:51)
      at Object.activate (node_modules/@material/react-dialog/dist/webpack:/packages/dialog/node_modules/@material/dialog/node_modules/focus-trap/index.js:74:5)
      at Object.trapFocus (node_modules/@material/react-dialog/dist/webpack:/packages/dialog/index.tsx:234:57)
      at node_modules/@material/react-dialog/dist/webpack:/packages/dialog/node_modules/@material/dialog/foundation.js:116:32
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:514:19)

  ● AudienceTile › AudienceErrorModal › insufficient permissions modal › should show the insufficient permission error modal when the user does not have the required permissions

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Error: Uncaught [Error: You can't have a focus-trap without at least one focusable element]

      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:519:9)
      at processTimers (internal/timers.js:500:7)", [Error: You can't have a focus-trap without at least one focusable element]]

AdBlockingRecoverySetupCTANotice › should fire track event when learn more is clicked

Example: https://github.com/google/site-kit-wp/actions/runs/12794148523/job/35668620235#step:7:717

Details

FAIL assets/js/modules/adsense/components/settings/AdBlockingRecoverySetupCTANotice.test.js
  ● AdBlockingRecoverySetupCTANotice › should fire track event when learn more is clicked

    expect(jest.fn()).not.toHaveWarned(expected)

    Expected mock function not to be called but it was called with:
    ["Unmatched GET to /google-site-kit/v1/core/user/data/survey-timeouts?_locale=user"],["Unmatched POST to /google-site-kit/v1/core/user/data/survey-trigger?_locale=user"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

  ● AdBlockingRecoverySetupCTANotice › should fire track event when learn more is clicked

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Google Site Kit API Error", "method:GET", "datapoint:survey-timeouts", "type:core", "identifier:user", "error:\"fetch-mock: No fallback response defined for GET to /google-site-kit/v1/core/user/data/survey-timeouts?_locale=user\""],["Google Site Kit API Error", "method:POST", "datapoint:survey-trigger", "type:core", "identifier:user", "error:\"fetch-mock: No fallback response defined for POST to /google-site-kit/v1/core/user/data/survey-trigger?_locale=user\""]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

AdBlockingRecoverySetupCTAWidget › widget rendering › should render the widget for the existing site without the setup completion time

Example: https://github.com/google/site-kit-wp/actions/runs/12771203450/job/35598435163#step:7:718

Details

FAIL assets/js/modules/adsense/components/dashboard/AdBlockingRecoverySetupCTAWidget.test.js
  ● AdBlockingRecoverySetupCTAWidget › widget rendering › should render the widget for the existing site without the setup completion time

    expect(jest.fn()).not.toHaveWarned(expected)

    Expected mock function not to be called but it was called with:
    ["Unmatched GET to /google-site-kit/v1/core/user/data/survey-timeouts?_locale=user"],["Unmatched POST to /google-site-kit/v1/core/user/data/survey-trigger?_locale=user"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

  ● AdBlockingRecoverySetupCTAWidget › widget rendering › should render the widget for the existing site without the setup completion time

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Google Site Kit API Error", "method:GET", "datapoint:survey-timeouts", "type:core", "identifier:user", "error:\"fetch-mock: No fallback response defined for GET to /google-site-kit/v1/core/user/data/survey-timeouts?_locale=user\""],["Google Site Kit API Error", "method:POST", "datapoint:survey-trigger", "type:core", "identifier:user", "error:\"fetch-mock: No fallback response defined for POST to /google-site-kit/v1/core/user/data/survey-trigger?_locale=user\""]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

test utilities › createWaitForRegistry › resolves 50ms after state changes

Example: https://github.com/google/site-kit-wp/actions/runs/12582870637/job/35069854687#step:7:695

Details

FAIL tests/js/utils.test.js
  ● test utilities › createWaitForRegistry › resolves 50ms after state changes

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      173 | 			expect( then ).not.toHaveBeenCalled();
      174 | 			await wait( 11 );
    > 175 | 			expect( then ).toHaveBeenCalledTimes( 1 );
          | 			               ^
      176 | 		} );
      177 | 
      178 | 		it( 'waits another 50ms if no state changes are detected when called', async () => {

      at Object.<anonymous> (tests/js/utils.test.js:175:19)

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The tests listed above should be assessed for failures in CI and locally and fixed where possible.

Implementation Brief

Note There is PR attached, if IB is good, it can go straight to CR

• In assets/js/components/KeyMetrics/hooks/useDisplayCTAWidget.test.js -> useDisplayCTAWidget hook › should return false if the Analytics data is not available on load
  • Awaiting for registry was added last week, this seems to be resolved with any lingering side effect. Additionally receiveIsDataAvailableOnLoad can be awaited additionally as a precaution to ensure additional time for data to be processed
• For AudienceTile › AudienceErrorModal › insufficient permissions modal › should show the insufficient permission error modal when the user does not have the required permissions
  • Instead of existing waitForDefaultTimeouts which has 5ms delay, replace it with waitForTimeouts(10) to increase the delay. Couldn't encounter this failure locally, but based on the error provided, it is most likely that modal is not rendered at the time tests case runds, so additional delay is there to ensure there is more time for state to finish updating
• For AdBlockingRecoverySetupCTANotice › should fire track event when learn more is clicked
  • Extract waitForRegistry from render and await it after the click happens
• For AdBlockingRecoverySetupCTAWidget › widget rendering › should render the widget for the existing site without the setup completion time
  • Use waitForRegistry to await it after render
• Couldn't replicate test utilities › createWaitForRegistry › resolves 50ms after state changes, it seems it doesn't occur now.

Test Coverage

• No change needed

QA Brief

Changelog entry

[eugene-manuilov]

IB ✔