feat: update

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

Hide file tree

Showing 9 changed files with 71 additions and 655 deletions.
diff --git a/packages/canyon-report/src/Report/components/Code.tsx b/packages/canyon-report/src/Report/components/Code.tsx
@@ -1,21 +1,16 @@
-// import 'highlight.js/styles/idea.css';
-
-// import '../code.css';
 import hljs from 'highlight.js';
 import { FC } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
-
 import { CoreFn } from './helpers.ts';
-// import { getDecode } from '../helpers.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, fileContent, '???????????');
+
+  console.log(fileCoverage,'fileCoverage',fileContent,'fileContent')
 
   const data = {
     new_lines: [],
@@ -29,15 +24,12 @@ const Code: FC<{ fileCoverage: any; fileContent: string }> = ({
     fileCoverage,
     fileContent,
   });
-
-  console.log(maxWidth, rows, times, zuizhong, '???????????')
-
   useEffect(() => {
-    if (fileContent) {
+    if (fileContent&&fileCoverage) {
       hljs.highlightAll();
       setRenderMask(true);
     }
-  }, [fileContent]);
+  }, [fileContent,fileCoverage]);
   return (
     <div>
       <div className={'box'}>

diff --git a/packages/canyon-report/src/Report/components/IstanbulReport.tsx b/packages/canyon-report/src/Report/components/IstanbulReport.tsx
@@ -2,28 +2,15 @@ import { CoverageSummaryMap, genSummaryTreeItem } from '@canyon/data';
 import { FC, useMemo } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
+import { classForPercent } from '../../helper.ts';
 import { Dims, IstanbulReportProps } from '../types';
 import Code from './Code.tsx';
-// import { Dims } from '../types';
 import Th from './Th';
 import Tr from './Tr';
 
 const capitalized = (word: string) =>
   word.charAt(0).toUpperCase() + word.slice(1);
 
-const classForPercent = (type: Dims, value: number, _watermarks: any) => {
-  const watermarks = _watermarks[type];
-  if (!watermarks) {
-    return 'unknown';
-  }
-  if (value < watermarks[0]) {
-    return 'low';
-  }
-  if (value >= watermarks[1]) {
-    return 'high';
-  }
-  return 'medium';
-};
 const dims = ['statements', 'branches', 'functions', 'lines'];
 const IstanbulReport: FC<IstanbulReportProps> = ({
   onSelectFile,
@@ -33,7 +20,7 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
   // @ts-ignore
   const [fileCoverage, setFileCoverage] = useState({} as any);
   const [fileContent, setFileContent] = useState('');
-  const [activePath, setActivePath] = useState('~/src/App.tsx');
+  const [activePath, setActivePath] = useState('~');
 
   const summaryTreeItem = useMemo(() => {
     return genSummaryTreeItem(activePath, summary);
@@ -63,13 +50,10 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
       });
     }
   }, [activePath]);
-
-  // console.log(fileCoverage,'fileCoverage')
   useEffect(() => {
     const handleSetOptionEvent = (e: { detail: any }) => {
       setSummary(e.detail);
     };
-
     // @ts-ignore
     window.addEventListener('setOptionEvent', handleSetOptionEvent);
     return () => {
@@ -127,14 +111,6 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
             </div>
           ))}
         </div>
