1
0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-16 10:33:43 +08:00
Charles Lyding 23fc8e1e17 fix(@schematics/angular): generate components without a .component extension/type
To align with the updated style guide, Angular v20 will generate components
without a `.component` file extension type for all component related
files by default. Projects will automatically use this naming convention.
Projects can however opt-out by setting the `type` option to `Component`
for the component schematic. This can be done as a default in the `angular.json`
or directly on the commandline via `--type=Component` when executing `ng generate`.
As an example, `app.component.css` will now be named `app.css`. Additionally,
the TypeScript class name will be `App` instead of the previous `AppComponent`.
2025-03-14 11:27:43 -07:00

142 lines
5.2 KiB
TypeScript

/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import { tags } from '@angular-devkit/core';
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
import { Schema as ApplicationOptions } from '../application/schema';
import { Schema as WorkspaceOptions } from '../workspace/schema';
import { Schema as AppShellOptions } from './schema';
describe('App Shell Schematic', () => {
const schematicRunner = new SchematicTestRunner(
'@schematics/angular',
require.resolve('../collection.json'),
);
const defaultOptions: AppShellOptions = {
project: 'bar',
};
const workspaceOptions: WorkspaceOptions = {
name: 'workspace',
newProjectRoot: 'projects',
version: '6.0.0',
};
const appOptions: ApplicationOptions = {
name: 'bar',
inlineStyle: false,
inlineTemplate: false,
routing: true,
skipTests: false,
skipPackageJson: false,
};
let appTree: UnitTestTree;
beforeEach(async () => {
appTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
});
describe('non standalone application', () => {
beforeEach(async () => {
appTree = await schematicRunner.runSchematic(
'application',
{ ...appOptions, standalone: false },
appTree,
);
});
it('should ensure the client app has a router-outlet', async () => {
appTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
appTree = await schematicRunner.runSchematic(
'application',
{ ...appOptions, routing: false },
appTree,
);
await expectAsync(
schematicRunner.runSchematic('app-shell', defaultOptions, appTree),
).toBeRejected();
});
it('should add a server app', async () => {
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
const filePath = '/projects/bar/src/app/app.module.server.ts';
expect(tree.exists(filePath)).toEqual(true);
});
it('should not fail when AppModule have imported RouterModule already', async () => {
const updateRecorder = appTree.beginUpdate('/projects/bar/src/app/app.module.ts');
updateRecorder.insertLeft(0, "import { RouterModule } from '@angular/router';");
appTree.commitUpdate(updateRecorder);
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
const filePath = '/projects/bar/src/app/app.module.ts';
const content = tree.readContent(filePath);
expect(content).toMatch(/import { RouterModule } from '@angular\/router';/);
});
it('should work if server config was added prior to running the app-shell schematic', async () => {
let tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
tree = await schematicRunner.runSchematic('app-shell', defaultOptions, tree);
expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
});
it('should create the shell component', async () => {
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
const content = tree.readContent('/projects/bar/src/app/app.module.server.ts');
expect(content).toMatch(/app-shell/);
});
});
describe('standalone application', () => {
beforeEach(async () => {
appTree = await schematicRunner.runSchematic('application', appOptions, appTree);
});
it('should ensure the client app has a router-outlet', async () => {
const appName = 'baz';
appTree = await schematicRunner.runSchematic(
'application',
{
...appOptions,
name: appName,
routing: false,
},
appTree,
);
await expectAsync(
schematicRunner.runSchematic('app-shell', { ...defaultOptions, project: appName }, appTree),
).toBeRejected();
});
it('should create the shell component', async () => {
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
const content = tree.readContent('/projects/bar/src/app/app.config.server.ts');
expect(content).toMatch(/app-shell/);
});
it(`should update the 'provideServerRouting' call to include 'withAppShell'`, async () => {
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
const content = tree.readContent('/projects/bar/src/app/app.config.server.ts');
expect(tags.oneLine`${content}`).toContain(
tags.oneLine`provideServerRouting(serverRoutes, withAppShell(AppShell))`,
);
});
it(`should add import to 'AppShell'`, async () => {
const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
const filePath = '/projects/bar/src/app/app.config.server.ts';
const content = tree.readContent(filePath);
expect(content).toContain(`import { AppShell } from './app-shell/app-shell';`);
});
});
});