From 47f6f2e9c6552318185ec9181815f8d4324f15cf Mon Sep 17 00:00:00 2001 From: Gleison de Almeida Date: Sun, 22 Sep 2024 05:37:54 -0300 Subject: [PATCH] :sparkles: feat: add standalone component as default --- .gitignore | 1 + .vscode/settings.json | 2 +- .../generate/component/common/common.test.ts | 61 +++++++++--------- .../generate/component/dialog/dialog.test.ts | 27 +++----- .../generate/component/page/page.test.ts | 62 +++++++++--------- .../generate/component/widget/widget.test.ts | 63 ++++++++++--------- .../generate/component/widget/widget.ts | 25 +++----- src/commands/generate/service/api/api.test.ts | 39 ++++++------ .../generate/service/common/common.test.ts | 15 ++++- .../ng-simple-state/ng-simple-state.test.ts | 5 +- src/templates/component.template.ts.ejs | 1 + src/templates/service.template.ts.ejs | 1 + 12 files changed, 155 insertions(+), 147 deletions(-) diff --git a/.gitignore b/.gitignore index b3c0794..fb0ceac 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ coverage dist build +debug.log diff --git a/.vscode/settings.json b/.vscode/settings.json index 484d1b8..75af8ea 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "cSpell.words": ["devs", "GLUEGUN", "ngxd"] + "cSpell.words": ["cria", "devs", "gluegun", "Gluegun", "GLUEGUN", "ngxd", "serviço"] } diff --git a/src/commands/generate/component/common/common.test.ts b/src/commands/generate/component/common/common.test.ts index 1da1eef..ea8ad8d 100644 --- a/src/commands/generate/component/common/common.test.ts +++ b/src/commands/generate/component/common/common.test.ts @@ -3,6 +3,9 @@ import { filesystem, strings } from 'gluegun'; import { runNgxdCLI } from '../../../../utils/cli-test-setup'; describe('Commands: [Generate] => [Component] => [Common]', () => { + const TESTING_DIR = '__GCC_TEST__'; + const COMMAND = 'g c c'; + beforeEach(() => { jest.useFakeTimers(); jest.setTimeout(100000); @@ -10,10 +13,11 @@ describe('Commands: [Generate] => [Component] => [Common]', () => { afterEach(() => { jest.clearAllTimers(); + filesystem.remove(TESTING_DIR); }); test('should generate a common component with 3 files', async () => { - const name = 'sample-with-three-files'; + const name = 'gcc-3-files'; await runNgxdCLI(`g c c ${name}`); const html = filesystem.read(`${name}/${name}.component.html`); @@ -27,7 +31,7 @@ describe('Commands: [Generate] => [Component] => [Common]', () => { }); test('should generate a common component on provided path', async () => { - const name = 'sample-with-path'; + const name = 'gcc-provided-path'; const baseFolder = 'sample-app'; const path = `${baseFolder}/src/app/components`; @@ -44,60 +48,59 @@ describe('Commands: [Generate] => [Component] => [Common]', () => { filesystem.remove(baseFolder); }); - test('should generate a common component html correct content', async () => { - const name = 'sample-with-default-template'; - - await runNgxdCLI(`g c c ${name}`); + test('should generate a common component html default template', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'gcc-default-template'; - const html = filesystem.read(`${name}/${name}.component.html`); + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + const html = filesystem.read(`${path}/${name}/${name}.component.html`); expect(html).toContain(`

${name} works

`); - filesystem.remove(`${name}`); }); test('should generate a common component with correct templateUrl: and styleUrls ', async () => { - const name = 'sample-style-template-url'; - await runNgxdCLI(`g c c ${name}`); + const path = `${TESTING_DIR}/components`; + const name = 'gcc-template-style'; - const ts = filesystem.read(`${name}/${name}.component.ts`); + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + + const ts = filesystem.read(`${path}/${name}/${name}.component.ts`); expect(ts).toContain(`templateUrl: './${name}.component.html'`); expect(ts).toContain(`styleUrls: ['./${name}.component.scss']`); - filesystem.remove(`${name}`); }); test('should generate a common component with spec file', async () => { - const name = 'sample-spec'; - await runNgxdCLI(`g c c ${name}`); + const path = `${TESTING_DIR}/components`; + const name = 'gcc-spec'; - const ts = filesystem.read(`${name}/${name}.component.spec.ts`); + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - expect(ts).toBeDefined(); + const ts = filesystem.read(`${path}/${name}/${name}.component.spec.ts`); - filesystem.remove(`${name}`); + expect(ts).toBeDefined(); }); test('should properly interpolate component name on spec file', async () => { - const name = 'sample-spec-two'; - await runNgxdCLI(`g c c ${name}`); + const path = `${TESTING_DIR}/components`; + const name = 'gcc-spec-interpolate'; + + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const ts = filesystem.read(`${name}/${name}.component.spec.ts`); + const ts = filesystem.read(`${path}/${name}/${name}.component.spec.ts`); const pascalCaseName = strings.pascalCase(name); expect(ts).toContain(`describe('${pascalCaseName}Component', () => {`); - - filesystem.remove(`${name}`); }); - test('should not contain ngOnInit on import statement', async () => { - const name = 'sample-import'; - await runNgxdCLI(`g c c ${name}`); - - const ts = filesystem.read(`${name}/${name}.component.ts`); + test('should contain "standalone: true" on component decorator by default', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'gcc-standalone'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - expect(ts).not.toContain(`OnInit`); + const ts = filesystem.read(`${path}/${name}/${name}.component.ts`); - filesystem.remove(`${name}`); + expect(ts).toContain(`standalone: true`); }); }); diff --git a/src/commands/generate/component/dialog/dialog.test.ts b/src/commands/generate/component/dialog/dialog.test.ts index 9da6521..8df8d90 100644 --- a/src/commands/generate/component/dialog/dialog.test.ts +++ b/src/commands/generate/component/dialog/dialog.test.ts @@ -11,15 +11,12 @@ describe('Commands: [Generate] => [Component] => [Dialog]', () => { jest.setTimeout(100000); }); - afterEach(() => { - jest.clearAllTimers(); - }); - afterAll(() => { + jest.clearAllTimers(); filesystem.remove(TESTING_DIR); }); - test('should generate a dialog component with 3 files', async (done) => { + test('should generate a dialog component with 3 files', async () => { const name = 'gdc-base-fruit'; await runNgxdCLI(`${COMMAND} ${name}`); @@ -32,12 +29,11 @@ describe('Commands: [Generate] => [Component] => [Dialog]', () => { expect(ts).toBeDefined(); filesystem.remove(name); - done(); }); - test('should generate a dialog component on provided path', async (done) => { + test('should generate a dialog component on provided path', async () => { const path = `${TESTING_DIR}/components`; - const name = 'fruit1'; + const name = 'gdc-provided-path'; await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); @@ -48,30 +44,27 @@ describe('Commands: [Generate] => [Component] => [Dialog]', () => { expect(html).toBeDefined(); expect(scss).toBeDefined(); expect(ts).toBeDefined(); - done(); }); - test('should generate a dialog component html with default template

fruit2 works

', async (done) => { + test('should generate a dialog component html with default template

gdc-default-template works

', async () => { const path = `${TESTING_DIR}/components`; - const name = 'fruit2'; + const name = 'gdc-default-template'; await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); const html = filesystem.read(`${path}/${name}/${name}.dialog.html`); expect(html).toContain(`

${name} works

`); - done(); }); - test('should generate a dialog component with correct templateUrl: and styleUrls ', async (done) => { + test('should generate a dialog component with correct templateUrl: and styleUrls ', async () => { const path = `${TESTING_DIR}/components`; - const name = 'fruitThree'; + const name = 'gdc-template-style'; await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); const ts = filesystem.read(`${path}/${name}/${name}.dialog.ts`); - expect(ts).toContain(`templateUrl: './fruit-three.dialog.html'`); - expect(ts).toContain(`styleUrls: ['./fruit-three.dialog.scss']`); - done(); + expect(ts).toContain(`templateUrl: './${name}.dialog.html'`); + expect(ts).toContain(`styleUrls: ['./${name}.dialog.scss']`); }); }); diff --git a/src/commands/generate/component/page/page.test.ts b/src/commands/generate/component/page/page.test.ts index b2786dd..b78ad66 100644 --- a/src/commands/generate/component/page/page.test.ts +++ b/src/commands/generate/component/page/page.test.ts @@ -3,6 +3,9 @@ import { filesystem } from 'gluegun'; import { runNgxdCLI } from '../../../../utils/cli-test-setup'; describe('Commands: [Generate] => [Component] => [Page]', () => { + const TESTING_DIR = '__GWC_TEST__'; + const COMMAND = 'g c p'; + beforeEach(() => { jest.useFakeTimers(); jest.setTimeout(100000); @@ -10,29 +13,13 @@ describe('Commands: [Generate] => [Component] => [Page]', () => { afterEach(() => { jest.clearAllTimers(); + filesystem.remove(TESTING_DIR); }); test('should generate a page component with 3 files', async () => { - const name = 'base-gcp-fruit'; - await runNgxdCLI(`g c p ${name}`); - - const html = filesystem.read(`${name}/${name}.page.html`); - const scss = filesystem.read(`${name}/${name}.page.scss`); - const ts = filesystem.read(`${name}/${name}.page.ts`); - - expect(html).toBeDefined(); - expect(scss).toBeDefined(); - expect(ts).toBeDefined(); - - filesystem.remove(name); - }); - - test('should generate a page component on provided path', async () => { - const name = 'sample-with-path'; - const baseFolder = 'sample-app'; - const path = `${baseFolder}/src/app/components`; - - await runNgxdCLI(`g c p ${name} --path ${path}`); + const path = `${TESTING_DIR}/components`; + const name = 'gcp-3-files'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); const html = filesystem.read(`${path}/${name}/${name}.page.html`); const scss = filesystem.read(`${path}/${name}/${name}.page.scss`); @@ -42,26 +29,43 @@ describe('Commands: [Generate] => [Component] => [Page]', () => { expect(scss).toBeDefined(); expect(ts).toBeDefined(); - filesystem.remove(baseFolder); + filesystem.remove(TESTING_DIR); }); test('should generate a page component html with default template

sample works

', async () => { - const name = 'sample-with-default-template'; - await runNgxdCLI(`g c p ${name}`); - const html = filesystem.read(`${name}/${name}.page.html`); + const path = `${TESTING_DIR}/components`; + const name = 'gcp-default-template'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + + const html = filesystem.read(`${path}/${name}/${name}.page.html`); expect(html).toContain(`

${name} works

`); - filesystem.remove(name); + + filesystem.remove(TESTING_DIR); }); test('should generate a page component with correct templateUrl: and styleUrls ', async () => { - const name = 'sample-style-template-url'; - await runNgxdCLI(`g c p ${name}`); + const path = `${TESTING_DIR}/components`; + const name = 'gcp-template-style'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const ts = filesystem.read(`${name}/${name}.page.ts`); + const ts = filesystem.read(`${path}/${name}/${name}.page.ts`); expect(ts).toContain(`templateUrl: './${name}.page.html'`); expect(ts).toContain(`styleUrls: ['./${name}.page.scss']`); - filesystem.remove(name); + + filesystem.remove(TESTING_DIR); + }); + + test('should contain "standalone: true" on component decorator by default', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'gcp-standalone-true'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + + const ts = filesystem.read(`${path}/${name}/${name}.page.ts`); + + expect(ts).toContain(`standalone: true`); + + filesystem.remove(TESTING_DIR); }); }); diff --git a/src/commands/generate/component/widget/widget.test.ts b/src/commands/generate/component/widget/widget.test.ts index f13fce2..56c1866 100644 --- a/src/commands/generate/component/widget/widget.test.ts +++ b/src/commands/generate/component/widget/widget.test.ts @@ -3,7 +3,8 @@ import { filesystem } from 'gluegun'; import { runNgxdCLI } from '../../../../utils/cli-test-setup'; describe('Commands: [Generate] => [Component] => [Widget]', () => { - const name = 'gwc'; + const TESTING_DIR = '__GWC_TEST__'; + const COMMAND = 'g c w'; beforeEach(() => { jest.useFakeTimers(); @@ -12,53 +13,57 @@ describe('Commands: [Generate] => [Component] => [Widget]', () => { afterEach(() => { jest.clearAllTimers(); - filesystem.remove(`${name}`); + filesystem.remove(TESTING_DIR); }); test('should generate a widget component on provided path', async () => { - const path = 'sample-project/components'; - await runNgxdCLI(`g c w ${name} --path=${path}`); + const path = `${TESTING_DIR}/components`; + const name = 'sample-widget'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const html = filesystem.read(`${path}/${name}/${name}.component.html`); - const scss = filesystem.read(`${path}/${name}/${name}.component.scss`); - const ts = filesystem.read(`${path}/${name}/${name}.component.ts`); - const widgetModule = filesystem.read(`${path}/${name}/${name}.widget.module.ts`); + const html = filesystem.read(`${path}/${name}/${name}.widget.html`); + const scss = filesystem.read(`${path}/${name}/${name}.widget.scss`); + const ts = filesystem.read(`${path}/${name}/${name}.widget.ts`); expect(html).toBeDefined(); expect(scss).toBeDefined(); expect(ts).toBeDefined(); - expect(widgetModule).toBeDefined(); - filesystem.remove('sample-project'); + filesystem.remove(TESTING_DIR); }); - test('should generate widget component with 4 files', async () => { - await runNgxdCLI(`g c w ${name}`); + test('should generate widget component html with default template

sample works

', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'template-sample-widget'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const html = filesystem.read(`${name}/${name}.component.html`); - const scss = filesystem.read(`${name}/${name}.component.scss`); - const ts = filesystem.read(`${name}/${name}.component.ts`); - const widgetModule = filesystem.read(`${name}/${name}.widget.module.ts`); + const html = filesystem.read(`${path}/${name}/${name}.widget.html`); - expect(html).toBeDefined(); - expect(scss).toBeDefined(); - expect(ts).toBeDefined(); - expect(widgetModule).toBeDefined(); + expect(html).toContain(`

${name} works

`); + + filesystem.remove(TESTING_DIR); }); - test('should generate widget component html with default template

sample works

', async () => { - await runNgxdCLI(`g c w ${name}`); - const html = filesystem.read(`${name}/${name}.component.html`); + test('should generate a widget component with correct templateUrl: and styleUrls ', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'template-style-sample-widget'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - expect(html).toContain(`

${name} works

`); + const ts = filesystem.read(`${path}/${name}/${name}.widget.ts`); + + expect(ts).toContain(`templateUrl: './${name}.widget.html'`); + expect(ts).toContain(`styleUrls: ['./${name}.widget.scss']`); + + filesystem.remove(TESTING_DIR); }); - test('should generate a widget component with correct templateUrl: and styleUrls ', async () => { - await runNgxdCLI(`g c w ${name}`); + test('should contain "standalone: true" on component decorator by default', async () => { + const path = `${TESTING_DIR}/components`; + const name = 'standalone-sample-widget'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const ts = filesystem.read(`${name}/${name}.component.ts`); + const ts = filesystem.read(`${path}/${name}/${name}.widget.ts`); - expect(ts).toContain(`templateUrl: './${name}.component.html'`); - expect(ts).toContain(`styleUrls: ['./${name}.component.scss']`); + expect(ts).toContain(`standalone: true`); }); }); diff --git a/src/commands/generate/component/widget/widget.ts b/src/commands/generate/component/widget/widget.ts index 750ced5..67e5249 100644 --- a/src/commands/generate/component/widget/widget.ts +++ b/src/commands/generate/component/widget/widget.ts @@ -17,39 +17,28 @@ const COMMAND: GluegunCommand = { template.generate({ template: 'component.template.html.ejs', - target: `${componentPath}.component.html`, + target: `${componentPath}.widget.html`, props: { name: componentName, ...strings } }); template.generate({ template: 'component.template.scss.ejs', - target: `${componentPath}.component.scss` + target: `${componentPath}.widget.scss` }); template.generate({ template: 'component.template.ts.ejs', - target: `${componentPath}.component.ts`, + target: `${componentPath}.widget.ts`, props: { - type: 'component', + type: 'widget', name: componentName, ...strings } }); - template.generate({ - template: 'widget.module.template.ts.ejs', - target: `${componentPath}.widget.module.ts`, - props: { - type: 'component', - name: componentName, - ...strings - } - }); - - printCreated(print, `${componentPath}.component.html`); - printCreated(print, `${componentPath}.component.scss`); - printCreated(print, `${componentPath}.component.ts`); - printCreated(print, `${componentPath}.widget.module.ts`); + printCreated(print, `${componentPath}.widget.html`); + printCreated(print, `${componentPath}.widget.scss`); + printCreated(print, `${componentPath}.widget.ts`); } }; diff --git a/src/commands/generate/service/api/api.test.ts b/src/commands/generate/service/api/api.test.ts index 8c2802b..8343b8e 100644 --- a/src/commands/generate/service/api/api.test.ts +++ b/src/commands/generate/service/api/api.test.ts @@ -11,30 +11,26 @@ describe('Commands: [Generate] => [Service] => [Api]', () => { jest.setTimeout(100000); }); - afterEach(() => { - jest.clearAllTimers(); - }); - afterAll(() => { + jest.clearAllTimers(); filesystem.remove(TESTING_DIR); }); test('should generate a api service with 2 files', async () => { - const name = 'gsa-base-fruit'; - await runNgxdCLI(`${COMMAND} ${name}`); + const path = `${TESTING_DIR}/services`; + const name = 'gsa-2-files'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); - const ts = filesystem.read(`${name}/${name}.api.ts`); - const spec = filesystem.read(`${name}/${name}.api.spec.ts`); + const ts = filesystem.read(`${path}/${name}/${name}.api.ts`); + const spec = filesystem.read(`${path}/${name}/${name}.api.spec.ts`); expect(ts).toBeDefined(); expect(spec).toBeDefined(); - filesystem.remove(`${name}`); }); test('should generate a api service at given path', async () => { - const name = 'fruit1'; const path = `${TESTING_DIR}/services`; - + const name = 'gsa-provided-path'; await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); const ts = filesystem.read(`${path}/${name}/${name}.api.ts`); @@ -42,14 +38,11 @@ describe('Commands: [Generate] => [Service] => [Api]', () => { expect(ts).toBeDefined(); expect(spec).toBeDefined(); - - filesystem.remove(TESTING_DIR); }); test('should generate a api service with correct content ', async () => { - const name = 'fruit2'; const path = `${TESTING_DIR}/services`; - + const name = 'gsa-correct-content'; await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); const ts = filesystem.read(`${path}/${name}/${name}.api.ts`); @@ -58,12 +51,20 @@ describe('Commands: [Generate] => [Service] => [Api]', () => { expect(ts).toContain(`import { Injectable } from '@angular/core'`); expect(ts).toContain(`@Injectable({`); expect(ts).toContain(`providedIn: 'root'`); - expect(ts).toContain(`export class Fruit2Api {`); + expect(ts).toContain(`export class GsaCorrectContentApi {`); - expect(spec).toContain("describe('Fruit2Api', () => {"); + expect(spec).toContain("describe('GsaCorrectContentApi', () => {"); expect(spec).toContain("it('should be created', () => {"); - expect(spec).toContain('service = TestBed.inject(Fruit2Api);'); + expect(spec).toContain('service = TestBed.inject(GsaCorrectContentApi);'); + }); + + test('should contain "standalone: true" on service decorator by default', async () => { + const path = `${TESTING_DIR}/services`; + const name = 'gsa-standalone-true'; + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + + const ts = filesystem.read(`${path}/${name}/${name}.api.ts`); - filesystem.remove(`${name}`); + expect(ts).toContain(`standalone: true`); }); }); diff --git a/src/commands/generate/service/common/common.test.ts b/src/commands/generate/service/common/common.test.ts index 75ed5f2..037bb07 100644 --- a/src/commands/generate/service/common/common.test.ts +++ b/src/commands/generate/service/common/common.test.ts @@ -14,6 +14,7 @@ describe('Commands: [Generate] => [Service] => [Common]', () => { afterEach(() => { jest.clearAllTimers(); + filesystem.remove(TESTING_DIR); }); test('should generate a common service with 2 files', async () => { @@ -24,7 +25,7 @@ describe('Commands: [Generate] => [Service] => [Common]', () => { expect(ts).toBeDefined(); expect(spec).toBeDefined(); - filesystem.remove(`${name}`); + filesystem.remove(name); }); test('should generate a common service at given path', async () => { @@ -60,4 +61,16 @@ describe('Commands: [Generate] => [Service] => [Common]', () => { filesystem.remove(`${name}`); }); + + test('should contain "standalone: true" on service decorator by default', async () => { + const path = `${TESTING_DIR}/src/app/services`; + const name = 'gsa-standalone-true'; + + await runNgxdCLI(`${COMMAND} ${name} --path ${path}`); + + const ts = filesystem.read(`${path}/${name}/${name}.service.ts`); + + expect(ts).toContain(`standalone: true`); + filesystem.remove(`${name}`); + }); }); diff --git a/src/commands/generate/store/ng-simple-state/ng-simple-state.test.ts b/src/commands/generate/store/ng-simple-state/ng-simple-state.test.ts index a97170c..d74742e 100644 --- a/src/commands/generate/store/ng-simple-state/ng-simple-state.test.ts +++ b/src/commands/generate/store/ng-simple-state/ng-simple-state.test.ts @@ -12,11 +12,8 @@ describe('Commands: [Generate] => [Store] => [NgSimpleState]', () => { jest.setTimeout(100000); }); - afterEach(() => { - jest.clearAllTimers(); - }); - afterAll(() => { + jest.clearAllTimers(); filesystem.remove(TESTING_DIR); }); diff --git a/src/templates/component.template.ts.ejs b/src/templates/component.template.ts.ejs index a5bc26a..3300b69 100644 --- a/src/templates/component.template.ts.ejs +++ b/src/templates/component.template.ts.ejs @@ -3,5 +3,6 @@ import { Component } from '@angular/core'; @Component({ templateUrl: './<%= kebabCase(props.name) %>.<%= kebabCase(props.type) %>.html', styleUrls: ['./<%= kebabCase(props.name) %>.<%= kebabCase(props.type) %>.scss'], + standalone: true }) export class <%= pascalCase(props.name) %><%= pascalCase(props.type) %> {} diff --git a/src/templates/service.template.ts.ejs b/src/templates/service.template.ts.ejs index 181cfe9..0a8ccf8 100644 --- a/src/templates/service.template.ts.ejs +++ b/src/templates/service.template.ts.ejs @@ -2,5 +2,6 @@ import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' + standalone: true }) export class <%= pascalCase(props.name) %><%= pascalCase(props.type) %> {} \ No newline at end of file