-        {/*<p className="quiet">*/}
-        {/*  Press <em>n</em> or <em>j</em> to go to the next uncovered block,{' '}*/}
-        {/*  <em>b</em>, <em>p</em> or <em>k</em> for the previous block.*/}
-        {/*</p>*/}
-        {/*<div className="quiet">*/}
-        {/*  Filter:*/}
-        {/*  <input type="search" id="fileSearch" />*/}
-        {/*</div>*/}
       </div>
       <div
         className={`status-line ${classForPercent(
@@ -166,7 +142,8 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
           </table>
         </div>
       ) : (
-        (fileContent&&fileCoverage.b) && (
+        fileContent &&
+        fileCoverage.b && (
           <Code fileCoverage={fileCoverage} fileContent={fileContent} />
         )
       )}

diff --git a/packages/canyon-report/src/Report/components/Line.tsx b/packages/canyon-report/src/Report/components/Line.tsx
@@ -1,35 +1,11 @@
-// import { css } from '@emotion/react';
-
 export function Line({ lines, newlines }) {
-  console.log(lines,newlines)
-  //   0 粉色，1 绿色，-1没有颜色
-  // const lines = [
-  //   {
-  //     executionNumber: 0,
-  //     newLine: true,
-  //   },
-  //   {
-  //     executionNumber: -1,
-  //     newLine: true,
-  //   },
-  //   {
-  //     executionNumber: 100,
-  //     newLine: false,
-  //   },
-  //   {
-  //     executionNumber: 10000,
-  //     newLine: true,
-  //   },
-  // ];
-
   function getBgColor(num) {
     if (num === -1) {
       return 'rgb(234, 234, 234)';
     } else if (num === 0) {
       return '#fce1e5';
-    } else {
-      return '#e6f5d0';
     }
+    return '#e6f5d0';
   }
   return (
     <div>
@@ -39,19 +15,26 @@ export function Line({ lines, newlines }) {
             key={index}
             style={{ display: 'flex', marginRight: '10px', color: '#00000080' }}
           >
-            <div
-                style={{ color: 'green', lineHeight: '21px', width: '20px' }}
-            >
+            <div style={{ color: 'green', lineHeight: '21px', width: '20px' }}>
               {newlines.includes(index + 1) ? '+' : null}
             </div>
 
             <div
-                style={{ backgroundColor: getBgColor(line.executionNumber), width: '60px', lineHeight: '21px' }}
+              style={{
+                backgroundColor: getBgColor(line.executionNumber),
+                width: '60px',
+                lineHeight: '21px',
+              }}
             >
               {line.executionNumber > 0 ? line.executionNumber + 'x' : null}
             </div>
             <div
-                style={{ width: '60px', textAlign: 'right', lineHeight: '21px', backgroundColor: 'rgb(247, 247, 247)' }}
+              style={{
+                width: '60px',
+                textAlign: 'right',
+                lineHeight: '21px',
+                backgroundColor: 'rgb(247, 247, 247)',
+              }}
             >
               {index + 1}
             </div>

diff --git a/packages/canyon-report/src/Report/components/helpers.ts b/packages/canyon-report/src/Report/components/helpers.ts
@@ -1,5 +1,4 @@
 export function CoreFn({ fileCoverage, fileContent }) {
-  console.log(fileCoverage,fileContent)
   if (!fileCoverage.s) {
     return {
       times: [],
@@ -55,8 +54,6 @@ export function CoreFn({ fileCoverage, fileContent }) {
     // 这边计算出了行的次数！！！！！！
   });
 
-  // console.log(rows,numberOfRows,'rows')
-
   const zuizhong = [];
 
   for (let i = 0; i < rows.length; i++) {

diff --git a/packages/canyon-report/src/Report/init.tsx b/packages/canyon-report/src/Report/init.tsx
@@ -2,15 +2,8 @@ import { render } from 'preact';
 
 import IstanbulReport from './components/IstanbulReport';
 import { loadCssCode } from './loadcss';
-import { OnSelectFile, Watermarks } from './types';
-function noop(
-  path: string,
-): Promise<{ fileContent: string; fileCoverage: any }> {
-  console.log(path, 'path');
-  return new Promise((resolve) => {
-    resolve({ fileCoverage: {}, fileContent: `` });
-  });
-}
+import { OnSelectFile } from './types';
+
 const configWatermarks = {
   statements: [50, 80],
   functions: [50, 80],
@@ -19,14 +12,14 @@ const configWatermarks = {
 };
 const init = (
   dom: HTMLElement,
-  {
-    onSelectFile = noop,
-    watermarks = configWatermarks,
-  }: { onSelectFile: OnSelectFile; watermarks: Watermarks },
+  { onSelectFile }: { onSelectFile: OnSelectFile },
 ) => {
   loadCssCode();
   render(
-    <IstanbulReport onSelectFile={onSelectFile} watermarks={watermarks} />,
+    <IstanbulReport
+      onSelectFile={onSelectFile}
+      watermarks={configWatermarks}
+    />,
     dom!,
   );
   return {

diff --git a/packages/canyon-report/src/helper.ts b/packages/canyon-report/src/helper.ts
@@ -0,0 +1,19 @@
+import { Dims } from './Report';
+
+export const classForPercent = (
+  type: Dims,
+  value: number,
+  _watermarks: any,
+) => {
+  const watermarks = _watermarks[type];
+  if (!watermarks) {
+    return 'unknown';
+  }
+  if (value < watermarks[0]) {
+    return 'low';
+  }
+  if (value >= watermarks[1]) {
+    return 'high';
+  }
+  return 'medium';
+};
diff --git a/packages/canyon-report/src/main.tsx b/packages/canyon-report/src/main.tsx
@@ -1,9 +1,9 @@
-import './reset.css'
-import { formatCoverageMap, genSummaryMapByCoverageMap } from '@canyon/data';
+import './reset.css';
+
+import { genSummaryMapByCoverageMap } from '@canyon/data';
 
 import { init } from './index';
-import mockCoverageData from './mock-coverage-data.json';
-import {__coverage__, __filecontent__} from "./mock.ts";
+import { __coverage__, __filecontent__ } from './mock.ts';
 
 function getDecode(str: string) {
   return decodeURIComponent(
@@ -16,26 +16,18 @@ function getDecode(str: string) {
   );
 }
 
-const configWatermarks = {
-  statements: [50, 80],
-  functions: [50, 80],
-  branches: [50, 80],
-  lines: [50, 80],
-};
 const report = init(document.querySelector('#root') as any, {
   onSelectFile(path: string) {
-    console.log(path, 'path');
     return new Promise((resolve) => {
       resolve({
-        fileCoverage: __coverage__[path.replace('~/', '')],
-        fileContent: getDecode(__filecontent__[path.replace('~/', '')]),
+        // @ts-ignore
+        fileCoverage: __coverage__[path],
+        // @ts-ignore
+        fileContent: getDecode(__filecontent__[path]),
       });
     });
   },
-  watermarks: configWatermarks,
 });
 report.setOption({
-  summary: genSummaryMapByCoverageMap(
-    formatCoverageMap(mockCoverageData, '/builds/canyon/canyon-demo'),
-  ),
+  summary: genSummaryMapByCoverageMap(__coverage__),
 });