Merge pull request NativeScript#4652 from NativeScript/hristova/add-drawer-navigation-vue-template

feat: add vue drawer navigation template to create project command

Author: elena-p

docs/man_pages/project/creation/create.md

@@ -51,7 +51,8 @@ Template | Command
 `Angular - Hello World`, `--ng`, `--angular` | tns create tns-template-hello-world-ng
 `Angular - SideDrawer` | tns create tns-template-drawer-navigation-ng
 `Angular - Tabs` | tns create tns-template-tab-navigation-ng
-`Vue.js`, `--vue`, `--vuejs` | tns create tns-template-blank-vue
+`Vue.js - Blank`, `--vue`, `--vuejs` | tns create tns-template-blank-vue
+`Vue.js - SideDrawer`, | tns create tns-template-drawer-navigation-vue
 
 ### Related Commands
 

lib/commands/create-project.ts

@@ -5,6 +5,8 @@ import { isInteractive } from "../common/helpers";
 export class CreateProjectCommand implements ICommand {
 	public enableHooks = false;
 	public allowedParameters: ICommandParameter[] = [this.$stringParameter];
+	private static BlankTemplateKey = "Blank";
+	private static BlankTemplateDescription = "A blank app";
 	private static HelloWorldTemplateKey = "Hello World";
 	private static HelloWorldTemplateDescription = "A Hello World app";
 	private static DrawerTemplateKey = "SideDrawer";
@@ -109,11 +111,11 @@ or --js flags.)
 		let selectedTemplate: string;
 		switch (flavorSelection) {
 			case constants.NgFlavorName: {
-				selectedFlavorTemplates.push(...this.getNgFlavors());
+				selectedFlavorTemplates.push(...this.getNgTemplates());
 				break;
 			}
 			case constants.VueFlavorName: {
-				selectedFlavorTemplates.push({ value: "tns-template-blank-vue" });
+				selectedFlavorTemplates.push(...this.getVueTemplates());
 				break;
 			}
 			case constants.TsFlavorName: {
@@ -178,7 +180,7 @@ or --js flags.)
 		return templates;
 	}
 
-	private getNgFlavors() {
+	private getNgTemplates() {
 		const templates = [{
 			key: CreateProjectCommand.HelloWorldTemplateKey,
 			value: constants.RESERVED_TEMPLATE_NAMES.angular,
@@ -198,6 +200,21 @@ or --js flags.)
 		return templates;
 	}
 
+	private getVueTemplates() {
+		const templates = [{
+			key: CreateProjectCommand.BlankTemplateKey,
+			value: "tns-template-blank-vue",
+			description: CreateProjectCommand.BlankTemplateDescription
+		},
+		{
+			key: CreateProjectCommand.DrawerTemplateKey,
+			value: "tns-template-drawer-navigation-vue",
+			description: CreateProjectCommand.DrawerTemplateDescription
+		}];
+
+		return templates;
+	}
+
 	public async postCommandAction(args: string[]): Promise<void> {
 		const { projectDir } = this.createdProjectData;
 		const relativePath = path.relative(process.cwd(), projectDir);

test/project-commands.ts

@@ -23,6 +23,10 @@ const expectedTemplateChoices = [
 	{ key: "SideDrawer", description: "An app with pre-built pages that uses a drawer for navigation" },
 	{ key: "Tabs", description: "An app with pre-built pages that uses tabs for navigation" }
 ];
+const expectedTemplateChoicesVue = [
+	{ key: "Blank", description: "A blank app" },
+	{ key: "SideDrawer", description: "An app with pre-built pages that uses a drawer for navigation" }
+];
 
 class ProjectServiceMock implements IProjectService {
 	async validateProjectName(opts: { projectName: string, force: boolean, pathToProject: string }): Promise<string> {
@@ -92,7 +96,7 @@ describe("Project commands tests", () => {
 		if (opts.templateAnswer) {
 			const templateQuestion = opts.projectNameAnswer ? "Finally" : "Next, which template would you like to start from:";
 			answers[templateQuestion] = opts.templateAnswer;
-			questionChoices[templateQuestion] = expectedTemplateChoices;
+			questionChoices[templateQuestion] = opts.flavorAnswer === constants.VueFlavorName ? expectedTemplateChoicesVue : expectedTemplateChoices;
 		}
 
 		prompterStub.expect({
@@ -207,12 +211,14 @@ describe("Project commands tests", () => {
 			assert.isTrue(createProjectCalledWithForce);
 		});
 
-		it("should select the default vue template when the vue flavor is selected.", async () => {
-			setupAnswers({ flavorAnswer: constants.VueFlavorName });
+		it("should ask for a template when vue flavor is selected.", async () => {
+			setupAnswers({ flavorAnswer: constants.VueFlavorName, templateAnswer:  "SideDrawer" });
 
 			await createProjectCommand.execute(dummyArgs);
 
-			assert.deepEqual(selectedTemplateName, "tns-template-blank-vue");
+			assert.deepEqual(selectedTemplateName, "tns-template-drawer-navigation-vue");
+			assert.equal(validateProjectCallsCount, 1);
+			assert.isTrue(createProjectCalledWithForce);
 		});
 	});
 });