fix: test codecr

jdf2e · Oct 10, 2024 · b497d1d · b497d1d
1 parent 11b9288
commit b497d1d
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 7 deletions.
diff --git a/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap b/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap
@@ -96,3 +96,112 @@ exports[`should match snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should match snapshot of two columns in one line 1`] = `
+<DocumentFragment>
+  <div
+    class="nut-menu"
+  >
+    <div
+      class="nut-menu-bar"
+    >
+      <div
+        class="nut-menu-title nut-menu-title-0"
+      >
+        <div
+          class="nut-menu-title-text"
+        >
+          全部商品
+        </div>
+        <svg
+          aria-labelledby="ArrowDown"
+          class="nut-icon nut-icon-ArrowDown nut-menu-title-icon"
+          role="presentation"
+          style="width: 12px; height: 12px;"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M158.17 289.83a42.67 42.67 0 1 0-60.34 60.34l384 384a42.67 42.67 0 0 0 60.36 0l384-384a42.67 42.67 0 1 0-60.36-60.34L512 643.67z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      class="nut-menu-container"
+    >
+      <div
+        class="nut-menu-container-wrap"
+        style="display: none;"
+      >
+        <div
+          class="nut-menu-container-content"
+        >
+          <div
+            class="nut-menu-container-item active"
+            style="flex-basis: 50%;"
+          >
+            <i
+              class="nut-menu-container-item-icon"
+            >
+              <svg
+                aria-labelledby="Check"
+                class="nut-icon nut-icon-Check "
+                color=""
+                role="presentation"
+                viewBox="0 0 1024 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M998.4 245.03c-219.43 153.6-398.63 332.8-552.23 552.23-40.23 58.51-128 54.86-164.57-3.66-69.49-106.06-149.94-186.51-256-256-51.2-32.91-18.29-113.37 40.23-98.74 117.03 21.94 208.46 69.49 292.57 146.28 157.26-190.17 358.4-340.11 588.8-435.2 62.17-25.6 106.06 58.51 51.2 95.09"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </i>
+            <div
+              class="nut-menu-container-item-title "
+            >
+              全部商品
+            </div>
+          </div>
+          <div
+            class="nut-menu-container-item "
+            style="flex-basis: 50%;"
+          >
+            <div
+              class="nut-menu-container-item-title "
+            >
+              新款商品
+            </div>
+          </div>
+          <div
+            class="nut-menu-container-item "
+            style="flex-basis: 50%;"
+          >
+            <div
+              class="nut-menu-container-item-title "
+            >
+              活动商品
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`should match snapshot of two columns in one line 2`] = `
+<DocumentFragment>
+  <div
+    class="nut-menu"
+  >
+    <div
+      class="nut-menu-bar"
+    />
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/packages/menu/__test__/menu.spec.tsx b/src/packages/menu/__test__/menu.spec.tsx
@@ -3,7 +3,6 @@ import { act, fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { Success } from '@nutui/icons-react'
 import Menu from '@/packages/menu'
-import MenuItem from '@/packages/menuitem'
 
 function mockGetBoundingClientRect(rect: any): () => void {
   const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect')
@@ -29,7 +28,21 @@ test('should match snapshot', () => {
   ]
   const { asFragment } = render(
     <Menu>
-      <MenuItem options={options} value={0} />
+      <Menu.Item options={options} value={0} />
+    </Menu>
+  )
+  expect(asFragment()).toMatchSnapshot()
+})
+
+test('should match snapshot of two columns in one line', () => {
+  const options = [
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活动商品', value: 2 },
+  ]
+  const { asFragment } = render(
+    <Menu scrollFixed>
+      <Menu.Item options={options} value={0} columns={2} />
     </Menu>
   )
   expect(asFragment()).toMatchSnapshot()
@@ -52,26 +65,25 @@ test('test props', async () => {
 
   const { container, getByText } = render(
     <Menu lockScroll={false}>
-      <MenuItem
+      <Menu.Item
         className="custom-className"
         title="custom title"
         options={options}
         value={0}
         disabled
-        columns={2}
+        direction="up"
         icon={<Success />}
         activeTitleClass="activeTitleClass"
         inactiveTitleClass="inactiveTitleClass"
         onChange={testClick}
       />
+      <Menu.Item />
     </Menu>
   )
 
   await act(() => {
     fireEvent.click(getByText('custom title'))
-
     fireEvent.click(container.querySelectorAll('.nut-menu-container-item')[1])
-
     expect(testClick).toBeCalledWith({ text: '新款商品', value: 1 })
   })
 

diff --git a/src/packages/menu/menu.tsx b/src/packages/menu/menu.tsx
@@ -67,7 +67,10 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
   })
 
   const getScrollTop = (el: Element | Window) => {
-    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.scrollY)
+    return Math.max(
+      0,
+      el === window ? window.scrollY : (el as Element).scrollTop
+    )
   }
   const onScroll = useCallback(() => {
     const scrollTop = getScrollTop(window)