Skip to content

Commit b13d083

Browse files
gleisonkzgleisonkz
committed
✨ feat: generate widget component
1 parent 11275a9 commit b13d083

File tree

10 files changed

+164
-68
lines changed

10 files changed

+164
-68
lines changed

‎__tests__/cli-integration.test.ts

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,50 @@ const src = filesystem.path(__dirname, '..');
66
const cli = async (cmd) =>
77
system.run('node ' + filesystem.path(src, 'bin', 'ngx-devs-cli') + ` ${cmd}`);
88

9-
describe('[Commands: version]', () => {
10-
test('should output package.json version', async () => {
11-
const packageJson: PackageJSON = require('../package.json');
12-
const version = packageJson?.version;
13-
const output = await cli('-v');
14-
expect(output).toContain(version);
9+
describe('[CLI]', () => {
10+
describe('[Commands: version]', () => {
11+
test('should output package.json version', async () => {
12+
const packageJson: PackageJSON = require('../package.json');
13+
const version = packageJson?.version;
14+
const output = await cli('-v');
15+
expect(output).toContain(version);
16+
});
17+
});
18+
19+
describe('[Commands: generate widget component]', () => {
20+
afterEach(() => {
21+
filesystem.remove('sample');
22+
});
23+
24+
test('should generate widget component with 4 files', async () => {
25+
await cli('g c w sample');
26+
27+
const html = filesystem.read('sample/sample.component.html');
28+
const scss = filesystem.read('sample/sample.component.scss');
29+
const ts = filesystem.read('sample/sample.component.ts');
30+
const widgetModule = filesystem.read('sample/sample.widget.module.ts');
31+
32+
expect(html).toBeDefined();
33+
expect(scss).toBeDefined();
34+
expect(ts).toBeDefined();
35+
expect(widgetModule).toBeDefined();
36+
});
37+
38+
test('should generate widget component html with default template <p>sample works</p>', async () => {
39+
await cli('g c w sample');
40+
41+
const html = filesystem.read('sample/sample.component.html');
42+
43+
expect(html).toContain('<p>sample works</p>');
44+
});
45+
46+
test('should generate a widget component with correct templateUrl: and styleUrls ', async () => {
47+
await cli('g c w sample');
48+
49+
const ts = filesystem.read('sample/sample.component.ts');
50+
51+
expect(ts).toContain(`templateUrl: './sample.component.html'`);
52+
expect(ts).toContain(`styleUrls: ['./sample.component.scss']`);
53+
});
1554
});
1655
});

‎src/commands/generate/component/component.ts

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,26 @@ const COMMAND: GluegunCommand = {
88
alias: ['c'],
99
description: 'Cria um componente Angular de tipo específico',
1010
run: async (toolbox: GluegunToolbox) => {
11-
const { parameters, prompt } = toolbox
11+
const { parameters, prompt } = toolbox;
1212

13-
let componentName = parameters.first
13+
let componentName = parameters.first;
1414

15-
if (!componentName) {
16-
const response: GluegunAskResponse = await prompt.ask({
17-
type: 'input',
18-
name: 'componentName',
19-
message: 'Qual o nome do componente?',
20-
validate: (value: string) => {
21-
if (!value) {
22-
return 'O nome do componente não pode ser vazio'
23-
}
24-
25-
return true
26-
},
27-
})
28-
29-
componentName = response.componentName
30-
}
31-
32-
const QUESTION = 'Qual tipo de componente você deseja criar?'
33-
const TYPES = ['common', 'page', 'widget', 'layout']
15+
const QUESTION = 'Qual tipo de componente você deseja criar?';
16+
const TYPES = ['common', 'page', 'widget', 'layout'];
3417

3518
const componentTypeResponse: GluegunAskResponse = await prompt.ask({
3619
type: 'select',
3720
name: 'type',
3821
message: QUESTION,
39-
choices: TYPES,
40-
})
22+
choices: TYPES
23+
});
4124

42-
const componentType = componentTypeResponse.type
43-
const command = findCommand(toolbox, componentType)
25+
const componentType = componentTypeResponse.type;
26+
const command = findCommand(toolbox, componentType);
4427

45-
toolbox.parameters.first = componentName
46-
command.run(toolbox)
47-
},
48-
}
28+
toolbox.parameters.first = componentName;
29+
command.run(toolbox);
30+
}
31+
};
4932

50-
module.exports = COMMAND
33+
module.exports = COMMAND;

‎src/commands/generate/component/page/page.ts

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,35 @@ const COMMAND: GluegunCommand = {
77
alias: ['p'],
88
description: 'Cria um componente Angular de tipo Page',
99
run: async (toolbox: GluegunToolbox) => {
10-
const { parameters, print, template, strings } = toolbox
10+
const { parameters, print, template, strings } = toolbox;
1111

12-
const componentName = parameters.first
12+
const componentName = parameters.first;
1313

1414
template.generate({
15-
template: 'component.page.html.ejs',
15+
template: 'component.template.html.ejs',
1616
target: `./${componentName}/${componentName}.page.html`,
17-
props: { name: componentName, ...strings },
18-
})
17+
props: { name: componentName, ...strings }
18+
});
1919

