[bug] 3 frontend unit tests failing on latest main branch (v1.13.0) #22200

Open
opened 2026-02-21 20:16:08 -05:00 by yindo · 0 comments
Owner

Originally created by @scdeng on GitHub (Feb 11, 2026).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.13.0

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

  1. Clone the latest Dify repository from the main branch.
  2. Navigate to the web/ directory.
  3. Install dependencies with pnpm install.
  4. Run the full test suite with pnpm test.

✔️ Expected Behavior

All tests should pass.

Actual Behavior

3 out of 34,172 tests fail. The remaining 34,169 tests pass successfully.

Environment:

  • Node: v24.13.1
  • npm: v11.8.0
  • Package manager: pnpm

Failure 1 & 2: dataset-config/card-item (same failure appears twice — once from source, once from .pnpm-store project link)

Test: should open settings drawer from edit action and close after saving

File: app/components/app/configuration/dataset-config/card-item/index.spec.tsx

Error:

AssertionError: expected "vi.fn()" to be called with arguments: [ ObjectContaining{…} ]
Number of calls: 0

Analysis:

After clicking the edit button, the Headless UI Dialog is rendered but remains in a hidden state (style="display: none;"). The drawer body is essentially empty:

<div class="relative z-[50] flex w-full max-w-sm ...">
  <div class="flex justify-between" />  <!-- empty content -->
</div>

Because the drawer content never renders, the "Save" button cannot be found or clicked, so the onSave callback is never invoked. This suggests either:

  • The component's internal rendering logic (e.g., lazy loading, conditional rendering, or required context/store data) has changed without the test being updated.
  • A missing or incomplete mock for a dependency required by the settings drawer.

Failure 3: SecretKeyModal close functionality

Test: should call onClose when X icon is clicked

File: app/components/develop/secret-key/secret-key-modal.spec.tsx

Error:

AssertionError: expected "vi.fn()" to be called 1 times, but got 2 times

Analysis:

The onClose callback is triggered twice instead of once. This is likely caused by a double invocation:

  1. The close button's onClick handler explicitly calls onClose.
  2. The Headless UI Dialog component's own onClose prop also fires when the dialog is dismissed.

This may be a regression introduced by a recent upgrade of @headlessui/react or a change in how the modal's close logic is wired.


Full test output (summary)

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  app/components/app/configuration/dataset-config/card-item/index.spec.tsx > dataset-config/card-item > should open settings drawer from edit action and close after saving
 FAIL  .pnpm-store/v10/projects/28b73704345469d8a49cb82b8ab2a001/app/components/app/configuration/dataset-config/card-item/index.spec.tsx > dataset-config/card-item > should open settings drawer from edit action and close after saving
AssertionError: expected "vi.fn()" to be called with arguments: [ ObjectContaining{…} ]

Number of calls: 0


Ignored nodes: comments, script, style
<html
  style=""
>
  <head />
  <body>
    <div>
      <div
        class="group relative mb-1 flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover"
      >
        <div
          class="flex w-0 grow items-center space-x-1.5"
        >
          <span
            class="flex items-center justify-center relative grow-0 shrink-0 overflow-hidden border-[0.5px] border-divider-regular w-6 h-6 text-base rounded-md"
            style="background: rgb(255, 234, 213);"
          >
            <em-emoji
              id="📘"
            >
              <span
                class="emoji-mart-emoji"
                data-emoji-set="native"
              >
                <span
                  style="font-family: \"EmojiMart\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Segoe UI\", \"Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\";"
                >
                  📘
                </span>
              </span>
            </em-emoji>
          </span>
          <div
            class="system-sm-medium w-0 grow truncate text-text-secondary"
            title="Dataset Name"
          >
            Dataset Name
          </div>
        </div>
        <div
          class="ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex"
        >
          <button
            class="action-btn action-btn-m"
            type="button"
          >
            <svg
              class="remixicon h-4 w-4 shrink-0 text-text-tertiary"
              fill="currentColor"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"
              />
            </svg>
          </button>
          <button
            class="action-btn action-btn-m"
            type="button"
          >
            <svg
              class="remixicon h-4 w-4 shrink-0 text-text-tertiary"
              fill="currentColor"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"
              />
            </svg>
          </button>
        </div>
        <div
          class="relative inline-flex h-5 items-center whitespace-nowrap rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary system-2xs-medium-uppercase shrink-0 group-hover:hidden"
        >
          dataset.indexingTechnique.high_quality · dataset.indexingMethod.semantic_search
        </div>
      </div>
    </div>
    <div
      id="headlessui-portal-root"
    >
      <div
        data-headlessui-portal=""
      >
        <div>
          <div
            class="fixed inset-0 z-[30] overflow-y-auto"
            data-headlessui-state=""
            hidden=""
            id="headlessui-dialog-_r_7_"
            role="dialog"
            style="display: none;"
            tabindex="-1"
          >
            <div
              class="flex h-screen w-screen justify-end"
            >
              <div
                aria-hidden="true"
                class="fixed inset-0 z-[40]"
                data-headlessui-state=""
              />
              <div
                class="relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl"
              >
                <div
                  class="flex justify-between"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 ❯ app/components/app/configuration/dataset-config/card-item/index.spec.tsx:183:22
    181| 
    182|     await waitFor(() => {
    183|       expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ na…
       |                      ^
    184|     })
    185|     await waitFor(() => {
 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/config.js:47:12
 ❯ checkCallback node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:124:77
 ❯ Timeout.checkRealTimersCallback node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:118:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 FAIL  .pnpm-store/v10/projects/28b73704345469d8a49cb82b8ab2a001/app/components/develop/secret-key/secret-key-modal.spec.tsx > SecretKeyModal > close functionality > should call onClose when X icon is clicked
AssertionError: expected "vi.fn()" to be called 1 times, but got 2 times
 ❯ app/components/develop/secret-key/secret-key-modal.spec.tsx:227:23
    225|       })
    226| 
    227|       expect(onClose).toHaveBeenCalledTimes(1)
       |                       ^
    228|     })
    229|   })

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯


 Test Files  3 failed | 1433 passed (1436)
      Tests  3 failed | 34169 passed (34172)
   Start at  10:07:05
   Duration  706.16s (transform 130.70s, setup 603.09s, import 982.51s, tests 1382.13s, environment 1507.89s)

 ELIFECYCLE  Test failed. See above for more details.

