test(input.match): change unit test

LuckyFBB · LuckyFBB · commit feb3229d3e7a · 2025-08-12T19:22:06.000+08:00
diff --git a/src/input/__tests__/__snapshots__/match.test.tsx.snap b/src/input/__tests__/__snapshots__/match.test.tsx.snap
@@ -16,54 +16,22 @@ exports[`Test Input.Match component Should match snapshot 1`] = `
       <div
         class="dtc-input-match-items"
       >
-        <svg
+        <span
           class="dtc-input-match-suffixItem"
-          height="16"
-          viewBox="0 0 1024 1024"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M160 192h704a32 32 0 110 64H160a32 32 0 110-64zm0 576h704a32 32 0 110 64H160a32 32 0 110-64zm276.8-94.688l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624 11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.44-22.08zM271.44 558.848h123.2l-62.176-170.16-61.024 170.16zM776 683.712c-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0049.648-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 01-.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208zm-5.056-111.088c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
+          data-mock-icon="CaseSensitiveMatchOutlined"
+        />
+        <span
           class="dtc-input-match-suffixItem"
-          height="16"
-          viewBox="0 0 1024 1024"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M944 144a48 48 0 0148 48v640a48 48 0 01-48 48H80a48 48 0 01-48-48V192a48 48 0 0148-48h864zm-472 64H96v280h40a32 32 0 110 64H96v264h376v-56a32 32 0 1164 0v56h392V552h-40a32 32 0 110-64h40V208H536v56a32 32 0 11-64 0v-56zm-138.976 92.656c11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.44-22.08l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624zM713.84 414.288c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 01-.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0049.648-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368zm57.104 158.336c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zm-438.48-183.936l-61.024 170.16h123.2l-62.176-170.16z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
+          data-mock-icon="ExactMatchOutlined"
+        />
+        <span
           class="dtc-input-match-suffixItem"
-          height="16"
-          viewBox="0 0 1024 1024"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M72 224a32 32 0 0132 32v213.008l66.496-66.48a32 32 0 1145.264 45.248L183.52 480H280a32 32 0 110 64H176.24l39.52 39.536a32 32 0 011.616 43.52l-1.616 1.744a32 32 0 01-45.264 0L104 562.272V768a32 32 0 11-64 0V256a32 32 0 0132-32zm389.568 76.656c11.616 0 21.328 2.208 29.104 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.784 6.928 8.8 14.384 12.096 22.352 3.28 7.968 7.44 18.608 12.512 31.92L641.84 644.64c8.448 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.176-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.424-22.08l-19.68-51.744H378.032l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.336 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52S272 699.088 272 689.344c0-5.632.944-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.472-267.76 10.816-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.832-6.624zm380.8 113.632c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.928 37.824 7.968 17.248 11.952 40.128 11.952 68.624v12.992a5507.76 5507.76 0 01-.56 74.752c0 14.448 2.384 29.488 7.168 45.152 4.784 15.648 7.168 25.728 7.168 30.24 0 7.856-3.696 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.352 10.832-19.68 0-36.992-3.888-51.904-11.664-14.896-7.776-26.384-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.88-1.12 16.96-3.664 36.288-7.6a1589.856 1589.856 0 0049.632-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.488 0-34.16 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.024 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.408-12.608-9.408-21.232 0-13.504 4.768-26.624 14.336-39.376 9.568-12.752 24.48-23.248 44.72-31.504 20.256-8.256 45.472-12.368 75.648-12.368zm57.104 158.336c-11.248 4.128-27.616 8.48-49.088 13.072-21.456 4.608-36.32 7.968-44.576 10.128-8.24 2.16-16.128 6.384-23.616 12.656-7.504 6.288-11.248 15.04-11.248 26.304 0 11.616 4.4 21.52 13.216 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.2 0 29.2-3.328 42.048-9.984 12.848-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zM461.008 388.688l-61.04 170.16h123.2l-62.176-170.16z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
+          data-mock-icon="PrefixMatchOutlined"
+        />
+        <span
           class="dtc-input-match-suffixItem"
-          height="16"
-          viewBox="0 0 1024 1024"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M968 224a32 32 0 0132 32v512a32 32 0 11-64 0V560.88l-67.888 67.92a32 32 0 01-43.2 1.872l-2.048-1.872-1.632-1.76a32 32 0 011.632-43.504L862.384 544h-103.76a32 32 0 110-64h96.464l-32.224-32.224a32 32 0 1145.248-45.248L936 470.4V256a32 32 0 0132-32zm-762.432 76.656c11.616 0 21.328 2.208 29.104 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.784 6.928 8.8 14.384 12.096 22.352 3.28 7.968 7.44 18.608 12.512 31.92L385.84 644.64c8.448 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.176-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.424-22.08l-19.68-51.744H122.032l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.336 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52S16 699.088 16 689.344c0-5.632.944-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.472-267.76 10.816-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.832-6.624zm380.8 113.632c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.928 37.824 7.968 17.248 11.952 40.128 11.952 68.624v12.992a5507.76 5507.76 0 01-.56 74.752c0 14.448 2.384 29.488 7.168 45.152 4.784 15.648 7.168 25.728 7.168 30.24 0 7.856-3.696 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.352 10.832-19.68 0-36.992-3.888-51.904-11.664-14.896-7.776-26.384-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.88-1.12 16.96-3.664 36.288-7.6a1589.856 1589.856 0 0049.632-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.488 0-34.16 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.024 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.408-12.608-9.408-21.232 0-13.504 4.768-26.624 14.336-39.376 9.568-12.752 24.48-23.248 44.72-31.504 20.256-8.256 45.472-12.368 75.648-12.368zm57.104 158.336c-11.248 4.128-27.616 8.48-49.088 13.072-21.456 4.608-36.32 7.968-44.576 10.128-8.24 2.16-16.128 6.384-23.616 12.656-7.504 6.288-11.248 15.04-11.248 26.304 0 11.616 4.4 21.52 13.216 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.2 0 29.2-3.328 42.048-9.984 12.848-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zM205.008 388.688l-61.04 170.16h123.2l-62.176-170.16z"
-            fill="currentColor"
-          />
-        </svg>
+          data-mock-icon="SuffixMatchOutlined"
+        />
       </div>
     </span>
   </span>
diff --git a/src/input/__tests__/match.test.tsx b/src/input/__tests__/match.test.tsx
@@ -12,26 +12,26 @@ describe('Test Input.Match component', () => {
     it('Should support searchType', () => {
         const fn = jest.fn();
         const { rerender, container } = render(<Match onTypeChange={fn} />);
-        const elements = container.querySelectorAll('svg.dtc-input-match-suffixItem')!;
+        const elements = container.querySelectorAll('span.dtc-input-match-suffixItem')!;
         expect(elements).toHaveLength(4);
 
         fireEvent.click(elements[0]);
 
         expect(fn).toBeCalledWith('caseSensitive');
 
         rerender(<Match searchType="caseSensitive" onTypeChange={fn} />);
-        expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(4);
-        expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0].classList).toContain(
-            'dtc-input-match-suffixItem__active'
-        );
-        fireEvent.click(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0]);
+        expect(container.querySelectorAll('span.dtc-input-match-suffixItem')!).toHaveLength(4);
+        expect(
+            container.querySelectorAll('span.dtc-input-match-suffixItem')[0].classList
+        ).toContain('dtc-input-match-suffixItem__active');
+        fireEvent.click(container.querySelectorAll('span.dtc-input-match-suffixItem')[0]);
         expect(fn).toBeCalledWith('fuzzy');
     });
 
     it('Should support filterOptions', () => {
         const { container } = render(<Match filterOptions={['tail']} />);
 
-        expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(1);
+        expect(container.querySelectorAll('span.dtc-input-match-suffixItem')!).toHaveLength(1);
     });
 
     it('Should support onSearch and onPressEnter', () => {
