From 2c20f7132fc735bebdbbae621bd689c0497a6035 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 21 Feb 2025 19:57:41 +0800
Subject: [PATCH 1/2] refactor(affix): script setup return

---
 packages/components/affix/affix.tsx | 30 +++++++++--------------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/packages/components/affix/affix.tsx b/packages/components/affix/affix.tsx
index 6d80ef3bd6..424a20744a 100644
--- a/packages/components/affix/affix.tsx
+++ b/packages/components/affix/affix.tsx
@@ -20,7 +20,7 @@ export default defineComponent({
     const affixRef = ref<HTMLElement>(null);
     const placeholderEL = ref(document?.createElement('div')); // 占位节点
     const ticking = ref(false);
-    const binded = ref(false);
+    const isBind = ref(false);
 
     const scrollContainer = ref<ScrollContainerElement>();
     const affixStyle = ref<Record<string, any>>();
@@ -96,21 +96,21 @@ export default defineComponent({
 
     const bindScroll = async () => {
       await nextTick();
-      if (binded.value) return;
+      if (isBind.value) return;
       scrollContainer.value = getScrollContainer(props.container);
       on(scrollContainer.value, 'scroll', handleScroll);
       on(window, 'resize', handleScroll);
-      binded.value = true;
+      isBind.value = true;
     };
 
     const unbindScroll = () => {
-      if (!scrollContainer.value || !binded.value) return;
+      if (!scrollContainer.value || !isBind.value) return;
       off(scrollContainer.value, 'scroll', handleScroll);
       off(window, 'resize', handleScroll);
       if (rAFId) {
         window.cancelAnimationFrame(rAFId);
       }
-      binded.value = false;
+      isBind.value = false;
     };
 
     watch(
@@ -142,22 +142,10 @@ export default defineComponent({
 
     onBeforeUnmount(unbindScroll);
 
-    return {
-      affixWrapRef,
-      affixRef,
-      bindScroll,
-      unbindScroll,
-      handleScroll,
-      scrollContainer,
-      renderTNodeJSX,
-      affixStyle,
-    };
-  },
-  render() {
-    return (
-      <div ref="affixWrapRef">
-        <div ref="affixRef" style={this.affixStyle}>
-          {this.renderTNodeJSX('default')}
+    return () => (
+      <div ref={affixWrapRef}>
+        <div ref={affixRef} style={affixStyle.value}>
+          {renderTNodeJSX('default')}
         </div>
       </div>
     );

From 648da4196067253c3566caa291bd862a3c87acf2 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 21 Feb 2025 22:43:14 +0800
Subject: [PATCH 2/2] test(unit): refact expose and test

---
 .../components/affix/__tests__/index.test.jsx | 24 +++++++++----------
 packages/components/affix/affix.tsx           |  6 +++++
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/components/affix/__tests__/index.test.jsx b/packages/components/affix/__tests__/index.test.jsx
index 49f345a098..f0f03e3715 100644
--- a/packages/components/affix/__tests__/index.test.jsx
+++ b/packages/components/affix/__tests__/index.test.jsx
@@ -18,15 +18,15 @@ describe('Affix', () => {
     const wrapper = mount({
       render() {
         return (
-          <Affix offsetTop={offsetTop}>
+          <Affix ref="affixRef" offsetTop={offsetTop}>
             <div style={{ width: `${slotWidth}px`, height: `${slotHeight}px` }}>hello world</div>
           </Affix>
         );
       },
-    }).findComponent(Affix);
-
+    });
+    const { affixRef } = wrapper.vm.$refs;
     // 模拟 affixWrap 的位置
-    vi.spyOn(wrapper.vm.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+    vi.spyOn(affixRef.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
       top: 5,
       width: slotWidth,
       height: slotHeight,
@@ -34,7 +34,7 @@ describe('Affix', () => {
 
     it('Test get container', async () => {
       await nextTick();
-      expect(wrapper.vm.scrollContainer).toBe(window);
+      expect(affixRef.scrollContainer).toBe(window);
     });
 
     it('Test the scrolling state', async () => {
@@ -72,7 +72,7 @@ describe('Affix', () => {
       render() {
         return (
           <div class="container" ref="container">
-            <Affix container={this.container} offsetTop={offsetTop}>
+            <Affix ref="affixRef" container={this.container} offsetTop={offsetTop}>
               <div style="width: 100px; height: 20px">hello world</div>
             </Affix>
           </div>
@@ -80,15 +80,15 @@ describe('Affix', () => {
       },
     });
 
-    const affixWrapper = wrapper.findComponent(Affix);
+    const { affixRef } = wrapper.vm.$refs;
 
     it('Test get container', async () => {
       await nextTick();
-      expect(affixWrapper.vm.scrollContainer).toBe(wrapper.vm.container());
+      expect(affixRef.scrollContainer).toBe(wrapper.vm.container());
     });
     // 模拟 affixWrap 的位置
     beforeEach(() => {
-      vi.spyOn(affixWrapper.vm.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+      vi.spyOn(affixRef.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
         top: 5,
         width: slotWidth,
         height: slotHeight,
@@ -98,14 +98,14 @@ describe('Affix', () => {
     it('Test the scrolling state', async () => {
       // 模拟容器滚动
       wrapper.vm.container().dispatchEvent(new CustomEvent('scroll'));
-      expect(affixWrapper.find('.t-affix').classes()).toContain('t-affix');
+      expect(wrapper.find('.t-affix').classes()).toContain('t-affix');
     });
 
     beforeEach(() => {
       // 模拟绑定
-      window.addEventListener('scroll', affixWrapper.vm.handleScroll);
+      window.addEventListener('scroll', affixRef.handleScroll);
       // 模拟容器的位置
-      vi.spyOn(affixWrapper.vm.scrollContainer, 'getBoundingClientRect').mockImplementation(() => ({
+      vi.spyOn(affixRef.scrollContainer, 'getBoundingClientRect').mockImplementation(() => ({
         top: containerTop,
       }));
     });
diff --git a/packages/components/affix/affix.tsx b/packages/components/affix/affix.tsx
index 424a20744a..9f4028b1dd 100644
--- a/packages/components/affix/affix.tsx
+++ b/packages/components/affix/affix.tsx
@@ -142,6 +142,12 @@ export default defineComponent({
 
     onBeforeUnmount(unbindScroll);
 
+    context.expose({
+      scrollContainer,
+      affixWrapRef,
+      handleScroll,
+    });
+
     return () => (
       <div ref={affixWrapRef}>
         <div ref={affixRef} style={affixStyle.value}>