Failing test files

# File Test Name Error
1 app/components/app/configuration/dataset-config/card-item/index.spec.tsx should open settings drawer from edit action and close after saving onSave never called (0 calls)
2 .pnpm-store/.../card-item/index.spec.tsx (same as above — duplicate project link) (same)
3 .pnpm-store/.../secret-key-modal.spec.tsx should call onClose when X icon is clicked onClose called 2 times instead of 1

Suggested fixes

For Failure 1 & 2 (card-item):

  • Review the settings drawer component for any new context dependencies or conditional rendering that the test does not account for.
  • Ensure all required providers/mocks are set up in the test.

For Failure 3 (SecretKeyModal):

  • Either deduplicate the onClose invocation in the component (remove the explicit onClick call if Dialog's onClose already handles it), or update the test assertion to toHaveBeenCalledTimes(2) if the double call is intentional.

Originally created by @scdeng on GitHub (Feb 11, 2026). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :) - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.13.0 ### Cloud or Self Hosted Self Hosted (Source) ### Steps to reproduce 1. Clone the latest Dify repository from the `main` branch. 2. Navigate to the `web/` directory. 3. Install dependencies with `pnpm install`. 4. Run the full test suite with `pnpm test`. ### ✔️ Expected Behavior All tests should pass. ### ❌ Actual Behavior 3 out of 34,172 tests fail. The remaining 34,169 tests pass successfully. **Environment:** - Node: v24.13.1 - npm: v11.8.0 - Package manager: pnpm --- #### Failure 1 & 2: `dataset-config/card-item` (same failure appears twice — once from source, once from `.pnpm-store` project link) **Test:** `should open settings drawer from edit action and close after saving` **File:** `app/components/app/configuration/dataset-config/card-item/index.spec.tsx` **Error:** ``` AssertionError: expected "vi.fn()" to be called with arguments: [ ObjectContaining{…} ] Number of calls: 0 ``` **Analysis:** After clicking the edit button, the Headless UI `Dialog` is rendered but remains in a `hidden` state (`style="display: none;"`). The drawer body is essentially empty: ```html <div class="relative z-[50] flex w-full max-w-sm ..."> <div class="flex justify-between" /> <!-- empty content --> </div> ``` Because the drawer content never renders, the "Save" button cannot be found or clicked, so the `onSave` callback is never invoked. This suggests either: - The component's internal rendering logic (e.g., lazy loading, conditional rendering, or required context/store data) has changed without the test being updated. - A missing or incomplete mock for a dependency required by the settings drawer. --- #### Failure 3: `SecretKeyModal` close functionality **Test:** `should call onClose when X icon is clicked` **File:** `app/components/develop/secret-key/secret-key-modal.spec.tsx` **Error:** ``` AssertionError: expected "vi.fn()" to be called 1 times, but got 2 times ``` **Analysis:** The `onClose` callback is triggered **twice** instead of once. This is likely caused by a double invocation: 1. The close button's `onClick` handler explicitly calls `onClose`. 2. The Headless UI `Dialog` component's own `onClose` prop also fires when the dialog is dismissed. This may be a regression introduced by a recent upgrade of `@headlessui/react` or a change in how the modal's close logic is wired. --- ### Full test output (summary) ``` ⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯ FAIL app/components/app/configuration/dataset-config/card-item/index.spec.tsx > dataset-config/card-item > should open settings drawer from edit action and close after saving FAIL .pnpm-store/v10/projects/28b73704345469d8a49cb82b8ab2a001/app/components/app/configuration/dataset-config/card-item/index.spec.tsx > dataset-config/card-item > should open settings drawer from edit action and close after saving AssertionError: expected "vi.fn()" to be called with arguments: [ ObjectContaining{…} ] Number of calls: 0 Ignored nodes: comments, script, style <html style="" > <head /> <body> <div> <div class="group relative mb-1 flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover" > <div class="flex w-0 grow items-center space-x-1.5" > <span class="flex items-center justify-center relative grow-0 shrink-0 overflow-hidden border-[0.5px] border-divider-regular w-6 h-6 text-base rounded-md" style="background: rgb(255, 234, 213);" > <em-emoji id="📘" > <span class="emoji-mart-emoji" data-emoji-set="native" > <span style="font-family: \"EmojiMart\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Segoe UI\", \"Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\";" > 📘 </span> </span> </em-emoji> </span> <div class="system-sm-medium w-0 grow truncate text-text-secondary" title="Dataset Name" > Dataset Name </div> </div> <div class="ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex" > <button class="action-btn action-btn-m" type="button" > <svg class="remixicon h-4 w-4 shrink-0 text-text-tertiary" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" > <path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z" /> </svg> </button> <button class="action-btn action-btn-m" type="button" > <svg class="remixicon h-4 w-4 shrink-0 text-text-tertiary" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" > <path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z" /> </svg> </button> </div> <div class="relative inline-flex h-5 items-center whitespace-nowrap rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary system-2xs-medium-uppercase shrink-0 group-hover:hidden" > dataset.indexingTechnique.high_quality · dataset.indexingMethod.semantic_search </div> </div> </div> <div id="headlessui-portal-root" > <div data-headlessui-portal="" > <div> <div class="fixed inset-0 z-[30] overflow-y-auto" data-headlessui-state="" hidden="" id="headlessui-dialog-_r_7_" role="dialog" style="display: none;" tabindex="-1" > <div class="flex h-screen w-screen justify-end" > <div aria-hidden="true" class="fixed inset-0 z-[40]" data-headlessui-state="" /> <div class="relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl" > <div class="flex justify-between" /> </div> </div> </div> </div> </div> </div> </body> </html> ❯ app/components/app/configuration/dataset-config/card-item/index.spec.tsx:183:22 181| 182| await waitFor(() => { 183| expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ na… | ^ 184| }) 185| await waitFor(() => { ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/config.js:47:12 ❯ checkCallback node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:124:77 ❯ Timeout.checkRealTimersCallback node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:118:16 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯ FAIL .pnpm-store/v10/projects/28b73704345469d8a49cb82b8ab2a001/app/components/develop/secret-key/secret-key-modal.spec.tsx > SecretKeyModal > close functionality > should call onClose when X icon is clicked AssertionError: expected "vi.fn()" to be called 1 times, but got 2 times ❯ app/components/develop/secret-key/secret-key-modal.spec.tsx:227:23 225| }) 226| 227| expect(onClose).toHaveBeenCalledTimes(1) | ^ 228| }) 229| }) ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯ Test Files 3 failed | 1433 passed (1436) Tests 3 failed | 34169 passed (34172) Start at 10:07:05 Duration 706.16s (transform 130.70s, setup 603.09s, import 982.51s, tests 1382.13s, environment 1507.89s)  ELIFECYCLE  Test failed. See above for more details. ``` ### Failing test files | # | File | Test Name | Error | |---|------|-----------|-------| | 1 | `app/components/app/configuration/dataset-config/card-item/index.spec.tsx` | should open settings drawer from edit action and close after saving | `onSave` never called (0 calls) | | 2 | `.pnpm-store/.../card-item/index.spec.tsx` | *(same as above — duplicate project link)* | *(same)* | | 3 | `.pnpm-store/.../secret-key-modal.spec.tsx` | should call onClose when X icon is clicked | `onClose` called 2 times instead of 1 | ### Suggested fixes **For Failure 1 & 2 (`card-item`):** - Review the settings drawer component for any new context dependencies or conditional rendering that the test does not account for. - Ensure all required providers/mocks are set up in the test. **For Failure 3 (`SecretKeyModal`):** - Either deduplicate the `onClose` invocation in the component (remove the explicit `onClick` call if `Dialog`'s `onClose` already handles it), or update the test assertion to `toHaveBeenCalledTimes(2)` if the double call is intentional. ---
yindo added the 🐞 bug label 2026-02-21 20:16:08 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#22200