Angular: Create Git commit plugin

[tehfedaykin]

The goal of this issue is to create a git repo for training material with each commit representing a step in a guide.

For example, in the angular training and DoneJS place-my-order guide, there are many steps. It would be nice to have users able to clone the repo at a specific step or see the final result.

The problem is that it would take a lot of effort to produce a github repo with each step and keep that in sync with the guide.

Lets talk about ways of solving this.

Bonus features

• It would be nice if the guides were testable similar to how DoneJS's Place-My-Order is tested (cc @matthewp ).

• It would be nice if the edits followed a convention. For example, we already order the steps in a tutorial like:

  1-first-step/
  1-my-file.js
  2-second-step/
  1-my-file.js

  Ideally, we wouldn't have to run commands to copy each file over for every step. Instead a solution would be able to infer which files need to be edited, perform those edits, then run the right tests and make the right commits.

What users need to do

What things do users do to build an app?

• Execute shell commands:
  • Run generators
  • Start proxy servers
  • Restart servers
• Create files with code, update code

Minimal Viable Product

Similar as is done in place-my-order/test.js we will write something that step by step runs each command and copies files into a dummy folder in bitovi/academy. Ideally, each step would have its own test.js file, exporting a test function. There would probably be a master test.js file that would gather all the test files and run one after another.

Before running any tests, a git repo would be created in the dummy folder. After each test ran, a commit would be made. When all tests passed, we'd force push the local git repo to some public repo on github.

Unfortunately, linking to the actual commits would be a manual process. It would be nice to be able to update the tutorial markdown pages with the commit links.

Maximal Product

As mentioned above, a conventional solution would be great.

One where we could add to each folder what needs to be done. For example 1-why-angular could have:

1-create-workspace.sh
2
  /src/app/
    app.component.spec.ts
    app.component.html
guide-test.js

This would perform the following:

• run the .sh files
• copy all other files except guide-test.js
• run guide-test.js if there is one

Notice that | is used in place of /. This way the destination can be specified in the name of the file.

[matthewp]

I like it! One problem I have, that I don't think is covered here, is that if you have to edit a file early in the guide you wind up having to change highlight line numbers in all later steps. Probably out of scope for this issue though

[justinbmeyer]

To fix the highlight line number problem: https://github.com/bitovi/academy/issues/142

You'd still have to update the files going forward ... but #142 would still be a time saver.

[justinbmeyer]

var automate = require("guide-automation");

var guide = automate({ spinner: true, log: true });

guide.step("install angular", function(){
    return guide.executeCommand("npm", ["install", repo + "#" + branch, "-g"]);
})

guide.moveToTmp();

guide.step("Run donejs add app", function(){
    var init = guide.answerPrompts("donejs", ["add", "app", "place-my-order",
        "--skip-install", "--yes"]);
    return init.promise;
});

guide.step("commit", function(){
    gitInit();
    makeAGitCommit("building first app");
})

guide.run().then(
    function(){
        console.log("All done!");
        return 0;
    },
    function(err){
        console.error("Oh no", err.message, err.stack, err);
        return 1;
    }
).then(function(exitCode){
    console.log("Exiting", exitCode);
    process.exit(exitCode);
});

[Amechi101]

Goals

• [ ] Step 1 Complete all steps in Objectives - Phase I.

  The reason behind Step 1 is seeing whether building a Maximal Product will be an easy path and if not sticking to just building a solid Minimal Viable Product.

Objectives:

Phase I

1. Create a branch within the bitovi/academy called 143-git-commit-plugin
2. Within the bitovi/academy/src/angular directory create a steps.js file
3. Within the directories bitovi/academy/src/angular/2-building-first-app and bitovi/academy/src/angular/3-creating-components create a step.js file
4. Within the steps.js file write a program to:
   1. Create a temp/angular directory within bitovi/academy repo
   2. steps.js will create a local .git directory within the temp/angular and setup the initial angular project directory /place-my-order within the temp/angular directory.
   3. The steps.js will run commands from the angular guide sections: Generate an App and Creating Components from a step.js within each directory (example: bitovi/academy/src/angular/2-building-first-app) located in bitovi/academy/src/angular/ (Please see Example folder structure for Phase I for a visual idea...)
   4. Each step.js will copy the files generated from the sections: Generate an App and Creating Components into temp/angular/place-my-order/ placing the files into the appropriate directories. For example: From bitovi/academy/src/angular/2-building-first-app --> ./app.component.spec.ts will be copied to temp/angular/place-my-order/src/app/app.component.spec.ts
   5. After each step.js finishes running a git commit will take place at the end and push the code to the branch 143-git-commit-plugin

