feat: update

canyon-project · Nov 8, 2023 · 4c19a11 · 4c19a11
1 parent 22b650a
commit 4c19a11
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 116 deletions.
diff --git a/packages/canyon-report/src/Report/components/Code.tsx b/packages/canyon-report/src/Report/components/Code.tsx
@@ -1,49 +1,39 @@
 import hljs from 'highlight.js';
 import { FC } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
-import { CoreFn } from './helpers.ts';
+
+import { CoreFn } from '../../helper.ts';
+// import { CoreFn } from './helpers.ts';
 import { Line } from './Line.tsx';
 import Mask from './Mask.tsx';
 
-const Code: FC<{ fileCoverage: any; fileContent: string }> = ({
-  fileCoverage,
-  fileContent,
-}) => {
-
-  console.log(fileCoverage,'fileCoverage',fileContent,'fileContent')
-
-  const data = {
-    new_lines: [],
-  };
-
-
-  // TODO new lines待实现
-
+const Code: FC<{
+  fileCoverage: any;
+  fileContent: string;
+  fileCodeChange: number[];
+}> = ({ fileCoverage, fileContent,fileCodeChange }) => {
   const [renderMask, setRenderMask] = useState(false);
-  const { maxWidth, rows, times, zuizhong } = CoreFn({
-    fileCoverage,
-    fileContent,
-  });
+  const { maxWidth, rows, times, lines } = CoreFn(fileCoverage, fileContent);
   useEffect(() => {
-    if (fileContent&&fileCoverage) {
-      hljs.highlightAll();
-      setRenderMask(true);
+    if (fileContent) {
+      setTimeout(() => {
+        hljs.highlightAll();
+        setRenderMask(true);
+      }, 0);
     }
-  }, [fileContent,fileCoverage]);
+  }, [fileContent]);
   return (
     <div>
       <div className={'box'}>
-        {/*{code}*/}
         {renderMask && <Mask code={fileContent} coverage={fileCoverage} />}
         <div style={{ display: 'flex' }}>
           <Line
             maxWidth={maxWidth}
             rows={rows}
             times={times}
-            lines={zuizhong}
-            newlines={data?.new_lines || []}
+            lines={lines}
+            newlines={fileCodeChange || []}
           />
-          {/*<div>{code}</div>*/}
           <pre>
             <code
               style={{ fontSize: '14px', lineHeight: 1.5 }}

diff --git a/packages/canyon-report/src/Report/components/IstanbulReport.tsx b/packages/canyon-report/src/Report/components/IstanbulReport.tsx
@@ -20,7 +20,8 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
   // @ts-ignore
   const [fileCoverage, setFileCoverage] = useState({} as any);
   const [fileContent, setFileContent] = useState('');
-  const [activePath, setActivePath] = useState('~');
+  const [fileCodeChange, setFileCodeChange] = useState<number[]>([]);
+  const [activePath, setActivePath] = useState('~/src/pages/Home.tsx');
 
   const summaryTreeItem = useMemo(() => {
     return genSummaryTreeItem(activePath, summary);
@@ -44,10 +45,13 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
 
   useEffect(() => {
     if (activePath.includes('.')) {
-      onSelectFile(activePath).then(({ fileContent, fileCoverage }) => {
-        setFileContent(fileContent);
-        setFileCoverage(fileCoverage);
-      });
+      onSelectFile(activePath).then(
+        ({ fileContent, fileCoverage, fileCodeChange }) => {
+          setFileContent(fileContent);
+          setFileCoverage(fileCoverage);
+          setFileCodeChange(fileCodeChange);
+        },
+      );
     }
   }, [activePath]);
   useEffect(() => {
@@ -143,8 +147,12 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
         </div>
       ) : (
         fileContent &&
-        fileCoverage.b && (
-          <Code fileCoverage={fileCoverage} fileContent={fileContent} />
+        fileCoverage && (
+          <Code
+            fileCoverage={fileCoverage}
+            fileContent={fileContent}
+            fileCodeChange={fileCodeChange}
+          />
         )
       )}
     </div>

diff --git a/packages/canyon-report/src/Report/components/Line.tsx b/packages/canyon-report/src/Report/components/Line.tsx
@@ -1,5 +1,7 @@
 export function Line({ lines, newlines }) {
-  function getBgColor(num) {
+  //   0 粉色，1 绿色，-1没有颜色
+
+  function getBgColor(num: number) {
     if (num === -1) {
       return 'rgb(234, 234, 234)';
     } else if (num === 0) {

diff --git a/packages/canyon-report/src/Report/components/helpers.ts b/packages/canyon-report/src/Report/components/helpers.ts
diff --git a/packages/canyon-report/src/Report/types.ts b/packages/canyon-report/src/Report/types.ts
@@ -5,9 +5,11 @@ export enum Dims {
   lines = 'lines',
 }
 
-export type OnSelectFile = (
-  path: string,
-) => Promise<{ fileContent: string; fileCoverage: any }>;
+export type OnSelectFile = (path: string) => Promise<{
+  fileContent: string;
+  fileCoverage: any;
+  fileCodeChange: number[];
+}>;
 
 export type Watermarks = {
   [Dims.statements]: number[];
@@ -37,6 +39,6 @@ export type TrProps = {
 };
 
 export type IstanbulReportProps = {
-  onSelectFile: (path: string) => Promise<any>;
+  onSelectFile: OnSelectFile;
   watermarks: Watermarks;
 };
diff --git a/packages/canyon-report/src/helper.ts b/packages/canyon-report/src/helper.ts
@@ -17,3 +17,96 @@ export const classForPercent = (
   }
   return 'medium';
 };
+
+export function CoreFn(
+    fileCoverage: any,
+    fileDetail: string,
+): {
+  times: {
+    lineNumber: number;
+    count: number;
+  }[];
+  rows: string[];
+  maxWidth: number;
+  lines: {
+    executionNumber: number;
+  }[];
+} {
+  const nullData = {
+    times: [],
+    rows: [],
+    maxWidth: 0,
+    lines: [],
+  };
+  if (!fileCoverage.s) {
+    return nullData;
+  }
+
+  const content = fileDetail;
+  // 1.转换成数组
+  const rows = [''];
+  let index = 0;
+  for (let i = 0; i < content.length; i++) {
+    if (content[i] === '\n') {
+      index += 1;
+      rows.push('');
+    } else {
+      rows[index] += content[i];
+    }
+  }
+  const maxWidth = JSON.parse(JSON.stringify(rows)).sort(
+      (a: string, b: string) => -(a.length - b.length),
+  )[0].length;
+
+  // 获取numberOfRows
+  // 获取行覆盖率
+  function getLineCoverage(data: any) {
+    const statementMap = data.statementMap;
+    const statements = data.s;
+    const lineMap = Object.create(null);
+    Object.entries(statements).forEach(([st, count]: any) => {
+      if (!statementMap[st]) {
+        return;
+      }
+      const { line } = statementMap[st].start;
+      const prevVal = lineMap[line];
+      if (prevVal === undefined || prevVal < count) {
+        lineMap[line] = count;
+      }
+    });
+    return lineMap;
+  }
+
+  // 计算行
+  const lineStats = getLineCoverage(fileCoverage);
+  if (!lineStats) {
+    return nullData;
+  }
+  // numberOfRows
+  const numberOfRows: any[] = [];
+  Object.entries(lineStats).forEach(([lineNumber, count]) => {
+    numberOfRows.push({ lineNumber, count });
+    // 这边计算出了行的次数！！！！！！
+  });
+
+  const lines = [];
+  for (let i = 0; i < rows.length; i++) {
+    if (numberOfRows.find((n) => Number(n.lineNumber) === i + 1)) {
+      lines.push({
+        executionNumber: numberOfRows.find(
+            (n) => Number(n.lineNumber) === i + 1,
+        ).count,
+      });
+    } else {
+      lines.push({
+        executionNumber: -1,
+      });
+    }
+  }
+  return {
+    times: numberOfRows,
+    rows,
+    lines,
+    maxWidth,
+  };
+}
diff --git a/packages/canyon-report/src/main.tsx b/packages/canyon-report/src/main.tsx
@@ -24,6 +24,7 @@ const report = init(document.querySelector('#root') as any, {
         fileCoverage: __coverage__[path],
         // @ts-ignore
         fileContent: getDecode(__filecontent__[path]),
+        fileCodeChange:[1,2,3,4]
       });
     });
   },