2020
template.generate({
21-
template: 'component.page.ts.ejs',
21+
template: 'component.template.ts.ejs',
2222
target: `./${componentName}/${componentName}.page.ts`,
23-
props: { name: componentName, ...strings },
24-
})
23+
props: {
24+
type: 'page',
25+
name: componentName,
26+
...strings
27+
}
28+
});
2529

2630
template.generate({
27-
template: 'component.page.scss.ejs',
28-
target: `./${componentName}/${componentName}.page.scss`,
29-
})
31+
template: 'component.template.scss.ejs',
32+
target: `./${componentName}/${componentName}.page.scss`
33+
});
3034

31-
printCreated(print, `${componentName}/${componentName}.page.html`)
32-
printCreated(print, `${componentName}/${componentName}.page.ts`)
33-
printCreated(print, `${componentName}/${componentName}.page.scss`)
34-
},
35-
}
35+
printCreated(print, `${componentName}/${componentName}.page.html`);
36+
printCreated(print, `${componentName}/${componentName}.page.ts`);
37+
printCreated(print, `${componentName}/${componentName}.page.scss`);
38+
}
39+
};
3640

37-
module.exports = COMMAND
41+
module.exports = COMMAND;

‎src/commands/generate/component/widget/widget.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { GluegunCommand, strings } from 'gluegun';
2+
import { GluegunAskResponse } from 'gluegun/build/types/toolbox/prompt-types';
3+
4+
import { printCreated } from '../../../../utils/functions.helper';
5+
6+
const COMMAND: GluegunCommand = {
7+
name: 'widget',
8+
alias: ['w'],
9+
description: 'Cria um componente Angular do tipo widget',
10+
run: async (toolbox) => {
11+
const { parameters, print, prompt, template } = toolbox;
12+
let componentName = parameters.first;
13+
14+
if (!componentName) {
15+
const response: GluegunAskResponse = await prompt.ask({
16+
type: 'input',
17+
name: 'componentName',
18+
message: 'Qual o nome do componente?',
19+
validate: (value: string) => {
20+
if (!value) {
21+
return 'O nome do componente não pode ser vazio';
22+
}
23+
24+
return true;
25+
}
26+
});
27+
28+
componentName = response.componentName;
29+
}
30+
31+
template.generate({
32+
template: 'component.template.html.ejs',
33+
target: `./${componentName}/${componentName}.component.html`,
34+
props: { name: componentName, ...strings }
35+
});
36+
37+
template.generate({
38+
template: 'component.template.scss.ejs',
39+
target: `./${componentName}/${componentName}.component.scss`
40+
});
41+
42+
template.generate({
43+
template: 'component.template.ts.ejs',
44+
target: `./${componentName}/${componentName}.component.ts`,
45+
props: {
46+
type: 'component',
47+
name: componentName,
48+
...strings
49+
}
50+
});
51+
52+
template.generate({
53+
template: 'widget.module.template.ts.ejs',
54+
target: `./${componentName}/${componentName}.widget.module.ts`,
55+
props: {
56+
type: 'component',
57+
name: componentName,
58+
...strings
59+
}
60+
});
61+
62+
printCreated(print, `${componentName}/${componentName}.component.html`);
63+
printCreated(print, `${componentName}/${componentName}.component.ts`);
64+
printCreated(print, `${componentName}/${componentName}.component.scss`);
65+
printCreated(print, `${componentName}/${componentName}.widget.module.ts`);
66+
}
67+
};
68+
69+
module.exports = COMMAND;

‎src/templates/component.page.ts.ejs

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/templates/component.page.html.ejs renamed to ‎src/templates/component.template.html.ejs

File renamed without changes.

‎src/templates/component.page.scss.ejs renamed to ‎src/templates/component.template.scss.ejs

File renamed without changes.

‎src/templates/component.template.ts.ejs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
templateUrl: './<%= kebabCase(props.name) %>.<%= kebabCase(props.type) %>.html',
5+
styleUrls: ['./<%= kebabCase(props.name) %>.<%= kebabCase(props.type) %>.scss'],
6+
})
7+
export class <%= pascalCase(props.name) %><%= pascalCase(props.type) %> {}

‎src/templates/model.ts.ejs

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/templates/widget.module.template.ts.ejs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import { <%= pascalCase(props.name) %>Component } from './<%= kebabCase(props.name) %>.component';
4+
5+
@NgModule({
6+
declarations: [<%= pascalCase(props.name) %>Component],
7+
exports: [<%= pascalCase(props.name) %>Component],
8+
})
9+
export class <%= pascalCase(props.name) %>WidgetModule {}

0 commit comments

Comments
 (0)