miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

chore(react): update unit tests to use "as-provided" when generating apps/libs (#18893)

Browse Source
This commit is contained in:
Jack Hsu 2023-08-30 11:13:05 -04:00 committed by GitHub
parent 70d3728457
commit f110d0c0e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 736 additions and 766 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/generators/application/__snapshots__/application.spec.ts.snap
View File

@ -68,7 +68,7 @@ import NxWelcome from './nx-welcome';
export function App() { export function App() {
return ( return (
<div> <div>
<NxWelcome title="my-dir-my-app" /> <NxWelcome title="my-app" />
</div> </div>
); );
} }

291
packages/react/src/generators/application/application.spec.ts
View File

@ -24,13 +24,14 @@ describe('app', () => {
linter: Linter.EsLint, linter: Linter.EsLint,
style: 'css', style: 'css',
strict: true, strict: true,
projectNameAndRootFormat: 'as-provided',
}; };
let mockedInstalledCypressVersion: jest.Mock< let mockedInstalledCypressVersion: jest.Mock<
ReturnType<typeof installedCypressVersion> ReturnType<typeof installedCypressVersion>
> = installedCypressVersion as never; > = installedCypressVersion as never;
beforeEach(() => { beforeEach(() => {
mockedInstalledCypressVersion.mockReturnValue(10); mockedInstalledCypressVersion.mockReturnValue(10);
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); appTree = createTreeWithEmptyWorkspace();
}); });
describe('not nested', () => { describe('not nested', () => {
@ -39,8 +40,8 @@ describe('app', () => {
const projects = getProjects(appTree); const projects = getProjects(appTree);
expect(projects.get('my-app').root).toEqual('apps/my-app'); expect(projects.get('my-app').root).toEqual('my-app');
expect(projects.get('my-app-e2e').root).toEqual('apps/my-app-e2e'); expect(projects.get('my-app-e2e').root).toEqual('my-app-e2e');
}); });
it('should add vite types to tsconfigs', async () => { it('should add vite types to tsconfigs', async () => {
@ -49,14 +50,14 @@ describe('app', () => {
bundler: 'vite', bundler: 'vite',
unitTestRunner: 'vitest', unitTestRunner: 'vitest',
}); });
const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json'); const tsconfigApp = readJson(appTree, 'my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.types).toEqual([ expect(tsconfigApp.compilerOptions.types).toEqual([
'node', 'node',
'@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/cssmodule.d.ts',
'@nx/react/typings/image.d.ts', '@nx/react/typings/image.d.ts',
'vite/client', 'vite/client',
]); ]);
const tsconfigSpec = readJson(appTree, 'apps/my-app/tsconfig.spec.json'); const tsconfigSpec = readJson(appTree, 'my-app/tsconfig.spec.json');
expect(tsconfigSpec.compilerOptions.types).toEqual([ expect(tsconfigSpec.compilerOptions.types).toEqual([
'vitest/globals', 'vitest/globals',
'vitest/importMeta', 'vitest/importMeta',
@ -94,19 +95,17 @@ describe('app', () => {
it('should generate files', async () => { it('should generate files', async () => {
await applicationGenerator(appTree, schema); await applicationGenerator(appTree, schema);
expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy(); expect(appTree.exists('my-app/.babelrc')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/main.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
expect( expect(appTree.read('my-app/src/app/app.tsx', 'utf-8')).toMatchSnapshot();
appTree.read('apps/my-app/src/app/app.tsx', 'utf-8') expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
).toMatchSnapshot(); expect(appTree.exists('my-app/src/app/app.module.css')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.module.css')).toBeTruthy();
const jestConfig = appTree.read('apps/my-app/jest.config.ts').toString(); const jestConfig = appTree.read('my-app/jest.config.ts').toString();
expect(jestConfig).toContain('@nx/react/plugins/jest'); expect(jestConfig).toContain('@nx/react/plugins/jest');
const tsconfig = readJson(appTree, 'apps/my-app/tsconfig.json'); const tsconfig = readJson(appTree, 'my-app/tsconfig.json');
expect(tsconfig.references).toEqual([ expect(tsconfig.references).toEqual([
{ {
path: './tsconfig.app.json', path: './tsconfig.app.json',
@ -116,8 +115,8 @@ describe('app', () => {
}, },
]); ]);
expect(tsconfig.compilerOptions.strict).toEqual(true); expect(tsconfig.compilerOptions.strict).toEqual(true);
const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json'); const tsconfigApp = readJson(appTree, 'my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.outDir).toEqual('../../dist/out-tsc'); expect(tsconfigApp.compilerOptions.outDir).toEqual('../dist/out-tsc');
expect(tsconfigApp.extends).toEqual('./tsconfig.json'); expect(tsconfigApp.extends).toEqual('./tsconfig.json');
expect(tsconfigApp.exclude).toEqual([ expect(tsconfigApp.exclude).toEqual([
'jest.config.ts', 'jest.config.ts',
@ -131,26 +130,26 @@ describe('app', () => {
'src/**/*.test.jsx', 'src/**/*.test.jsx',
]); ]);
const eslintJson = readJson(appTree, 'apps/my-app/.eslintrc.json'); const eslintJson = readJson(appTree, 'my-app/.eslintrc.json');
expect(eslintJson.extends).toEqual([ expect(eslintJson.extends).toEqual([
'plugin:@nx/react', 'plugin:@nx/react',
'../../.eslintrc.json', '../.eslintrc.json',
]); ]);
expect(appTree.exists('apps/my-app-e2e/cypress.config.ts')).toBeTruthy(); expect(appTree.exists('my-app-e2e/cypress.config.ts')).toBeTruthy();
const tsconfigE2E = readJson(appTree, 'apps/my-app-e2e/tsconfig.json'); const tsconfigE2E = readJson(appTree, 'my-app-e2e/tsconfig.json');
expect(tsconfigE2E).toMatchInlineSnapshot(` expect(tsconfigE2E).toMatchInlineSnapshot(`
{ {
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"outDir": "../../dist/out-tsc", "outDir": "../dist/out-tsc",
"sourceMap": false, "sourceMap": false,
"types": [ "types": [
"cypress", "cypress",
"node", "node",
], ],
}, },
"extends": "../../tsconfig.base.json", "extends": "../tsconfig.base.json",
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.js", "src/**/*.js",
@ -163,40 +162,43 @@ describe('app', () => {
it('should extend from root tsconfig.base.json', async () => { it('should extend from root tsconfig.base.json', async () => {
await applicationGenerator(appTree, schema); await applicationGenerator(appTree, schema);
const tsConfig = readJson(appTree, 'apps/my-app/tsconfig.json'); const tsConfig = readJson(appTree, 'my-app/tsconfig.json');
expect(tsConfig.extends).toEqual('../../tsconfig.base.json'); expect(tsConfig.extends).toEqual('../tsconfig.base.json');
}); });
}); });
describe('nested', () => { describe('nested', () => {
it('should create project configurations', async () => { it('should create project configurations', async () => {
await applicationGenerator(appTree, { ...schema, directory: 'myDir' }); await applicationGenerator(appTree, {
...schema,
directory: 'my-dir/my-app',
});
const projectsConfigurations = getProjects(appTree); const projectsConfigurations = getProjects(appTree);
expect(projectsConfigurations.get('my-dir-my-app').root).toEqual( expect(projectsConfigurations.get('my-app').root).toEqual(
'apps/my-dir/my-app' 'my-dir/my-app'
); );
expect(projectsConfigurations.get('my-dir-my-app-e2e').root).toEqual( expect(projectsConfigurations.get('my-app-e2e').root).toEqual(
'apps/my-dir/my-app-e2e' 'my-dir/my-app-e2e'
); );
}); });
it('should update tags and implicit deps', async () => { it('should update tags and implicit deps', async () => {
await applicationGenerator(appTree, { await applicationGenerator(appTree, {
...schema, ...schema,
directory: 'myDir', directory: 'my-dir/my-app',
tags: 'one,two', tags: 'one,two',
}); });
const projects = Object.fromEntries(getProjects(appTree)); const projects = Object.fromEntries(getProjects(appTree));
expect(projects).toMatchObject({ expect(projects).toMatchObject({
'my-dir-my-app': { 'my-app': {
tags: ['one', 'two'], tags: ['one', 'two'],
}, },
'my-dir-my-app-e2e': { 'my-app-e2e': {
tags: [], tags: [],
implicitDependencies: ['my-dir-my-app'], implicitDependencies: ['my-app'],
}, },
}); });
}); });
@ -204,17 +206,17 @@ describe('app', () => {
it("should generate correct directory for window's style paths", async () => { it("should generate correct directory for window's style paths", async () => {
await applicationGenerator(appTree, { await applicationGenerator(appTree, {
...schema, ...schema,
directory: 'myOuterDir\\myInnerDir', directory: 'my-outer-dir\\my-inner-dir\\my-app',
}); });
const projectsConfigurations = getProjects(appTree); const projectsConfigurations = getProjects(appTree);
expect( expect(projectsConfigurations.get('my-app').root).toEqual(
projectsConfigurations.get('my-outer-dir-my-inner-dir-my-app').root 'my-outer-dir/my-inner-dir/my-app'
).toEqual('apps/my-outer-dir/my-inner-dir/my-app'); );
expect( expect(projectsConfigurations.get('my-app-e2e').root).toEqual(
projectsConfigurations.get('my-outer-dir-my-inner-dir-my-app-e2e').root 'my-outer-dir/my-inner-dir/my-app-e2e'
).toEqual('apps/my-outer-dir/my-inner-dir/my-app-e2e'); );
}); });
it('should generate files', async () => { it('should generate files', async () => {
@ -223,14 +225,17 @@ describe('app', () => {
expect(lookupFn(config)).toEqual(expectedValue); expect(lookupFn(config)).toEqual(expectedValue);
}; };
await applicationGenerator(appTree, { ...schema, directory: 'myDir' }); await applicationGenerator(appTree, {
...schema,
directory: 'my-dir/my-app',
});
// Make sure these exist // Make sure these exist
[ [
'apps/my-dir/my-app/src/main.tsx', 'my-dir/my-app/src/main.tsx',
'apps/my-dir/my-app/src/app/app.tsx', 'my-dir/my-app/src/app/app.tsx',
'apps/my-dir/my-app/src/app/app.spec.tsx', 'my-dir/my-app/src/app/app.spec.tsx',
'apps/my-dir/my-app/src/app/app.module.css', 'my-dir/my-app/src/app/app.module.css',
].forEach((path) => { ].forEach((path) => {
expect(appTree.exists(path)).toBeTruthy(); expect(appTree.exists(path)).toBeTruthy();
}); });
@ -238,12 +243,12 @@ describe('app', () => {
// Make sure these have properties // Make sure these have properties
[ [
{ {
path: 'apps/my-dir/my-app/tsconfig.app.json', path: 'my-dir/my-app/tsconfig.app.json',
lookupFn: (json) => json.compilerOptions.outDir, lookupFn: (json) => json.compilerOptions.outDir,
expectedValue: '../../../dist/out-tsc', expectedValue: '../../dist/out-tsc',
}, },
{ {
path: 'apps/my-dir/my-app/tsconfig.app.json', path: 'my-dir/my-app/tsconfig.app.json',
lookupFn: (json) => json.exclude, lookupFn: (json) => json.exclude,
expectedValue: [ expectedValue: [
'jest.config.ts', 'jest.config.ts',
@ -258,14 +263,14 @@ describe('app', () => {
], ],
}, },
{ {
path: 'apps/my-dir/my-app-e2e/tsconfig.json', path: 'my-dir/my-app-e2e/tsconfig.json',
lookupFn: (json) => json.compilerOptions.outDir, lookupFn: (json) => json.compilerOptions.outDir,
expectedValue: '../../../dist/out-tsc', expectedValue: '../../dist/out-tsc',
}, },
{ {
path: 'apps/my-dir/my-app/.eslintrc.json', path: 'my-dir/my-app/.eslintrc.json',
lookupFn: (json) => json.extends, lookupFn: (json) => json.extends,
expectedValue: ['plugin:@nx/react', '../../../.eslintrc.json'], expectedValue: ['plugin:@nx/react', '../../.eslintrc.json'],
}, },
].forEach(hasJsonValue); ].forEach(hasJsonValue);
}); });
@ -273,31 +278,33 @@ describe('app', () => {
it('should setup playwright', async () => { it('should setup playwright', async () => {
await applicationGenerator(appTree, { await applicationGenerator(appTree, {
...schema, ...schema,
directory: 'myDir', directory: 'my-dir/my-app',
e2eTestRunner: 'playwright', e2eTestRunner: 'playwright',
}); });
expect( expect(
appTree.exists('apps/my-dir/my-app-e2e/playwright.config.ts') appTree.exists('my-dir/my-app-e2e/playwright.config.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('apps/my-dir/my-app-e2e/src/example.spec.ts') appTree.exists('my-dir/my-app-e2e/src/example.spec.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
readProjectConfiguration(appTree, 'my-dir-my-app-e2e')?.targets?.e2e readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
?.executor
).toEqual('@nx/playwright:playwright'); ).toEqual('@nx/playwright:playwright');
}); });
}); });
it('should create Nx specific template', async () => { it('should create Nx specific template', async () => {
await applicationGenerator(appTree, { ...schema, directory: 'myDir' }); await applicationGenerator(appTree, {
...schema,
directory: 'my-dir/my-app',
});
expect( expect(
appTree.read('apps/my-dir/my-app/src/app/app.tsx', 'utf-8') appTree.read('my-dir/my-app/src/app/app.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(
appTree.read('apps/my-dir/my-app/src/app/nx-welcome.tsx').toString() appTree.read('my-dir/my-app/src/app/nx-welcome.tsx').toString()
).toContain('Hello there'); ).toContain('Hello there');
}); });
@ -315,7 +322,7 @@ describe('app', () => {
}); });
expect(() => { expect(() => {
readJson(appTree, `apps/my-app/.babelrc`); readJson(appTree, `my-app/.babelrc`);
}).not.toThrow(); }).not.toThrow();
} }
); );
@ -323,16 +330,14 @@ describe('app', () => {
describe('--style scss', () => { describe('--style scss', () => {
it('should generate scss styles', async () => { it('should generate scss styles', async () => {
await applicationGenerator(appTree, { ...schema, style: 'scss' }); await applicationGenerator(appTree, { ...schema, style: 'scss' });
expect(appTree.exists('apps/my-app/src/app/app.module.scss')).toEqual( expect(appTree.exists('my-app/src/app/app.module.scss')).toEqual(true);
true
);
}); });
}); });
it('should setup jest with tsx support', async () => { it('should setup jest with tsx support', async () => {
await applicationGenerator(appTree, { ...schema, name: 'my-app' }); await applicationGenerator(appTree, { ...schema, name: 'my-app' });
expect(appTree.read('apps/my-app/jest.config.ts').toString()).toContain( expect(appTree.read('my-app/jest.config.ts').toString()).toContain(
`moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],` `moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],`
); );
}); });
@ -340,7 +345,7 @@ describe('app', () => {
it('should setup jest with babel-jest support', async () => { it('should setup jest with babel-jest support', async () => {
await applicationGenerator(appTree, { ...schema, name: 'my-app' }); await applicationGenerator(appTree, { ...schema, name: 'my-app' });
expect(appTree.read('apps/my-app/jest.config.ts').toString()).toContain( expect(appTree.read('my-app/jest.config.ts').toString()).toContain(
"['babel-jest', { presets: ['@nx/react/babel'] }]" "['babel-jest', { presets: ['@nx/react/babel'] }]"
); );
}); });
@ -348,7 +353,7 @@ describe('app', () => {
it('should setup jest without serializers', async () => { it('should setup jest without serializers', async () => {
await applicationGenerator(appTree, { ...schema, name: 'my-app' }); await applicationGenerator(appTree, { ...schema, name: 'my-app' });
expect(appTree.read('apps/my-app/jest.config.ts').toString()).not.toContain( expect(appTree.read('my-app/jest.config.ts').toString()).not.toContain(
`'jest-preset-angular/build/AngularSnapshotSerializer.js',` `'jest-preset-angular/build/AngularSnapshotSerializer.js',`
); );
}); });
@ -366,24 +371,24 @@ describe('app', () => {
expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']); expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']);
expect(targetConfig.build.options).toEqual({ expect(targetConfig.build.options).toEqual({
compiler: 'babel', compiler: 'babel',
assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'], assets: ['my-app/src/favicon.ico', 'my-app/src/assets'],
index: 'apps/my-app/src/index.html', index: 'my-app/src/index.html',
main: 'apps/my-app/src/main.tsx', main: 'my-app/src/main.tsx',
baseHref: '/', baseHref: '/',
outputPath: 'dist/apps/my-app', outputPath: 'dist/my-app',
scripts: [], scripts: [],
styles: ['apps/my-app/src/styles.css'], styles: ['my-app/src/styles.css'],
tsConfig: 'apps/my-app/tsconfig.app.json', tsConfig: 'my-app/tsconfig.app.json',
isolatedConfig: true, isolatedConfig: true,
webpackConfig: 'apps/my-app/webpack.config.js', webpackConfig: 'my-app/webpack.config.js',
}); });
expect(targetConfig.build.configurations.production).toEqual({ expect(targetConfig.build.configurations.production).toEqual({
optimization: true, optimization: true,
extractLicenses: true, extractLicenses: true,
fileReplacements: [ fileReplacements: [
{ {
replace: 'apps/my-app/src/environments/environment.ts', replace: 'my-app/src/environments/environment.ts',
with: 'apps/my-app/src/environments/environment.prod.ts', with: 'my-app/src/environments/environment.prod.ts',
}, },
], ],
namedChunks: false, namedChunks: false,
@ -405,13 +410,11 @@ describe('app', () => {
expect(targetConfig.build.executor).toEqual('@nx/vite:build'); expect(targetConfig.build.executor).toEqual('@nx/vite:build');
expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']); expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']);
expect(targetConfig.build.options).toEqual({ expect(targetConfig.build.options).toEqual({
outputPath: 'dist/apps/my-app', outputPath: 'dist/my-app',
}); });
expect(appTree.exists(`my-app/environments/environment.ts`)).toBeFalsy();
expect( expect(
appTree.exists(`apps/my-app/environments/environment.ts`) appTree.exists(`my-app/environments/environment.prod.ts`)
).toBeFalsy();
expect(
appTree.exists(`apps/my-app/environments/environment.prod.ts`)
).toBeFalsy(); ).toBeFalsy();
}); });
@ -462,7 +465,7 @@ describe('app', () => {
executor: '@nx/linter:eslint', executor: '@nx/linter:eslint',
outputs: ['{options.outputFile}'], outputs: ['{options.outputFile}'],
options: { options: {
lintFilePatterns: ['apps/my-app/**/*.{ts,tsx,js,jsx}'], lintFilePatterns: ['my-app/**/*.{ts,tsx,js,jsx}'],
}, },
}); });
}); });
@ -475,9 +478,9 @@ describe('app', () => {
}); });
expect(appTree.exists('jest.config.ts')).toBeFalsy(); expect(appTree.exists('jest.config.ts')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeFalsy();
expect(appTree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy(); expect(appTree.exists('my-app/tsconfig.spec.json')).toBeFalsy();
expect(appTree.exists('apps/my-app/jest.config.ts')).toBeFalsy(); expect(appTree.exists('my-app/jest.config.ts')).toBeFalsy();
const projectsConfigurations = getProjects(appTree); const projectsConfigurations = getProjects(appTree);
expect(projectsConfigurations.get('my-app').targets.test).toBeUndefined(); expect(projectsConfigurations.get('my-app').targets.test).toBeUndefined();
expect(projectsConfigurations.get('my-app').targets.lint) expect(projectsConfigurations.get('my-app').targets.lint)
@ -486,7 +489,7 @@ describe('app', () => {
"executor": "@nx/linter:eslint", "executor": "@nx/linter:eslint",
"options": { "options": {
"lintFilePatterns": [ "lintFilePatterns": [
"apps/my-app/**/*.{ts,tsx,js,jsx}", "my-app/**/*.{ts,tsx,js,jsx}",
], ],
}, },
"outputs": [ "outputs": [
@ -501,7 +504,7 @@ describe('app', () => {
it('should not generate test configuration', async () => { it('should not generate test configuration', async () => {
await applicationGenerator(appTree, { ...schema, e2eTestRunner: 'none' }); await applicationGenerator(appTree, { ...schema, e2eTestRunner: 'none' });
expect(appTree.exists('apps/my-app-e2e')).toBeFalsy(); expect(appTree.exists('my-app-e2e')).toBeFalsy();
const projectsConfigurations = getProjects(appTree); const projectsConfigurations = getProjects(appTree);
expect(projectsConfigurations.get('my-app-e2e')).toBeUndefined(); expect(projectsConfigurations.get('my-app-e2e')).toBeUndefined();
}); });
@ -514,12 +517,8 @@ describe('app', () => {
e2eTestRunner: 'playwright', e2eTestRunner: 'playwright',
}); });
expect( expect(appTree.exists('my-app-e2e/playwright.config.ts')).toBeTruthy();
appTree.exists('apps/my-app-e2e/playwright.config.ts') expect(appTree.exists('my-app-e2e/src/example.spec.ts')).toBeTruthy();
).toBeTruthy();
expect(
appTree.exists('apps/my-app-e2e/src/example.spec.ts')
).toBeTruthy();
expect( expect(
readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
).toEqual('@nx/playwright:playwright'); ).toEqual('@nx/playwright:playwright');
@ -530,16 +529,16 @@ describe('app', () => {
it('should use upper case app file', async () => { it('should use upper case app file', async () => {
await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true }); await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true });
expect(appTree.exists('apps/my-app/src/app/App.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/App.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/App.spec.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/App.spec.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/App.module.css')).toBeTruthy(); expect(appTree.exists('my-app/src/app/App.module.css')).toBeTruthy();
}); });
it(`should use the correct case for file import in the spec file`, async () => { it(`should use the correct case for file import in the spec file`, async () => {
await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true }); await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true });
const appSpecContent = appTree const appSpecContent = appTree
.read('apps/my-app/src/app/App.spec.tsx') .read('my-app/src/app/App.spec.tsx')
.toString(); .toString();
expect(appSpecContent).toMatch(/import App from '.\/App'/); expect(appSpecContent).toMatch(/import App from '.\/App'/);
@ -549,7 +548,7 @@ describe('app', () => {
it('should generate functional components by default', async () => { it('should generate functional components by default', async () => {
await applicationGenerator(appTree, schema); await applicationGenerator(appTree, schema);
const appContent = appTree.read('apps/my-app/src/app/app.tsx').toString(); const appContent = appTree.read('my-app/src/app/app.tsx').toString();
expect(appContent).not.toMatch(/extends Component/); expect(appContent).not.toMatch(/extends Component/);
}); });
@ -558,7 +557,7 @@ describe('app', () => {
await applicationGenerator(appTree, { ...schema }); await applicationGenerator(appTree, { ...schema });
const appSpecContent = appTree const appSpecContent = appTree
.read('apps/my-app/src/app/app.spec.tsx') .read('my-app/src/app/app.spec.tsx')
.toString(); .toString();
expect(appSpecContent).toMatch(/import App from '.\/app'/); expect(appSpecContent).toMatch(/import App from '.\/app'/);
@ -584,12 +583,12 @@ describe('app', () => {
).toBeDefined(); ).toBeDefined();
expect(packageJson.devDependencies['eslint-config-prettier']).toBeDefined(); expect(packageJson.devDependencies['eslint-config-prettier']).toBeDefined();
const eslintJson = readJson(appTree, '/apps/my-app/.eslintrc.json'); const eslintJson = readJson(appTree, '/my-app/.eslintrc.json');
expect(eslintJson).toMatchInlineSnapshot(` expect(eslintJson).toMatchInlineSnapshot(`
{ {
"extends": [ "extends": [
"plugin:@nx/react", "plugin:@nx/react",
"../../.eslintrc.json", "../.eslintrc.json",
], ],
"ignorePatterns": [ "ignorePatterns": [
"!**/*", "!**/*",
@ -627,7 +626,7 @@ describe('app', () => {
it('should generate class components', async () => { it('should generate class components', async () => {
await applicationGenerator(appTree, { ...schema, classComponent: true }); await applicationGenerator(appTree, { ...schema, classComponent: true });
const appContent = appTree.read('apps/my-app/src/app/app.tsx').toString(); const appContent = appTree.read('my-app/src/app/app.tsx').toString();
expect(appContent).toMatch(/extends Component/); expect(appContent).toMatch(/extends Component/);
}); });
@ -637,16 +636,16 @@ describe('app', () => {
it('should not generate any styles', async () => { it('should not generate any styles', async () => {
await applicationGenerator(appTree, { ...schema, style: 'none' }); await applicationGenerator(appTree, { ...schema, style: 'none' });
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.css')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.css')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.scss')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.scss')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.styl')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.styl')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.module.css')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.module.css')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.module.scss')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.module.scss')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.module.styl')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.module.styl')).toBeFalsy();
const content = appTree.read('apps/my-app/src/app/app.tsx').toString(); const content = appTree.read('my-app/src/app/app.tsx').toString();
expect(content).not.toContain('styled-components'); expect(content).not.toContain('styled-components');
expect(content).not.toContain('<StyledApp>'); expect(content).not.toContain('<StyledApp>');
expect(content).not.toContain('@emotion/styled'); expect(content).not.toContain('@emotion/styled');
@ -715,14 +714,12 @@ describe('app', () => {
}); });
expect( expect(
appTree.exists('apps/my-app/src/app/app.styled-components') appTree.exists('my-app/src/app/app.styled-components')
).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/styles.styled-components')
).toBeFalsy(); ).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/styles.styled-components')).toBeFalsy();
const content = appTree.read('apps/my-app/src/app/app.tsx').toString(); const content = appTree.read('my-app/src/app/app.tsx').toString();
expect(content).toContain('styled-component'); expect(content).toContain('styled-component');
expect(content).toContain('<StyledApp>'); expect(content).toContain('<StyledApp>');
}); });
@ -745,12 +742,10 @@ describe('app', () => {
style: '@emotion/styled', style: '@emotion/styled',
}); });
expect( expect(appTree.exists('my-app/src/app/app.@emotion/styled')).toBeFalsy();
appTree.exists('apps/my-app/src/app/app.@emotion/styled') expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
const content = appTree.read('apps/my-app/src/app/app.tsx').toString(); const content = appTree.read('my-app/src/app/app.tsx').toString();
expect(content).toContain('@emotion/styled'); expect(content).toContain('@emotion/styled');
expect(content).toContain('<StyledApp>'); expect(content).toContain('<StyledApp>');
}); });
@ -761,7 +756,7 @@ describe('app', () => {
style: '@emotion/styled', style: '@emotion/styled',
}); });
const tsconfigJson = readJson(appTree, 'apps/my-app/tsconfig.json'); const tsconfigJson = readJson(appTree, 'my-app/tsconfig.json');
expect(tsconfigJson.compilerOptions['jsxImportSource']).toEqual( expect(tsconfigJson.compilerOptions['jsxImportSource']).toEqual(
'@emotion/react' '@emotion/react'
); );
@ -814,10 +809,10 @@ describe('app', () => {
style: 'styled-jsx', style: 'styled-jsx',
}); });
expect(appTree.exists('apps/my-app/src/app/app.styled-jsx')).toBeFalsy(); expect(appTree.exists('my-app/src/app/app.styled-jsx')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
const content = appTree.read('apps/my-app/src/app/app.tsx').toString(); const content = appTree.read('my-app/src/app/app.tsx').toString();
expect(content).toContain('<style jsx>'); expect(content).toContain('<style jsx>');
}); });
@ -837,7 +832,7 @@ describe('app', () => {
style: 'styled-jsx', style: 'styled-jsx',
}); });
const babelrc = readJson(appTree, 'apps/my-app/.babelrc'); const babelrc = readJson(appTree, 'my-app/.babelrc');
expect(babelrc.plugins).toContain('styled-jsx/babel'); expect(babelrc.plugins).toContain('styled-jsx/babel');
}); });
}); });
@ -849,11 +844,9 @@ describe('app', () => {
routing: true, routing: true,
}); });
const mainSource = appTree.read('apps/my-app/src/main.tsx').toString(); const mainSource = appTree.read('my-app/src/main.tsx').toString();
const componentSource = appTree const componentSource = appTree.read('my-app/src/app/app.tsx').toString();
.read('apps/my-app/src/app/app.tsx')
.toString();
expect(mainSource).toContain('react-router-dom'); expect(mainSource).toContain('react-router-dom');
expect(mainSource).toContain('<BrowserRouter>'); expect(mainSource).toContain('<BrowserRouter>');
@ -873,7 +866,7 @@ describe('app', () => {
expect( expect(
projectsConfigurations.get('my-app').targets.build.options.webpackConfig projectsConfigurations.get('my-app').targets.build.options.webpackConfig
).toEqual('apps/my-app/webpack.config.js'); ).toEqual('my-app/webpack.config.js');
}); });
it('should NOT add custom webpack config if bundler is vite', async () => { it('should NOT add custom webpack config if bundler is vite', async () => {
@ -920,10 +913,8 @@ describe('app', () => {
name: 'plain', name: 'plain',
minimal: true, minimal: true,
}); });
expect(appTree.exists('apps/plain/src/app/nx-welcome.tsx')).toBeFalsy(); expect(appTree.exists('plain/src/app/nx-welcome.tsx')).toBeFalsy();
expect( expect(appTree.read('plain/src/app/app.tsx', 'utf-8')).toMatchSnapshot();
appTree.read('apps/plain/src/app/app.tsx', 'utf-8')
).toMatchSnapshot();
}); });
}); });
@ -934,8 +925,8 @@ describe('app', () => {
js: true, js: true,
}); });
expect(appTree.exists('/apps/my-app/src/app/app.js')).toBe(true); expect(appTree.exists('/my-app/src/app/app.js')).toBe(true);
expect(appTree.exists('/apps/my-app/src/main.js')).toBe(true); expect(appTree.exists('/my-app/src/main.js')).toBe(true);
}); });
}); });
@ -945,7 +936,7 @@ describe('app', () => {
...schema, ...schema,
strict: false, strict: false,
}); });
const tsconfigJson = readJson(appTree, '/apps/my-app/tsconfig.json'); const tsconfigJson = readJson(appTree, '/my-app/tsconfig.json');
expect( expect(
tsconfigJson.compilerOptions.forceConsistentCasingInFileNames tsconfigJson.compilerOptions.forceConsistentCasingInFileNames
@ -974,7 +965,7 @@ describe('app', () => {
compiler: 'swc', compiler: 'swc',
}); });
expect(readJson(appTree, '/apps/my-app/.swcrc')).toEqual({ expect(readJson(appTree, '/my-app/.swcrc')).toEqual({
jsc: { target: 'es2016' }, jsc: { target: 'es2016' },
}); });
}); });
@ -1022,7 +1013,7 @@ describe('app', () => {
let viteAppTree: Tree; let viteAppTree: Tree;
beforeEach(async () => { beforeEach(async () => {
viteAppTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); viteAppTree = createTreeWithEmptyWorkspace();
await applicationGenerator(viteAppTree, { ...schema, bundler: 'vite' }); await applicationGenerator(viteAppTree, { ...schema, bundler: 'vite' });
}); });
@ -1046,7 +1037,7 @@ describe('app', () => {
}); });
it('should create correct tsconfig compilerOptions', () => { it('should create correct tsconfig compilerOptions', () => {
const tsconfigJson = readJson(viteAppTree, '/apps/my-app/tsconfig.json'); const tsconfigJson = readJson(viteAppTree, '/my-app/tsconfig.json');
expect(tsconfigJson.compilerOptions.types).toMatchObject([ expect(tsconfigJson.compilerOptions.types).toMatchObject([
'vite/client', 'vite/client',
'vitest', 'vitest',
@ -1054,15 +1045,13 @@ describe('app', () => {
}); });
it('should create index.html and vite.config file at the root of the app', () => { it('should create index.html and vite.config file at the root of the app', () => {
expect(viteAppTree.exists('/apps/my-app/index.html')).toBe(true); expect(viteAppTree.exists('/my-app/index.html')).toBe(true);
expect(viteAppTree.exists('/apps/my-app/vite.config.ts')).toBe(true); expect(viteAppTree.exists('/my-app/vite.config.ts')).toBe(true);
}); });
it('should not include a spec file when the bundler or unitTestRunner is vite and insourceTests is false', async () => { it('should not include a spec file when the bundler or unitTestRunner is vite and insourceTests is false', async () => {
// check to make sure that the other spec file exists // check to make sure that the other spec file exists
expect(viteAppTree.exists('/apps/my-app/src/app/app.spec.tsx')).toBe( expect(viteAppTree.exists('/my-app/src/app/app.spec.tsx')).toBe(true);
true
);
await applicationGenerator(viteAppTree, { await applicationGenerator(viteAppTree, {
...schema, ...schema,
@ -1071,9 +1060,9 @@ describe('app', () => {
inSourceTests: true, inSourceTests: true,
}); });
expect( expect(viteAppTree.exists('/insourceTests/src/app/app.spec.tsx')).toBe(
viteAppTree.exists('/apps/insourceTests/src/app/app.spec.tsx') false
).toBe(false); );
}); });
it.each` it.each`

22
packages/react/src/generators/component-cypress-spec/component-cypress-spec.spec.ts
View File

@ -81,8 +81,8 @@ describe('react:component-cypress-spec', () => {
describe(`using ${ describe(`using ${
testConfig.plainJS ? 'plain JS' : 'TypeScript' testConfig.plainJS ? 'plain JS' : 'TypeScript'
} setup`, () => { } setup`, () => {
let cmpPath = `libs/test-ui-lib/src/lib/test-ui-lib.${fileCmpExt}`; let cmpPath = `test-ui-lib/src/lib/test-ui-lib.${fileCmpExt}`;
let cypressStorySpecFilePath = `apps/test-ui-lib-e2e/src/integration/test-ui-lib/test-ui-lib.spec.${fileExt}`; let cypressStorySpecFilePath = `test-ui-lib-e2e/src/integration/test-ui-lib/test-ui-lib.spec.${fileExt}`;
if (!testConfig.plainJS) { if (!testConfig.plainJS) {
// hacky, but we should do this check only if we run with TypeScript, // hacky, but we should do this check only if we run with TypeScript,
@ -155,17 +155,17 @@ describe('react:component-cypress-spec', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
}); });
// since other-e2e isn't a real cypress project we mock the v10 cypress config // since other-e2e isn't a real cypress project we mock the v10 cypress config
appTree.write('apps/other-e2e/cypress.config.ts', `export default {}`); appTree.write('other-e2e/cypress.config.ts', `export default {}`);
await componentCypressSpecGenerator(appTree, { await componentCypressSpecGenerator(appTree, {
componentPath: `lib/test-ui-lib.tsx`, componentPath: `lib/test-ui-lib.tsx`,
project: 'test-ui-lib', project: 'test-ui-lib',
cypressProject: 'other-e2e', cypressProject: 'other-e2e',
}); });
expect( expect(
appTree.exists('apps/other-e2e/src/e2e/test-ui-lib/test-ui-lib.cy.ts') appTree.exists('other-e2e/src/e2e/test-ui-lib/test-ui-lib.cy.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('apps/test-ui-lib/src/e2e/test-ui-lib/test-ui-lib.cy.ts') appTree.exists('test-ui-lib/src/e2e/test-ui-lib/test-ui-lib.cy.ts')
).toBeFalsy(); ).toBeFalsy();
}); });
@ -179,8 +179,8 @@ describe('react:component-cypress-spec', () => {
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
}); });
appTree.delete(`apps/other-e2e/cypress.config.ts`); appTree.delete(`other-e2e/cypress.config.ts`);
appTree.write(`apps/other-e2e/cypress.json`, '{}'); appTree.write(`other-e2e/cypress.json`, '{}');
await componentCypressSpecGenerator(appTree, { await componentCypressSpecGenerator(appTree, {
componentPath: `lib/test-ui-lib.tsx`, componentPath: `lib/test-ui-lib.tsx`,
project: 'test-ui-lib', project: 'test-ui-lib',
@ -188,12 +188,12 @@ describe('react:component-cypress-spec', () => {
}); });
expect( expect(
appTree.exists( appTree.exists(
'apps/other-e2e/src/integration/test-ui-lib/test-ui-lib.spec.ts' 'other-e2e/src/integration/test-ui-lib/test-ui-lib.spec.ts'
) )
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-lib/src/integration/test-ui-lib/test-ui-lib.spec.ts' 'test-ui-lib/src/integration/test-ui-lib/test-ui-lib.spec.ts'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -203,7 +203,7 @@ export async function createTestUILib(
libName: string, libName: string,
plainJS = false plainJS = false
): Promise<Tree> { ): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, { await libraryGenerator(appTree, {
name: libName, name: libName,
linter: Linter.EsLint, linter: Linter.EsLint,
@ -213,6 +213,7 @@ export async function createTestUILib(
skipTsConfig: false, skipTsConfig: false,
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
// create some Nx app that we'll use to generate the cypress // create some Nx app that we'll use to generate the cypress
@ -225,6 +226,7 @@ export async function createTestUILib(
skipFormat: true, skipFormat: true,
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
return appTree; return appTree;

19
packages/react/src/generators/component-story/component-story.spec.ts
View File

@ -6,8 +6,8 @@ import { Linter } from '@nx/linter';
describe('react:component-story', () => { describe('react:component-story', () => {
let appTree: Tree; let appTree: Tree;
let cmpPath = 'libs/test-ui-lib/src/lib/test-ui-lib.tsx'; let cmpPath = 'test-ui-lib/src/lib/test-ui-lib.tsx';
let storyFilePath = 'libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx'; let storyFilePath = 'test-ui-lib/src/lib/test-ui-lib.stories.tsx';
describe('default setup', () => { describe('default setup', () => {
beforeEach(async () => { beforeEach(async () => {
@ -31,7 +31,7 @@ describe('react:component-story', () => {
}); });
} catch (e) { } catch (e) {
expect(e.message).toContain( expect(e.message).toContain(
'Could not find any React component in file libs/test-ui-lib/src/lib/test-ui-lib.tsx' 'Could not find any React component in file test-ui-lib/src/lib/test-ui-lib.tsx'
); );
} }
}); });
@ -56,11 +56,11 @@ describe('react:component-story', () => {
describe('when using plain JS components', () => { describe('when using plain JS components', () => {
let storyFilePathPlain = let storyFilePathPlain =
'libs/test-ui-lib/src/lib/test-ui-libplain.stories.jsx'; 'test-ui-lib/src/lib/test-ui-libplain.stories.jsx';
beforeEach(async () => { beforeEach(async () => {
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/test-ui-libplain.jsx', 'test-ui-lib/src/lib/test-ui-libplain.jsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -494,11 +494,11 @@ describe('react:component-story', () => {
}); });
const storyFilePathOne = const storyFilePathOne =
'libs/test-ui-lib/src/lib/test-ui-lib--One.stories.tsx'; 'test-ui-lib/src/lib/test-ui-lib--One.stories.tsx';
const storyFilePathTwo = const storyFilePathTwo =
'libs/test-ui-lib/src/lib/test-ui-lib--Two.stories.tsx'; 'test-ui-lib/src/lib/test-ui-lib--Two.stories.tsx';
const storyFilePathThree = const storyFilePathThree =
'libs/test-ui-lib/src/lib/test-ui-lib--Three.stories.tsx'; 'test-ui-lib/src/lib/test-ui-lib--Three.stories.tsx';
expect(appTree.read(storyFilePathOne, 'utf-8')).toMatchSnapshot(); expect(appTree.read(storyFilePathOne, 'utf-8')).toMatchSnapshot();
expect(appTree.read(storyFilePathTwo, 'utf-8')).toMatchSnapshot(); expect(appTree.read(storyFilePathTwo, 'utf-8')).toMatchSnapshot();
expect(appTree.read(storyFilePathThree, 'utf-8')).toMatchSnapshot(); expect(appTree.read(storyFilePathThree, 'utf-8')).toMatchSnapshot();
@ -524,7 +524,7 @@ describe('react:component-story', () => {
}); });
export async function createTestUILib(libName: string): Promise<Tree> { export async function createTestUILib(libName: string): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, { await libraryGenerator(appTree, {
name: libName, name: libName,
linter: Linter.EsLint, linter: Linter.EsLint,
@ -533,6 +533,7 @@ export async function createTestUILib(libName: string): Promise<Tree> {
skipTsConfig: false, skipTsConfig: false,
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
const currentWorkspaceJson = getProjects(appTree); const currentWorkspaceJson = getProjects(appTree);

86
packages/react/src/generators/component-test/component-test.spec.ts
View File

@ -12,7 +12,7 @@ describe(componentTestGenerator.name, () => {
ReturnType<typeof assertMinimumCypressVersion> ReturnType<typeof assertMinimumCypressVersion>
> = assertMinimumCypressVersion as never; > = assertMinimumCypressVersion as never;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should create component test for tsx files', async () => { it('should create component test for tsx files', async () => {
mockedAssertMinimumCypressVersion.mockReturnValue(); mockedAssertMinimumCypressVersion.mockReturnValue();
@ -31,7 +31,7 @@ describe(componentTestGenerator.name, () => {
componentPath: 'lib/some-lib.tsx', componentPath: 'lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
}); });
it('should create component test for js files', async () => { it('should create component test for js files', async () => {
@ -52,7 +52,7 @@ describe(componentTestGenerator.name, () => {
componentPath: 'lib/some-lib.js', componentPath: 'lib/some-lib.js',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.js')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.js')).toBeTruthy();
}); });
it('should not overwrite exising component test', async () => { it('should not overwrite exising component test', async () => {
@ -66,13 +66,13 @@ describe(componentTestGenerator.name, () => {
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
}); });
tree.write('libs/some-lib/src/lib/some-lib.cy.tsx', 'existing content'); tree.write('some-lib/src/lib/some-lib.cy.tsx', 'existing content');
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'lib/some-lib.tsx', componentPath: 'lib/some-lib.tsx',
}); });
expect(tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8')).toEqual( expect(tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')).toEqual(
'existing content' 'existing content'
); );
}); });
@ -111,10 +111,10 @@ describe(componentTestGenerator.name, () => {
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
}); });
describe('multiple components per file', () => { describe('multiple components per file', () => {
@ -131,9 +131,9 @@ describe(componentTestGenerator.name, () => {
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
${tree.read('libs/some-lib/src/lib/some-lib.tsx')} ${tree.read('some-lib/src/lib/some-lib.tsx')}
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -150,12 +150,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('should handle no props', async () => { it('should handle no props', async () => {
@ -171,9 +171,9 @@ export function AnotherCmp(props: AnotherCmpProps) {
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
${tree.read('libs/some-lib/src/lib/some-lib.tsx')} ${tree.read('some-lib/src/lib/some-lib.tsx')}
export function AnotherCmp() { export function AnotherCmp() {
return <button>AnotherCmp</button>; return <button>AnotherCmp</button>;
@ -182,12 +182,12 @@ export function AnotherCmp() {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('should handle default export', async () => { it('should handle default export', async () => {
@ -200,10 +200,11 @@ export function AnotherCmp() {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -224,12 +225,12 @@ export function AnotherCmp2() {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
@ -243,10 +244,11 @@ export function AnotherCmp2() {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -267,12 +269,12 @@ export function AnotherCmp2() {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
}); });
@ -288,10 +290,11 @@ export function AnotherCmp2() {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -308,12 +311,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('should handle no props', async () => { it('should handle no props', async () => {
@ -327,15 +330,16 @@ export function AnotherCmp(props: AnotherCmpProps) {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('should handle default export', async () => { it('should handle default export', async () => {
@ -348,10 +352,11 @@ export function AnotherCmp(props: AnotherCmpProps) {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -368,12 +373,12 @@ export default function AnotherCmp(props: AnotherCmpProps) {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('should handle named exports', async () => { it('should handle named exports', async () => {
@ -386,10 +391,11 @@ export default function AnotherCmp(props: AnotherCmpProps) {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
tree.write( tree.write(
'libs/some-lib/src/lib/some-lib.tsx', 'some-lib/src/lib/some-lib.tsx',
` `
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface AnotherCmpProps { export interface AnotherCmpProps {
@ -406,12 +412,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
); );
await componentTestGenerator(tree, { await componentTestGenerator(tree, {
project: 'some-lib', project: 'some-lib',
componentPath: 'libs/some-lib/src/lib/some-lib.tsx', componentPath: 'some-lib/src/lib/some-lib.tsx',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
expect( expect(
tree.read('libs/some-lib/src/lib/some-lib.cy.tsx', 'utf-8') tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
}); });

158
packages/react/src/generators/component/component.spec.ts
View File

@ -3,9 +3,11 @@ import { logger, readJson, Tree } from '@nx/devkit';
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
import { createApp, createLib } from '../../utils/testing-generators'; import { createApp, createLib } from '../../utils/testing-generators';
import { componentGenerator } from './component'; import { componentGenerator } from './component';
// need to mock cypress otherwise it'll use the nx installed version from package.json // need to mock cypress otherwise it'll use the nx installed version from package.json
// which is v9 while we are testing for the new v10 version // which is v9 while we are testing for the new v10 version
jest.mock('@nx/cypress/src/utils/cypress-version'); jest.mock('@nx/cypress/src/utils/cypress-version');
describe('component', () => { describe('component', () => {
let appTree: Tree; let appTree: Tree;
let projectName: string; let projectName: string;
@ -16,7 +18,7 @@ describe('component', () => {
beforeEach(async () => { beforeEach(async () => {
mockedInstalledCypressVersion.mockReturnValue(10); mockedInstalledCypressVersion.mockReturnValue(10);
projectName = 'my-lib'; projectName = 'my-lib';
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); appTree = createTreeWithEmptyWorkspace();
await createApp(appTree, 'my-app'); await createApp(appTree, 'my-app');
await createLib(appTree, projectName); await createLib(appTree, projectName);
jest.spyOn(logger, 'warn').mockImplementation(() => {}); jest.spyOn(logger, 'warn').mockImplementation(() => {});
@ -34,19 +36,17 @@ describe('component', () => {
project: projectName, project: projectName,
}); });
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')).toBeTruthy(); expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx') appTree.exists('my-lib/src/lib/hello/hello.module.css')
).toBeTruthy(); ).toBeTruthy();
expect( expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css') /import styles from '.\/hello.module.css'/
).toBeTruthy(); );
expect( expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString() /<div className={styles\['container']}>/
).toMatch(/import styles from '.\/hello.module.css'/); );
expect(
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
).toMatch(/<div className={styles\['container']}>/);
}); });
it('should generate files with global CSS', async () => { it('should generate files with global CSS', async () => {
@ -57,20 +57,16 @@ describe('component', () => {
globalCss: true, globalCss: true,
}); });
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')).toBeTruthy(); expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect( expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
appTree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx') expect(appTree.exists('my-lib/src/lib/hello/hello.css')).toBeTruthy();
).toBeTruthy(); expect(appTree.exists('my-lib/src/lib/hello/hello.module.css')).toBeFalsy();
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.css')).toBeTruthy(); expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
expect( /import '.\/hello.css'/
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css') );
).toBeFalsy(); expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
expect( /<div>/
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString() );
).toMatch(/import '.\/hello.css'/);
expect(
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
).toMatch(/<div>/);
}); });
it('should generate files for an app', async () => { it('should generate files for an app', async () => {
@ -80,12 +76,10 @@ describe('component', () => {
project: 'my-app', project: 'my-app',
}); });
expect(appTree.exists('apps/my-app/src/app/hello/hello.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/hello/hello.spec.tsx')).toBeTruthy();
expect( expect(
appTree.exists('apps/my-app/src/app/hello/hello.spec.tsx') appTree.exists('my-app/src/app/hello/hello.module.css')
).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/hello/hello.module.css')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -97,14 +91,10 @@ describe('component', () => {
globalCss: true, globalCss: true,
}); });
expect(appTree.exists('apps/my-app/src/app/hello/hello.tsx')).toBeTruthy(); expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy();
expect( expect(appTree.exists('my-app/src/app/hello/hello.spec.tsx')).toBeTruthy();
appTree.exists('apps/my-app/src/app/hello/hello.spec.tsx') expect(appTree.exists('my-app/src/app/hello/hello.css')).toBeTruthy();
).toBeTruthy(); expect(appTree.exists('my-app/src/app/hello/hello.module.css')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/hello/hello.css')).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/hello/hello.module.css')
).toBeFalsy();
}); });
describe('--classComponent', () => { describe('--classComponent', () => {
@ -117,7 +107,7 @@ describe('component', () => {
}); });
const tsxFileContent = appTree.read( const tsxFileContent = appTree.read(
`libs/my-lib/src/lib/hello/hello.tsx/`, `my-lib/src/lib/hello/hello.tsx/`,
'utf-8' 'utf-8'
); );
expect(tsxFileContent).toMatch(/override\srender\(\)/); expect(tsxFileContent).toMatch(/override\srender\(\)/);
@ -133,7 +123,7 @@ describe('component', () => {
export: true, export: true,
}); });
const indexContent = appTree.read('libs/my-lib/src/index.ts', 'utf-8'); const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
expect(indexContent).toMatch(/lib\/hello/); expect(indexContent).toMatch(/lib\/hello/);
}); });
@ -146,7 +136,7 @@ describe('component', () => {
export: true, export: true,
}); });
const indexContent = appTree.read('libs/my-lib/src/index.ts', 'utf-8'); const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
expect(indexContent).not.toMatch(/lib\/hello/); expect(indexContent).not.toMatch(/lib\/hello/);
}); });
@ -160,14 +150,12 @@ describe('component', () => {
project: projectName, project: projectName,
pascalCaseFiles: true, pascalCaseFiles: true,
}); });
expect(appTree.exists('my-lib/src/lib/hello/Hello.tsx')).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.tsx') appTree.exists('my-lib/src/lib/hello/Hello.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.spec.tsx') appTree.exists('my-lib/src/lib/hello/Hello.module.css')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.module.css')
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
@ -182,13 +170,13 @@ describe('component', () => {
pascalCaseDirectory: true, pascalCaseDirectory: true,
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.tsx') appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.tsx')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.spec.tsx') appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.module.css') appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.module.css')
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
@ -200,32 +188,24 @@ describe('component', () => {
project: projectName, project: projectName,
style: 'none', style: 'none',
}); });
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx') appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.css')).toBeFalsy();
expect(appTree.exists('my-lib/src/lib/hello/hello.scss')).toBeFalsy();
expect(appTree.exists('my-lib/src/lib/hello/hello.styl')).toBeFalsy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx') appTree.exists('my-lib/src/lib/hello/hello.module.css')
).toBeTruthy();
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.css')).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.scss')
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styl') appTree.exists('my-lib/src/lib/hello/hello.module.scss')
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css') appTree.exists('my-lib/src/lib/hello/hello.module.styl')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.scss')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.styl')
).toBeFalsy(); ).toBeFalsy();
const content = appTree const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
expect(content).not.toContain('styled-components'); expect(content).not.toContain('styled-components');
expect(content).not.toContain('<StyledHello>'); expect(content).not.toContain('<StyledHello>');
expect(content).not.toContain('@emotion/styled'); expect(content).not.toContain('@emotion/styled');
@ -250,15 +230,11 @@ describe('component', () => {
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styled-components') appTree.exists('my-lib/src/lib/hello/hello.styled-components')
).toBeFalsy(); ).toBeFalsy();
expect( expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
const content = appTree const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
expect(content).toContain('styled-components'); expect(content).toContain('styled-components');
expect(content).toContain('<StyledHello>'); expect(content).toContain('<StyledHello>');
}); });
@ -284,15 +260,11 @@ describe('component', () => {
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.@emotion/styled') appTree.exists('my-lib/src/lib/hello/hello.@emotion/styled')
).toBeFalsy(); ).toBeFalsy();
expect( expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
const content = appTree const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
expect(content).toContain('@emotion/styled'); expect(content).toContain('@emotion/styled');
expect(content).toContain('<StyledHello>'); expect(content).toContain('<StyledHello>');
}); });
@ -319,15 +291,11 @@ describe('component', () => {
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styled-jsx') appTree.exists('my-lib/src/lib/hello/hello.styled-jsx')
).toBeFalsy(); ).toBeFalsy();
expect( expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
const content = appTree const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
expect(content).toContain('<style jsx>'); expect(content).toContain('<style jsx>');
expect(content).not.toContain("styles['container']"); expect(content).not.toContain("styles['container']");
}); });
@ -353,9 +321,7 @@ describe('component', () => {
routing: true, routing: true,
}); });
const content = appTree const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
expect(content).toContain('react-router-dom'); expect(content).toContain('react-router-dom');
expect(content).toMatch(/<Route\s*path="\/"/); expect(content).toMatch(/<Route\s*path="\/"/);
expect(content).toMatch(/<Link\s*to="\/"/); expect(content).toMatch(/<Link\s*to="\/"/);
@ -374,7 +340,7 @@ describe('component', () => {
directory: 'components', directory: 'components',
}); });
expect(appTree.exists('/libs/my-lib/src/components/hello/hello.tsx')); expect(appTree.exists('/my-lib/src/components/hello/hello.tsx'));
}); });
it('should create with nested directories', async () => { it('should create with nested directories', async () => {
@ -385,9 +351,7 @@ describe('component', () => {
directory: 'lib/foo', directory: 'lib/foo',
}); });
expect( expect(appTree.exists('/my-lib/src/lib/foo/hello-world/hello-world.tsx'));
appTree.exists('/libs/my-lib/src/lib/foo/hello-world/hello-world.tsx')
);
}); });
}); });
@ -400,7 +364,7 @@ describe('component', () => {
flat: true, flat: true,
}); });
expect(appTree.exists('/libs/my-lib/src/lib/hello.tsx')); expect(appTree.exists('/my-lib/src/lib/hello.tsx'));
}); });
it('should work with custom directory path', async () => { it('should work with custom directory path', async () => {
await componentGenerator(appTree, { await componentGenerator(appTree, {
@ -411,7 +375,7 @@ describe('component', () => {
directory: 'components', directory: 'components',
}); });
expect(appTree.exists('/libs/my-lib/src/components/hello.tsx')); expect(appTree.exists('/my-lib/src/components/hello.tsx'));
}); });
}); });
}); });

