feat: show next steps after ng add (#201)

* feat: show next steps after ng add

Display helpful message with documentation link after installation:
- Read the docs link
- Deploy command hint
- Friendly closing message

* test: verify console output after ng add

Author: JohannesHoppe

src/ng-add.spec.ts

@@ -6,6 +6,19 @@ const PROJECT_NAME = 'THEPROJECT';
 const PROJECT_ROOT = 'PROJECTROOT';
 const OTHER_PROJECT_NAME = 'OTHERPROJECT';
 
+// Mock context with logger - only the methods we actually use
+const mockLogger = {
+  info: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+  debug: jest.fn(),
+  fatal: jest.fn(),
+  log: jest.fn(),
+  createChild: jest.fn()
+};
+
+const mockContext = { logger: mockLogger } as unknown as SchematicContext;
+
 describe('ng-add', () => {
   describe('generating files', () => {
     let tree: Tree;
@@ -18,7 +31,7 @@ describe('ng-add', () => {
     it('generates new files if starting from scratch', async () => {
       const result = await ngAdd({
         project: PROJECT_NAME
-      })(tree, {} as SchematicContext);
+      })(tree, mockContext);
 
       const actual = result.read('angular.json')!.toString();
       expect(prettifyJSON(actual)).toMatchSnapshot();
@@ -27,11 +40,11 @@ describe('ng-add', () => {
     it('overrides existing files', async () => {
       const tempTree = await ngAdd({
         project: PROJECT_NAME
-      })(tree, {} as SchematicContext);
+      })(tree, mockContext);
 
       const result = await ngAdd({
         project: OTHER_PROJECT_NAME
-      })(tempTree, {} as SchematicContext);
+      })(tempTree, mockContext);
 
       const actual = result.read('angular.json')!.toString();
 
@@ -49,7 +62,7 @@ describe('ng-add', () => {
 
       const resultTree = await ngAdd({ project: '' })(
         tree,
-        {} as SchematicContext
+        mockContext
       );
 
       const resultConfig = readJSONFromTree(resultTree, 'angular.json');
@@ -65,15 +78,15 @@ describe('ng-add', () => {
       tree.create('angular.json', JSON.stringify(angularJSON));
 
       await expect(
-        ngAdd({ project: '' })(tree, {} as SchematicContext)
+        ngAdd({ project: '' })(tree, mockContext)
       ).rejects.toThrowError(
         'There is more than one project in your workspace. Please select it manually by using the --project argument.'
       );
     });
 
     it('should throw if angular.json not found', async () => {
       await expect(
-        ngAdd({ project: PROJECT_NAME })(Tree.empty(), {} as SchematicContext)
+        ngAdd({ project: PROJECT_NAME })(Tree.empty(), mockContext)
       ).rejects.toThrowError('Unable to determine format for workspace path.');
     });
 
@@ -82,7 +95,7 @@ describe('ng-add', () => {
       tree.create('angular.json', 'hi');
 
       await expect(
-        ngAdd({ project: PROJECT_NAME })(tree, {} as SchematicContext)
+        ngAdd({ project: PROJECT_NAME })(tree, mockContext)
       ).rejects.toThrowError('Invalid workspace file - expected JSON object.');
     });
 
@@ -91,7 +104,7 @@ describe('ng-add', () => {
       tree.create('angular.json', JSON.stringify({ version: 1, projects: {} }));
 
       await expect(
-        ngAdd({ project: PROJECT_NAME })(tree, {} as SchematicContext)
+        ngAdd({ project: PROJECT_NAME })(tree, mockContext)
       ).rejects.toThrowError(
         'The specified Angular project is not defined in this workspace'
       );
@@ -110,7 +123,7 @@ describe('ng-add', () => {
       );
 
       await expect(
-        ngAdd({ project: PROJECT_NAME })(tree, {} as SchematicContext)
+        ngAdd({ project: PROJECT_NAME })(tree, mockContext)
       ).rejects.toThrowError(
         'Deploy requires an Angular project type of "application" in angular.json'
       );
@@ -135,7 +148,7 @@ describe('ng-add', () => {
       await expect(
         ngAdd({
           project: PROJECT_NAME
-        })(tree, {} as SchematicContext)
+        })(tree, mockContext)
       ).rejects.toThrowError(
         /Cannot find build target for the Angular project/
       );
@@ -168,7 +181,7 @@ describe('ng-add', () => {
 
       const result = await ngAdd({ project: PROJECT_NAME })(
         tree,
-        {} as SchematicContext
+        mockContext
       );
 
       const resultConfig = readJSONFromTree(result, 'angular.json');
@@ -200,7 +213,7 @@ describe('ng-add', () => {
 
       const result = await ngAdd({ project: PROJECT_NAME })(
         tree,
-        {} as SchematicContext
+        mockContext
       );
 
       const resultConfig = readJSONFromTree(result, 'angular.json');
@@ -232,7 +245,7 @@ describe('ng-add', () => {
 
       const result = await ngAdd({ project: PROJECT_NAME })(
         tree,
-        {} as SchematicContext
+        mockContext
       );
 
       const resultConfig = readJSONFromTree(result, 'angular.json');
@@ -263,12 +276,31 @@ describe('ng-add', () => {
       );
 
       await expect(
-        ngAdd({ project: PROJECT_NAME })(tree, {} as SchematicContext)
+        ngAdd({ project: PROJECT_NAME })(tree, mockContext)
       ).rejects.toThrowError(
         /Invalid outputPath configuration.*Expected undefined.*a string.*an object with a "base" property/
       );
     });
   });
+
+  describe('console output', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should display next steps after successful installation', async () => {
+      const tree = Tree.empty();
+      tree.create('angular.json', JSON.stringify(generateAngularJson()));
+
+      await ngAdd({ project: PROJECT_NAME })(tree, mockContext);
+
+      expect(mockLogger.info).toHaveBeenCalledWith('🚀 angular-cli-ghpages is ready!');
+      expect(mockLogger.info).toHaveBeenCalledWith('Next steps:');
+      expect(mockLogger.info).toHaveBeenCalledWith('  1. Read the docs: https://github.com/angular-schule/angular-cli-ghpages');
+      expect(mockLogger.info).toHaveBeenCalledWith('  2. Deploy via: ng deploy');
+      expect(mockLogger.info).toHaveBeenCalledWith('  3. Have a nice day!');
+    });
+  });
 });
 
 function prettifyJSON(json: string) {

src/ng-add.ts

@@ -12,7 +12,7 @@ interface NgAddOptions {
 
 export const ngAdd = (options: NgAddOptions) => async (
   tree: Tree,
-  _context: SchematicContext
+  context: SchematicContext
 ) => {
   const host = createHost(tree);
   const { workspace } = await workspaces.readWorkspace('/', host);
@@ -74,5 +74,15 @@ export const ngAdd = (options: NgAddOptions) => async (
   });
 
   workspaces.writeWorkspace(workspace, host);
+
+  // Show next steps
+  context.logger.info('');
+  context.logger.info('🚀 angular-cli-ghpages is ready!');
+  context.logger.info('');
+  context.logger.info('Next steps:');
+  context.logger.info('  1. Read the docs: https://github.com/angular-schule/angular-cli-ghpages');
+  context.logger.info('  2. Deploy via: ng deploy');
+  context.logger.info('  3. Have a nice day!');
+
   return tree;
 };

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-cli-ghpages",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Deploy your Angular app to GitHub Pages or Cloudflare Pages directly from the Angular CLI (ng deploy)",
   "main": "index.js",
   "types": "index.d.ts",

src/test-fixtures/angular-versions.spec.ts

@@ -15,6 +15,19 @@ import fs from 'fs';
 import path from 'path';
 import { ngAdd } from '../ng-add';
 
+// Mock context with logger - only the methods we actually use
+const mockLogger = {
+  info: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+  debug: jest.fn(),
+  fatal: jest.fn(),
+  log: jest.fn(),
+  createChild: jest.fn()
+};
+
+const mockContext = { logger: mockLogger } as unknown as SchematicContext;
+
 // Load fixture files - actual angular.json from each Angular CLI version
 const fixturesDir = path.join(__dirname);
 const angular18Config = JSON.parse(fs.readFileSync(path.join(fixturesDir, 'angular-18.json'), 'utf-8'));
@@ -33,7 +46,7 @@ describe('Angular Version Compatibility', () => {
       const tree = Tree.empty();
       tree.create('angular.json', JSON.stringify(angular18Config));
 
-      const result = await ngAdd({ project: 'ng18' })(tree, {} as SchematicContext);
+      const result = await ngAdd({ project: 'ng18' })(tree, mockContext);
       const resultConfig = JSON.parse(result.read('angular.json')!.toString());
 
       expect(resultConfig.projects.ng18.architect.deploy.builder).toBe('angular-cli-ghpages:deploy');
@@ -50,7 +63,7 @@ describe('Angular Version Compatibility', () => {
       const tree = Tree.empty();
       tree.create('angular.json', JSON.stringify(angular19Config));
 
-      const result = await ngAdd({ project: 'ng19' })(tree, {} as SchematicContext);
+      const result = await ngAdd({ project: 'ng19' })(tree, mockContext);
       const resultConfig = JSON.parse(result.read('angular.json')!.toString());
 
       expect(resultConfig.projects.ng19.architect.deploy.builder).toBe('angular-cli-ghpages:deploy');
@@ -67,7 +80,7 @@ describe('Angular Version Compatibility', () => {
       const tree = Tree.empty();
       tree.create('angular.json', JSON.stringify(angular20Config));
 
-      const result = await ngAdd({ project: 'ng20' })(tree, {} as SchematicContext);
+      const result = await ngAdd({ project: 'ng20' })(tree, mockContext);
       const resultConfig = JSON.parse(result.read('angular.json')!.toString());
 
       expect(resultConfig.projects.ng20.architect.deploy.builder).toBe('angular-cli-ghpages:deploy');
@@ -84,7 +97,7 @@ describe('Angular Version Compatibility', () => {
       const tree = Tree.empty();
       tree.create('angular.json', JSON.stringify(angular21Config));
 
-      const result = await ngAdd({ project: 'ng21' })(tree, {} as SchematicContext);
+      const result = await ngAdd({ project: 'ng21' })(tree, mockContext);
       const resultConfig = JSON.parse(result.read('angular.json')!.toString());
 
       expect(resultConfig.projects.ng21.architect.deploy.builder).toBe('angular-cli-ghpages:deploy');