add coverage integration

Author: xhd2015

package-lock.json

@@ -6,16 +6,17 @@
     "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
     "@fultonjs/common": "github:xhd2015/fultonjs#master",
     "antd": "^5.17.0",
+    "assert": "^2.1.0",
+    "bootstrap": "^5.3.3",
+    "buffer": "^6.0.3",
     "bun": "^1.1.8",
     "express": "^4.18.1",
     "monaco-editor": "^0.34.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
-    "react-monaco-editor": "^0.49.0",
-    "webpack": "^5.91.0"
+    "react-monaco-editor": "^0.49.0"
   },
   "scripts": {
     "build": "webpack --config webpack.config.js --progress --mode=production",
@@ -32,11 +33,17 @@
     "@babel/preset-react": "^7.0.0",
     "@svgr/webpack": "^6.3.1",
     "@types/bun": "^1.1.1",
+    "@types/react": "^18.3.12",
     "babel-loader": "^8.1.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "crypto-browserify": "^3.12.1",
     "css-loader": "^6.7.1",
     "file-loader": "^6.0.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.1",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^4.10.0"
   }
 }

package.json

@@ -0,0 +1,66 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Tooltip, Typography } from "antd";
+import { FiExternalLink } from "react-icons/fi";
+import { getColor, LabelDetail, toPercent } from "./coverage-util";
+
+export interface CoverageData {
+    link?: string
+    total?: LabelDetail
+    incremental?: LabelDetail
+}
+
+export interface CoverageLineProps {
+    data?: CoverageData
+    fetching?: boolean
+    onClickFetch?: () => void
+}
+
+export function CoverageLine(props: CoverageLineProps) {
+    const link = props.data?.link
+    const total = props.data?.total
+    const incremental = props.data?.incremental
+    return <div style={{ display: "flex", alignItems: "center" }}>
+        <span style={{ marginRight: "2px" }}>Overall Coverage:</span>
+
+        <Coverage total={total} incremental={incremental} />
+
+        {/* TODO: i18n */}
+        <Tooltip placement="top" title="Fetch latest coverage" mouseEnterDelay={1}>
+            <Button
+                icon={<SyncOutlined spin={props.fetching} />}
+                disabled={props.fetching}
+                onClick={props.onClickFetch}
+                shape="circle"
+                size="small"
+            ></Button>
+        </Tooltip>
+        {link ? <Typography.Link href={link} target="_blank"><FiExternalLink /></Typography.Link> : null}
+    </div>
+}
+
+
+// coverage
+export function Coverage(props: { total?: LabelDetail, incremental?: LabelDetail }) {
+    let e: any = '-'
+    if (props.total != null || props.incremental != null) {
+        e = <span>
+            {CoverageValue({ detail: props.total })} {` / `} {CoverageValue({ detail: props.incremental })}
+        </span>
+    }
+    return <Tooltip placement="top" title="Format: Total / Incremental">
+        <span style={{ cursor: "default" }}>{e}</span>
+    </Tooltip>
+
+
+}
+
+export interface CoverageValueProps {
+    detail: LabelDetail | undefined
+}
+
+export function CoverageValue(props: CoverageValueProps) {
+    const { detail } = props
+    const percent = toPercent(detail?.value, '')
+    const color = getColor(percent, detail?.pass ? 'pass' : 'fail')
+    return <span style={{ color: color }}>{percent || '-'}</span>
+}

src/mock-editor/TestingExplorer/xgo/Coverage.tsx

@@ -5,7 +5,7 @@ import { patchSubStree, updateState, updateSubTree } from "../TestingList/util"
 import { RunStatus } from "../testing"
 import { TestingItem } from "../testing-api"
 import { XgoTestingExplorer, XgoTestingExplorerProps } from "./XgoTestingExplorer"
-import { Event, fetchContent, requestRunPoll, useUrlData } from "./http-data"
+import { Event, fetchContent, requestRunPoll, useUrlCoverage, useUrlData } from "./http-data"
 import { filterData, replaceDataMergingState, setSelect, toggleExpand } from "./util"
 import { TraceItem } from "../TestingExplorerEditor/types"
 