59
packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts
View File

@ -34,7 +34,7 @@ describe('React:CypressComponentTestConfiguration', () => {
ReturnType<typeof assertMinimumCypressVersion> ReturnType<typeof assertMinimumCypressVersion>
> = assertMinimumCypressVersion as never; > = assertMinimumCypressVersion as never;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
afterEach(() => { afterEach(() => {
@ -52,6 +52,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -61,6 +62,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
projectGraph = { projectGraph = {
@ -93,7 +95,7 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build', buildTarget: 'my-app:build',
}); });
const config = tree.read('libs/some-lib/cypress.config.ts', 'utf-8'); const config = tree.read('some-lib/cypress.config.ts', 'utf-8');
expect(config).toMatchSnapshot(); expect(config).toMatchSnapshot();
}); });
@ -108,6 +110,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -117,6 +120,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
// --build-target still needs to build the graph in order for readTargetOptions to work // --build-target still needs to build the graph in order for readTargetOptions to work
projectGraph = { projectGraph = {
@ -149,7 +153,7 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build', buildTarget: 'my-app:build',
}); });
const config = tree.read('libs/some-lib/cypress.config.ts', 'utf-8'); const config = tree.read('some-lib/cypress.config.ts', 'utf-8');
expect(config).toMatchSnapshot(); expect(config).toMatchSnapshot();
expect( expect(
@ -157,7 +161,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({ ).toEqual({
executor: '@nx/cypress:cypress', executor: '@nx/cypress:cypress',
options: { options: {
cypressConfig: 'libs/some-lib/cypress.config.ts', cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build', devServerTarget: 'my-app:build',
skipServe: true, skipServe: true,
testingType: 'component', testingType: 'component',
@ -175,6 +179,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -184,6 +189,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
projectGraph = { projectGraph = {
@ -215,7 +221,7 @@ describe('React:CypressComponentTestConfiguration', () => {
generateTests: false, generateTests: false,
}); });
const config = tree.read('libs/some-lib/cypress.config.ts', 'utf-8'); const config = tree.read('some-lib/cypress.config.ts', 'utf-8');
expect(config).toMatchSnapshot(); expect(config).toMatchSnapshot();
expect( expect(
@ -223,7 +229,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({ ).toEqual({
executor: '@nx/cypress:cypress', executor: '@nx/cypress:cypress',
options: { options: {
cypressConfig: 'libs/some-lib/cypress.config.ts', cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build', devServerTarget: 'my-app:build',
skipServe: true, skipServe: true,
testingType: 'component', testingType: 'component',
@ -241,6 +247,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'webpack', bundler: 'webpack',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -250,6 +257,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
projectGraph = { projectGraph = {
@ -281,7 +289,7 @@ describe('React:CypressComponentTestConfiguration', () => {
generateTests: false, generateTests: false,
}); });
const config = tree.read('libs/some-lib/cypress.config.ts', 'utf-8'); const config = tree.read('some-lib/cypress.config.ts', 'utf-8');
expect(config).toMatchSnapshot(); expect(config).toMatchSnapshot();
expect( expect(
@ -289,7 +297,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({ ).toEqual({
executor: '@nx/cypress:cypress', executor: '@nx/cypress:cypress',
options: { options: {
cypressConfig: 'libs/some-lib/cypress.config.ts', cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build', devServerTarget: 'my-app:build',
skipServe: true, skipServe: true,
testingType: 'component', testingType: 'component',
@ -306,6 +314,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -315,6 +324,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'jest', unitTestRunner: 'jest',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
await componentGenerator(tree, { await componentGenerator(tree, {
name: 'another-cmp', name: 'another-cmp',
@ -328,20 +338,17 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build', buildTarget: 'my-app:build',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
const compTest = tree.read( const compTest = tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8');
'libs/some-lib/src/lib/some-lib.cy.tsx',
'utf-8'
);
expect(compTest).toMatchSnapshot(); expect(compTest).toMatchSnapshot();
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
const compTestNested = tree.read( const compTestNested = tree.read(
'libs/some-lib/src/lib/another-cmp/another-cmp.cy.tsx', 'some-lib/src/lib/another-cmp/another-cmp.cy.tsx',
'utf-8' 'utf-8'
); );
expect(compTestNested).toMatchSnapshot(); expect(compTestNested).toMatchSnapshot();
expect( expect(
tree.exists('libs/some-lib/src/lib/another-cmp/another-cmp.spec.cy.tsx') tree.exists('some-lib/src/lib/another-cmp/another-cmp.spec.cy.tsx')
).toBeFalsy(); ).toBeFalsy();
}); });
it('should generate tests for existing js components', async () => { it('should generate tests for existing js components', async () => {
@ -354,6 +361,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -363,6 +371,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'jest', unitTestRunner: 'jest',
js: true, js: true,
projectNameAndRootFormat: 'as-provided',
}); });
await componentGenerator(tree, { await componentGenerator(tree, {
name: 'some-cmp', name: 'some-cmp',
@ -384,19 +393,19 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build', buildTarget: 'my-app:build',
}); });
expect(tree.exists('libs/some-lib/src/lib/some-cmp.cy.js')).toBeTruthy(); expect(tree.exists('some-lib/src/lib/some-cmp.cy.js')).toBeTruthy();
const compTest = tree.read('libs/some-lib/src/lib/some-cmp.cy.js', 'utf-8'); const compTest = tree.read('some-lib/src/lib/some-cmp.cy.js', 'utf-8');
expect(compTest).toMatchSnapshot(); expect(compTest).toMatchSnapshot();
expect( expect(
tree.exists('libs/some-lib/src/lib/another-cmp/another-cmp.cy.js') tree.exists('some-lib/src/lib/another-cmp/another-cmp.cy.js')
).toBeTruthy(); ).toBeTruthy();
const compTestNested = tree.read( const compTestNested = tree.read(
'libs/some-lib/src/lib/another-cmp/another-cmp.cy.js', 'some-lib/src/lib/another-cmp/another-cmp.cy.js',
'utf-8' 'utf-8'
); );
expect(compTestNested).toMatchSnapshot(); expect(compTestNested).toMatchSnapshot();
expect( expect(
tree.exists('libs/some-lib/src/lib/another-cmp/another-cmp.spec.cy.js') tree.exists('some-lib/src/lib/another-cmp/another-cmp.spec.cy.js')
).toBeFalsy(); ).toBeFalsy();
}); });
@ -410,6 +419,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
name: 'some-lib', name: 'some-lib',
@ -418,6 +428,7 @@ describe('React:CypressComponentTestConfiguration', () => {
linter: Linter.None, linter: Linter.None,
skipFormat: false, skipFormat: false,
skipTsConfig: false, skipTsConfig: false,
projectNameAndRootFormat: 'as-provided',
}); });
const appConfig = readProjectConfiguration(tree, 'my-app'); const appConfig = readProjectConfiguration(tree, 'my-app');
appConfig.targets['build'].executor = 'something/else'; appConfig.targets['build'].executor = 'something/else';
@ -464,6 +475,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -473,6 +485,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss', style: 'scss',
unitTestRunner: 'none', unitTestRunner: 'none',
component: true, component: true,
projectNameAndRootFormat: 'as-provided',
}); });
projectGraph = { projectGraph = {
@ -505,7 +518,7 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build', buildTarget: 'my-app:build',
}); });
const config = tree.read('libs/some-lib/cypress.config.ts', 'utf-8'); const config = tree.read('some-lib/cypress.config.ts', 'utf-8');
expect(config).toMatchInlineSnapshot(` expect(config).toMatchInlineSnapshot(`
"import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing'; "import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
import { defineConfig } from 'cypress'; import { defineConfig } from 'cypress';
@ -515,7 +528,7 @@ describe('React:CypressComponentTestConfiguration', () => {
}); });
" "
`); `);
expect(tree.read('libs/some-lib/cypress/support/component.ts', 'utf-8')) expect(tree.read('some-lib/cypress/support/component.ts', 'utf-8'))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"import { mount } from 'cypress/react18'; "import { mount } from 'cypress/react18';
// *********************************************************** // ***********************************************************

48
packages/react/src/generators/hook/hook.spec.ts
View File

@ -9,7 +9,7 @@ describe('hook', () => {
beforeEach(async () => { beforeEach(async () => {
projectName = 'my-lib'; projectName = 'my-lib';
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); appTree = createTreeWithEmptyWorkspace();
await createApp(appTree, 'my-app'); await createApp(appTree, 'my-app');
await createLib(appTree, projectName); await createLib(appTree, projectName);
jest.spyOn(logger, 'warn').mockImplementation(() => {}); jest.spyOn(logger, 'warn').mockImplementation(() => {});
@ -26,11 +26,9 @@ describe('hook', () => {
project: projectName, project: projectName,
}); });
expect(appTree.exists('my-lib/src/lib/use-form/use-form.ts')).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-form/use-form.ts') appTree.exists('my-lib/src/lib/use-form/use-form.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/use-form/use-form.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -40,11 +38,9 @@ describe('hook', () => {
project: 'my-app', project: 'my-app',
}); });
expect(appTree.exists('my-app/src/app/use-form/use-form.ts')).toBeTruthy();
expect( expect(
appTree.exists('apps/my-app/src/app/use-form/use-form.ts') appTree.exists('my-app/src/app/use-form/use-form.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/use-form/use-form.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -56,10 +52,10 @@ describe('hook', () => {
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.ts') appTree.exists('my-lib/src/lib/use-hello/use-hello.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.spec.tsx') appTree.exists('my-lib/src/lib/use-hello/use-hello.spec.tsx')
).toBeFalsy(); ).toBeFalsy();
}); });
@ -70,10 +66,10 @@ describe('hook', () => {
skipTests: true, skipTests: true,
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.ts') appTree.exists('my-lib/src/lib/use-hello/use-hello.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.spec.tsx') appTree.exists('my-lib/src/lib/use-hello/use-hello.spec.tsx')
).toBeFalsy(); ).toBeFalsy();
}); });
@ -85,7 +81,7 @@ describe('hook', () => {
export: true, export: true,
}); });
const indexContent = appTree.read('libs/my-lib/src/index.ts', 'utf-8'); const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
expect(indexContent).toMatch(/lib\/use-hello/); expect(indexContent).toMatch(/lib\/use-hello/);
}); });
@ -97,7 +93,7 @@ describe('hook', () => {
export: true, export: true,
}); });
const indexContent = appTree.read('libs/my-lib/src/index.ts', 'utf-8'); const indexContent = appTree.read('my-lib/src/index.ts', 'utf-8');
expect(indexContent).not.toMatch(/lib\/use-hello/); expect(indexContent).not.toMatch(/lib\/use-hello/);
}); });
@ -111,10 +107,10 @@ describe('hook', () => {
skipTests: true, skipTests: true,
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.ts') appTree.exists('my-lib/src/lib/use-hello/use-hello.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/use-hello.spec.tsx') appTree.exists('my-lib/src/lib/use-hello/use-hello.spec.tsx')
).toBeFalsy(); ).toBeFalsy();
}); });
}); });
@ -127,10 +123,10 @@ describe('hook', () => {
pascalCaseFiles: true, pascalCaseFiles: true,
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/useHello.ts') appTree.exists('my-lib/src/lib/use-hello/useHello.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/use-hello/useHello.spec.tsx') appTree.exists('my-lib/src/lib/use-hello/useHello.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
@ -144,10 +140,10 @@ describe('hook', () => {
pascalCaseDirectory: true, pascalCaseDirectory: true,
}); });
expect( expect(
appTree.exists('libs/my-lib/src/lib/useHello/useHello.ts') appTree.exists('my-lib/src/lib/useHello/useHello.ts')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists('libs/my-lib/src/lib/useHello/useHello.spec.tsx') appTree.exists('my-lib/src/lib/useHello/useHello.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
@ -161,7 +157,7 @@ describe('hook', () => {
skipTests: true, skipTests: true,
}); });
expect(appTree.exists('/libs/my-lib/src/hooks/use-hello/use-hello.ts')); expect(appTree.exists('/my-lib/src/hooks/use-hello/use-hello.ts'));
}); });
it('should create with nested directories', async () => { it('should create with nested directories', async () => {
@ -173,9 +169,7 @@ describe('hook', () => {
}); });
expect( expect(
appTree.exists( appTree.exists('/my-lib/src/lib/foo/use-hello-world/use-hello-world.ts')
'/libs/my-lib/src/lib/foo/use-hello-world/use-hello-world.ts'
)
); );
}); });
}); });
@ -189,7 +183,7 @@ describe('hook', () => {
skipTests: true, skipTests: true,
}); });
expect(appTree.exists('/libs/my-lib/src/lib/use-hello.ts')); expect(appTree.exists('/my-lib/src/lib/use-hello.ts'));
}); });
it('should work with custom directory path', async () => { it('should work with custom directory path', async () => {
@ -201,7 +195,7 @@ describe('hook', () => {
skipTests: true, skipTests: true,
}); });
expect(appTree.exists('/libs/my-lib/src/hooks/use-hello.ts')); expect(appTree.exists('/my-lib/src/hooks/use-hello.ts'));
}); });
}); });
}); });

