@teambit/defender.ui.test-page 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: {
+    testsPage: string;
+    testBlock: string;
+};
+export { TestsPage } from './tests-page';

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestsPage = exports.styles = void 0;
+const tests_page_module_scss_1 = __importDefault(require("./tests-page.module.scss"));
+const { testsPage, testBlock } = tests_page_module_scss_1.default;
+exports.styles = { testsPage, testBlock };
+var tests_page_1 = require("./tests-page");
+Object.defineProperty(exports, "TestsPage", { enumerable: true, get: function () { return tests_page_1.TestsPage; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;AAAA,sFAAkD;AAElD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,gCAAU,CAAC;AAC/B,QAAA,MAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAE/C,2CAAyC;AAAhC,uGAAA,SAAS,OAAA"}

package/dist/tests-page.d.ts

@@ -0,0 +1,7 @@
+import { EmptyStateSlot } from '@teambit/tester';
+import { HTMLAttributes } from 'react';
+declare type TestsPageProps = {
+    emptyState: EmptyStateSlot;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function TestsPage({ className, emptyState }: TestsPageProps): JSX.Element;
+export {};

package/dist/tests-page.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestsPage = void 0;
+const client_1 = require("@apollo/client");
+const component_1 = require("@teambit/component");
+const ui_foundation_ui_react_router_use_query_1 = require("@teambit/ui-foundation.ui.react-router.use-query");
+const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
+const design_ui_separator_1 = require("@teambit/design.ui.separator");
+const design_ui_empty_box_1 = require("@teambit/design.ui.empty-box");
+const mdx_ui_mdx_layout_1 = require("@teambit/mdx.ui.mdx-layout");
+const design_ui_alert_card_1 = require("@teambit/design.ui.alert-card");
+const defender_ui_test_loader_1 = require("@teambit/defender.ui.test-loader");
+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 tests_page_module_scss_1 = __importDefault(require("./tests-page.module.scss"));
+const TESTS_SUBSCRIPTION_CHANGED = (0, client_1.gql) `
+  subscription OnTestsChanged($id: String!) {
+    testsChanged(id: $id) {
+      testsResults {
+        testFiles {
+          file
+          duration
+          pass
+          failed
+          pending
+          errorStr
+          tests {
+            ancestor
+            duration
+            status
+            name
+            error
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_COMPONENT = (0, client_1.gql) `
+  query ($id: String!) {
+    getHost {
+      id # for GQL caching
+      getTests(id: $id) {
+        loading
+        testsResults {
+          testFiles {
+            file
+            duration
+            pass
+            failed
+            pending
+            errorStr
+            tests {
+              ancestor
+              duration
+              status
+              name
+              error
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function TestsPage({ className, emptyState }) {
+    var _a, _b, _c, _d;
+    const query = (0, ui_foundation_ui_react_router_use_query_1.useQuery)();
+    const component = (0, react_1.useContext)(component_1.ComponentContext);
+    const queryHasVersion = query.get('version');
+    const id = queryHasVersion ? component.id.toString() : component.id.toStringWithoutVersion();
+    const onTestsChanged = (0, client_1.useSubscription)(TESTS_SUBSCRIPTION_CHANGED, {
+        variables: { id },
+    });
+    const { data } = (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;
+    // TODO: change loading EmptyBox
+    if (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 EmptyStateTemplate = emptyState.get(env || '');
+    if ((testResults === null || (testData === null || testData === void 0 ? void 0 : testData.testsResults) === null) &&
+        component.host === 'teambit.workspace/workspace' &&
+        EmptyStateTemplate) {
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(tests_page_module_scss_1.default.testsPage, className) },
+            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(design_ui_alert_card_1.AlertCard, { level: "info", title: "There are no\n                tests for this Component. Learn how to add tests:" },
+                    react_1.default.createElement(mdx_ui_mdx_layout_1.MDXLayout, null,
+                        react_1.default.createElement(EmptyStateTemplate, null))))));
+    }
+    // TODO: get the docs domain from the community aspect and pass it here as a prop
+    if (testResults === null || (testData === null || testData === void 0 ? void 0 : testData.testsResults) === null) {
+        return (react_1.default.createElement(design_ui_empty_box_1.EmptyBox, { title: "This component doesn\u2019t have any tests.", linkText: "Learn how to add tests to your components", link: `https://bit.dev/docs/dev-services-overview/tester/tester-overview` }));
+    }
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(tests_page_module_scss_1.default.testsPage, className) },
+        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 }))));
+}
+exports.TestsPage = TestsPage;
+//# sourceMappingURL=tests-page.js.map

package/dist/tests-page.js.map

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

package/dist/tests-page.module.scss

@@ -0,0 +1,20 @@
+.testsPage {
+  padding: 50px 40px 100px 40px;
+  width: 100%;
+  overflow-y: auto;
+  max-width: 1440px;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  .title {
+    margin-bottom: 24px;
+    font-size: var(--bit-h-xs, 26px);
+  }
+  .separator {
+    margin-bottom: 41px;
+  }
+}
+
+.testBlock {
+  margin-bottom: 50px;
+}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

@@ -0,0 +1,6 @@
+import pageStyles from './tests-page.module.scss';
+
+const { testsPage, testBlock } = pageStyles;
+export const styles = { testsPage, testBlock };
+
+export { TestsPage } from './tests-page';

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@teambit/defender.ui.test-page",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.defender",
+    "name": "ui/test-page",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/design.ui.separator": "0.0.354",
+    "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/defender.ui.test-loader": "0.0.490",
+    "@teambit/defender.ui.test-table": "0.0.495",
+    "@teambit/design.ui.alert-card": "0.0.17",
+    "@teambit/design.ui.empty-box": "0.0.354",
+    "@teambit/mdx.ui.mdx-layout": "0.0.501",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.12.18",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "@apollo/client": "^3.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components",
+    "vue",
+    "vue-components"
+  ]
+}