@@ -23,6 +23,7 @@ export function UrlXgoTestingExplorer(props: UrlXgoTestingExplorerProps) {
 
     // TODO: make list return single list
     const { data: serverData, refresh } = useUrlData(`${apiPrefix}/list`)
+    const { data: coverageData, loading: coverageLoading, refresh: refreshCoverage } = useUrlCoverage(`${apiPrefix}/coverage/summary`)
 
     const [data, setData] = useState(serverData)
     const [trace, setTrace] = useState(false)
@@ -44,7 +45,8 @@ export function UrlXgoTestingExplorer(props: UrlXgoTestingExplorerProps) {
         await fetch(url + "?" + params)
     }
 
-    return <XgoTestingExplorer {...props}
+    return <XgoTestingExplorer
+        {...props}
         data={data}
         onRefreshRoot={refresh}
         onClickItem={(item, path) => {
@@ -86,6 +88,11 @@ export function UrlXgoTestingExplorer(props: UrlXgoTestingExplorerProps) {
         onTraceChange={setTrace}
         selectedTraceRecord={selectedTraceRecord}
         setSelectedTraceRecord={setSelectedTraceRecord}
+        coverage={{
+            data: { ...coverageData, link: coverageData?.link || "/coverage" },
+            fetching: coverageLoading,
+            onClickFetch: refreshCoverage,
+        }}
     />
 }
 

src/mock-editor/TestingExplorer/xgo/UrlXgoTestingExplorer.tsx

@@ -1,18 +1,18 @@
 import { Button, Checkbox } from "antd"
-import { CSSProperties, useEffect, useState } from "react"
+import { CSSProperties, useEffect, useState, Dispatch, SetStateAction } from "react"
 import { AiOutlineReload } from "react-icons/ai"
 import { BsFileEarmarkCheck } from "react-icons/bs"
 import { FiChevronLeft, FiChevronRight } from "react-icons/fi"
 import { GoFileCode } from "react-icons/go"
 import { SiGoland } from "react-icons/si"
 import { VscVscode } from "react-icons/vsc"
 import { ProgressIcon } from "../../../support/components/icon/ProgressIcon"
+import { TraceExplorer, TraceExplorerProps } from "../../../trace/TraceExplorer"
 import TextEditor from "../../TextEditor"
 import CopyClipboard from "../../support/CopyClipboard"
 import Icon from "../../support/Icon"
 import { TestingItem } from "../testing-api"
-import { RunStatus } from "../testing"
-import { TraceExplorer, TraceExplorerProps } from "../../../trace/TraceExplorer"
+import { CoverageLine, CoverageLineProps } from "./Coverage"
 
 export interface XgoTestDetailProps {
     style?: CSSProperties
@@ -23,7 +23,7 @@ export interface XgoTestDetailProps {
     log?: string
 
     trace?: boolean
-    onTraceChange?: React.Dispatch<React.SetStateAction<boolean>>
+    onTraceChange?: Dispatch<SetStateAction<boolean>>
 
     onClickRun?: () => void
     onClickDebug?: () => void
@@ -37,25 +37,20 @@ export interface XgoTestDetailProps {
 
     showTrace?: boolean
     shownTraceProps?: TraceExplorerProps
+
+    coverage?: CoverageLineProps
 }
 
 // debug with trace enabled
 export function XgoTestDetail(props: XgoTestDetailProps) {
     return <div className={props.className} style={{ height: "100%", ...props.style }}>
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <CoverageLine {...props.coverage} />
+        </div>
         <ItemDetail {...props} />
     </div>
 }
 
-function getStatusColor(status: RunStatus): string | undefined {
-    if (status == "fail" || status === "error") {
-        return "red"
-    }
-    if (status === "success") {
-        return "green"
-    }
-    return undefined
-}
-
 export function ItemDetail(props: XgoTestDetailProps) {
     const item = props.item
     if (item == null) {

src/mock-editor/TestingExplorer/xgo/XgoTestDetail.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useMemo, useState } from "react"
+import { CSSProperties, useEffect, useMemo, useState, Dispatch, SetStateAction } from "react"
 import { GridLayout } from "../../../support/components/layout/GridLayout"
 import { TraceExplorerProps } from "../../../trace/TraceExplorer"
 import { ItemPath } from "../../List"
@@ -11,6 +11,7 @@ import { TestingItem } from "../testing-api"
 import { XgoTestDetail } from "./XgoTestDetail"
 import { fillTestingItem } from "./util"
 import { TraceItem } from "../TestingExplorerEditor/types"
+import { CoverageLineProps } from "./Coverage"
 
 export interface RunDetailResult {
     status: RunStatus
@@ -24,10 +25,10 @@ export interface XgoTestingExplorerProps {
     data?: TestingItem
 
     trace?: boolean
-    onTraceChange?: React.Dispatch<React.SetStateAction<boolean>>
+    onTraceChange?: Dispatch<SetStateAction<boolean>>
 
     selectedTraceRecord?: TraceItem
-    setSelectedTraceRecord?: (value: React.SetStateAction<TraceItem>) => void
+    setSelectedTraceRecord?: (value: SetStateAction<TraceItem>) => void
 
     fetchContent?: (selectedItem: TestingItem) => Promise<string>
 
@@ -46,6 +47,8 @@ export interface XgoTestingExplorerProps {
     openVscode?: (item: TestingItem) => void
     openGoland?: (item: TestingItem) => void
     copyText?: (item: TestingItem) => string
+
+    coverage?: CoverageLineProps
 }
 
 // design:
@@ -91,7 +94,7 @@ export function XgoTestingExplorer(props: XgoTestingExplorerProps) {
         refreshContent(selectedItem)
     }
 
-    console.log("selectedItem:", selectedItem?.relPath, selectedItem?.state?.showTrace)
+    // console.log("selectedItem:", selectedItem?.relPath, selectedItem?.state?.showTrace)
 
     return <GridLayout
         style={{
@@ -159,6 +162,7 @@ export function XgoTestingExplorer(props: XgoTestingExplorerProps) {
                 onClickGoland={clickGoland}
                 copyText={selectedItem && props.copyText && props.copyText(selectedItem)}
                 onClickRefresh={clickRefresh}
+                coverage={props.coverage}
             />
         }}
     />

src/mock-editor/TestingExplorer/xgo/XgoTestingExplorer.tsx

@@ -0,0 +1,38 @@
+export function toIntPercent(s: string, defaultNum?: number): number {
+    const n = Number.parseFloat(s)
+    if (isNaN(n)) {
+        return defaultNum === undefined ? 0 : defaultNum
+    }
+    return Number((n * 100).toFixed(0))
+}
+
+export function toPercent(s: string, defaultStr?: string): string {
+    const n = toIntPercent(s, -1)
+    if (n === -1) {
+        return defaultStr
+    }
+    return `${n}%`
+}
+
+export function getColor(percent: string, variant: "pass" | "fail"): string {
+    if (!percent) {
+        return ''
+    }
+    switch (variant) {
+        case 'pass':
+            return "green"
+        case 'fail':
+            return 'red'
+    }
+    return ''
+}
+
+export interface CoverageDetail {
+    total: LabelDetail
+    incrimental: LabelDetail
+}
+
+export interface LabelDetail {
+    pass: boolean
+    value: string // percent in float, e.g. 0.65
+}

src/mock-editor/TestingExplorer/xgo/coverage-util.ts

@@ -5,6 +5,7 @@ import { Options, RunItem, Session, SessionRunner, UpdateCallback } from "../Tes
 import { traverse } from "../../tree"
 import { ItemPath } from "../../List"
 import { CallRecord } from "../TestingExplorerEditor/TraceList/trace-types"
+import { CoverageData, CoverageLineProps } from "./Coverage"
 
 export async function requestPoll(url: string, pollURL: string, body: any, callback: (err: Error, events: ItemEvent[]) => boolean): Promise<void> {
     const resp = await fetch(url, {
@@ -140,15 +141,46 @@ export function useUrlData(url: string): { data: TestingItem, refresh: () => voi
         const rootData = makeSingleRoot(data)
         fillKeys(rootData)
         setData(rootData)
-
     }
+
     useMemo(() => {
         refresh()
     }, [])
 
     return { data, refresh }
 }
 
+export function useUrlCoverage(url: string): { data: CoverageData, loading: boolean, refresh: () => void } {
+    const [data, setData] = useState<CoverageData>()
+    const [loading, setLoading] = useState(false)
+
+    const refresh = async () => {
+        setLoading(true)
+        try {
+            const resp = await fetch(url)
+            const data: CoverageData = await resp.json()
+            setData(data)
+            if (false) {
+                // demo
+                await new Promise(r => setTimeout(r, 1000))
+                setData({
+                    total: { value: "0.4", pass: true },
+                    incremental: { value: "0.9", pass: true },
+                    link: "/coverage",
+                })
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        refresh()
+    }, [])
+
+    return { data, loading, refresh }
+}
+
 function fillKeys(data: TestingItem) {
     traverse([data], e => {
         if (e.key == null) {

src/mock-editor/TestingExplorer/xgo/http-data.ts

@@ -1,10 +1,13 @@
 # Workflow
 1. Development
- - command: `npm run dev-open`
+ - command: `npm install --legacy-peer-deps`
+ - command: `SERVE_PORT=8080 npm run dev-open`
  - serving files under src/open, so you can import js files via `http://localhost:8080/build/index.js`
 
 2. Verify
  - make your index.html refer to `http://localhost:8080/build/index.js`
+ - you can refer to [./demo-web.html](demo-web.html) for simple usage
+ - for xgo, refer to [xgo/test-explorer/index.html](https://github.com/xhd2015/xgo/blob/master/cmd/xgo/test-explorer/index.html)
 
 3. Build
  - Once development and verify complete, can proceed to next steps
@@ -14,17 +17,19 @@
 
 4. Publish
  - run: `cd src/open/npm-publish && npm publish`
+ - reference via: `https://cdn.jsdelivr.net/npm/xgo-explorer@0.0.13/index.js`
 
 # Usage
 Build
 ```sh
 npx webpack --watch --config src/open/webpack.config.js --progress --mode=development
+# this will 
 ```
 
 Serve file:
 ```sh
 npm install -g http-server
-http-server -c-1 ./
+http-server -c-1 --port 8080 '--cors=*' ./
 ```
 
 Open file: