@teambit/tester 0.0.565 → 0.0.569

package/exceptions/index.ts

@@ -0,0 +1,2 @@
+export { NoTestFilesFound } from './no-test-files-found';
+export { NoMatchingComponents } from './no-matching-components';

package/exceptions/no-matching-components.ts

@@ -0,0 +1,5 @@
+export class NoMatchingComponents extends Error {
+  constructor(pattern: string) {
+    super(`could not find components matching to pattern: ${pattern}`);
+  }
+}

package/exceptions/no-test-files-found.ts

@@ -0,0 +1,7 @@
+import { BitError } from '@teambit/bit-error';
+
+export class NoTestFilesFound extends BitError {
+  constructor(testRegex: string) {
+    super(`no test files for regex: '${testRegex}' found for any of the components in the workspace.`);
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/tester",
-  "version": "0.0.565",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/defender/tester",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.defender",
     "name": "tester",
-    "version": "0.0.565"
+    "version": "0.0.569"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -18,30 +18,30 @@
     "lodash.compact": "3.0.1",
     "lodash": "4.17.21",
     "cli-highlight": "2.1.9",
+    "classnames": "2.2.6",
     "junit-report-builder": "3.0.0",
     "strip-ansi": "6.0.0",
-    "classnames": "2.2.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/cli": "0.0.392",
-    "@teambit/logger": "0.0.477",
-    "@teambit/workspace": "0.0.565",
-    "@teambit/component": "0.0.565",
-    "@teambit/graphql": "0.0.565",
-    "@teambit/builder": "0.0.565",
-    "@teambit/dev-files": "0.0.565",
-    "@teambit/envs": "0.0.565",
-    "@teambit/tests-results": "0.0.78",
-    "@teambit/ui": "0.0.565",
-    "@teambit/compiler": "0.0.565",
-    "@teambit/bit-error": "0.0.378",
-    "@teambit/defender.ui.test-loader": "0.0.471",
-    "@teambit/defender.ui.test-table": "0.0.474",
+    "@teambit/cli": "0.0.395",
+    "@teambit/logger": "0.0.481",
+    "@teambit/workspace": "0.0.569",
+    "@teambit/component": "0.0.569",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/builder": "0.0.569",
+    "@teambit/dev-files": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/tests-results": "0.0.81",
+    "@teambit/ui": "0.0.569",
+    "@teambit/compiler": "0.0.569",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/defender.ui.test-loader": "0.0.474",
+    "@teambit/defender.ui.test-table": "0.0.477",
     "@teambit/design.ui.alert-card": "0.0.13",
     "@teambit/design.ui.empty-box": "0.0.352",
     "@teambit/design.ui.separator": "0.0.351",
-    "@teambit/mdx.ui.mdx-layout": "0.0.473"
+    "@teambit/mdx.ui.mdx-layout": "0.0.477"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.178",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -85,27 +85,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.178",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/test.cmd.tsx

@@ -0,0 +1,112 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import chalk from 'chalk';
+import { Logger } from '@teambit/logger';
+import { Workspace } from '@teambit/workspace';
+import { ConsumerNotFound } from '@teambit/legacy/dist/consumer/exceptions';
+import { Timer } from '@teambit/legacy/dist/toolbox/timer';
+import { Box, Text } from 'ink';
+import React from 'react';
+import { NoMatchingComponents } from './exceptions';
+
+import type { TesterMain } from './tester.main.runtime';
+
+type TestFlags = {
+  watch: boolean;
+  debug: boolean;
+  all: boolean;
+  env?: string;
+  scope?: string;
+  junit?: string;
+  coverage?: boolean;
+};
+
+export class TestCmd implements Command {
+  name = 'test [pattern]';
+  description = 'test set of components in your workspace';
+  alias = 'at';
+  group = 'development';
+  shortDescription = '';
+  options = [
+    ['w', 'watch', 'start the tester in watch mode.'],
+    ['d', 'debug', 'start the tester in debug mode.'],
+    ['a', 'all', 'test all components, not only new and modified'],
+    ['', 'junit <filepath>', 'write tests results as JUnit XML format into the specified file path'],
+    ['', 'coverage', 'show code coverage data'],
+    ['e', 'env <id>', 'test only the given env'],
+    ['s', 'scope <scope>', 'name of the scope to test'],
+    // TODO: we need to reduce this redundant casting every time.
+  ] as CommandOptions;
+
+  constructor(private tester: TesterMain, private workspace: Workspace, private logger: Logger) {}
+
+  async render(
+    [userPattern]: [string],
+    { watch = false, debug = false, all = false, env, scope, junit, coverage = false }: TestFlags
+  ) {
+    this.logger.off();
+    const timer = Timer.create();
+    const scopeName = typeof scope === 'string' ? scope : undefined;
+    timer.start();
+    if (!this.workspace) throw new ConsumerNotFound();
+
+    const getPatternWithScope = () => {
+      if (!userPattern && !scope) return undefined;
+      const pattern = userPattern || '**';
+      return scopeName ? `${scopeName}/${pattern}` : pattern;
+    };
+    const patternWithScope = getPatternWithScope();
+    const components = await this.workspace.getComponentsByUserInput(all, patternWithScope, true);
+    if (!components.length) {
+      if (userPattern) throw new NoMatchingComponents(userPattern);
+      return {
+        code: 0,
+        data: (
+          <Box>
+            <Text bold>
+              no components found to test. use "--all" flag to test all components or specify the ids to test,
+              otherwise, only new and modified components will be tested{' '}
+            </Text>
+          </Box>
+        ),
+      };
+    }
+
+    this.logger.console(
+      `testing total of ${components.length} components in workspace '${chalk.cyan(this.workspace.name)}'`
+    );
+
+    let code = 0;
+    if (watch && !debug) {
+      await this.tester.watch(components, {
+        watch,
+        debug,
+        env,
+        coverage,
+      });
+    } else {
+      const tests = await this.tester.test(components, {
+        watch,
+        debug,
+        env,
+        junit,
+        coverage,
+      });
+      tests?.results?.forEach((test) => (test.data?.errors?.length ? (code = 1) : null));
+    }
+    const { seconds } = timer.stop();
+
+    if (watch) return <Box></Box>;
+    return {
+      code,
+      data: (
+        <Box>
+          <Text>tested </Text>
+          <Text color="cyan">{components.length} </Text>
+          <Text>components in </Text>
+          <Text color="cyan">{seconds} </Text>
+          <Text>seconds.</Text>
+        </Box>
+      ),
+    };
+  }
+}

package/tester.service.tsx

@@ -0,0 +1,161 @@
+import { Logger } from '@teambit/logger';
+import { resolve } from 'path';
+import React from 'react';
+import { Text, Newline } from 'ink';
+import { EnvService, ExecutionContext, EnvDefinition } from '@teambit/envs';
+import { ComponentMap } from '@teambit/component';
+import { Workspace } from '@teambit/workspace';
+import highlight from 'cli-highlight';
+import { PubSub } from 'graphql-subscriptions';
+import { DevFilesMain } from '@teambit/dev-files';
+import { Tester, Tests, CallbackFn } from './tester';
+import { TesterAspect } from './tester.aspect';
+import { TesterOptions } from './tester.main.runtime';
+import { detectTestFiles } from './utils';
+import { NoTestFilesFound } from './exceptions';
+
+const chalk = require('chalk');
+
+export const OnTestsChanged = 'OnTestsChanged';
+
+export type TesterDescriptor = {
+  /**
+   * id of the tester (e.g. jest/mocha)
+   */
+  id: string;
+
+  /**
+   * display name of the tester (e.g. Jest / Mocha)
+   */
+  displayName: string;
+
+  /**
+   * icon of the configured tester.
+   */
+  icon: string;
+
+  /**
+   * string containing the config for display.
+   */
+  config: string;
+
+  version?: string;
+};
+
+export class TesterService implements EnvService<Tests, TesterDescriptor> {
+  name = 'tester';
+
+  constructor(
+    readonly workspace: Workspace,
+    /**
+     * regex used to identify which files to test.
+     */
+    readonly patterns: string[],
+
+    private logger: Logger,
+
+    private pubsub: PubSub,
+
+    private devFiles: DevFilesMain
+  ) {}
+
+  _callback: CallbackFn | undefined;
+
+  render(env: EnvDefinition) {
+    const descriptor = this.getDescriptor(env);
+    return (
+      <Text key={descriptor?.id}>
+        <Text color="cyan">configured tester: </Text>
+        <Text>
+          {descriptor?.id} ({descriptor?.displayName} @ {descriptor?.version})
+        </Text>
+        <Newline />
+        <Text underline color="cyan">
+          tester config:
+        </Text>
+        <Newline />
+        <Text>
+          {/* refactor a separate component which highlights for cli */}
+          {highlight(descriptor?.config || '', { language: 'javascript', ignoreIllegals: true })}
+        </Text>
+        <Newline />
+      </Text>
+    );
+  }
+
+  getDescriptor(environment: EnvDefinition) {
+    if (!environment.env.getTester) return undefined;
+    const tester: Tester = environment.env.getTester();
+
+    return {
+      id: tester.id || '',
+      displayName: tester.displayName || '',
+      icon: tester.icon || '',
+      config: tester.displayConfig ? tester.displayConfig() : '',
+      version: tester.version ? tester.version() : '?',
+    };
+  }
+
+  onTestRunComplete(callback: CallbackFn) {
+    this._callback = callback;
+  }
+
+  async run(context: ExecutionContext, options: TesterOptions): Promise<Tests> {
+    const tester: Tester = context.env.getTester();
+    const specFiles = ComponentMap.as(context.components, (component) => {
+      return detectTestFiles(component, this.devFiles);
+    });
+    const testCount = specFiles.toArray().reduce((acc, [, specs]) => acc + specs.length, 0);
+
+    const componentWithTests = specFiles.toArray().reduce((acc: number, [, specs]) => {
+      if (specs.length > 0) acc += 1;
+      return acc;
+    }, 0);
+
+    if (testCount === 0 && !options.ui) throw new NoTestFilesFound(this.patterns.join(','));
+
+    if (!options.ui)
+      this.logger.console(`testing ${componentWithTests} components with environment ${chalk.cyan(context.id)}\n`);
+
+    const patterns = ComponentMap.as(context.components, (component) => {
+      const dir = this.workspace.componentDir(component.id);
+      const componentPatterns = this.devFiles.getDevPatterns(component, TesterAspect.id);
+      return componentPatterns.map((pattern: string) => ({ path: resolve(dir, pattern), relative: pattern }));
+    });
+
+    const testerContext = Object.assign(context, {
+      release: false,
+      specFiles,
+      patterns,
+      rootPath: this.workspace.path,
+      workspace: this.workspace,
+      debug: options.debug,
+      watch: options.watch,
+      ui: options.ui,
+      coverage: options.coverage,
+    });
+
+    if (options.watch && options.ui && tester.watch) {
+      if (tester.onTestRunComplete) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        tester.onTestRunComplete((results) => {
+          if (this._callback) this._callback(results);
+          results.components.forEach((component) => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.pubsub.publish(OnTestsChanged, {
+              testsChanged: {
+                id: component.componentId.toString(),
+                testsResults: component.results,
+                loading: component.loading,
+              },
+            });
+          });
+        });
+      }
+
+      return tester.watch(testerContext);
+    }
+
+    return tester.test(testerContext);
+  }
+}

