@teambit/defender.ui.test-page 0.0.56 → 0.0.59

package/dist/tests-page.js

@@ -40,7 +40,117 @@ const lanes_hooks_use_viewed_lane_from_url_1 = require("@teambit/lanes.hooks.use
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const defender_ui_test_table_1 = require("@teambit/defender.ui.test-table");
+const design_content_table_1 = require("@teambit/design.content.table");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 const tests_page_module_scss_1 = __importDefault(require("./tests-page.module.scss"));
+/**
+ * Displays the total row with color-coded values
+ * 0-25 - red
+ * 26-50 - orange
+ * 51-75 - yellow
+ * 76-100 - green
+ */
+const getColor = (pct) => {
+    if (pct < 25)
+        return 'var(--negative-color)';
+    if (pct < 50)
+        return 'var(--warning-color)';
+    if (pct < 75)
+        return '#EEB90F';
+    return 'var(--positive-color)';
+};
+const StyledRow = ({ row, type, displayValue }) => {
+    if (!row)
+        return null;
+    const data = row.data[type];
+    if (!data) {
+        return null;
+    }
+    return (react_1.default.createElement("span", { style: { color: getColor(data.pct) } }, displayValue(data)));
+};
+const StyledTotalRow = (props) => (react_1.default.createElement(StyledRow, Object.assign({}, props, { displayValue: data => `${data.covered}/${data.total}` })));
+const StyledPctRow = (props) => (react_1.default.createElement(StyledRow, Object.assign({}, props, { displayValue: data => `${data.pct}%` })));
+const createColumn = (id, header, type) => [
+    {
+        id: `${id}_pct`,
+        header: '%',
+        cell: ({ row }) => (row ? react_1.default.createElement(StyledPctRow, { row: row, type: type }) : null),
+        value: (row) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.data[type].pct) !== null && _a !== void 0 ? _a : 0; },
+        className: {
+            td: tests_page_module_scss_1.default.coverage_column,
+            th: tests_page_module_scss_1.default.coverage_column,
+        }
+    },
+    {
+        id: `${id}_total`,
+        header: 'Total',
+        cell: ({ row }) => (row ? react_1.default.createElement(StyledTotalRow, { row: row, type: type }) : null),
+        value: (row) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.data[type].covered) !== null && _a !== void 0 ? _a : 0; },
+        className: {
+            td: tests_page_module_scss_1.default.coverage_column,
+            th: tests_page_module_scss_1.default.coverage_column,
+        }
+    },
+];
+const calculatePercentage = (data) => {
+    const covered = data.lines.covered
+        + data.branches.covered
+        + data.functions.covered
+        + data.statements.covered;
+    const total = data.lines.total
+        + data.branches.total
+        + data.functions.total
+        + data.statements.total;
+    return (covered / total) * 100;
+};
+const columns = [
+    {
+        id: 'path',
+        header: 'File',
+        cell: ({ row }) => (react_1.default.createElement("div", { className: tests_page_module_scss_1.default.filePath },
+            react_1.default.createElement(base_react_navigation_link_1.Link, { href: `../~code/${row === null || row === void 0 ? void 0 : row.path}${document.location.search}` }, row === null || row === void 0 ? void 0 : row.path)))
+    },
+    {
+        id: 'progress',
+        header: 'Overall',
+        cell: ({ row }) => {
+            if (!row) {
+                return null;
+            }
+            const coveredPercentage = calculatePercentage(row === null || row === void 0 ? void 0 : row.data);
+            return (react_1.default.createElement("div", { className: tests_page_module_scss_1.default.summaryProgressBar },
+                react_1.default.createElement("div", { className: tests_page_module_scss_1.default.progressBarFill, style: {
+                        width: `${coveredPercentage}%`,
+                        backgroundColor: getColor(coveredPercentage)
+                    } })));
+        },
+        value: (file) => { var _a; return (_a = file === null || file === void 0 ? void 0 : file.data.lines.pct) !== null && _a !== void 0 ? _a : 0; },
+        className: {
+            td: tests_page_module_scss_1.default.coverage_column,
+            th: tests_page_module_scss_1.default.coverage_column,
+        }
+    },
+    {
+        id: 'lines',
+        header: 'Lines',
+        columns: createColumn('lines', 'Lines', 'lines')
+    },
+    {
+        id: 'functions',
+        header: 'Functions',
+        columns: createColumn('functions', 'Functions', 'functions')
+    },
+    {
+        id: 'statements',
+        header: 'Statements',
+        columns: createColumn('statements', 'Statements', 'statements')
+    },
+    {
+        id: 'branches',
+        header: 'Branches',
+        columns: createColumn('branches', 'Branches', 'branches')
+    },
+];
 const TESTS_SUBSCRIPTION_CHANGED = (0, client_1.gql) `
   subscription OnTestsChanged($id: String!) {
     testsChanged(id: $id) {
@@ -86,13 +196,87 @@ const GET_COMPONENT = (0, client_1.gql) `
               error
             }
           }