39
packages/react/src/generators/host/host.spec.ts
View File

@ -8,7 +8,7 @@ describe('hostGenerator', () => {
let tree: Tree; let tree: Tree;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should generate host files and configs', async () => { it('should generate host files and configs', async () => {
@ -18,24 +18,26 @@ describe('hostGenerator', () => {
linter: Linter.None, linter: Linter.None,
unitTestRunner: 'none', unitTestRunner: 'none',
e2eTestRunner: 'none', e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/test/tsconfig.json')); expect(tree.exists('test/tsconfig.json'));
expect(tree.exists('apps/test/webpack.config.prod.js')); expect(tree.exists('test/webpack.config.prod.js'));
expect(tree.exists('apps/test/webpack.config.js')); expect(tree.exists('test/webpack.config.js'));
expect(tree.exists('apps/test/src/bootstrap.tsx')); expect(tree.exists('test/src/bootstrap.tsx'));
expect(tree.exists('apps/test/src/main.ts')); expect(tree.exists('test/src/main.ts'));
expect(tree.exists('apps/test/src/remotes.d.ts')); expect(tree.exists('test/src/remotes.d.ts'));
}); });
it('should install @nx/web for the file-server executor', async () => { it('should install @nx/web for the file-server executor', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await hostGenerator(tree, { await hostGenerator(tree, {
name: 'test', name: 'test',
style: 'css', style: 'css',
linter: Linter.None, linter: Linter.None,
unitTestRunner: 'none', unitTestRunner: 'none',
e2eTestRunner: 'none', e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
const packageJson = readJson(tree, 'package.json'); const packageJson = readJson(tree, 'package.json');
@ -50,18 +52,19 @@ describe('hostGenerator', () => {
linter: Linter.None, linter: Linter.None,
unitTestRunner: 'none', unitTestRunner: 'none',
e2eTestRunner: 'none', e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/test/tsconfig.json')); expect(tree.exists('test/tsconfig.json'));
expect(tree.exists('apps/test/webpack.config.prod.js')); expect(tree.exists('test/webpack.config.prod.js'));
expect(tree.exists('apps/test/webpack.config.server.js')); expect(tree.exists('test/webpack.config.server.js'));
expect(tree.exists('apps/test/webpack.config.js')); expect(tree.exists('test/webpack.config.js'));
expect(tree.exists('apps/test/src/main.server.tsx')); expect(tree.exists('test/src/main.server.tsx'));
expect(tree.exists('apps/test/src/bootstrap.tsx')); expect(tree.exists('test/src/bootstrap.tsx'));
expect(tree.exists('apps/test/src/main.ts')); expect(tree.exists('test/src/main.ts'));
expect(tree.exists('apps/test/src/remotes.d.ts')); expect(tree.exists('test/src/remotes.d.ts'));
expect(readJson(tree, 'apps/test/tsconfig.server.json')).toEqual({ expect(readJson(tree, 'test/tsconfig.server.json')).toEqual({
compilerOptions: { compilerOptions: {
outDir: '../../out-tsc/server', outDir: '../../out-tsc/server',
target: 'es2019', target: 'es2019',
@ -73,7 +76,7 @@ describe('hostGenerator', () => {
}); });
it('should generate a host and remotes in a directory correctly when using --projectNameAndRootFormat=as-provided', async () => { it('should generate a host and remotes in a directory correctly when using --projectNameAndRootFormat=as-provided', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await hostGenerator(tree, { await hostGenerator(tree, {
name: 'hostApp', name: 'hostApp',

2
packages/react/src/generators/init/init.spec.ts
View File

@ -12,7 +12,7 @@ describe('init', () => {
}; };
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should add react dependencies', async () => { it('should add react dependencies', async () => {

156
packages/react/src/generators/library/library.spec.ts
View File

@ -34,7 +34,7 @@ describe('lib', () => {
beforeEach(() => { beforeEach(() => {
mockedInstalledCypressVersion.mockReturnValue(10); mockedInstalledCypressVersion.mockReturnValue(10);
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
updateJson(tree, '/package.json', (json) => { updateJson(tree, '/package.json', (json) => {
json.devDependencies = { json.devDependencies = {
'@nx/cypress': nxVersion, '@nx/cypress': nxVersion,
@ -50,13 +50,13 @@ describe('lib', () => {
it('should update project configuration', async () => { it('should update project configuration', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const project = readProjectConfiguration(tree, 'my-lib'); const project = readProjectConfiguration(tree, 'my-lib');
expect(project.root).toEqual('libs/my-lib'); expect(project.root).toEqual('my-lib');
expect(project.targets.build).toBeUndefined(); expect(project.targets.build).toBeUndefined();
expect(project.targets.lint).toEqual({ expect(project.targets.lint).toEqual({
executor: '@nx/linter:eslint', executor: '@nx/linter:eslint',
outputs: ['{options.outputFile}'], outputs: ['{options.outputFile}'],
options: { options: {
lintFilePatterns: ['libs/my-lib/**/*.{ts,tsx,js,jsx}'], lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx}'],
}, },
}); });
}); });
@ -67,9 +67,9 @@ describe('lib', () => {
bundler: 'vite', bundler: 'vite',
unitTestRunner: 'vitest', unitTestRunner: 'vitest',
}); });
const tsconfigApp = readJson(tree, 'libs/my-lib/tsconfig.lib.json'); const tsconfigApp = readJson(tree, 'my-lib/tsconfig.lib.json');
expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']); expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']);
const tsconfigSpec = readJson(tree, 'libs/my-lib/tsconfig.spec.json'); const tsconfigSpec = readJson(tree, 'my-lib/tsconfig.spec.json');
expect(tsconfigSpec.compilerOptions.types).toEqual([ expect(tsconfigSpec.compilerOptions.types).toEqual([
'vitest/globals', 'vitest/globals',
'vitest/importMeta', 'vitest/importMeta',
@ -105,7 +105,7 @@ describe('lib', () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, '/tsconfig.base.json'); const tsconfigJson = readJson(tree, '/tsconfig.base.json');
expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
'libs/my-lib/src/index.ts', 'my-lib/src/index.ts',
]); ]);
}); });
@ -117,7 +117,7 @@ describe('lib', () => {
expect(tree.exists('tsconfig.base.json')).toEqual(true); expect(tree.exists('tsconfig.base.json')).toEqual(true);
const tsconfigJson = readJson(tree, 'tsconfig.base.json'); const tsconfigJson = readJson(tree, 'tsconfig.base.json');
expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
'libs/my-lib/src/index.ts', 'my-lib/src/index.ts',
]); ]);
}); });
@ -130,15 +130,15 @@ describe('lib', () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, '/tsconfig.base.json'); const tsconfigJson = readJson(tree, '/tsconfig.base.json');
expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([
'libs/my-lib/src/index.ts', 'my-lib/src/index.ts',
]); ]);
}); });
it('should create a local tsconfig.json', async () => { it('should create a local tsconfig.json', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.json'); const tsconfigJson = readJson(tree, 'my-lib/tsconfig.json');
expect(tsconfigJson.extends).toBe('../../tsconfig.base.json'); expect(tsconfigJson.extends).toBe('../tsconfig.base.json');
expect(tsconfigJson.references).toEqual([ expect(tsconfigJson.references).toEqual([
{ {
path: './tsconfig.lib.json', path: './tsconfig.lib.json',
@ -152,19 +152,19 @@ describe('lib', () => {
it('should extend the local tsconfig.json with tsconfig.spec.json', async () => { it('should extend the local tsconfig.json with tsconfig.spec.json', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.spec.json'); const tsconfigJson = readJson(tree, 'my-lib/tsconfig.spec.json');
expect(tsconfigJson.extends).toEqual('./tsconfig.json'); expect(tsconfigJson.extends).toEqual('./tsconfig.json');
}); });
it('should extend the local tsconfig.json with tsconfig.lib.json', async () => { it('should extend the local tsconfig.json with tsconfig.lib.json', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.lib.json'); const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json');
expect(tsconfigJson.extends).toEqual('./tsconfig.json'); expect(tsconfigJson.extends).toEqual('./tsconfig.json');
}); });
it('should ignore test files in tsconfig.lib.json', async () => { it('should ignore test files in tsconfig.lib.json', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.lib.json'); const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json');
expect(tsconfigJson.exclude).toEqual([ expect(tsconfigJson.exclude).toEqual([
'jest.config.ts', 'jest.config.ts',
'src/**/*.spec.ts', 'src/**/*.spec.ts',
@ -180,19 +180,19 @@ describe('lib', () => {
it('should generate files', async () => { it('should generate files', async () => {
await libraryGenerator(tree, defaultSchema); await libraryGenerator(tree, defaultSchema);
expect(tree.exists('libs/my-lib/package.json')).toBeFalsy(); expect(tree.exists('my-lib/package.json')).toBeFalsy();
expect(tree.exists(`libs/my-lib/jest.config.ts`)).toBeTruthy(); expect(tree.exists(`my-lib/jest.config.ts`)).toBeTruthy();
expect(tree.exists('libs/my-lib/src/index.ts')).toBeTruthy(); expect(tree.exists('my-lib/src/index.ts')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.tsx')).toBeTruthy(); expect(tree.exists('my-lib/src/lib/my-lib.tsx')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.module.css')).toBeTruthy(); expect(tree.exists('my-lib/src/lib/my-lib.module.css')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.spec.tsx')).toBeTruthy(); expect(tree.exists('my-lib/src/lib/my-lib.spec.tsx')).toBeTruthy();
const eslintJson = readJson(tree, 'libs/my-lib/.eslintrc.json'); const eslintJson = readJson(tree, 'my-lib/.eslintrc.json');
expect(eslintJson).toMatchInlineSnapshot(` expect(eslintJson).toMatchInlineSnapshot(`
{ {
"extends": [ "extends": [
"plugin:@nx/react", "plugin:@nx/react",
"../../.eslintrc.json", "../.eslintrc.json",
], ],
"ignorePatterns": [ "ignorePatterns": [
"!**/*", "!**/*",
@ -231,7 +231,7 @@ describe('lib', () => {
buildable: true, buildable: true,
compiler: 'babel', compiler: 'babel',
}); });
expect(tree.read('libs/my-lib/jest.config.ts', 'utf-8')).toContain( expect(tree.read('my-lib/jest.config.ts', 'utf-8')).toContain(
"['babel-jest', { presets: ['@nx/react/babel'] }]" "['babel-jest', { presets: ['@nx/react/babel'] }]"
); );
}); });
@ -279,16 +279,16 @@ describe('lib', () => {
it('should generate files', async () => { it('should generate files', async () => {
await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' });
expect(tree.exists(`libs/my-dir/my-lib/jest.config.ts`)).toBeTruthy(); expect(tree.exists(`my-dir/my-lib/jest.config.ts`)).toBeTruthy();
expect(tree.exists('libs/my-dir/my-lib/src/index.ts')).toBeTruthy(); expect(tree.exists('my-dir/my-lib/src/index.ts')).toBeTruthy();
expect( expect(
tree.exists('libs/my-dir/my-lib/src/lib/my-dir-my-lib.tsx') tree.exists('my-dir/my-lib/src/lib/my-dir-my-lib.tsx')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
tree.exists('libs/my-dir/my-lib/src/lib/my-dir-my-lib.module.css') tree.exists('my-dir/my-lib/src/lib/my-dir-my-lib.module.css')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
tree.exists('libs/my-dir/my-lib/src/lib/my-dir-my-lib.spec.tsx') tree.exists('my-dir/my-lib/src/lib/my-dir-my-lib.spec.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -299,7 +299,7 @@ describe('lib', () => {
buildable: true, buildable: true,
compiler: 'babel', compiler: 'babel',
}); });
expect(tree.read('libs/my-dir/my-lib/jest.config.ts', 'utf-8')).toContain( expect(tree.read('my-dir/my-lib/jest.config.ts', 'utf-8')).toContain(
"['babel-jest', { presets: ['@nx/react/babel'] }]" "['babel-jest', { presets: ['@nx/react/babel'] }]"
); );
}); });
@ -308,12 +308,12 @@ describe('lib', () => {
await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' });
const config = readProjectConfiguration(tree, 'my-dir-my-lib'); const config = readProjectConfiguration(tree, 'my-dir-my-lib');
expect(config.root).toEqual('libs/my-dir/my-lib'); expect(config.root).toEqual('my-dir/my-lib');
expect(config.targets.lint).toEqual({ expect(config.targets.lint).toEqual({
executor: '@nx/linter:eslint', executor: '@nx/linter:eslint',
outputs: ['{options.outputFile}'], outputs: ['{options.outputFile}'],
options: { options: {
lintFilePatterns: ['libs/my-dir/my-lib/**/*.{ts,tsx,js,jsx}'], lintFilePatterns: ['my-dir/my-lib/**/*.{ts,tsx,js,jsx}'],
}, },
}); });
}); });
@ -322,7 +322,7 @@ describe('lib', () => {
await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' });
const tsconfigJson = readJson(tree, '/tsconfig.base.json'); const tsconfigJson = readJson(tree, '/tsconfig.base.json');
expect(tsconfigJson.compilerOptions.paths['@proj/my-dir/my-lib']).toEqual( expect(tsconfigJson.compilerOptions.paths['@proj/my-dir/my-lib']).toEqual(
['libs/my-dir/my-lib/src/index.ts'] ['my-dir/my-lib/src/index.ts']
); );
expect( expect(
tsconfigJson.compilerOptions.paths['my-dir-my-lib/*'] tsconfigJson.compilerOptions.paths['my-dir-my-lib/*']
@ -332,8 +332,8 @@ describe('lib', () => {
it('should create a local tsconfig.json', async () => { it('should create a local tsconfig.json', async () => {
await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' });
const tsconfigJson = readJson(tree, 'libs/my-dir/my-lib/tsconfig.json'); const tsconfigJson = readJson(tree, 'my-dir/my-lib/tsconfig.json');
expect(tsconfigJson.extends).toBe('../../../tsconfig.base.json'); expect(tsconfigJson.extends).toBe('../../tsconfig.base.json');
expect(tsconfigJson.references).toEqual([ expect(tsconfigJson.references).toEqual([
{ {
path: './tsconfig.lib.json', path: './tsconfig.lib.json',
@ -349,9 +349,7 @@ describe('lib', () => {
it('should use scss for styles', async () => { it('should use scss for styles', async () => {
await libraryGenerator(tree, { ...defaultSchema, style: 'scss' }); await libraryGenerator(tree, { ...defaultSchema, style: 'scss' });
expect( expect(tree.exists('my-lib/src/lib/my-lib.module.scss')).toBeTruthy();
tree.exists('libs/my-lib/src/lib/my-lib.module.scss')
).toBeTruthy();
}); });
}); });
@ -359,16 +357,16 @@ describe('lib', () => {
it('should not use styles when style none', async () => { it('should not use styles when style none', async () => {
await libraryGenerator(tree, { ...defaultSchema, style: 'none' }); await libraryGenerator(tree, { ...defaultSchema, style: 'none' });
expect(tree.exists('libs/my-lib/src/lib/my-lib.tsx')).toBeTruthy(); expect(tree.exists('my-lib/src/lib/my-lib.tsx')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.spec.tsx')).toBeTruthy(); expect(tree.exists('my-lib/src/lib/my-lib.spec.tsx')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.css')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.css')).toBeFalsy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.scss')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.scss')).toBeFalsy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.styl')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.styl')).toBeFalsy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.module.css')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.module.css')).toBeFalsy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.module.scss')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.module.scss')).toBeFalsy();
expect(tree.exists('libs/my-lib/src/lib/my-lib.module.styl')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.module.styl')).toBeFalsy();
const content = tree.read('libs/my-lib/src/lib/my-lib.tsx', 'utf-8'); const content = tree.read('my-lib/src/lib/my-lib.tsx', 'utf-8');
expect(content).not.toContain('styled-components'); expect(content).not.toContain('styled-components');
expect(content).not.toContain('<StyledApp>'); expect(content).not.toContain('<StyledApp>');
expect(content).not.toContain('@emotion/styled'); expect(content).not.toContain('@emotion/styled');
@ -388,7 +386,7 @@ describe('lib', () => {
it('should not generate components or styles', async () => { it('should not generate components or styles', async () => {
await libraryGenerator(tree, { ...defaultSchema, component: false }); await libraryGenerator(tree, { ...defaultSchema, component: false });
expect(tree.exists('libs/my-lib/src/lib')).toBeFalsy(); expect(tree.exists('my-lib/src/lib')).toBeFalsy();
}); });
}); });
@ -396,8 +394,8 @@ describe('lib', () => {
it('should not generate .module styles', async () => { it('should not generate .module styles', async () => {
await libraryGenerator(tree, { ...defaultSchema, globalCss: true }); await libraryGenerator(tree, { ...defaultSchema, globalCss: true });
expect(tree.exists('libs/my-lib/src/lib/my-lib.css')); expect(tree.exists('my-lib/src/lib/my-lib.css'));
expect(tree.exists('libs/my-lib/src/lib/my-lib.module.css')).toBeFalsy(); expect(tree.exists('my-lib/src/lib/my-lib.module.css')).toBeFalsy();
}); });
}); });
@ -408,8 +406,8 @@ describe('lib', () => {
unitTestRunner: 'none', unitTestRunner: 'none',
}); });
expect(tree.exists('libs/my-lib/tsconfig.spec.json')).toBeFalsy(); expect(tree.exists('my-lib/tsconfig.spec.json')).toBeFalsy();
expect(tree.exists('libs/my-lib/jest.config.ts')).toBeFalsy(); expect(tree.exists('my-lib/jest.config.ts')).toBeFalsy();
const config = readProjectConfiguration(tree, 'my-lib'); const config = readProjectConfiguration(tree, 'my-lib');
expect(config.targets.test).toBeUndefined(); expect(config.targets.test).toBeUndefined();
expect(config.targets.lint).toMatchInlineSnapshot(` expect(config.targets.lint).toMatchInlineSnapshot(`
@ -417,7 +415,7 @@ describe('lib', () => {
"executor": "@nx/linter:eslint", "executor": "@nx/linter:eslint",
"options": { "options": {
"lintFilePatterns": [ "lintFilePatterns": [
"libs/my-lib/**/*.{ts,tsx,js,jsx}", "my-lib/**/*.{ts,tsx,js,jsx}",
], ],
}, },
"outputs": [ "outputs": [
@ -439,17 +437,18 @@ describe('lib', () => {
name: 'myApp', name: 'myApp',
routing: true, routing: true,
style: 'css', style: 'css',
bundler: 'webpack', bundler: 'webpack',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
...defaultSchema, ...defaultSchema,
appProject: 'my-app', appProject: 'my-app',
projectNameAndRootFormat: 'as-provided',
}); });
const appSource = tree.read('apps/my-app/src/app/app.tsx', 'utf-8'); const appSource = tree.read('my-app/src/app/app.tsx', 'utf-8');
const mainSource = tree.read('apps/my-app/src/main.tsx', 'utf-8'); const mainSource = tree.read('my-app/src/main.tsx', 'utf-8');
expect(mainSource).toContain('react-router-dom'); expect(mainSource).toContain('react-router-dom');
expect(mainSource).toContain('<BrowserRouter>'); expect(mainSource).toContain('<BrowserRouter>');
@ -466,17 +465,18 @@ describe('lib', () => {
unitTestRunner: 'jest', unitTestRunner: 'jest',
name: 'myApp', name: 'myApp',
style: 'css', style: 'css',
bundler: 'webpack', bundler: 'webpack',
projectNameAndRootFormat: 'as-provided',
}); });
await libraryGenerator(tree, { await libraryGenerator(tree, {
...defaultSchema, ...defaultSchema,
appProject: 'my-app', appProject: 'my-app',
projectNameAndRootFormat: 'as-provided',
}); });
const appSource = tree.read('apps/my-app/src/app/app.tsx', 'utf-8'); const appSource = tree.read('my-app/src/app/app.tsx', 'utf-8');
const mainSource = tree.read('apps/my-app/src/main.tsx', 'utf-8'); const mainSource = tree.read('my-app/src/main.tsx', 'utf-8');
expect(mainSource).toContain('react-router-dom'); expect(mainSource).toContain('react-router-dom');
expect(mainSource).toContain('<BrowserRouter>'); expect(mainSource).toContain('<BrowserRouter>');
@ -514,10 +514,10 @@ describe('lib', () => {
outputs: ['{options.outputPath}'], outputs: ['{options.outputPath}'],
options: { options: {
external: ['react', 'react-dom', 'react/jsx-runtime'], external: ['react', 'react-dom', 'react/jsx-runtime'],
entryFile: 'libs/my-lib/src/index.ts', entryFile: 'my-lib/src/index.ts',
outputPath: 'dist/libs/my-lib', outputPath: 'dist/my-lib',
project: 'libs/my-lib/package.json', project: 'my-lib/package.json',
tsConfig: 'libs/my-lib/tsconfig.lib.json', tsConfig: 'my-lib/tsconfig.lib.json',
rollupConfig: '@nx/react/plugins/bundle-rollup', rollupConfig: '@nx/react/plugins/bundle-rollup',
}, },
}); });
@ -548,7 +548,7 @@ describe('lib', () => {
}); });
const config = readProjectConfiguration(tree, 'my-lib'); const config = readProjectConfiguration(tree, 'my-lib');
const babelrc = readJson(tree, 'libs/my-lib/.babelrc'); const babelrc = readJson(tree, 'my-lib/.babelrc');
expect(config.targets.build).toMatchObject({ expect(config.targets.build).toMatchObject({
options: { options: {
@ -569,8 +569,8 @@ describe('lib', () => {
}); });
const config = readProjectConfiguration(tree, 'my-lib'); const config = readProjectConfiguration(tree, 'my-lib');
const babelrc = readJson(tree, 'libs/my-lib/.babelrc'); const babelrc = readJson(tree, 'my-lib/.babelrc');
const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.json'); const tsconfigJson = readJson(tree, 'my-lib/tsconfig.json');
expect(config.targets.build).toMatchObject({ expect(config.targets.build).toMatchObject({
options: { options: {
@ -592,7 +592,7 @@ describe('lib', () => {
}); });
const config = readProjectConfiguration(tree, 'my-lib'); const config = readProjectConfiguration(tree, 'my-lib');
const babelrc = readJson(tree, 'libs/my-lib/.babelrc'); const babelrc = readJson(tree, 'my-lib/.babelrc');
expect(config.targets.build).toMatchObject({ expect(config.targets.build).toMatchObject({
options: { options: {
@ -626,9 +626,9 @@ describe('lib', () => {
importPath: '@proj/my-lib', importPath: '@proj/my-lib',
}); });
const packageJson = readJson(tree, '/libs/my-lib/package.json'); const packageJson = readJson(tree, '/my-lib/package.json');
expect(packageJson.name).toEqual('@proj/my-lib'); expect(packageJson.name).toEqual('@proj/my-lib');
expect(tree.exists('/libs/my-lib/.babelrc')); expect(tree.exists('/my-lib/.babelrc'));
}); });
}); });
@ -639,7 +639,7 @@ describe('lib', () => {
js: true, js: true,
}); });
expect(tree.exists('/libs/my-lib/src/index.js')).toBe(true); expect(tree.exists('/my-lib/src/index.js')).toBe(true);
}); });
}); });
@ -651,7 +651,7 @@ describe('lib', () => {
directory: 'myDir', directory: 'myDir',
importPath: '@myorg/lib', importPath: '@myorg/lib',
}); });
const packageJson = readJson(tree, 'libs/my-dir/my-lib/package.json'); const packageJson = readJson(tree, 'my-dir/my-lib/package.json');
const tsconfigJson = readJson(tree, '/tsconfig.base.json'); const tsconfigJson = readJson(tree, '/tsconfig.base.json');
expect(packageJson.name).toBe('@myorg/lib'); expect(packageJson.name).toBe('@myorg/lib');
@ -691,7 +691,7 @@ describe('lib', () => {
...defaultSchema, ...defaultSchema,
strict: false, strict: false,
}); });
const tsconfigJson = readJson(tree, '/libs/my-lib/tsconfig.json'); const tsconfigJson = readJson(tree, '/my-lib/tsconfig.json');
expect(tsconfigJson.compilerOptions.strict).toEqual(false); expect(tsconfigJson.compilerOptions.strict).toEqual(false);
}); });
@ -736,10 +736,10 @@ describe('lib', () => {
setParserOptionsProject: true, setParserOptionsProject: true,
}); });
const eslintConfig = readJson(tree, 'libs/my-lib/.eslintrc.json'); const eslintConfig = readJson(tree, 'my-lib/.eslintrc.json');
expect(eslintConfig.overrides[0].parserOptions.project).toEqual([ expect(eslintConfig.overrides[0].parserOptions.project).toEqual([
'libs/my-lib/tsconfig.*?.json', 'my-lib/tsconfig.*?.json',
]); ]);
}); });
}); });
@ -752,19 +752,17 @@ describe('lib', () => {
directory: 'myDir', directory: 'myDir',
}); });
const indexFile = tree.read('libs/my-dir/my-lib/src/index.ts', 'utf-8'); const indexFile = tree.read('my-dir/my-lib/src/index.ts', 'utf-8');
expect(indexFile).toContain(`export * from './lib/my-lib';`); expect(indexFile).toContain(`export * from './lib/my-lib';`);
expect( expect(
tree.exists('libs/my-dir/my-lib/src/lib/my-lib.module.css') tree.exists('my-dir/my-lib/src/lib/my-lib.module.css')
).toBeTruthy(); ).toBeTruthy();
expect( expect(tree.exists('my-dir/my-lib/src/lib/my-lib.spec.tsx')).toBeTruthy();
tree.exists('libs/my-dir/my-lib/src/lib/my-lib.spec.tsx')
).toBeTruthy();
expect(tree.exists('libs/my-dir/my-lib/src/lib/my-lib.tsx')).toBeTruthy(); expect(tree.exists('my-dir/my-lib/src/lib/my-lib.tsx')).toBeTruthy();
}); });
}); });
@ -784,7 +782,7 @@ describe('lib', () => {
}); });
expect(() => { expect(() => {
readJson(tree, `libs/my-lib/.babelrc`); readJson(tree, `my-lib/.babelrc`);
}).not.toThrow(); }).not.toThrow();
} }
); );

