Introduce new flags --dependents and --dependencies for bit show (

#1914)

* introduce new flags --dependents and --dependencies for "bit show" to display them all recursively (implements a part of #1885).

* add e2e-test for the `show` api

.eslintignore-circle

@@ -86,7 +86,6 @@ src/jsdoc/parser.js
 src/scope/objects/repository.js
 src/consumer/component/components-list.js
 src/remotes/remote.js
-src/scope/graph/scope-graph.js
 src/consumer/config/component-config.js
 src/jsdoc/example-tag-parser.js
 src/scope/objects/raw-object.js

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [unreleased]
 
+- [#1885](https://github.com/teambit/bit/issues/1885) introduce new flags `--dependents` and `--dependencies` for `bit show` to display them all recursively
 - [#1903](https://github.com/teambit/bit/issues/1903) fix importing dependents to not override dependencies
 - [#1889](https://github.com/teambit/bit/issues/1889) auto add `@types/package-name` to the dependencies of TS components
 - [#1867](https://github.com/teambit/bit/issues/1867) apply workspace overrides config on imported components

e2e/api/show.e2e.1.js

@@ -0,0 +1,52 @@
+import { expect } from 'chai';
+import Helper from '../e2e-helper';
+import * as api from '../../src/api';
+
+describe('show api', function () {
+  this.timeout(0);
+  const helper = new Helper();
+  after(() => {
+    helper.destroyEnv();
+  });
+  describe('show()', () => {
+    before(() => {
+      helper.setNewLocalAndRemoteScopes();
+      helper.createComponentBarFoo();
+      helper.addComponentBarFoo();
+      helper.tagAllComponents();
+      helper.tagScope('1.0.0');
+      helper.exportAllComponents();
+    });
+    describe('with no options', () => {
+      it('should return an object of the component with the latest version', async () => {
+        const result = await api.show(helper.remoteScopePath, `${helper.remoteScope}/bar/[email protected]`);
+        expect(result).to.be.an('object');
+        expect(result)
+          .to.have.property('name')
+          .that.equals('bar/foo');
+      });
+    });
+    describe('with versions = true', () => {
+      it('should return an array of all versions of the component', async () => {
+        const result = await api.show(helper.remoteScopePath, `${helper.remoteScope}/bar/[email protected]`, {
+          versions: true
+        });
+        expect(result)
+          .to.be.an('array')
+          .with.lengthOf(2);
+        expect(result[0])
+          .to.have.property('name')
+          .that.equals('bar/foo');
+        expect(result[0])
+          .to.have.property('version')
+          .that.equals('0.0.1');
+        expect(result[1])
+          .to.have.property('name')
+          .that.equals('bar/foo');
+        expect(result[1])
+          .to.have.property('version')
+          .that.equals('1.0.0');
+      });
+    });
+  });
+});

e2e/commands/show.e2e.2.js

@@ -625,4 +625,142 @@ Circle.defaultProps = {
       expect(barFoo).to.not.have.string('Returns');
     });
   });
+  describe('show with --dependents and --dependencies flag', () => {
+    before(() => {
+      helper.setNewLocalAndRemoteScopes();
+      helper.populateWorkspaceWithComponents();
+      helper.createFile('bar-dep', 'bar.js');
+      helper.createFile('bar-dep', 'bar.spec.js', 'require("../bar/foo.js");'); // a dev dependency requires bar/foo
+      helper.addComponent('bar-dep', { m: 'bar-dep/bar.js', t: 'bar-dep/bar.spec.js' });
+      helper.createFile('baz', 'baz.js'); // a component that not related to other dependencies/dependents
+      helper.addComponent('baz/baz.js');
+      helper.tagAllComponents();
+      helper.exportAllComponents();
+      helper.reInitLocalScope();
+      helper.addRemoteScope();
+    });
+    describe('with local scope', () => {
+      before(() => {
+        helper.importComponent('*');
+      });
+      describe('when using --dependents', () => {
+        let show;
+        before(() => {
+          show = helper.showComponentParsed('utils/is-string --dependents');
+        });
+        it('should show the dependents only', () => {
+          expect(show)
+            .to.have.property('dependentsInfo')
+            .that.is.an('array')
+            .with.lengthOf(2);
+          expect(show)
+            .to.have.property('dependenciesInfo')
+            .to.deep.equal([]);
+        });
+        it('should show all dependents sorted by depth', () => {
+          expect(show.dependentsInfo[0])
+            .to.have.property('depth')
+            .that.equals(1);
+          expect(show.dependentsInfo[0].id.name).to.equal('bar/foo');
+          expect(show.dependentsInfo[1])
+            .to.have.property('depth')
+            .that.equals(2);
+          expect(show.dependentsInfo[1].id.name).to.equal('bar-dep');
+        });
+      });
+      describe('when using --dependencies', () => {
+        let show;
+        before(() => {
+          show = helper.showComponentParsed('utils/is-string --dependencies');
+        });
+        it('should show the dependencies only', () => {
+          expect(show)
+            .to.have.property('dependenciesInfo')
+            .that.is.an('array')
+            .with.lengthOf(1);
+          expect(show)
+            .to.have.property('dependentsInfo')
+            .to.deep.equal([]);
+        });
+        it('should show all dependencies', () => {
+          expect(show.dependenciesInfo[0])
+            .to.have.property('depth')
+            .that.equals(1);
+          expect(show.dependenciesInfo[0].id.name).to.equal('utils/is-type');
+        });
+      });
+    });
+    describe('with remote scope (using --remote flag)', () => {
+      before(() => {
+        helper.reInitLocalScope();
+        helper.addRemoteScope();
+      });
+      describe('when using --dependents', () => {
+        let show;
+        before(() => {
+          show = helper.showComponentParsed(`${helper.remoteScope}/utils/is-string --remote --dependents`);
+        });
+        it('should show the dependents only', () => {
+          expect(show)
+            .to.have.property('dependentsInfo')
+            .that.is.an('array')
+            .with.lengthOf(2);
+          expect(show)
+            .to.have.property('dependenciesInfo')
+            .to.deep.equal([]);
+        });
+        it('should show all dependents sorted by depth', () => {
+          expect(show.dependentsInfo[0])
+            .to.have.property('depth')
+            .that.equals(1);
+          expect(show.dependentsInfo[0].id.name).to.equal('bar/foo');
+          expect(show.dependentsInfo[1])
+            .to.have.property('depth')
+            .that.equals(2);
+          expect(show.dependentsInfo[1].id.name).to.equal('bar-dep');
+        });
+      });
+      describe('when using --dependencies', () => {
+        let show;
+        before(() => {
+          show = helper.showComponentParsed(`${helper.remoteScope}/utils/is-string --remote --dependencies`);
+        });
+        it('should show the dependencies only', () => {
+          expect(show)
+            .to.have.property('dependenciesInfo')
+            .that.is.an('array')
+            .with.lengthOf(1);
+          expect(show)
+            .to.have.property('dependentsInfo')
+            .to.deep.equal([]);
+        });
+        it('should show all dependencies', () => {
+          expect(show.dependenciesInfo[0])
+            .to.have.property('depth')
+            .that.equals(1);
+          expect(show.dependenciesInfo[0].id.name).to.equal('utils/is-type');
+        });
+      });
+    });
+  });
+  describe('show with --dependents flag on a new component', () => {
+    let show;
+    before(() => {
+      helper.setNewLocalAndRemoteScopes();
+      helper.populateWorkspaceWithComponents();
+      show = helper.showComponentParsed('utils/is-string --dependents --dependencies');
+    });
+    it('should show all dependents and dependencies', () => {
+      expect(show)
+        .to.have.property('dependentsInfo')
+        .that.is.an('array')
+        .with.lengthOf(1);
+      expect(show)
+        .to.have.property('dependenciesInfo')
+        .that.is.an('array')
+        .with.lengthOf(1);
+      expect(show.dependenciesInfo[0].id.name).to.equal('utils/is-type');
+      expect(show.dependentsInfo[0].id.name).to.equal('bar/foo');
+    });
+  });
 });

src/api.js

@@ -11,11 +11,11 @@ HooksManager.init();
 
 module.exports = {
   show: (scopePath: string, id: string, opts: Object) =>
-    getScopeComponent({ scopePath, id, allVersions: opts && opts.versions }).then((c) => {
-      if (Array.isArray(c)) {
-        return c.map(v => v.toObject());
+    getScopeComponent({ scopePath, id, allVersions: opts && opts.versions }).then(({ component }) => {
+      if (Array.isArray(component)) {
+        return component.map(v => v.toObject());
       }
-      return c.toObject();
+      return component.toObject();
     }),
   list: (scopePath: string) =>
     scopeList(scopePath).then(listScopeResult => listScopeResult.map(result => result.id.toString())),

src/api/consumer/index.js

@@ -31,6 +31,7 @@ import migrate from './lib/migrate';
 import ejectAction from './lib/eject';
 import dependencyStatus from './lib/dependency_status';
 import login from './lib/login';
+import show from './lib/show';
 
 export {
   init,
@@ -71,5 +72,6 @@ export {
   injectConf,
   migrate,
   ejectAction,
-  login
+  login,
+  show
 };

src/api/consumer/lib/get-consumer-component.js

@@ -1,24 +1,47 @@
 /** @flow */
 import { loadConsumer, Consumer } from '../../../consumer';
 import NothingToCompareTo from './exceptions/nothing-to-compare-to';
+import DependencyGraph from '../../../scope/graph/scope-graph';
+import type { DependenciesInfo } from '../../../scope/graph/scope-graph';
+import ComponentsList from '../../../consumer/component/components-list';
 
 export default (async function getConsumerBit({
   id,
   compare,
   allVersions,
-  showRemoteVersions
+  showRemoteVersions,
+  showDependents,
+  showDependencies
 }: {
   id: string,
   compare: boolean,
   allVersions: ?boolean,
-  showRemoteVersions: boolean
+  showRemoteVersions: boolean,
+  showDependents: boolean,
+  showDependencies: boolean
 }) {
   const consumer: Consumer = await loadConsumer();
   const bitId = consumer.getParsedId(id);
   if (allVersions) {
     return consumer.loadAllVersionsOfComponentFromModel(bitId);
   }
   const component = await consumer.loadComponent(bitId); // loads recent component
+  let dependenciesInfo: DependenciesInfo[] = [];
+  let dependentsInfo: DependenciesInfo[] = [];
+  if (showDependents || showDependencies) {
+    const componentsList = new ComponentsList(consumer);
+    const allComponents = await componentsList.getFromFileSystem();
+    const graph = DependencyGraph.buildGraphFromComponents(allComponents);
+    const dependencyGraph = new DependencyGraph(graph);
+    const componentGraph = dependencyGraph.getSubGraphOfConnectedComponents(component.id);
+    const componentDepGraph = new DependencyGraph(componentGraph);
+    if (showDependents) {
+      dependentsInfo = componentDepGraph.getDependentsInfo(component.id);
+    }
+    if (showDependencies) {
+      dependenciesInfo = componentDepGraph.getDependenciesInfo(component.id);
+    }
+  }
   if (showRemoteVersions) {
     await consumer.addRemoteAndLocalVersionsToDependencies(component, true);
   }
@@ -27,5 +50,5 @@ export default (async function getConsumerBit({
     return { component, componentModel: component.componentFromModel };
   }
   await consumer.onDestroy();
-  return { component };
+  return { component, dependentsInfo, dependenciesInfo };
 });