+          coverage {
+            total {
+              lines {
+                total
+                covered
+                pct
+              }
+              functions {
+                total
+                covered
+                pct
+              }
+              statements {
+                total
+                covered
+                pct
+              }
+              branches {
+                total
+                covered
+                pct
+              }
+            }
+            files {
+              path
+              data {
+                lines {
+                  total
+                  covered
+                  pct
+                }
+                functions {
+                  total
+                  covered
+                  pct
+                }
+                statements {
+                  total
+                  covered
+                  pct
+                }
+                branches {
+                  total
+                  covered
+                  pct
+                }
+              }
+            }
+          }
         }
       }
     }
   }
 `;
+const TotalCoverageSummary = ({ coverageResult }) => {
+    const { lines, statements, functions, branches } = coverageResult.total;
+    const data = [
+        { label: "Statements", value: `${statements.covered}/${statements.total}`, pct: statements.pct },
+        { label: "Branches", value: `${branches.covered}/${branches.total}`, pct: branches.pct },
+        { label: "Functions", value: `${functions.covered}/${functions.total}`, pct: functions.pct },
+        { label: "Lines", value: `${lines.covered}/${lines.total}`, pct: lines.pct },
+    ];
+    const totalCovered = lines.covered + branches.covered + functions.covered + statements.covered;
+    const totalLines = lines.total + branches.total + functions.total + statements.total;
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", marginBottom: "20px" } },
+        react_1.default.createElement("div", { className: tests_page_module_scss_1.default.container }, data.map((item) => (react_1.default.createElement("div", { key: item.label, className: tests_page_module_scss_1.default.item },
+            react_1.default.createElement("span", { className: tests_page_module_scss_1.default.percentage, style: {
+                    color: getColor(item.pct)
+                } },
+                item.pct,
+                "%"),
+            react_1.default.createElement("span", { className: tests_page_module_scss_1.default.label }, item.label),
+            react_1.default.createElement("span", { className: tests_page_module_scss_1.default.badge }, item.value))))),
+        react_1.default.createElement("div", { className: tests_page_module_scss_1.default.summaryProgressBar },
+            react_1.default.createElement("div", { className: tests_page_module_scss_1.default.progressBarFill, style: {
+                    width: `${totalCovered / totalLines * 100}%`,
+                    backgroundColor: getColor(totalCovered / totalLines * 100)
+                } }))));
+};
 function TestsPage({ className, emptyState }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const query = (0, ui_foundation_ui_react_router_use_query_1.useQuery)();
     const component = (0, react_1.useContext)(component_1.ComponentContext);
     const viewedLaneFromUrl = (0, lanes_hooks_use_viewed_lane_from_url_1.useViewedLaneFromUrl)();
@@ -103,15 +287,16 @@ function TestsPage({ className, emptyState }) {
     const onTestsChanged = (0, client_1.useSubscription)(TESTS_SUBSCRIPTION_CHANGED, {
         variables: { id },
     });
-    const { data } = (0, client_1.useQuery)(GET_COMPONENT, {
+    const { data, loading } = (0, client_1.useQuery)(GET_COMPONENT, {
         variables: { id },
     });
     const testData = ((_a = onTestsChanged.data) === null || _a === void 0 ? void 0 : _a.testsChanged) || ((_b = data === null || data === void 0 ? void 0 : data.getHost) === null || _b === void 0 ? void 0 : _b.getTests);
     const testResults = (_c = testData === null || testData === void 0 ? void 0 : testData.testsResults) === null || _c === void 0 ? void 0 : _c.testFiles;
+    const testCoverage = (_d = testData === null || testData === void 0 ? void 0 : testData.testsResults) === null || _d === void 0 ? void 0 : _d.coverage;
     // TODO: change loading EmptyBox
-    if (testData === null || testData === void 0 ? void 0 : testData.loading)
+    if (loading || (testData === null || testData === void 0 ? void 0 : testData.loading))
         return react_1.default.createElement(defender_ui_test_loader_1.TestLoader, null);
-    const env = (_d = component.environment) === null || _d === void 0 ? void 0 : _d.id;
+    const env = (_e = component.environment) === null || _e === void 0 ? void 0 : _e.id;
     const EmptyStateTemplate = emptyState.get(env || '');
     if ((testResults === null || (testData === null || testData === void 0 ? void 0 : testData.testsResults) === null) &&
         component.host === 'teambit.workspace/workspace' &&
@@ -132,6 +317,14 @@ function TestsPage({ className, emptyState }) {
         react_1.default.createElement("div", null,
             react_1.default.createElement(documenter_ui_heading_1.H1, { className: tests_page_module_scss_1.default.title }, "Tests"),
             react_1.default.createElement(design_ui_separator_1.Separator, { isPresentational: true, className: tests_page_module_scss_1.default.separator }),
-            react_1.default.createElement(defender_ui_test_table_1.TestTable, { testResults: testResults, className: tests_page_module_scss_1.default.testBlock }))));
+            react_1.default.createElement(documenter_ui_heading_1.H2, { className: tests_page_module_scss_1.default.subtitle }, "Tests Results"),
+            react_1.default.createElement(defender_ui_test_table_1.TestTable, { testResults: testResults, className: tests_page_module_scss_1.default.testBlock }),
+            testCoverage && testCoverage.files.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(design_ui_separator_1.Separator, { isPresentational: true, className: tests_page_module_scss_1.default.separator }),
+                react_1.default.createElement(documenter_ui_heading_1.H2, { className: tests_page_module_scss_1.default.subtitle }, "Coverage Report"),
+                react_1.default.createElement(TotalCoverageSummary, { coverageResult: testCoverage }),
+                react_1.default.createElement(design_content_table_1.Table, { data: testCoverage.files, columns: columns, sorting: {
+                        enable: true,
+                    } }))))));
 }
 //# sourceMappingURL=tests-page.js.map

package/dist/tests-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"tests-page.js","sourceRoot":"","sources":["../tests-page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tests-page.js","sourceRoot":"","sources":["../tests-page.tsx"],"names":[],"mappings":"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"}

package/dist/tests-page.module.scss

@@ -10,6 +10,10 @@
     margin-bottom: 24px;
     font-size: var(--bit-h-xs, 26px);
   }
+  .subtitle {
+    margin-bottom: 24px;
+    font-size: var(--bit-h-xxs, 18px);
+  }
   .separator {
     margin-bottom: 41px;
   }
@@ -18,3 +22,74 @@
 .testBlock {
   margin-bottom: 50px;
 }
+
+th {
+  font-weight: bold;
+}
+
+.container {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.percentage {
+  font-weight: bolder;
+}
+
+.label {
+  color: #666;
+}
+
+.badge {
+  background-color: var(--surface-neutral-active-color, #eeeff2);
+  color: #666;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 0.85em;
+}
+
+.coverage_column {
+  width: 75px;
+}
+
+.filePath {
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  gap: 4px;
+}
+
+.progressBar {
+  width: 150px;
+  border-radius: 50px;
+  height: 6px;
+  display: inline-block;
+  margin-left: 10px;
+  background-color: lightgray;
+  overflow: hidden;
+  position: relative;
+}
+
+.progressBarFill {
+  height: 100%;
+  border-radius: 50px;
+  width: 0;
+}
+
+.summaryProgressBar {
+  width: 100%;
+  border-radius: 50px;
+  height: 6px;
+  display: inline-block;
+  background-color: lightgray;
+  overflow: hidden;
+  position: relative;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/defender.ui.test-page",
-  "version": "0.0.56",
+  "version": "0.0.59",
   "homepage": "https://bit.cloud/teambit/defender/ui/test-page",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.defender",
     "name": "ui/test-page",
-    "version": "0.0.56"
+    "version": "0.0.59"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -17,9 +17,10 @@
     "@teambit/design.ui.empty-box": "0.0.363",
     "@teambit/design.ui.separator": "0.0.354",
     "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/design.content.table": "0.0.2",
     "@teambit/mdx.ui.mdx-layout": "1.0.11",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.505",
-    "@teambit/lanes.hooks.use-viewed-lane-from-url": "0.0.236"
+    "@teambit/lanes.hooks.use-viewed-lane-from-url": "0.0.237"
   },
   "devDependencies": {
     "@types/classnames": "2.2.11",
@@ -34,7 +35,8 @@
   "peerDependencies": {
     "@apollo/client": "^3.6.0",
     "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "@teambit/base-react.navigation.link": "2.0.32"
   },
   "license": "Apache-2.0",
   "optionalDependencies": {},

package/tests-page.module.scss

@@ -10,6 +10,10 @@
     margin-bottom: 24px;
     font-size: var(--bit-h-xs, 26px);
   }
+  .subtitle {
+    margin-bottom: 24px;
+    font-size: var(--bit-h-xxs, 18px);
+  }
   .separator {
     margin-bottom: 41px;
   }
@@ -18,3 +22,74 @@
 .testBlock {
   margin-bottom: 50px;
 }
+
+th {
+  font-weight: bold;
+}
+
+.container {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.percentage {
+  font-weight: bolder;
+}
+
+.label {
+  color: #666;
+}
+
+.badge {
+  background-color: var(--surface-neutral-active-color, #eeeff2);
+  color: #666;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 0.85em;
+}
+
+.coverage_column {
+  width: 75px;
+}
+
+.filePath {
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  gap: 4px;
+}
+
+.progressBar {
+  width: 150px;
+  border-radius: 50px;
+  height: 6px;
+  display: inline-block;
+  margin-left: 10px;
+  background-color: lightgray;
+  overflow: hidden;
+  position: relative;
+}
+
+.progressBarFill {
+  height: 100%;
+  border-radius: 50px;
+  width: 0;
+}
+
+.summaryProgressBar {
+  width: 100%;
+  border-radius: 50px;
+  height: 6px;
+  display: inline-block;
+  background-color: lightgray;
+  overflow: hidden;
+  position: relative;
+}

package/tests-page.tsx

@@ -1,7 +1,7 @@
 import { useQuery, useSubscription, gql } from '@apollo/client';
 import { ComponentContext } from '@teambit/component';
 import { useQuery as useRouterQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
-import { H1 } from '@teambit/documenter.ui.heading';
+import { H1, H2 } from '@teambit/documenter.ui.heading';
 import { Separator } from '@teambit/design.ui.separator';
 import { EmptyBox } from '@teambit/design.ui.empty-box';
 import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
@@ -12,8 +12,176 @@ import { useViewedLaneFromUrl } from '@teambit/lanes.hooks.use-viewed-lane-from-
 import classNames from 'classnames';
 import React, { HTMLAttributes, useContext } from 'react';
 import { TestTable } from '@teambit/defender.ui.test-table';
+import { Table, type ColumnProps, type CellFunctionProps } from '@teambit/design.content.table';
+import { Link } from '@teambit/base-react.navigation.link';
 import styles from './tests-page.module.scss';
 
+type CoverageResults = {
+  files: CoverageFile[]
+  total: CoverageData
+}
+
+type CoverageStats = {
+  pct: number
+  total: number
+  covered: number
+  skipped: number
+}
+
+type CoverageFile = {
+  path: string
+  data: CoverageData
+}
+
+type CoverageData = {
+  lines: CoverageStats
+  statements: CoverageStats
+  functions: CoverageStats
+  branches: CoverageStats
+}
+
+/**
+ * Displays the total row with color-coded values
+ * 0-25 - red
+ * 26-50 - orange
+ * 51-75 - yellow
+ * 76-100 - green
+ */
+const getColor = (pct: number) => {
+  if (pct < 25) return 'var(--negative-color)';
+  if (pct < 50) return 'var(--warning-color)';
+  if (pct < 75) return '#EEB90F';
+  return 'var(--positive-color)';
+}
+
+const StyledRow: React.FC<{
+  row: CoverageFile | undefined | null,
+  type: keyof CoverageFile['data'],
+  displayValue: (data: CoverageFile['data'][keyof CoverageFile['data']]) => string
+}> = ({ row, type, displayValue }) => {
+  if (!row) return null;
+
+  const data = row.data[type];
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <span style={{ color: getColor(data.pct) }}>
+      {displayValue(data)}
+    </span>
+  )
+}
+
+const StyledTotalRow = (props: { row: CoverageFile | undefined | null, type: keyof CoverageFile['data'] }) => (
+  <StyledRow {...props} displayValue={data => `${data.covered}/${data.total}`} />
+);
+
+const StyledPctRow = (props: { row: CoverageFile | undefined | null, type: keyof CoverageFile['data'] }) => (
+  <StyledRow {...props} displayValue={data => `${data.pct}%`} />
+);
+
+const createColumn = (id: string, header: string, type: keyof CoverageFile['data']) => [
+  {
+    id: `${id}_pct`,
+    header: '%',
+    cell: ({ row }: CellFunctionProps<CoverageFile>) => (
+      row ? <StyledPctRow row={row} type={type} /> : null
+    ),
+    value: (row?: CoverageFile) => row?.data[type].pct ?? 0,
+    className: {
+      td: styles.coverage_column,
+      th: styles.coverage_column,
+    }
+  },
+  {
+    id: `${id}_total`,
+    header: 'Total',
+    cell: ({ row }: CellFunctionProps<CoverageFile>) => (
+      row ? <StyledTotalRow row={row} type={type} /> : null
+    ),
+    value: (row?: CoverageFile) => row?.data[type].covered ?? 0,
+    className: {
+      td: styles.coverage_column,
+      th: styles.coverage_column,
+    }
+  },
+];
+
+const calculatePercentage = (data: CoverageData) => {
+  const covered = data.lines.covered 
+    + data.branches.covered
+    + data.functions.covered
+    + data.statements.covered;
+
+  const total = data.lines.total 
+    + data.branches.total
+    + data.functions.total
+    + data.statements.total;
+  return (covered / total) * 100;
+}
+
+const columns: ColumnProps<CoverageFile>[] = [
+  {
+    id: 'path',
+    header: 'File',
+    cell: ({ row }) => (
+      <div className={styles.filePath}>
+        <Link href={`../~code/${row?.path}${document.location.search}`}>
+          {row?.path}
+        </Link>
+      </div>
+    )
+  },
+  {
+    id: 'progress',
+    header: 'Overall',
+    cell: ({ row }) => {
+      if (!row) {
+        return null;
+      }
+
+      const coveredPercentage = calculatePercentage(row?.data);
+      
+      return (
+        <div className={styles.summaryProgressBar}>
+          <div className={styles.progressBarFill} style={{
+              width: `${coveredPercentage}%`,
+              backgroundColor: getColor(coveredPercentage)
+            }}
+          />
+        </div>
+      )
+    },
+    value: (file) => file?.data.lines.pct ?? 0,
+    className: {
+      td: styles.coverage_column,
+      th: styles.coverage_column,
+    }
+  },
+  {
+    id: 'lines',
+    header: 'Lines',
+    columns: createColumn('lines', 'Lines', 'lines')
+  },
+  {
+    id: 'functions',
+    header: 'Functions',
+    columns: createColumn('functions', 'Functions', 'functions')
+  },
+  {
+    id: 'statements',
+    header: 'Statements',
+    columns: createColumn('statements', 'Statements', 'statements')
+  },
+  {
+    id: 'branches',
+    header: 'Branches',
+    columns: createColumn('branches', 'Branches', 'branches')
+  },
+];
+
 const TESTS_SUBSCRIPTION_CHANGED = gql`
   subscription OnTestsChanged($id: String!) {
     testsChanged(id: $id) {
@@ -60,12 +228,111 @@ const GET_COMPONENT = gql`
               error
             }
           }
+          coverage {
+            total {
+              lines {
+                total
+                covered
+                pct
+              }
+              functions {
+                total
+                covered
+                pct
+              }
+              statements {
+                total
+                covered
+                pct
+              }
+              branches {
+                total
+                covered
+                pct
+              }
+            }
+            files {
+              path
+              data {
+                lines {
+                  total
+                  covered
+                  pct
+                }
+                functions {
+                  total
+                  covered
+                  pct
+                }
+                statements {
+                  total
+                  covered
+                  pct
+                }
+                branches {
+                  total
+                  covered
+                  pct
+                }
+              }
+            }
+          }
         }
       }
     }
   }
 `;
 
+type TotalCoverageSummaryProps = {
+  coverageResult: CoverageResults;
+};
+
+const TotalCoverageSummary: React.FC<TotalCoverageSummaryProps> = ({ coverageResult }) => {
+  const { lines, statements, functions, branches } = coverageResult.total
+
+  const data = [
+    { label: "Statements", value: `${statements.covered}/${statements.total}`, pct: statements.pct },
+    { label: "Branches", value: `${branches.covered}/${branches.total}`, pct: branches.pct },
+    { label: "Functions", value: `${functions.covered}/${functions.total}`, pct: functions.pct },
+    { label: "Lines", value: `${lines.covered}/${lines.total}`, pct: lines.pct },
+  ]
+
+  const totalCovered = lines.covered + branches.covered + functions.covered + statements.covered;
+  const totalLines = lines.total + branches.total + functions.total + statements.total;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", marginBottom: "20px" }}>
+      <div className={styles.container}>
+        {data.map((item) => (
+          <div key={item.label} className={styles.item}>
+            <span className={styles.percentage}
+              style={{
+                color: getColor(item.pct)
+              }}
+            >
+              {item.pct}%
+            </span>
+            <span className={styles.label}>
+              {item.label}
+            </span>
+            <span className={styles.badge}>
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+      {/** Display a progress bar for the total */}
+      <div className={styles.summaryProgressBar}>
+        <div className={styles.progressBarFill} style={{
+            width: `${totalCovered / totalLines * 100}%`,
+            backgroundColor: getColor(totalCovered / totalLines * 100)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
 type TestsPageProps = {
   emptyState: EmptyStateSlot;
 } & HTMLAttributes<HTMLDivElement>;
@@ -86,15 +353,16 @@ export function TestsPage({ className, emptyState }: TestsPageProps) {
     variables: { id },
   });
 
-  const { data } = useQuery(GET_COMPONENT, {
+  const { data, loading } = useQuery(GET_COMPONENT, {
     variables: { id },
   });
 
   const testData = onTestsChanged.data?.testsChanged || data?.getHost?.getTests;
   const testResults = testData?.testsResults?.testFiles;
+  const testCoverage = testData?.testsResults?.coverage as CoverageResults;
 
   // TODO: change loading EmptyBox
-  if (testData?.loading) return <TestLoader />;
+  if (loading || testData?.loading) return <TestLoader />;
 
   const env = component.environment?.id;
   const EmptyStateTemplate = emptyState.get(env || '');
@@ -139,7 +407,22 @@ export function TestsPage({ className, emptyState }: TestsPageProps) {
       <div>
         <H1 className={styles.title}>Tests</H1>
         <Separator isPresentational className={styles.separator} />
+        <H2 className={styles.subtitle}>Tests Results</H2>
         <TestTable testResults={testResults} className={styles.testBlock} />
+        {testCoverage && testCoverage.files.length > 0 && (
+          <>
+            <Separator isPresentational className={styles.separator} />
+            <H2 className={styles.subtitle}>Coverage Report</H2>
+            <TotalCoverageSummary coverageResult={testCoverage} />
+            <Table<CoverageFile>
+              data={testCoverage.files}
+              columns={columns}
+              sorting={{
+                enable: true,
+              }}
+            />
+          </>
+        )}
       </div>
     </div>
   );