fix(misc): display nested apps properly in dep graph (#5022)

ISSUES CLOSED: #4906

apps/dep-graph-client/.babelrc

@@ -1 +1,3 @@
-{}
+{
+  "presets": ["@nrwl/web/babel"]
+}

apps/dep-graph-client/jest.config.js

@@ -1,10 +1,15 @@
 module.exports = {
   name: 'dep-graph-client',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   globals: {
     'ts-jest': {
       tsConfig: '<rootDir>/tsconfig.spec.json',
     },
   },
+  transform: {
+    '^.+\\.[tj]s$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/apps/dep-graph-client',
 };

apps/dep-graph-client/src/app/util-cytoscape/project-node.spec.ts

@@ -0,0 +1,115 @@
+import { ProjectNode } from './project-node';
+
+describe('ProjectNode', () => {
+  describe('app nodes', () => {
+    it('should not set parentId if groupByFolder is false', () => {
+      const projectNode = new ProjectNode({
+        name: 'sub-app',
+        type: 'app',
+        data: {
+          projectType: 'application',
+          root: 'apps/sub/app',
+          sourceRoot: 'apps/sub/app/src',
+          prefix: 'sub-app',
+          tags: [],
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(false);
+
+      expect(result.data.parent).toBeNull();
+    });
+
+    it('should not set parentId if app is not nested', () => {
+      const projectNode = new ProjectNode({
+        name: 'app',
+        type: 'app',
+        data: {
+          projectType: 'application',
+          root: 'apps/app',
+          sourceRoot: 'apps/app/src',
+          prefix: 'app',
+          tags: [],
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(false);
+
+      expect(result.data.parent).toBeNull();
+    });
+
+    it('should set parentId if the app is nested and groupByFolder is true', () => {
+      const projectNode = new ProjectNode({
+        name: 'sub-app',
+        type: 'app',
+        data: {
+          projectType: 'application',
+          root: 'apps/sub/app',
+          sourceRoot: 'apps/sub/app/src',
+          prefix: 'sub-app',
+          tags: [],
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(true);
+
+      expect(result.data.parent).toEqual('dir-sub');
+    });
+  });
+
+  describe('lib nodes', () => {
+    it('should not set parentId if groupByFolder is false', () => {
+      const projectNode = new ProjectNode({
+        name: 'sub-lib',
+        type: 'lib',
+        data: {
+          root: 'libs/sub/lib',
+          sourceRoot: 'libs/sub/lib/src',
+          projectType: 'library',
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(false);
+
+      expect(result.data.parent).toBeNull();
+    });
+
+    it('should not set parentId if lib is not nested', () => {
+      const projectNode = new ProjectNode({
+        name: 'lib',
+        type: 'lib',
+        data: {
+          root: 'libs/lib',
+          sourceRoot: 'libs/lib/src',
+          projectType: 'library',
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(false);
+
+      expect(result.data.parent).toBeNull();
+    });
+
+    it('should set parentId if the lib is nested and groupByFolder is true', () => {
+      const projectNode = new ProjectNode({
+        name: 'sub-lib',
+        type: 'lib',
+        data: {
+          root: 'libs/sub/lib',
+          sourceRoot: 'libs/sub/lib/src',
+          projectType: 'library',
+          files: [],
+        },
+      });
+
+      const result = projectNode.getCytoscapeNodeDef(true);
+
+      expect(result.data.parent).toEqual('dir-sub');
+    });
+  });
+});

apps/dep-graph-client/src/app/util-cytoscape/project-node.ts

@@ -30,9 +30,7 @@ export class ProjectNode {
       type: this.project.type,
       tags: this.project.data.tags,
       parent:
-        groupByFolder &&
+        groupByFolder && this.project.data.hasOwnProperty('sourceRoot')
-        this.project.type == 'lib' &&
-        this.project.data.hasOwnProperty('sourceRoot')
           ? this.getParentId(this.project.data.sourceRoot)
           : null,
     };

jest.config.js

@@ -19,5 +19,6 @@ module.exports = {
     '<rootDir>/packages/cli',
     '<rootDir>/packages/angular',
     '<rootDir>/packages/gatsby',
+    '<rootDir>/apps/dep-graph-client',
   ],
 };

workspace.json

@@ -1994,13 +1994,11 @@
         },
         "test": {
           "executor": "@nrwl/jest:jest",
+          "outputs": ["coverage/apps/dep-graph-client"],
           "options": {
             "jestConfig": "apps/dep-graph-client/jest.config.js",
-            "tsConfig": "apps/dep-graph-client/tsconfig.spec.json",
+            "passWithNoTests": true
-            "passWithNoTests": true,
+          }
-            "setupFile": "apps/dep-graph-client/src/test-setup.ts"
-          },
-          "outputs": ["coverage/apps/dep-graph-client"]
         }
       }
     },