package/tester.ui.runtime.tsx

@@ -0,0 +1,42 @@
+import { ComponentType } from 'react';
+import { UIRuntime } from '@teambit/ui';
+import { SlotRegistry, Slot } from '@teambit/harmony';
+import { ComponentAspect, ComponentUI } from '@teambit/component';
+import { TestsSection } from './tests.section';
+import { TesterAspect } from './tester.aspect';
+
+export type EmptyStateSlot = SlotRegistry<ComponentType>;
+export class TesterUI {
+  static dependencies = [ComponentAspect];
+
+  static runtime = UIRuntime;
+
+  stageKey?: string;
+
+  constructor(private component: ComponentUI, private emptyStateSlot: EmptyStateSlot) {}
+
+  /**
+   * register a new tester empty state. this allows to register a different empty state from each environment for example.
+   */
+  registerEmptyState(emptyStateComponent: ComponentType) {
+    this.emptyStateSlot.register(emptyStateComponent);
+    return this;
+  }
+
+  static slots = [Slot.withType<ComponentType>()];
+
+  static async provider([component]: [ComponentUI], config, [emptyStateSlot]: [EmptyStateSlot]) {
+    const testerUi = new TesterUI(component, emptyStateSlot);
+
+    const section = new TestsSection(emptyStateSlot);
+
+    component.registerRoute(section.route);
+    component.registerNavigation(section.navigationLink, section.order);
+
+    return testerUi;
+  }
+}
+
+export default TesterUI;
+
+TesterAspect.addRuntime(TesterUI);