package/preview-1660620618310.js

@@ -0,0 +1,5 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];

package/tests-page.module.scss

@@ -0,0 +1,20 @@
+.testsPage {
+  padding: 50px 40px 100px 40px;
+  width: 100%;
+  overflow-y: auto;
+  max-width: 1440px;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  .title {
+    margin-bottom: 24px;
+    font-size: var(--bit-h-xs, 26px);
+  }
+  .separator {
+    margin-bottom: 41px;
+  }
+}
+
+.testBlock {
+  margin-bottom: 50px;
+}

package/tests-page.tsx

@@ -0,0 +1,142 @@
+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 { Separator } from '@teambit/design.ui.separator';
+import { EmptyBox } from '@teambit/design.ui.empty-box';
+import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
+import { AlertCard } from '@teambit/design.ui.alert-card';
+import { TestLoader } from '@teambit/defender.ui.test-loader';
+import { EmptyStateSlot } from '@teambit/tester';
+import classNames from 'classnames';
+import React, { HTMLAttributes, useContext } from 'react';
+import { TestTable } from '@teambit/defender.ui.test-table';
+import styles from './tests-page.module.scss';
+
+const TESTS_SUBSCRIPTION_CHANGED = gql`
+  subscription OnTestsChanged($id: String!) {
+    testsChanged(id: $id) {
+      testsResults {
+        testFiles {
+          file
+          duration
+          pass
+          failed
+          pending
+          errorStr
+          tests {
+            ancestor
+            duration
+            status
+            name
+            error
+          }
+        }
+      }
+    }
+  }
+`;
+
+const GET_COMPONENT = gql`
+  query ($id: String!) {
+    getHost {
+      id # for GQL caching
+      getTests(id: $id) {
+        loading
+        testsResults {
+          testFiles {
+            file
+            duration
+            pass
+            failed
+            pending
+            errorStr
+            tests {
+              ancestor
+              duration
+              status
+              name
+              error
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+type TestsPageProps = {
+  emptyState: EmptyStateSlot;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function TestsPage({ className, emptyState }: TestsPageProps) {
+  const query = useRouterQuery();
+
+  const component = useContext(ComponentContext);
+
+  const queryHasVersion = query.get('version');
+
+  const id = queryHasVersion ? component.id.toString() : component.id.toStringWithoutVersion();
+
+  const onTestsChanged = useSubscription(TESTS_SUBSCRIPTION_CHANGED, {
+    variables: { id },
+  });
+
+  const { data } = useQuery(GET_COMPONENT, {
+    variables: { id },
+  });
+
+  const testData = onTestsChanged.data?.testsChanged || data?.getHost?.getTests;
+  const testResults = testData?.testsResults?.testFiles;
+
+  // TODO: change loading EmptyBox
+  if (testData?.loading) return <TestLoader />;
+
+  const env = component.environment?.id;
+  const EmptyStateTemplate = emptyState.get(env || '');
+
+  if (
+    (testResults === null || testData?.testsResults === null) &&
+    component.host === 'teambit.workspace/workspace' &&
+    EmptyStateTemplate
+  ) {
+    return (
+      <div className={classNames(styles.testsPage, className)}>
+        <div>
+          <H1 className={styles.title}>Tests</H1>
+          <Separator isPresentational className={styles.separator} />
+          <AlertCard
+            level="info"
+            title="There are no
+                tests for this Component. Learn how to add tests:"
+          >
+            <MDXLayout>
+              <EmptyStateTemplate />
+            </MDXLayout>
+          </AlertCard>
+        </div>
+      </div>
+    );
+  }
+
+  // TODO: get the docs domain from the community aspect and pass it here as a prop
+  if (testResults === null || testData?.testsResults === null) {
+    return (
+      <EmptyBox
+        title="This component doesn’t have any tests."
+        linkText="Learn how to add tests to your components"
+        link={`https://bit.dev/docs/dev-services-overview/tester/tester-overview`}
+      />
+    );
+  }
+
+  return (
+    <div className={classNames(styles.testsPage, className)}>
+      <div>
+        <H1 className={styles.title}>Tests</H1>
+        <Separator isPresentational className={styles.separator} />
+        <TestTable testResults={testResults} className={styles.testBlock} />
+      </div>
+    </div>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}