Merge pull request #12 from rudyxu1102/feat/v-slot

feat: support v-slots

Author: rudyxu1102

examples/src/components/button/__tests__/Button2.spec.tsx

@@ -1,9 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import { Button } from '../index';
+import Button from '../index';
 
 describe('Button.tsx', () => {
-
   it('renders emits click', async () => {
     const fn = vi.fn()
     const wrapper = mount({

examples/src/components/button/index.ts

@@ -1,5 +1,5 @@
 import UiButton from './Button'
 
-export default UiButton
+// export default UiButton
 
-export { UiButton as Button }
+export { UiButton as default }

examples/src/components/input/Input.tsx

@@ -10,6 +10,7 @@ export default defineComponent({
 
   props: {
     ...props,
+    label: String
   },
 
   slots: Object as SlotsType<{

examples/src/components/input/index.ts

@@ -1,3 +1,4 @@
 
-import warpInput from './warpInput'
-export default warpInput
+import { withInstall } from './warpInput'
+import Input from './Input'
+export default withInstall(Input)

examples/src/components/input/input.spec.tsx

@@ -133,4 +133,10 @@ describe('Input.tsx', () => {
     (wrapper.vm as any).select();
     (wrapper.vm as any).clear();
   });
+
+  it('renders with custom class', () => {
+    render(<Input label="custom-class" />)
+    // expect(screen.getByRole('textbox')).toHaveClass('custom-class')
+    expect(1).toBe(1)
+  })
 });

examples/src/components/input/warpInput.ts

@@ -1,3 +1,13 @@
-import Input from './Input'
-Input.aaa = 1
-export default Input
+export type WithInstall<T> = T & {
+    install: (app: any) => void;
+  };
+  
+export function withInstall<T>(options: T) {
+    (options as Record<string, unknown>).install = (app: any) => {
+      const { name } = options as unknown as { name: string };
+      app.component(name, options);
+    };
+  
+    return options as WithInstall<T>;
+  }
+  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vc-api-coverage",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Vue Component API Coverage Reporter",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

src/ApiReporter.ts

@@ -128,7 +128,7 @@ export default class VcCoverageReporter implements Reporter {
       info.slots.total += comp.slots.length
       info.exposes.total += comp.exposes.length
       info.props.details = comp.props.map(p => ({ name: p, covered: unit.props.includes(p) }))
-      info.slots.details = unit.slots.map(s => ({ name: s, covered: true }))
+      info.slots.details = comp.slots.length > 0 ? comp.slots.map(s => ({ name: s, covered: unit.slots.includes(s) })) : unit.slots.map(s => ({ name: s, covered: true }))
       info.exposes.details = comp.exposes.map(e => ({ name: e, covered: unit.exposes.includes(e) }))
       info.props.covered = info.props.details.filter(d => d.covered).length
       info.slots.covered = info.slots.details.filter(d => d.covered).length

src/analyzer/ComponentAnalyzer.ts

@@ -1,4 +1,5 @@
 import { SourceFile, Node, Type, Expression, ObjectLiteralExpression, SyntaxKind } from "ts-morph";
+import { isComponentType } from "../common/utils";
 
 class ComponentAnalyzer {
     private sourceFile: SourceFile;
@@ -170,12 +171,6 @@ class ComponentAnalyzer {
         return item.getText().replace(/[\'\"\`]/g, '');
     }
 
-    isComponentFile(type: Type) {
-        const constructSignatures = type.getConstructSignatures();
-        if (constructSignatures.length === 0) return false;
-        return true
-    }
-
     getExportedExpression() {
         let exportedExpression = this.getExportedExpressionFromDefault();
         if (exportedExpression) return exportedExpression;
@@ -202,7 +197,7 @@ class ComponentAnalyzer {
             }
         }
 
-        if (expression && this.isComponentFile(expression.getType())) {
+        if (expression && isComponentType(expression.getType())) {
             return expression;
         }
         return null;
@@ -212,7 +207,7 @@ class ComponentAnalyzer {
         const namedExportSymbol = this.sourceFile.getExportSymbols().find(symbol => {
             const valueDeclaration = symbol.getValueDeclaration();
             if (!valueDeclaration) return false;
-            return this.isComponentFile(valueDeclaration.getType());
+            return isComponentType(valueDeclaration.getType());
         });
 
         if (!namedExportSymbol) return null;

src/analyzer/UnitTestAnalyzer.ts

@@ -1,4 +1,5 @@
 import { Project, SyntaxKind, Node, SourceFile, CallExpression, ObjectLiteralExpression, JsxSelfClosingElement, JsxElement, Identifier, Symbol } from 'ts-morph';
+import { isComponentFile, isComponentType } from '../common/utils';
 
 interface TestUnit {
     props?: string[];
@@ -89,12 +90,33 @@ class TestUnitAnalyzer {
             if (!declarationNode) return null;
             const declarationSourceFile = declarationNode.getSourceFile();
             const originalPath = declarationSourceFile.getFilePath();
+            if (!isComponentFile(originalPath)) {
+                return this.resolveTsPath(declarationNode);
+            }
             return originalPath;
         } catch (error) {
             return null;
         }
     }
 
+    // 解析ts路径
+    resolveTsPath(declarationNode: Node) {
+        if (!Node.isExportAssignment(declarationNode)) return null;
+        const exportedExpression = declarationNode.getExpression();
+        if (Node.isCallExpression(exportedExpression)) {
+            const args = exportedExpression.getArguments();
+            for (const arg of args) {
+                const argType = arg.getType();
+                if (isComponentType(argType)) {
+                    // 获取文件路径
+                    const res = this.resolveComponentPath(arg as Identifier) as string;
+                    return res;
+                }
+            }
+        }
+        return null;
+    }
+
 
     // 分析传统挂载mount/shallowMount方法调用
     private analyzeTraditionalMountCalls(testCall: CallExpression) {
@@ -545,6 +567,23 @@ class TestUnitAnalyzer {
                         if (!component.emits.includes(propName)) {
                             component.emits.push(propName);
                         }
+                    } else if (propName === 'v-slots') {
+                        // Handle v-slots directive
+                        const initializer = attr.getInitializer();
+                        if (initializer && Node.isJsxExpression(initializer)) {
+                            const expression = initializer.getExpression();
+                            if (expression && Node.isObjectLiteralExpression(expression)) {
+                                component.slots = component.slots || [];
+                                expression.getProperties().forEach(prop => {
+                                    if (Node.isPropertyAssignment(prop) || Node.isShorthandPropertyAssignment(prop)) {
+                                        const slotName = prop.getName();
+                                        if (slotName && !component.slots!.includes(slotName)) {
+                                            component.slots!.push(slotName);
+                                        }
+                                    }
+                                });
+                            }
+                        }
                     } else {
                         let isVModel = false;
                         // Handle v-model transformation for props