package/tests.section.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Section } from '@teambit/component';
+import { TestsPage } from './ui/tests-page';
+import { EmptyStateSlot } from './tester.ui.runtime';
+
+export class TestsSection implements Section {
+  constructor(private emptyStateSlot: EmptyStateSlot) {}
+
+  route = {
+    path: '~tests',
+    children: <TestsPage emptyState={this.emptyStateSlot} />,
+  };
+  navigationLink = {
+    href: '~tests',
+    children: 'Tests',
+  };
+  order = 40;
+}

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;
+}

package/ui/tests-page.tsx

@@ -0,0 +1,134 @@
+import { useQuery, useSubscription, gql } from '@apollo/client';
+import { ComponentContext } from '@teambit/component';
+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 classNames from 'classnames';
+import React, { HTMLAttributes, useContext } from 'react';
+import { TestTable } from '@teambit/defender.ui.test-table';
+import { EmptyStateSlot } from '../tester.ui.runtime';
+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
+          error {
+            failureMessage
+          }
+          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
+            error {
+              failureMessage
+            }
+            tests {
+              ancestor
+              duration
+              status
+              name
+              error
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+type TestsPageProps = {
+  emptyState: EmptyStateSlot;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function TestsPage({ className, emptyState }: TestsPageProps) {
+  const component = useContext(ComponentContext);
+  const onTestsChanged = useSubscription(TESTS_SUBSCRIPTION_CHANGED, { variables: { id: component.id.toString() } });
+  const { data } = useQuery(GET_COMPONENT, {
+    variables: { id: component.id._legacy.name },
+  });
+
+  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>
+    );
+  }
+
+  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://harmony-docs.bit.dev/testing/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/utils/detect-spec-files.ts

@@ -0,0 +1,12 @@
+import { Component } from '@teambit/component';
+import { DevFilesMain } from '@teambit/dev-files';
+import { TesterAspect } from '../tester.aspect';
+
+/**
+ * detect test files in components
+ */
+export function detectTestFiles(component: Component, devFiles: DevFilesMain) {
+  const files = devFiles.getDevFiles(component);
+  const testFiles = files.get(TesterAspect.id);
+  return component.state.filesystem.files.filter((file) => testFiles.includes(file.relative));
+}

package/utils/index.ts

@@ -0,0 +1 @@
+export { detectTestFiles } from './detect-spec-files';

package/utils/junit-generator.ts

@@ -0,0 +1,35 @@
+import junitReportBuilder from 'junit-report-builder';
+import stripAnsi from 'strip-ansi';
+import { ComponentsResults } from '../tester';
+
+export function testsResultsToJUnitFormat(components: ComponentsResults[]): string {
+  const builder = junitReportBuilder.newBuilder();
+  components.forEach((compResult) => {
+    const suite = builder.testSuite().name(compResult.componentId.toString());
+    if (compResult.results?.start) {
+      suite.timestamp(new Date(compResult.results?.start).toISOString());
+    }
+    compResult.results?.testFiles.forEach((testFile) => {
+      if (testFile.error?.error) {
+        const testCase = suite.testCase().className(testFile.file).name(testFile.file);
+        testCase.error(stripAnsi(testFile.error.error as string));
+      }
+      testFile.tests.forEach((test) => {
+        const testCase = suite.testCase().className(testFile.file).name(test.name);
+        if (test.error) {
+          testCase.error(stripAnsi(test.error));
+        }
+        if (test.failure) {
+          testCase.failure(stripAnsi(test.failure));
+        }
+        if (test.status === 'skipped' || test.status === 'pending') {
+          testCase.skipped();
+        }
+        if (test.duration) {
+          testCase.time(test.duration / 1000);
+        }
+      });
+    });
+  });
+  return builder.build();
+}