Example folder structure for Phase I

academy
    /src/angular
        steps.js
        /1-why-angular 
        /2-building-first-app 
            step.js
            1. copying ./app.component.spec.ts to temp/angular/place-my-order/src/app/app.component.spec.ts
        /3-creating-components
            step.js 

    /temp/angular
         /.git
        /place-my-order 
            /src
                /app
                   app.component.spec.ts

[tehfedaykin]

TODO - update angular tutorial files to have ".final" in final files(per each section, not problem) to be used by git plugin. @justinbmeyer thoughts?

[Amechi101]

Having a few issues with building the plugin, here are some of the problems below:

Problem 1:

• Having problems import and exporting functions from each step.js into the steps.js Seems like the steps run out of order and the guide.executeCommand doesnt get executed at all within step.js

# Wrong (Current)
Step 1: Install angular cli 
Step 1: Create temp/angular directory

# Desired
Step 1: Create temp/angular directory
Step 2: Install angular cli 

Interim Solution

• I've just kept all the code within the steps.js file and ran the program from there.

Problem 2:

User generated prompt questions, how would we go about automating the answers? For example within Generate an App section

• After running the ng new place-my-order --prefix pmo command how would the program respond to:

  Would you like to add Angular routing? (yes) Which stylesheet format would you like to use? (Less)

Because this step produces an import style.less file that if not created running npm run test for any subsequent section will fail

Problem 3

If the component (e.g. ng g component home) already exist than how would we go about skipping the guide execution? For example when running the command ng g component home within steps.js if it is run for the first time the guide-automation will execute fine. But if you happen to run steps.js again than since the home directory within temp/angular/place-my-order/src/app/home/ exist than the program will stop running and exit with an error:

Step 2: Create home component
ERROR! src/app/home/home.component.css already exists.
ERROR! src/app/home/home.component.html already exists.
ERROR! src/app/home/home.component.spec.ts already exists.
ERROR! src/app/home/home.component.ts already exists.
The Schematic workflow failed. See above.
Oh no undefined undefined 1
Exiting 1

Interim Solution

I think we can check to see if paths exist with something like fs.access or fs_extra.pathExists

@justinbmeyer & @tehfedaykin thoughts on any solutions?

[justinbmeyer]

Problem 1

Could you have the functions return promises that resolve when complete? You can use something like this queue to order them: https://github.com/bit-docs/bit-docs/blob/master/lib/promise_queue.js

[justinbmeyer]

Problem 2

There is a way of doing this. Pretty sure @matthewp was doing this at some point in the donejs guide. You could look into how DoneJS's generators are also tested.

[justinbmeyer]

Problem 3

Can we clear the temp folder before running any steps?

[Amechi101]

Figured out a solution already for Problem 3 and I paired with Matthew and found a solution for Problem 1

I paired with Matthew for Problem 2 (you can see the code here and still couldn't get the code to work, even thou it's written in the exact same manner here

[Amechi101]

@justinbmeyer Below is my status on the prototype:

So far the program:

1. Setups the project
2. Runs the commands from the "Building First App" step from the angular guide
3. Creates a new branch specifically for the "Building First App" step if not just checkouts out into the branch for "Building First App"
4. Adds the changes, commits and pushes the code to the branch

However, within the step.js file for commands associated with "Building First App" I have a few blockers I've listed issues below that if you had time today I'd like to pair to try and solve the issues. I have numbered them below in order of priority 1(most important) - 3(Least Important). I've @TODO's within the file.

Issues for "Building First App" step:

1. work on CLI prompting the questions
2. Figuring out a way to launch a browser and move to the next guide steps without pausing the terminal
3. Get test to pass

*Note I have only focused on the "Building First App" step because if I can solve the issues it'll solve most issues for the other steps