12
packages/react/src/generators/redux/redux.spec.ts
View File

@ -9,7 +9,7 @@ describe('redux', () => {
let appTree: Tree; let appTree: Tree;
beforeEach(async () => { beforeEach(async () => {
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, { await libraryGenerator(appTree, {
name: 'my-lib', name: 'my-lib',
linter: Linter.EsLint, linter: Linter.EsLint,
@ -17,6 +17,7 @@ describe('redux', () => {
skipTsConfig: false, skipTsConfig: false,
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
}); });
@ -37,11 +38,9 @@ describe('redux', () => {
project: 'my-lib', project: 'my-lib',
}); });
expect(appTree.exists('/my-lib/src/lib/my-slice.slice.ts')).toBeTruthy();
expect( expect(
appTree.exists('/libs/my-lib/src/lib/my-slice.slice.ts') appTree.exists('/my-lib/src/lib/my-slice.slice.spec.ts')
).toBeTruthy();
expect(
appTree.exists('/libs/my-lib/src/lib/my-slice.slice.spec.ts')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -54,6 +53,7 @@ describe('redux', () => {
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
name: 'my-app', name: 'my-app',
projectNameAndRootFormat: 'as-provided',
}); });
await reduxGenerator(appTree, { await reduxGenerator(appTree, {
name: 'my-slice', name: 'my-slice',
@ -71,7 +71,7 @@ describe('redux', () => {
appProject: 'my-app', appProject: 'my-app',
}); });
const main = appTree.read('/apps/my-app/src/main.tsx', 'utf-8'); const main = appTree.read('/my-app/src/main.tsx', 'utf-8');
expect(main).toContain('@reduxjs/toolkit'); expect(main).toContain('@reduxjs/toolkit');
expect(main).toContain('configureStore'); expect(main).toContain('configureStore');
expect(main).toContain('[THIRD_SLICE_FEATURE_KEY]: thirdSliceReducer,'); expect(main).toContain('[THIRD_SLICE_FEATURE_KEY]: thirdSliceReducer,');

13
packages/react/src/generators/remote/remote.spec.ts
View File

@ -5,7 +5,7 @@ import remote from './remote';
describe('remote generator', () => { describe('remote generator', () => {
it('should install @nx/web for the file-server executor', async () => { it('should install @nx/web for the file-server executor', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await remote(tree, { await remote(tree, {
name: 'test', name: 'test',
devServerPort: 4201, devServerPort: 4201,
@ -14,6 +14,7 @@ describe('remote generator', () => {
skipFormat: false, skipFormat: false,
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
const packageJson = readJson(tree, 'package.json'); const packageJson = readJson(tree, 'package.json');
@ -21,7 +22,7 @@ describe('remote generator', () => {
}); });
it('should not set the remote as the default project', async () => { it('should not set the remote as the default project', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await remote(tree, { await remote(tree, {
name: 'test', name: 'test',
devServerPort: 4201, devServerPort: 4201,
@ -30,6 +31,7 @@ describe('remote generator', () => {
skipFormat: false, skipFormat: false,
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
const { defaultProject } = readNxJson(tree); const { defaultProject } = readNxJson(tree);
@ -37,7 +39,7 @@ describe('remote generator', () => {
}); });
it('should generate a remote-specific server.ts file for --ssr', async () => { it('should generate a remote-specific server.ts file for --ssr', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await remote(tree, { await remote(tree, {
name: 'test', name: 'test',
@ -48,10 +50,11 @@ describe('remote generator', () => {
style: 'css', style: 'css',
unitTestRunner: 'jest', unitTestRunner: 'jest',
ssr: true, ssr: true,
projectNameAndRootFormat: 'as-provided',
}); });
const mainFile = tree.read('apps/test/server.ts', 'utf-8'); const mainFile = tree.read('test/server.ts', 'utf-8');
expect(mainFile).toContain(`join(process.cwd(), 'dist/apps/test/browser')`); expect(mainFile).toContain(`join(process.cwd(), 'dist/test/browser')`);
expect(mainFile).toContain('nx.server.ready'); expect(mainFile).toContain('nx.server.ready');
}); });
}); });

1
packages/react/src/generators/setup-ssr/setup-ssr.spec.ts
View File

@ -16,6 +16,7 @@ describe('setupSsrGenerator', () => {
linter: Linter.None, linter: Linter.None,
unitTestRunner: 'none', unitTestRunner: 'none',
e2eTestRunner: 'none', e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
}); });

64
packages/react/src/generators/setup-tailwind/setup-tailwind.spec.ts
View File

@ -20,19 +20,19 @@ describe('setup-tailwind', () => {
${`pages/styles.less`} ${`pages/styles.less`}
${`pages/styles.styl`} ${`pages/styles.styl`}
`('should update stylesheet', async ({ stylesPath }) => { `('should update stylesheet', async ({ stylesPath }) => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: {}, targets: {},
}); });
tree.write(`apps/example/${stylesPath}`, `/* existing content */`); tree.write(`example/${stylesPath}`, `/* existing content */`);
await update(tree, { await update(tree, {
project: 'example', project: 'example',
}); });
expect(tree.read(`apps/example/${stylesPath}`).toString()).toContain( expect(tree.read(`example/${stylesPath}`).toString()).toContain(
stripIndents` stripIndents`
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@ -43,10 +43,10 @@ describe('setup-tailwind', () => {
}); });
it('should add postcss and tailwind config files', async () => { it('should add postcss and tailwind config files', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: { targets: {
build: { build: {
executor: '@nx/webpack:webpack', executor: '@nx/webpack:webpack',
@ -54,7 +54,7 @@ describe('setup-tailwind', () => {
}, },
}, },
}); });
tree.write(`apps/example/src/styles.css`, ``); tree.write(`example/src/styles.css`, ``);
writeJson(tree, 'package.json', { writeJson(tree, 'package.json', {
dependencies: { dependencies: {
react: '999.9.9', react: '999.9.9',
@ -68,56 +68,56 @@ describe('setup-tailwind', () => {
project: 'example', project: 'example',
}); });
expect(tree.exists(`apps/example/postcss.config.js`)).toBeTruthy(); expect(tree.exists(`example/postcss.config.js`)).toBeTruthy();
expect(tree.exists(`apps/example/tailwind.config.js`)).toBeTruthy(); expect(tree.exists(`example/tailwind.config.js`)).toBeTruthy();
expect( expect(
readProjectConfiguration(tree, 'example').targets.build.options readProjectConfiguration(tree, 'example').targets.build.options
.postcssConfig .postcssConfig
).toEqual('apps/example/postcss.config.js'); ).toEqual('example/postcss.config.js');
}); });
it('should skip update if postcss configuration already exists', async () => { it('should skip update if postcss configuration already exists', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: {}, targets: {},
}); });
tree.write(`apps/example/src/styles.css`, ``); tree.write(`example/src/styles.css`, ``);
tree.write('apps/example/postcss.config.js', '// existing'); tree.write('example/postcss.config.js', '// existing');
await update(tree, { project: 'example' }); await update(tree, { project: 'example' });
expect(tree.read('apps/example/postcss.config.js').toString()).toEqual( expect(tree.read('example/postcss.config.js').toString()).toEqual(
'// existing' '// existing'
); );
}); });
it('should skip update if tailwind configuration already exists', async () => { it('should skip update if tailwind configuration already exists', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: {}, targets: {},
}); });
tree.write(`apps/example/src/styles.css`, ``); tree.write(`example/src/styles.css`, ``);
tree.write('apps/example/tailwind.config.js', '// existing'); tree.write('example/tailwind.config.js', '// existing');
await update(tree, { project: 'example' }); await update(tree, { project: 'example' });
expect(tree.read('apps/example/tailwind.config.js').toString()).toEqual( expect(tree.read('example/tailwind.config.js').toString()).toEqual(
'// existing' '// existing'
); );
}); });
it('should install packages', async () => { it('should install packages', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: {}, targets: {},
}); });
tree.write(`apps/example/src/styles.css`, ``); tree.write(`example/src/styles.css`, ``);
writeJson(tree, 'package.json', { writeJson(tree, 'package.json', {
dependencies: { dependencies: {
react: '999.9.9', react: '999.9.9',
@ -145,13 +145,13 @@ describe('setup-tailwind', () => {
}); });
it('should support skipping package install', async () => { it('should support skipping package install', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', { addProjectConfiguration(tree, 'example', {
root: 'apps/example', root: 'example',
sourceRoot: 'apps/example/src', sourceRoot: 'example/src',
targets: {}, targets: {},
}); });
tree.write(`apps/example/src/styles.css`, ``); tree.write(`example/src/styles.css`, ``);
writeJson(tree, 'package.json', { writeJson(tree, 'package.json', {
dependencies: { dependencies: {
react: '999.9.9', react: '999.9.9',

109
packages/react/src/generators/stories/stories.app.spec.ts
View File

@ -18,7 +18,7 @@ describe('react:stories for applications', () => {
// create another component // create another component
appTree.write( appTree.write(
'apps/test-ui-app/src/app/anothercmp/another-cmp.tsx', 'test-ui-app/src/app/anothercmp/another-cmp.tsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -47,11 +47,11 @@ describe('react:stories for applications', () => {
}); });
expect( expect(
appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8') appTree.read('test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(
appTree.read( appTree.read(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx', 'test-ui-app/src/app/anothercmp/another-cmp.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -64,11 +64,11 @@ describe('react:stories for applications', () => {
}); });
expect( expect(
appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8') appTree.read('test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(
appTree.read( appTree.read(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx', 'test-ui-app/src/app/anothercmp/another-cmp.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -77,7 +77,7 @@ describe('react:stories for applications', () => {
it('should ignore files that do not contain components', async () => { it('should ignore files that do not contain components', async () => {
// create another component // create another component
appTree.write( appTree.write(
'apps/test-ui-app/src/app/some-utils.js', 'test-ui-app/src/app/some-utils.js',
`export const add = (a: number, b: number) => a + b;` `export const add = (a: number, b: number) => a + b;`
); );
@ -88,13 +88,13 @@ describe('react:stories for applications', () => {
// should just create the story and not error, even though there's a js file // should just create the story and not error, even though there's a js file
// not containing any react component // not containing any react component
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
it('should not update existing stories', async () => { it('should not update existing stories', async () => {
appTree.write( appTree.write(
'apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'test-ui-app/src/app/nx-welcome.stories.tsx',
`import { ComponentStory, ComponentMeta } from '@storybook/react'` `import { ComponentStory, ComponentMeta } from '@storybook/react'`
); );
@ -103,14 +103,14 @@ describe('react:stories for applications', () => {
}); });
expect( expect(
appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8') appTree.read('test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
describe('ignore paths', () => { describe('ignore paths', () => {
beforeEach(() => { beforeEach(() => {
appTree.write( appTree.write(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.tsx', 'test-ui-app/src/app/test-path/ignore-it/another-one.tsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -133,7 +133,7 @@ describe('react:stories for applications', () => {
); );
appTree.write( appTree.write(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.tsx', 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.tsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -161,23 +161,21 @@ describe('react:stories for applications', () => {
}); });
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx' 'test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx' 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
)
).toBeTruthy();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
}); });
@ -186,29 +184,27 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-app', project: 'test-ui-app',
ignorePaths: [ ignorePaths: [
`apps/test-ui-app/src/app/anothercmp/**`, `test-ui-app/src/app/anothercmp/**`,
`**/**/src/**/test-path/ignore-it/**`, `**/**/src/**/test-path/ignore-it/**`,
], ],
}); });
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx' 'test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx' 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
)
).toBeFalsy();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -217,29 +213,27 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-app', project: 'test-ui-app',
ignorePaths: [ ignorePaths: [
'apps/test-ui-app/src/app/anothercmp/**/*.skip.*', 'test-ui-app/src/app/anothercmp/**/*.skip.*',
'**/**/src/**/test-path/**', '**/**/src/**/test-path/**',
], ],
}); });
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx'
)
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx' 'test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx' 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -247,34 +241,32 @@ describe('react:stories for applications', () => {
it('should ignore direct path to component', async () => { it('should ignore direct path to component', async () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-app', project: 'test-ui-app',
ignorePaths: ['apps/test-ui-app/src/app/anothercmp/**/*.skip.tsx'], ignorePaths: ['test-ui-app/src/app/anothercmp/**/*.skip.tsx'],
}); });
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx' 'test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx' 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
)
).toBeTruthy();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
it('should ignore a path that has a nested component, but still generate nested component stories', async () => { it('should ignore a path that has a nested component, but still generate nested component stories', async () => {
appTree.write( appTree.write(
'apps/test-ui-app/src/app/anothercmp/comp-a/comp-a.tsx', 'test-ui-app/src/app/anothercmp/comp-a/comp-a.tsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -299,28 +291,26 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-app', project: 'test-ui-app',
ignorePaths: [ ignorePaths: [
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.tsx', 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.tsx',
], ],
}); });
expect( expect(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx' 'test-ui-app/src/app/anothercmp/comp-a/comp-a.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'apps/test-ui-app/src/app/anothercmp/comp-a/comp-a.stories.tsx' 'test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
)
).toBeTruthy();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp-test.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -331,7 +321,7 @@ export async function createTestUIApp(
libName: string, libName: string,
plainJS = false plainJS = false
): Promise<Tree> { ): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await applicationGenerator(appTree, { await applicationGenerator(appTree, {
e2eTestRunner: 'cypress', e2eTestRunner: 'cypress',
@ -341,6 +331,7 @@ export async function createTestUIApp(
unitTestRunner: 'none', unitTestRunner: 'none',
name: libName, name: libName,
js: plainJS, js: plainJS,
projectNameAndRootFormat: 'as-provided',
}); });
return appTree; return appTree;
} }

62
packages/react/src/generators/stories/stories.lib.spec.ts
View File

@ -13,7 +13,7 @@ describe('react:stories for libraries', () => {
// create another component // create another component
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.tsx', 'test-ui-lib/src/lib/anothercmp/another-cmp.tsx',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -42,11 +42,11 @@ describe('react:stories for libraries', () => {
}); });
expect( expect(
appTree.read('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8') appTree.read('test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(
appTree.read( appTree.read(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx', 'test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -67,11 +67,11 @@ describe('react:stories for libraries', () => {
interactionTests: false, interactionTests: false,
}); });
expect( expect(
appTree.read('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8') appTree.read('test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(
appTree.read( appTree.read(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx', 'test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -90,7 +90,7 @@ describe('react:stories for libraries', () => {
describe('ignore paths', () => { describe('ignore paths', () => {
beforeEach(() => { beforeEach(() => {
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.tsx', 'test-ui-lib/src/lib/test-path/ignore-it/another-one.tsx',
`import React from 'react'; `import React from 'react';
export interface IgnoreProps { export interface IgnoreProps {
@ -111,7 +111,7 @@ describe('react:stories for libraries', () => {
); );
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.skip.tsx', 'test-ui-lib/src/lib/anothercmp/another-cmp.skip.tsx',
`import React from 'react'; `import React from 'react';
export interface OtherTestProps { export interface OtherTestProps {
@ -136,21 +136,19 @@ describe('react:stories for libraries', () => {
project: 'test-ui-lib', project: 'test-ui-lib',
}); });
expect(
appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx' 'test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx' 'test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx'
)
).toBeTruthy();
expect(
appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx'
) )
).toBeTruthy(); ).toBeTruthy();
}); });
@ -159,26 +157,24 @@ describe('react:stories for libraries', () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-lib', project: 'test-ui-lib',
ignorePaths: [ ignorePaths: [
'libs/test-ui-lib/src/lib/anothercmp/**', 'test-ui-lib/src/lib/anothercmp/**',
'**/**/src/**/test-path/ignore-it/**', '**/**/src/**/test-path/ignore-it/**',
], ],
}); });
expect(
appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx' 'test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx' 'test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx'
)
).toBeFalsy();
expect(
appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -187,26 +183,24 @@ describe('react:stories for libraries', () => {
await storiesGenerator(appTree, { await storiesGenerator(appTree, {
project: 'test-ui-lib', project: 'test-ui-lib',
ignorePaths: [ ignorePaths: [
'libs/test-ui-lib/src/lib/anothercmp/**/*.skip.*', 'test-ui-lib/src/lib/anothercmp/**/*.skip.*',
'**/test-ui-lib/src/**/test-path/**', '**/test-ui-lib/src/**/test-path/**',
], ],
}); });
expect( expect(
appTree.exists( appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx'
)
).toBeTruthy(); ).toBeTruthy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx' 'test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
expect( expect(
appTree.exists( appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx' 'test-ui-lib/src/lib/anothercmp/another-cmp.skip.stories.tsx'
) )
).toBeFalsy(); ).toBeFalsy();
}); });
@ -215,7 +209,7 @@ describe('react:stories for libraries', () => {
it('should ignore files that do not contain components', async () => { it('should ignore files that do not contain components', async () => {
// create another component // create another component
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/some-utils.js', 'test-ui-lib/src/lib/some-utils.js',
`export const add = (a: number, b: number) => a + b;` `export const add = (a: number, b: number) => a + b;`
); );
@ -226,7 +220,7 @@ describe('react:stories for libraries', () => {
// should just create the story and not error, even though there's a js file // should just create the story and not error, even though there's a js file
// not containing any react component // not containing any react component
expect( expect(
appTree.exists('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx') appTree.exists('test-ui-lib/src/lib/test-ui-lib.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
@ -235,7 +229,7 @@ export async function createTestUILib(
libName: string, libName: string,
plainJS = false plainJS = false
): Promise<Tree> { ): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, { await libraryGenerator(appTree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -245,6 +239,7 @@ export async function createTestUILib(
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
name: libName, name: libName,
projectNameAndRootFormat: 'as-provided',
}); });
// create some Nx app that we'll use to generate the cypress // create some Nx app that we'll use to generate the cypress
@ -258,6 +253,7 @@ export async function createTestUILib(
unitTestRunner: 'none', unitTestRunner: 'none',
name: `${libName}-e2e`, name: `${libName}-e2e`,
js: plainJS, js: plainJS,
projectNameAndRootFormat: 'as-provided',
}); });
return appTree; return appTree;
} }

15
packages/react/src/generators/stories/stories.nextjs.spec.ts
View File

@ -14,7 +14,7 @@ describe('nextjs:stories for applications', () => {
beforeEach(async () => { beforeEach(async () => {
tree = await createTestUIApp('test-ui-app'); tree = await createTestUIApp('test-ui-app');
tree.write( tree.write(
'apps/test-ui-app/components/test.tsx', 'test-ui-app/components/test.tsx',
`import './test.module.scss'; `import './test.module.scss';
export interface TestProps { export interface TestProps {
@ -38,7 +38,7 @@ describe('nextjs:stories for applications', () => {
}); });
expect( expect(
tree.exists('apps/test-ui-app/components/test.stories.tsx') tree.exists('test-ui-app/components/test.stories.tsx')
).toMatchSnapshot(); ).toMatchSnapshot();
const packageJson = JSON.parse(tree.read('package.json', 'utf-8')); const packageJson = JSON.parse(tree.read('package.json', 'utf-8'));
@ -58,7 +58,7 @@ describe('nextjs:stories for applications', () => {
}); });
expect( expect(
tree.exists('apps/test-ui-app/components/test.stories.tsx') tree.exists('test-ui-app/components/test.stories.tsx')
).toMatchSnapshot(); ).toMatchSnapshot();
const packageJson = JSON.parse(tree.read('package.json', 'utf-8')); const packageJson = JSON.parse(tree.read('package.json', 'utf-8'));
expect( expect(
@ -75,17 +75,15 @@ describe('nextjs:stories for applications', () => {
it('should ignore paths', async () => { it('should ignore paths', async () => {
await storiesGenerator(tree, { await storiesGenerator(tree, {
project: 'test-ui-app', project: 'test-ui-app',
ignorePaths: ['apps/test-ui-app/components/**'], ignorePaths: ['test-ui-app/components/**'],
}); });
expect( expect(tree.exists('test-ui-app/components/test.stories.tsx')).toBeFalsy();
tree.exists('apps/test-ui-app/components/test.stories.tsx')
).toBeFalsy();
}); });
}); });
export async function createTestUIApp(name: string): Promise<Tree> { export async function createTestUIApp(name: string): Promise<Tree> {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); const tree = createTreeWithEmptyWorkspace();
await applicationGenerator(tree, { await applicationGenerator(tree, {
e2eTestRunner: 'none', e2eTestRunner: 'none',
linter: Linter.EsLint, linter: Linter.EsLint,
@ -94,6 +92,7 @@ export async function createTestUIApp(name: string): Promise<Tree> {
unitTestRunner: 'none', unitTestRunner: 'none',
name, name,
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
const config = readProjectConfiguration(tree, name); const config = readProjectConfiguration(tree, name);

31
packages/react/src/generators/storybook-configuration/configuration.spec.ts
View File

@ -41,11 +41,9 @@ describe('react:storybook-configuration', () => {
}); });
expect( expect(
appTree.read('libs/test-ui-lib/.storybook/main.ts', 'utf-8') appTree.read('test-ui-lib/.storybook/main.ts', 'utf-8')
).toMatchSnapshot(); ).toMatchSnapshot();
expect( expect(appTree.exists('test-ui-lib/tsconfig.storybook.json')).toBeTruthy();
appTree.exists('libs/test-ui-lib/tsconfig.storybook.json')
).toBeTruthy();
const packageJson = JSON.parse(appTree.read('package.json', 'utf-8')); const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
expect(packageJson.devDependencies['@storybook/react-vite']).toBeDefined(); expect(packageJson.devDependencies['@storybook/react-vite']).toBeDefined();
@ -66,7 +64,7 @@ describe('react:storybook-configuration', () => {
}); });
expect( expect(
appTree.exists('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx') appTree.exists('test-ui-lib/src/lib/test-ui-lib.stories.tsx')
).toBeTruthy(); ).toBeTruthy();
}); });
@ -74,7 +72,7 @@ describe('react:storybook-configuration', () => {
appTree = await createTestUILib('test-ui-lib', true); appTree = await createTestUILib('test-ui-lib', true);
appTree.write( appTree.write(
'libs/test-ui-lib/src/lib/test-ui-libplain.js', 'test-ui-lib/src/lib/test-ui-libplain.js',
`import React from 'react'; `import React from 'react';
import './test.scss'; import './test.scss';
@ -97,10 +95,7 @@ describe('react:storybook-configuration', () => {
}); });
expect( expect(
appTree.read( appTree.read('test-ui-lib/src/lib/test-ui-libplain.stories.jsx', 'utf-8')
'libs/test-ui-lib/src/lib/test-ui-libplain.stories.jsx',
'utf-8'
)
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
@ -110,10 +105,8 @@ describe('react:storybook-configuration', () => {
name: 'test-ui-app', name: 'test-ui-app',
}); });
expect(appTree.exists('apps/test-ui-app/.storybook/main.ts')).toBeTruthy(); expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy();
expect( expect(appTree.exists('test-ui-app/tsconfig.storybook.json')).toBeTruthy();
appTree.exists('apps/test-ui-app/tsconfig.storybook.json')
).toBeTruthy();
}); });
it('should generate stories for components', async () => { it('should generate stories for components', async () => {
@ -128,7 +121,7 @@ describe('react:storybook-configuration', () => {
// under the specified 'lib' directory // under the specified 'lib' directory
expect( expect(
appTree.read( appTree.read(
'apps/test-ui-app/src/app/my-component/my-component.stories.tsx', 'test-ui-app/src/app/my-component/my-component.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -144,7 +137,7 @@ describe('react:storybook-configuration', () => {
expect( expect(
appTree.read( appTree.read(
'apps/test-ui-app/src/app/my-component/my-component.stories.tsx', 'test-ui-app/src/app/my-component/my-component.stories.tsx',
'utf-8' 'utf-8'
) )
).toMatchSnapshot(); ).toMatchSnapshot();
@ -155,7 +148,7 @@ export async function createTestUILib(
libName: string, libName: string,
plainJS = false plainJS = false
): Promise<Tree> { ): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, { await libraryGenerator(appTree, {
linter: Linter.EsLint, linter: Linter.EsLint,
@ -165,6 +158,7 @@ export async function createTestUILib(
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
name: libName, name: libName,
projectNameAndRootFormat: 'as-provided',
}); });
return appTree; return appTree;
} }
@ -173,7 +167,7 @@ export async function createTestAppLib(
libName: string, libName: string,
plainJS = false plainJS = false
): Promise<Tree> { ): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); let appTree = createTreeWithEmptyWorkspace();
await applicationGenerator(appTree, { await applicationGenerator(appTree, {
e2eTestRunner: 'none', e2eTestRunner: 'none',
@ -183,6 +177,7 @@ export async function createTestAppLib(
unitTestRunner: 'none', unitTestRunner: 'none',
name: libName, name: libName,
js: plainJS, js: plainJS,
projectNameAndRootFormat: 'as-provided',
}); });
await componentGenerator(appTree, { await componentGenerator(appTree, {

2
packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.spec.ts
View File

@ -6,7 +6,7 @@ describe('Add typings to react projects', () => {
let tree: Tree; let tree: Tree;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should update tsconfig to include react typings', async () => { it('should update tsconfig to include react typings', async () => {

7
packages/react/src/utils/testing-generators.ts
View File

@ -10,19 +10,20 @@ export async function createApp(tree: Tree, appName: string): Promise<any> {
style: 'css', style: 'css',
unitTestRunner: 'none', unitTestRunner: 'none',
name: appName, name: appName,
projectNameAndRootFormat: 'as-provided',
}); });
} }
export async function createLib(tree: Tree, libName: string): Promise<any> { export async function createLib(tree: Tree, libName: string): Promise<any> {
const { fileName } = names(libName); const { fileName } = names(libName);
tree.write(`/libs/${fileName}/src/index.ts`, `import React from 'react';\n`); tree.write(`/${fileName}/src/index.ts`, `import React from 'react';\n`);
addProjectConfiguration(tree, fileName, { addProjectConfiguration(tree, fileName, {
tags: [], tags: [],
root: `libs/${fileName}`, root: `${fileName}`,
projectType: 'library', projectType: 'library',
sourceRoot: `libs/${fileName}/src`, sourceRoot: `${fileName}/src`,
targets: {}, targets: {},
}); });
} }

264
packages/web/src/generators/application/application.spec.ts
View File

@ -22,19 +22,18 @@ describe('app', () => {
beforeEach(() => { beforeEach(() => {
mockedInstalledCypressVersion.mockReturnValue(10); mockedInstalledCypressVersion.mockReturnValue(10);
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
describe('not nested', () => { describe('not nested', () => {
it('should update configuration', async () => { it('should update configuration', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
projectNameAndRootFormat: 'as-provided',
}); });
expect(readProjectConfiguration(tree, 'my-app').root).toEqual( expect(readProjectConfiguration(tree, 'my-app').root).toEqual('my-app');
'apps/my-app'
);
expect(readProjectConfiguration(tree, 'my-app-e2e').root).toEqual( expect(readProjectConfiguration(tree, 'my-app-e2e').root).toEqual(
'apps/my-app-e2e' 'my-app-e2e'
); );
}); });
@ -42,6 +41,7 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
tags: 'one,two', tags: 'one,two',
projectNameAndRootFormat: 'as-provided',
}); });
const projects = Object.fromEntries(getProjects(tree)); const projects = Object.fromEntries(getProjects(tree));
expect(projects).toMatchObject({ expect(projects).toMatchObject({
@ -58,16 +58,15 @@ describe('app', () => {
it('should generate files', async () => { it('should generate files', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-app/src/main.ts')).toBeTruthy(); expect(tree.exists('my-app/src/main.ts')).toBeTruthy();
expect(tree.exists('apps/my-app/src/app/app.element.ts')).toBeTruthy(); expect(tree.exists('my-app/src/app/app.element.ts')).toBeTruthy();
expect( expect(tree.exists('my-app/src/app/app.element.spec.ts')).toBeTruthy();
tree.exists('apps/my-app/src/app/app.element.spec.ts') expect(tree.exists('my-app/src/app/app.element.css')).toBeTruthy();
).toBeTruthy();
expect(tree.exists('apps/my-app/src/app/app.element.css')).toBeTruthy();
const tsconfig = readJson(tree, 'apps/my-app/tsconfig.json'); const tsconfig = readJson(tree, 'my-app/tsconfig.json');
expect(tsconfig.extends).toBe('../../tsconfig.base.json'); expect(tsconfig.extends).toBe('../tsconfig.base.json');
expect(tsconfig.references).toEqual([ expect(tsconfig.references).toEqual([
{ {
path: './tsconfig.app.json', path: './tsconfig.app.json',
@ -77,24 +76,24 @@ describe('app', () => {
}, },
]); ]);
const tsconfigApp = readJson(tree, 'apps/my-app/tsconfig.app.json'); const tsconfigApp = readJson(tree, 'my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.outDir).toEqual('../../dist/out-tsc'); expect(tsconfigApp.compilerOptions.outDir).toEqual('../dist/out-tsc');
expect(tsconfigApp.extends).toEqual('./tsconfig.json'); expect(tsconfigApp.extends).toEqual('./tsconfig.json');
expect(tree.exists('apps/my-app-e2e/cypress.config.ts')).toBeTruthy(); expect(tree.exists('my-app-e2e/cypress.config.ts')).toBeTruthy();
const tsconfigE2E = readJson(tree, 'apps/my-app-e2e/tsconfig.json'); const tsconfigE2E = readJson(tree, 'my-app-e2e/tsconfig.json');
expect(tsconfigE2E).toMatchInlineSnapshot(` expect(tsconfigE2E).toMatchInlineSnapshot(`
{ {
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"outDir": "../../dist/out-tsc", "outDir": "../dist/out-tsc",
"sourceMap": false, "sourceMap": false,
"types": [ "types": [
"cypress", "cypress",
"node", "node",
], ],
}, },
"extends": "../../tsconfig.base.json", "extends": "../tsconfig.base.json",
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.js", "src/**/*.js",
@ -103,11 +102,11 @@ describe('app', () => {
} }
`); `);
const eslintJson = readJson(tree, '/apps/my-app/.eslintrc.json'); const eslintJson = readJson(tree, '/my-app/.eslintrc.json');
expect(eslintJson).toMatchInlineSnapshot(` expect(eslintJson).toMatchInlineSnapshot(`
{ {
"extends": [ "extends": [
"../../.eslintrc.json", "../.eslintrc.json",
], ],
"ignorePatterns": [ "ignorePatterns": [
"!**/*", "!**/*",
@ -146,6 +145,7 @@ describe('app', () => {
name: 'cool-app', name: 'cool-app',
e2eTestRunner: 'playwright', e2eTestRunner: 'playwright',
unitTestRunner: 'none', unitTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(readProjectConfiguration(tree, 'cool-app-e2e').targets.e2e) expect(readProjectConfiguration(tree, 'cool-app-e2e').targets.e2e)
@ -153,33 +153,29 @@ describe('app', () => {
{ {
"executor": "@nx/playwright:playwright", "executor": "@nx/playwright:playwright",
"options": { "options": {
"config": "apps/cool-app-e2e/playwright.config.ts", "config": "cool-app-e2e/playwright.config.ts",
}, },
"outputs": [ "outputs": [
"{workspaceRoot}/dist/.playwright/apps/cool-app-e2e", "{workspaceRoot}/dist/.playwright/cool-app-e2e",
], ],
} }
`); `);
expect( expect(tree.exists('cool-app-e2e/playwright.config.ts')).toBeTruthy();
tree.exists('apps/cool-app-e2e/playwright.config.ts')
).toBeTruthy();
}); });
it('should generate files if bundler is vite', async () => { it('should generate files if bundler is vite', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-app/src/main.ts')).toBeTruthy(); expect(tree.exists('my-app/src/main.ts')).toBeTruthy();
expect(tree.exists('apps/my-app/src/app/app.element.ts')).toBeTruthy(); expect(tree.exists('my-app/src/app/app.element.ts')).toBeTruthy();
expect( expect(tree.exists('my-app/src/app/app.element.spec.ts')).toBeTruthy();
tree.exists('apps/my-app/src/app/app.element.spec.ts') expect(tree.exists('my-app/src/app/app.element.css')).toBeTruthy();
).toBeTruthy();
expect(tree.exists('apps/my-app/src/app/app.element.css')).toBeTruthy();
const tsconfig = readJson(tree, 'apps/my-app/tsconfig.json'); const tsconfig = readJson(tree, 'my-app/tsconfig.json');
expect(tsconfig.extends).toBe('../../tsconfig.base.json'); expect(tsconfig.extends).toBe('../tsconfig.base.json');
expect(tsconfig.references).toEqual([ expect(tsconfig.references).toEqual([
{ {
path: './tsconfig.app.json', path: './tsconfig.app.json',
@ -193,14 +189,12 @@ describe('app', () => {
'vitest', 'vitest',
]); ]);
expect(tree.exists('apps/my-app-e2e/cypress.config.ts')).toBeTruthy(); expect(tree.exists('my-app-e2e/cypress.config.ts')).toBeTruthy();
expect(tree.exists('apps/my-app/index.html')).toBeTruthy(); expect(tree.exists('my-app/index.html')).toBeTruthy();
expect(tree.exists('apps/my-app/vite.config.ts')).toBeTruthy(); expect(tree.exists('my-app/vite.config.ts')).toBeTruthy();
expect(tree.exists(`my-app/environments/environment.ts`)).toBeFalsy();
expect( expect(
tree.exists(`apps/my-app/environments/environment.ts`) tree.exists(`my-app/environments/environment.prod.ts`)
).toBeFalsy();
expect(
tree.exists(`apps/my-app/environments/environment.prod.ts`)
).toBeFalsy(); ).toBeFalsy();
}); });
@ -209,10 +203,11 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
projectNameAndRootFormat: 'as-provided',
}); });
const tsconfig = readJson(tree, 'apps/my-app/tsconfig.json'); const tsconfig = readJson(tree, 'my-app/tsconfig.json');
expect(tsconfig.extends).toBe('../../tsconfig.json'); expect(tsconfig.extends).toBe('../tsconfig.json');
}); });
}); });
@ -220,30 +215,32 @@ describe('app', () => {
it('should update configuration', async () => { it('should update configuration', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
projectNameAndRootFormat: 'as-provided',
}); });
expect(readProjectConfiguration(tree, 'my-dir-my-app').root).toEqual( expect(readProjectConfiguration(tree, 'my-app').root).toEqual(
'apps/my-dir/my-app' 'my-dir/my-app'
); );
expect(readProjectConfiguration(tree, 'my-dir-my-app-e2e').root).toEqual( expect(readProjectConfiguration(tree, 'my-app-e2e').root).toEqual(
'apps/my-dir/my-app-e2e' 'my-dir/my-app-e2e'
); );
}); });
it('should update tags and implicit dependencies', async () => { it('should update tags and implicit dependencies', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
tags: 'one,two', tags: 'one,two',
projectNameAndRootFormat: 'as-provided',
}); });
const projects = Object.fromEntries(getProjects(tree)); const projects = Object.fromEntries(getProjects(tree));
expect(projects).toMatchObject({ expect(projects).toMatchObject({
'my-dir-my-app': { 'my-app': {
tags: ['one', 'two'], tags: ['one', 'two'],
}, },
'my-dir-my-app-e2e': { 'my-app-e2e': {
tags: [], tags: [],
implicitDependencies: ['my-dir-my-app'], implicitDependencies: ['my-app'],
}, },
}); });
}); });
@ -256,15 +253,16 @@ describe('app', () => {
}; };
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
projectNameAndRootFormat: 'as-provided',
}); });
// Make sure these exist // Make sure these exist
[ [
'apps/my-dir/my-app/src/main.ts', 'my-dir/my-app/src/main.ts',
'apps/my-dir/my-app/src/app/app.element.ts', 'my-dir/my-app/src/app/app.element.ts',
'apps/my-dir/my-app/src/app/app.element.spec.ts', 'my-dir/my-app/src/app/app.element.spec.ts',
'apps/my-dir/my-app/src/app/app.element.css', 'my-dir/my-app/src/app/app.element.css',
].forEach((path) => { ].forEach((path) => {
expect(tree.exists(path)).toBeTruthy(); expect(tree.exists(path)).toBeTruthy();
}); });
@ -272,19 +270,19 @@ describe('app', () => {
// Make sure these have properties // Make sure these have properties
[ [
{ {
path: 'apps/my-dir/my-app/tsconfig.app.json', path: 'my-dir/my-app/tsconfig.app.json',
lookupFn: (json) => json.compilerOptions.outDir, lookupFn: (json) => json.compilerOptions.outDir,
expectedValue: '../../../dist/out-tsc', expectedValue: '../../dist/out-tsc',
}, },
{ {
path: 'apps/my-dir/my-app-e2e/tsconfig.json', path: 'my-dir/my-app-e2e/tsconfig.json',
lookupFn: (json) => json.compilerOptions.outDir, lookupFn: (json) => json.compilerOptions.outDir,
expectedValue: '../../../dist/out-tsc', expectedValue: '../../dist/out-tsc',
}, },
{ {
path: 'apps/my-dir/my-app/.eslintrc.json', path: 'my-dir/my-app/.eslintrc.json',
lookupFn: (json) => json.extends, lookupFn: (json) => json.extends,
expectedValue: ['../../../.eslintrc.json'], expectedValue: ['../../.eslintrc.json'],
}, },
].forEach(hasJsonValue); ].forEach(hasJsonValue);
}); });
@ -292,11 +290,12 @@ describe('app', () => {
it('should extend from root tsconfig.base.json', async () => { it('should extend from root tsconfig.base.json', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
projectNameAndRootFormat: 'as-provided',
}); });
const tsconfig = readJson(tree, 'apps/my-dir/my-app/tsconfig.json'); const tsconfig = readJson(tree, 'my-dir/my-app/tsconfig.json');
expect(tsconfig.extends).toBe('../../../tsconfig.base.json'); expect(tsconfig.extends).toBe('../../tsconfig.base.json');
}); });
it('should extend from root tsconfig.json when no tsconfig.base.json', async () => { it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
@ -304,23 +303,25 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
projectNameAndRootFormat: 'as-provided',
}); });
const tsconfig = readJson(tree, 'apps/my-dir/my-app/tsconfig.json'); const tsconfig = readJson(tree, 'my-dir/my-app/tsconfig.json');
expect(tsconfig.extends).toBe('../../../tsconfig.json'); expect(tsconfig.extends).toBe('../../tsconfig.json');
}); });
it('should create Nx specific template', async () => { it('should create Nx specific template', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
directory: 'myDir', directory: 'my-dir/my-app',
projectNameAndRootFormat: 'as-provided',
}); });
expect( expect(
tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8') tree.read('my-dir/my-app/src/app/app.element.ts', 'utf-8')
).toBeTruthy(); ).toBeTruthy();
expect( expect(
tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8') tree.read('my-dir/my-app/src/app/app.element.ts', 'utf-8')
).toContain('Hello there'); ).toContain('Hello there');
}); });
}); });
@ -330,17 +331,19 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
style: 'scss', style: 'scss',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-app/src/app/app.element.scss')).toEqual(true); expect(tree.exists('my-app/src/app/app.element.scss')).toEqual(true);
}); });
}); });
it('should setup jest without serializers', async () => { it('should setup jest without serializers', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'my-App', name: 'my-App',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.read('apps/my-app/jest.config.ts', 'utf-8')).not.toContain( expect(tree.read('my-app/jest.config.ts', 'utf-8')).not.toContain(
`'jest-preset-angular/build/AngularSnapshotSerializer.js',` `'jest-preset-angular/build/AngularSnapshotSerializer.js',`
); );
}); });
@ -348,29 +351,30 @@ describe('app', () => {
it('should setup the nrwl web build builder', async () => { it('should setup the nrwl web build builder', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'my-App', name: 'my-App',
projectNameAndRootFormat: 'as-provided',
}); });
const targets = readProjectConfiguration(tree, 'my-app').targets; const targets = readProjectConfiguration(tree, 'my-app').targets;
expect(targets.build.executor).toEqual('@nx/webpack:webpack'); expect(targets.build.executor).toEqual('@nx/webpack:webpack');
expect(targets.build.outputs).toEqual(['{options.outputPath}']); expect(targets.build.outputs).toEqual(['{options.outputPath}']);
expect(targets.build.options).toEqual({ expect(targets.build.options).toEqual({
compiler: 'babel', compiler: 'babel',
assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'], assets: ['my-app/src/favicon.ico', 'my-app/src/assets'],
index: 'apps/my-app/src/index.html', index: 'my-app/src/index.html',
baseHref: '/', baseHref: '/',
main: 'apps/my-app/src/main.ts', main: 'my-app/src/main.ts',
outputPath: 'dist/apps/my-app', outputPath: 'dist/my-app',
scripts: [], scripts: [],
styles: ['apps/my-app/src/styles.css'], styles: ['my-app/src/styles.css'],
tsConfig: 'apps/my-app/tsconfig.app.json', tsConfig: 'my-app/tsconfig.app.json',
webpackConfig: 'apps/my-app/webpack.config.js', webpackConfig: 'my-app/webpack.config.js',
}); });
expect(targets.build.configurations.production).toEqual({ expect(targets.build.configurations.production).toEqual({
optimization: true, optimization: true,
extractLicenses: true, extractLicenses: true,
fileReplacements: [ fileReplacements: [
{ {
replace: 'apps/my-app/src/environments/environment.ts', replace: 'my-app/src/environments/environment.ts',
with: 'apps/my-app/src/environments/environment.prod.ts', with: 'my-app/src/environments/environment.prod.ts',
}, },
], ],
namedChunks: false, namedChunks: false,
@ -383,6 +387,7 @@ describe('app', () => {
it('should setup the nrwl web dev server builder', async () => { it('should setup the nrwl web dev server builder', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'my-App', name: 'my-App',
projectNameAndRootFormat: 'as-provided',
}); });
const targets = readProjectConfiguration(tree, 'my-app').targets; const targets = readProjectConfiguration(tree, 'my-app').targets;
expect(targets.serve.executor).toEqual('@nx/webpack:dev-server'); expect(targets.serve.executor).toEqual('@nx/webpack:dev-server');
@ -399,12 +404,13 @@ describe('app', () => {
name: 'my-App', name: 'my-App',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
const targets = readProjectConfiguration(tree, 'my-app').targets; const targets = readProjectConfiguration(tree, 'my-app').targets;
expect(targets.build.executor).toEqual('@nx/vite:build'); expect(targets.build.executor).toEqual('@nx/vite:build');
expect(targets.build.outputs).toEqual(['{options.outputPath}']); expect(targets.build.outputs).toEqual(['{options.outputPath}']);
expect(targets.build.options).toEqual({ expect(targets.build.options).toEqual({
outputPath: 'dist/apps/my-app', outputPath: 'dist/my-app',
}); });
}); });
@ -413,6 +419,7 @@ describe('app', () => {
name: 'my-App', name: 'my-App',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
const targets = readProjectConfiguration(tree, 'my-app').targets; const targets = readProjectConfiguration(tree, 'my-app').targets;
expect(targets.serve.executor).toEqual('@nx/vite:dev-server'); expect(targets.serve.executor).toEqual('@nx/vite:dev-server');
@ -428,12 +435,13 @@ describe('app', () => {
it('should setup the eslint builder', async () => { it('should setup the eslint builder', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'my-App', name: 'my-App',
projectNameAndRootFormat: 'as-provided',
}); });
expect(readProjectConfiguration(tree, 'my-app').targets.lint).toEqual({ expect(readProjectConfiguration(tree, 'my-app').targets.lint).toEqual({
executor: '@nx/linter:eslint', executor: '@nx/linter:eslint',
outputs: ['{options.outputFile}'], outputs: ['{options.outputFile}'],
options: { options: {
lintFilePatterns: ['apps/my-app/**/*.ts'], lintFilePatterns: ['my-app/**/*.ts'],
}, },
}); });
}); });
@ -443,9 +451,10 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
prefix: 'prefix', prefix: 'prefix',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.read('apps/my-app/src/index.html', 'utf-8')).toContain( expect(tree.read('my-app/src/index.html', 'utf-8')).toContain(
'<prefix-root></prefix-root>' '<prefix-root></prefix-root>'
); );
}); });
@ -456,13 +465,12 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
unitTestRunner: 'none', unitTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('jest.config.ts')).toBeFalsy(); expect(tree.exists('jest.config.ts')).toBeFalsy();
expect( expect(tree.exists('my-app/src/app/app.element.spec.ts')).toBeFalsy();
tree.exists('apps/my-app/src/app/app.element.spec.ts') expect(tree.exists('my-app/tsconfig.spec.json')).toBeFalsy();
).toBeFalsy(); expect(tree.exists('my-app/jest.config.ts')).toBeFalsy();
expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
expect(tree.exists('apps/my-app/jest.config.ts')).toBeFalsy();
const projectConfiguration = readProjectConfiguration(tree, 'my-app'); const projectConfiguration = readProjectConfiguration(tree, 'my-app');
expect(projectConfiguration.targets.test).toBeUndefined(); expect(projectConfiguration.targets.test).toBeUndefined();
@ -471,7 +479,7 @@ describe('app', () => {
"executor": "@nx/linter:eslint", "executor": "@nx/linter:eslint",
"options": { "options": {
"lintFilePatterns": [ "lintFilePatterns": [
"apps/my-app/**/*.ts", "my-app/**/*.ts",
], ],
}, },
"outputs": [ "outputs": [
@ -486,11 +494,11 @@ describe('app', () => {
name: 'my-cool-app', name: 'my-cool-app',
bundler: 'none', bundler: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-cool-app/jest.config.ts')).toBeTruthy(); expect(tree.exists('my-cool-app/jest.config.ts')).toBeTruthy();
expect( expect(
readJson(tree, 'apps/my-cool-app/tsconfig.spec.json').compilerOptions readJson(tree, 'my-cool-app/tsconfig.spec.json').compilerOptions.types
.types
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
[ [
"jest", "jest",
@ -508,15 +516,15 @@ describe('app', () => {
bundler: 'vite', bundler: 'vite',
unitTestRunner: 'jest', unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-vite-app/vite.config.ts')).toBeTruthy(); expect(tree.exists('my-vite-app/vite.config.ts')).toBeTruthy();
expect(tree.read('my-vite-app/vite.config.ts', 'utf-8')).not.toContain(
'test: {'
);
expect(tree.exists('my-vite-app/jest.config.ts')).toBeTruthy();
expect( expect(
tree.read('apps/my-vite-app/vite.config.ts', 'utf-8') readJson(tree, 'my-vite-app/tsconfig.spec.json').compilerOptions.types
).not.toContain('test: {');
expect(tree.exists('apps/my-vite-app/jest.config.ts')).toBeTruthy();
expect(
readJson(tree, 'apps/my-vite-app/tsconfig.spec.json').compilerOptions
.types
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
[ [
"jest", "jest",
@ -534,11 +542,12 @@ describe('app', () => {
bundler: 'webpack', bundler: 'webpack',
unitTestRunner: 'vitest', unitTestRunner: 'vitest',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-webpack-app/vite.config.ts')).toBeTruthy(); expect(tree.exists('my-webpack-app/vite.config.ts')).toBeTruthy();
expect(tree.exists('apps/my-webpack-app/jest.config.ts')).toBeFalsy(); expect(tree.exists('my-webpack-app/jest.config.ts')).toBeFalsy();
expect( expect(
readJson(tree, 'apps/my-webpack-app/tsconfig.spec.json').compilerOptions readJson(tree, 'my-webpack-app/tsconfig.spec.json').compilerOptions
.types .types
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
[ [
@ -559,8 +568,9 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
e2eTestRunner: 'none', e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
}); });
expect(tree.exists('apps/my-app-e2e')).toBeFalsy(); expect(tree.exists('my-app-e2e')).toBeFalsy();
}); });
}); });
@ -569,62 +579,65 @@ describe('app', () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
compiler: 'babel', compiler: 'babel',
projectNameAndRootFormat: 'as-provided',
} as Schema); } as Schema);
expect(tree.read(`apps/my-app/jest.config.ts`, 'utf-8')) expect(tree.read(`my-app/jest.config.ts`, 'utf-8'))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"/* eslint-disable */ "/* eslint-disable */
export default { export default {
displayName: 'my-app', displayName: 'my-app',
preset: '../../jest.preset.js', preset: '../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
transform: { transform: {
'^.+\\\\.[tj]s$': 'babel-jest', '^.+\\\\.[tj]s$': 'babel-jest',
}, },
moduleFileExtensions: ['ts', 'js', 'html'], moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../../coverage/apps/my-app', coverageDirectory: '../coverage/my-app',
}; };
" "
`); `);
expect(tree.exists('apps/my-app/.babelrc')).toBeTruthy(); expect(tree.exists('my-app/.babelrc')).toBeTruthy();
expect(tree.exists('apps/my-app/.swcrc')).toBeFalsy(); expect(tree.exists('my-app/.swcrc')).toBeFalsy();
}); });
it('should support swc compiler', async () => { it('should support swc compiler', async () => {
await applicationGenerator(tree, { await applicationGenerator(tree, {
name: 'myApp', name: 'myApp',
compiler: 'swc', compiler: 'swc',
projectNameAndRootFormat: 'as-provided',
} as Schema); } as Schema);
expect(tree.read(`apps/my-app/jest.config.ts`, 'utf-8')) expect(tree.read(`my-app/jest.config.ts`, 'utf-8'))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"/* eslint-disable */ "/* eslint-disable */
export default { export default {
displayName: 'my-app', displayName: 'my-app',
preset: '../../jest.preset.js', preset: '../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
transform: { transform: {
'^.+\\\\.[tj]s$': '@swc/jest', '^.+\\\\.[tj]s$': '@swc/jest',
}, },
moduleFileExtensions: ['ts', 'js', 'html'], moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../../coverage/apps/my-app', coverageDirectory: '../coverage/my-app',
}; };
" "
`); `);
expect(tree.exists('apps/my-app/.babelrc')).toBeFalsy(); expect(tree.exists('my-app/.babelrc')).toBeFalsy();
expect(tree.exists('apps/my-app/.swcrc')).toBeTruthy(); expect(tree.exists('my-app/.swcrc')).toBeTruthy();
}); });
}); });
describe('setup web app with --bundler=vite', () => { describe('setup web app with --bundler=vite', () => {
let viteAppTree: Tree; let viteAppTree: Tree;
beforeAll(async () => { beforeAll(async () => {
viteAppTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); viteAppTree = createTreeWithEmptyWorkspace();
await applicationGenerator(viteAppTree, { await applicationGenerator(viteAppTree, {
name: 'myApp', name: 'myApp',
bundler: 'vite', bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
}); });
}); });
@ -646,7 +659,7 @@ describe('app', () => {
}); });
it('should create correct tsconfig compilerOptions', () => { it('should create correct tsconfig compilerOptions', () => {
const tsconfigJson = readJson(viteAppTree, '/apps/my-app/tsconfig.json'); const tsconfigJson = readJson(viteAppTree, '/my-app/tsconfig.json');
expect(tsconfigJson.compilerOptions.types).toMatchObject([ expect(tsconfigJson.compilerOptions.types).toMatchObject([
'vite/client', 'vite/client',
'vitest', 'vitest',
@ -654,23 +667,24 @@ describe('app', () => {
}); });
it('should create index.html and vite.config file at the root of the app', () => { it('should create index.html and vite.config file at the root of the app', () => {
expect(viteAppTree.exists('/apps/my-app/index.html')).toBe(true); expect(viteAppTree.exists('/my-app/index.html')).toBe(true);
expect(viteAppTree.exists('/apps/my-app/vite.config.ts')).toBe(true); expect(viteAppTree.exists('/my-app/vite.config.ts')).toBe(true);
}); });
it('should not include a spec file when the bundler or unitTestRunner is vite and insourceTests is false', async () => { it('should not include a spec file when the bundler or unitTestRunner is vite and insourceTests is false', async () => {
expect( expect(viteAppTree.exists('/my-app/src/app/app.element.spec.ts')).toBe(
viteAppTree.exists('/apps/my-app/src/app/app.element.spec.ts') true
).toBe(true); );
await applicationGenerator(viteAppTree, { await applicationGenerator(viteAppTree, {
name: 'insourceTests', name: 'insourceTests',
bundler: 'vite', bundler: 'vite',
inSourceTests: true, inSourceTests: true,
projectNameAndRootFormat: 'as-provided',
}); });
expect( expect(
viteAppTree.exists('/apps/insource-tests/src/app/app.element.spec.ts') viteAppTree.exists('/insource-tests/src/app/app.element.spec.ts')
).toBe(false); ).toBe(false);
}); });
}); });

2
packages/web/src/generators/init/init.spec.ts
View File

@ -15,7 +15,7 @@ describe('init', () => {
let tree: Tree; let tree: Tree;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should add web dependencies', async () => { it('should add web dependencies', async () => {

38
packages/web/src/generators/static-serve/static-serve-configuration.spec.ts
View File

@ -10,7 +10,7 @@ import { webStaticServeGenerator } from './static-serve-configuration';
describe('Static serve configuration generator', () => { describe('Static serve configuration generator', () => {
let tree: Tree; let tree: Tree;
beforeEach(() => { beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); tree = createTreeWithEmptyWorkspace();
}); });
it('should add a `serve-static` target to the project', () => { it('should add a `serve-static` target to the project', () => {
@ -55,7 +55,7 @@ describe('Static serve configuration generator', () => {
"executor": "@nx/web:file-server", "executor": "@nx/web:file-server",
"options": { "options": {
"buildTarget": "storybook:build-storybook", "buildTarget": "storybook:build-storybook",
"staticFilePath": "dist/apps/storybook/storybook", "staticFilePath": "dist/storybook/storybook",
}, },
} }
`); `);
@ -85,7 +85,7 @@ describe('Static serve configuration generator', () => {
const projectConfig = readProjectConfiguration(tree, 'angular-app'); const projectConfig = readProjectConfiguration(tree, 'angular-app');
delete projectConfig.targets.build.options.outputPath; delete projectConfig.targets.build.options.outputPath;
projectConfig.targets.build.outputs = ['{options.myPath}']; projectConfig.targets.build.outputs = ['{options.myPath}'];
projectConfig.targets.build.options.myPath = 'dist/apps/angular-app'; projectConfig.targets.build.options.myPath = 'dist/angular-app';
updateProjectConfiguration(tree, 'angular-app', projectConfig); updateProjectConfiguration(tree, 'angular-app', projectConfig);
@ -100,7 +100,7 @@ describe('Static serve configuration generator', () => {
"executor": "@nx/web:file-server", "executor": "@nx/web:file-server",
"options": { "options": {
"buildTarget": "angular-app:build", "buildTarget": "angular-app:build",
"staticFilePath": "dist/apps/angular-app", "staticFilePath": "dist/angular-app",
}, },
} }
`); `);
@ -132,15 +132,15 @@ function addReactConfig(tree: Tree, name: string) {
addProjectConfiguration(tree, name, { addProjectConfiguration(tree, name, {
name, name,
projectType: 'application', projectType: 'application',
root: `apps/${name}`, root: `${name}`,
sourceRoot: `apps/${name}/src`, sourceRoot: `${name}/src`,
targets: { targets: {
build: { build: {
executor: '@nx/vite:build', executor: '@nx/vite:build',
outputs: ['{options.outputPath}'], outputs: ['{options.outputPath}'],
defaultConfiguration: 'production', defaultConfiguration: 'production',
options: { options: {
outputPath: `dist/apps/${name}`, outputPath: `dist/${name}`,
}, },
configurations: { configurations: {
development: { development: {
@ -159,21 +159,21 @@ function addAngularConfig(tree: Tree, name: string) {
addProjectConfiguration(tree, name, { addProjectConfiguration(tree, name, {
name, name,
projectType: 'application', projectType: 'application',
root: `apps/${name}`, root: `${name}`,
sourceRoot: `apps/${name}/src`, sourceRoot: `${name}/src`,
targets: { targets: {
build: { build: {
executor: '@angular-devkit/build-angular:browser', executor: '@angular-devkit/build-angular:browser',
outputs: ['{options.outputPath}'], outputs: ['{options.outputPath}'],
options: { options: {
outputPath: `dist/apps/${name}`, outputPath: `dist/${name}`,
index: `apps/${name}/src/index.html`, index: `${name}/src/index.html`,
main: `apps/${name}/src/main.ts`, main: `${name}/src/main.ts`,
polyfills: [`zone.js`], polyfills: [`zone.js`],
tsConfig: `apps/${name}/tsconfig.app.json`, tsConfig: `${name}/tsconfig.app.json`,
inlineStyleLanguage: `scss`, inlineStyleLanguage: `scss`,
assets: [`apps/${name}/src/favicon.ico`, `apps/${name}/src/assets`], assets: [`${name}/src/favicon.ico`, `${name}/src/assets`],
styles: [`apps/${name}/src/styles.scss`], styles: [`${name}/src/styles.scss`],
scripts: [], scripts: [],
}, },
}, },
@ -185,15 +185,15 @@ function addStorybookConfig(tree: Tree, name: string) {
addProjectConfiguration(tree, name, { addProjectConfiguration(tree, name, {
name, name,
projectType: 'application', projectType: 'application',
root: `apps/${name}`, root: `${name}`,
sourceRoot: `apps/${name}/src`, sourceRoot: `${name}/src`,
targets: { targets: {
'build-storybook': { 'build-storybook': {
executor: '@storybook/angular:build-storybook', executor: '@storybook/angular:build-storybook',
outputs: ['{options.outputDir}'], outputs: ['{options.outputDir}'],
options: { options: {
outputDir: `dist/apps/${name}/storybook`, outputDir: `dist/${name}/storybook`,
configDir: `apps/${name}/.storybook`, configDir: `${name}/.storybook`,
browserTarget: `storybook:build-storybook`, browserTarget: `storybook:build-storybook`,
compodoc: false, compodoc: false,
}, },