miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 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() {
return (
<div>
<NxWelcome title="my-dir-my-app" />
<NxWelcome title="my-app" />
</div>
);
}

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

@ -24,13 +24,14 @@ describe('app', () => {
linter: Linter.EsLint,
style: 'css',
strict: true,
projectNameAndRootFormat: 'as-provided',
};
let mockedInstalledCypressVersion: jest.Mock<
ReturnType<typeof installedCypressVersion>
> = installedCypressVersion as never;
beforeEach(() => {
mockedInstalledCypressVersion.mockReturnValue(10);
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
appTree = createTreeWithEmptyWorkspace();
});
describe('not nested', () => {
@ -39,8 +40,8 @@ describe('app', () => {
const projects = getProjects(appTree);
expect(projects.get('my-app').root).toEqual('apps/my-app');
expect(projects.get('my-app-e2e').root).toEqual('apps/my-app-e2e');
expect(projects.get('my-app').root).toEqual('my-app');
expect(projects.get('my-app-e2e').root).toEqual('my-app-e2e');
});
it('should add vite types to tsconfigs', async () => {
@ -49,14 +50,14 @@ describe('app', () => {
bundler: 'vite',
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([
'node',
'@nx/react/typings/cssmodule.d.ts',
'@nx/react/typings/image.d.ts',
'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([
'vitest/globals',
'vitest/importMeta',
@ -94,19 +95,17 @@ describe('app', () => {
it('should generate files', async () => {
await applicationGenerator(appTree, schema);
expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
expect(
appTree.read('apps/my-app/src/app/app.tsx', 'utf-8')
).toMatchSnapshot();
expect(appTree.exists('apps/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/.babelrc')).toBeTruthy();
expect(appTree.exists('my-app/src/main.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
expect(appTree.read('my-app/src/app/app.tsx', 'utf-8')).toMatchSnapshot();
expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
expect(appTree.exists('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');
const tsconfig = readJson(appTree, 'apps/my-app/tsconfig.json');
const tsconfig = readJson(appTree, 'my-app/tsconfig.json');
expect(tsconfig.references).toEqual([
{
path: './tsconfig.app.json',
@ -116,8 +115,8 @@ describe('app', () => {
},
]);
expect(tsconfig.compilerOptions.strict).toEqual(true);
const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.outDir).toEqual('../../dist/out-tsc');
const tsconfigApp = readJson(appTree, 'my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.outDir).toEqual('../dist/out-tsc');
expect(tsconfigApp.extends).toEqual('./tsconfig.json');
expect(tsconfigApp.exclude).toEqual([
'jest.config.ts',
@ -131,26 +130,26 @@ describe('app', () => {
'src/**/*.test.jsx',
]);
const eslintJson = readJson(appTree, 'apps/my-app/.eslintrc.json');
const eslintJson = readJson(appTree, 'my-app/.eslintrc.json');
expect(eslintJson.extends).toEqual([
'plugin:@nx/react',
'../../.eslintrc.json',
'../.eslintrc.json',
]);
expect(appTree.exists('apps/my-app-e2e/cypress.config.ts')).toBeTruthy();
const tsconfigE2E = readJson(appTree, 'apps/my-app-e2e/tsconfig.json');
expect(appTree.exists('my-app-e2e/cypress.config.ts')).toBeTruthy();
const tsconfigE2E = readJson(appTree, 'my-app-e2e/tsconfig.json');
expect(tsconfigE2E).toMatchInlineSnapshot(`
{
"compilerOptions": {
"allowJs": true,
"outDir": "../../dist/out-tsc",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
"node",
],
},
"extends": "../../tsconfig.base.json",
"extends": "../tsconfig.base.json",
"include": [
"src/**/*.ts",
"src/**/*.js",
@ -163,40 +162,43 @@ describe('app', () => {
it('should extend from root tsconfig.base.json', async () => {
await applicationGenerator(appTree, schema);
const tsConfig = readJson(appTree, 'apps/my-app/tsconfig.json');
expect(tsConfig.extends).toEqual('../../tsconfig.base.json');
const tsConfig = readJson(appTree, 'my-app/tsconfig.json');
expect(tsConfig.extends).toEqual('../tsconfig.base.json');
});
});
describe('nested', () => {
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);
expect(projectsConfigurations.get('my-dir-my-app').root).toEqual(
'apps/my-dir/my-app'
expect(projectsConfigurations.get('my-app').root).toEqual(
'my-dir/my-app'
);
expect(projectsConfigurations.get('my-dir-my-app-e2e').root).toEqual(
'apps/my-dir/my-app-e2e'
expect(projectsConfigurations.get('my-app-e2e').root).toEqual(
'my-dir/my-app-e2e'
);
});
it('should update tags and implicit deps', async () => {
await applicationGenerator(appTree, {
...schema,
directory: 'myDir',
directory: 'my-dir/my-app',
tags: 'one,two',
});
const projects = Object.fromEntries(getProjects(appTree));
expect(projects).toMatchObject({
'my-dir-my-app': {
'my-app': {
tags: ['one', 'two'],
},
'my-dir-my-app-e2e': {
'my-app-e2e': {
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 () => {
await applicationGenerator(appTree, {
...schema,
directory: 'myOuterDir\\myInnerDir',
directory: 'my-outer-dir\\my-inner-dir\\my-app',
});
const projectsConfigurations = getProjects(appTree);
expect(
projectsConfigurations.get('my-outer-dir-my-inner-dir-my-app').root
).toEqual('apps/my-outer-dir/my-inner-dir/my-app');
expect(
projectsConfigurations.get('my-outer-dir-my-inner-dir-my-app-e2e').root
).toEqual('apps/my-outer-dir/my-inner-dir/my-app-e2e');
expect(projectsConfigurations.get('my-app').root).toEqual(
'my-outer-dir/my-inner-dir/my-app'
);
expect(projectsConfigurations.get('my-app-e2e').root).toEqual(
'my-outer-dir/my-inner-dir/my-app-e2e'
);
});
it('should generate files', async () => {
@ -223,14 +225,17 @@ describe('app', () => {
expect(lookupFn(config)).toEqual(expectedValue);
};
await applicationGenerator(appTree, { ...schema, directory: 'myDir' });
await applicationGenerator(appTree, {
...schema,
directory: 'my-dir/my-app',
});
// Make sure these exist
[
'apps/my-dir/my-app/src/main.tsx',
'apps/my-dir/my-app/src/app/app.tsx',
'apps/my-dir/my-app/src/app/app.spec.tsx',
'apps/my-dir/my-app/src/app/app.module.css',
'my-dir/my-app/src/main.tsx',
'my-dir/my-app/src/app/app.tsx',
'my-dir/my-app/src/app/app.spec.tsx',
'my-dir/my-app/src/app/app.module.css',
].forEach((path) => {
expect(appTree.exists(path)).toBeTruthy();
});
@ -238,12 +243,12 @@ describe('app', () => {
// 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,
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,
expectedValue: [
'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,
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,
expectedValue: ['plugin:@nx/react', '../../../.eslintrc.json'],
expectedValue: ['plugin:@nx/react', '../../.eslintrc.json'],
},
].forEach(hasJsonValue);
});
@ -273,31 +278,33 @@ describe('app', () => {
it('should setup playwright', async () => {
await applicationGenerator(appTree, {
...schema,
directory: 'myDir',
directory: 'my-dir/my-app',
e2eTestRunner: 'playwright',
});
expect(
appTree.exists('apps/my-dir/my-app-e2e/playwright.config.ts')
appTree.exists('my-dir/my-app-e2e/playwright.config.ts')
).toBeTruthy();
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();
expect(
readProjectConfiguration(appTree, 'my-dir-my-app-e2e')?.targets?.e2e
?.executor
readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
).toEqual('@nx/playwright:playwright');
});
});
it('should create Nx specific template', async () => {
await applicationGenerator(appTree, { ...schema, directory: 'myDir' });
await applicationGenerator(appTree, {
...schema,
directory: 'my-dir/my-app',
});
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();
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');
});
@ -315,7 +322,7 @@ describe('app', () => {
});
expect(() => {
readJson(appTree, `apps/my-app/.babelrc`);
readJson(appTree, `my-app/.babelrc`);
}).not.toThrow();
}
);
@ -323,16 +330,14 @@ describe('app', () => {
describe('--style scss', () => {
it('should generate scss styles', async () => {
await applicationGenerator(appTree, { ...schema, style: 'scss' });
expect(appTree.exists('apps/my-app/src/app/app.module.scss')).toEqual(
true
);
expect(appTree.exists('my-app/src/app/app.module.scss')).toEqual(true);
});
});
it('should setup jest with tsx support', async () => {
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'],`
);
});
@ -340,7 +345,7 @@ describe('app', () => {
it('should setup jest with babel-jest support', async () => {
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'] }]"
);
});
@ -348,7 +353,7 @@ describe('app', () => {
it('should setup jest without serializers', async () => {
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',`
);
});
@ -366,24 +371,24 @@ describe('app', () => {
expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']);
expect(targetConfig.build.options).toEqual({
compiler: 'babel',
assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],
index: 'apps/my-app/src/index.html',
main: 'apps/my-app/src/main.tsx',
assets: ['my-app/src/favicon.ico', 'my-app/src/assets'],
index: 'my-app/src/index.html',
main: 'my-app/src/main.tsx',
baseHref: '/',
outputPath: 'dist/apps/my-app',
outputPath: 'dist/my-app',
scripts: [],
styles: ['apps/my-app/src/styles.css'],
tsConfig: 'apps/my-app/tsconfig.app.json',
styles: ['my-app/src/styles.css'],
tsConfig: 'my-app/tsconfig.app.json',
isolatedConfig: true,
webpackConfig: 'apps/my-app/webpack.config.js',
webpackConfig: 'my-app/webpack.config.js',
});
expect(targetConfig.build.configurations.production).toEqual({
optimization: true,
extractLicenses: true,
fileReplacements: [
{
replace: 'apps/my-app/src/environments/environment.ts',
with: 'apps/my-app/src/environments/environment.prod.ts',
replace: 'my-app/src/environments/environment.ts',
with: 'my-app/src/environments/environment.prod.ts',
},
],
namedChunks: false,
@ -405,13 +410,11 @@ describe('app', () => {
expect(targetConfig.build.executor).toEqual('@nx/vite:build');
expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']);
expect(targetConfig.build.options).toEqual({
outputPath: 'dist/apps/my-app',
outputPath: 'dist/my-app',
});
expect(appTree.exists(`my-app/environments/environment.ts`)).toBeFalsy();
expect(
appTree.exists(`apps/my-app/environments/environment.ts`)
).toBeFalsy();
expect(
appTree.exists(`apps/my-app/environments/environment.prod.ts`)
appTree.exists(`my-app/environments/environment.prod.ts`)
).toBeFalsy();
});
@ -462,7 +465,7 @@ describe('app', () => {
executor: '@nx/linter:eslint',
outputs: ['{options.outputFile}'],
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('apps/my-app/src/app/app.spec.tsx')).toBeFalsy();
expect(appTree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
expect(appTree.exists('apps/my-app/jest.config.ts')).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeFalsy();
expect(appTree.exists('my-app/tsconfig.spec.json')).toBeFalsy();
expect(appTree.exists('my-app/jest.config.ts')).toBeFalsy();
const projectsConfigurations = getProjects(appTree);
expect(projectsConfigurations.get('my-app').targets.test).toBeUndefined();
expect(projectsConfigurations.get('my-app').targets.lint)
@ -486,7 +489,7 @@ describe('app', () => {
"executor": "@nx/linter:eslint",
"options": {
"lintFilePatterns": [
"apps/my-app/**/*.{ts,tsx,js,jsx}",
"my-app/**/*.{ts,tsx,js,jsx}",
],
},
"outputs": [
@ -501,7 +504,7 @@ describe('app', () => {
it('should not generate test configuration', async () => {
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);
expect(projectsConfigurations.get('my-app-e2e')).toBeUndefined();
});
@ -514,12 +517,8 @@ describe('app', () => {
e2eTestRunner: 'playwright',
});
expect(
appTree.exists('apps/my-app-e2e/playwright.config.ts')
).toBeTruthy();
expect(
appTree.exists('apps/my-app-e2e/src/example.spec.ts')
).toBeTruthy();
expect(appTree.exists('my-app-e2e/playwright.config.ts')).toBeTruthy();
expect(appTree.exists('my-app-e2e/src/example.spec.ts')).toBeTruthy();
expect(
readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
).toEqual('@nx/playwright:playwright');
@ -530,16 +529,16 @@ describe('app', () => {
it('should use upper case app file', async () => {
await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true });
expect(appTree.exists('apps/my-app/src/app/App.tsx')).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();
expect(appTree.exists('my-app/src/app/App.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/App.spec.tsx')).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 () => {
await applicationGenerator(appTree, { ...schema, pascalCaseFiles: true });
const appSpecContent = appTree
.read('apps/my-app/src/app/App.spec.tsx')
.read('my-app/src/app/App.spec.tsx')
.toString();
expect(appSpecContent).toMatch(/import App from '.\/App'/);
@ -549,7 +548,7 @@ describe('app', () => {
it('should generate functional components by default', async () => {
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/);
});
@ -558,7 +557,7 @@ describe('app', () => {
await applicationGenerator(appTree, { ...schema });
const appSpecContent = appTree
.read('apps/my-app/src/app/app.spec.tsx')
.read('my-app/src/app/app.spec.tsx')
.toString();
expect(appSpecContent).toMatch(/import App from '.\/app'/);
@ -584,12 +583,12 @@ describe('app', () => {
).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(`
{
"extends": [
"plugin:@nx/react",
"../../.eslintrc.json",
"../.eslintrc.json",
],
"ignorePatterns": [
"!**/*",
@ -627,7 +626,7 @@ describe('app', () => {
it('should generate class components', async () => {
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/);
});
@ -637,16 +636,16 @@ describe('app', () => {
it('should not generate any styles', async () => {
await applicationGenerator(appTree, { ...schema, style: 'none' });
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy();
expect(appTree.exists('apps/my-app/src/app/app.css')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.scss')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.styl')).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.module.css')).toBeFalsy();
expect(appTree.exists('apps/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.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/app.css')).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.scss')).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.styl')).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.module.css')).toBeFalsy();
expect(appTree.exists('my-app/src/app/app.module.scss')).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('<StyledApp>');
expect(content).not.toContain('@emotion/styled');
@ -715,14 +714,12 @@ describe('app', () => {
});
expect(
appTree.exists('apps/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')
appTree.exists('my-app/src/app/app.styled-components')
).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('<StyledApp>');
});
@ -745,12 +742,10 @@ describe('app', () => {
style: '@emotion/styled',
});
expect(
appTree.exists('apps/my-app/src/app/app.@emotion/styled')
).toBeFalsy();
expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/app.@emotion/styled')).toBeFalsy();
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('@emotion/styled');
expect(content).toContain('<StyledApp>');
});
@ -761,7 +756,7 @@ describe('app', () => {
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(
'@emotion/react'
);
@ -814,10 +809,10 @@ describe('app', () => {
style: 'styled-jsx',
});
expect(appTree.exists('apps/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.styled-jsx')).toBeFalsy();
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>');
});
@ -837,7 +832,7 @@ describe('app', () => {
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');
});
});
@ -849,11 +844,9 @@ describe('app', () => {
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
.read('apps/my-app/src/app/app.tsx')
.toString();
const componentSource = appTree.read('my-app/src/app/app.tsx').toString();
expect(mainSource).toContain('react-router-dom');
expect(mainSource).toContain('<BrowserRouter>');
@ -873,7 +866,7 @@ describe('app', () => {
expect(
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 () => {
@ -920,10 +913,8 @@ describe('app', () => {
name: 'plain',
minimal: true,
});
expect(appTree.exists('apps/plain/src/app/nx-welcome.tsx')).toBeFalsy();
expect(
appTree.read('apps/plain/src/app/app.tsx', 'utf-8')
).toMatchSnapshot();
expect(appTree.exists('plain/src/app/nx-welcome.tsx')).toBeFalsy();
expect(appTree.read('plain/src/app/app.tsx', 'utf-8')).toMatchSnapshot();
});
});
@ -934,8 +925,8 @@ describe('app', () => {
js: true,
});
expect(appTree.exists('/apps/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/app/app.js')).toBe(true);
expect(appTree.exists('/my-app/src/main.js')).toBe(true);
});
});
@ -945,7 +936,7 @@ describe('app', () => {
...schema,
strict: false,
});
const tsconfigJson = readJson(appTree, '/apps/my-app/tsconfig.json');
const tsconfigJson = readJson(appTree, '/my-app/tsconfig.json');
expect(
tsconfigJson.compilerOptions.forceConsistentCasingInFileNames
@ -974,7 +965,7 @@ describe('app', () => {
compiler: 'swc',
});
expect(readJson(appTree, '/apps/my-app/.swcrc')).toEqual({
expect(readJson(appTree, '/my-app/.swcrc')).toEqual({
jsc: { target: 'es2016' },
});
});
@ -1022,7 +1013,7 @@ describe('app', () => {
let viteAppTree: Tree;
beforeEach(async () => {
viteAppTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
viteAppTree = createTreeWithEmptyWorkspace();
await applicationGenerator(viteAppTree, { ...schema, bundler: 'vite' });
});
@ -1046,7 +1037,7 @@ describe('app', () => {
});
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([
'vite/client',
'vitest',
@ -1054,15 +1045,13 @@ describe('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('/apps/my-app/vite.config.ts')).toBe(true);
expect(viteAppTree.exists('/my-app/index.html')).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 () => {
// check to make sure that the other spec file exists
expect(viteAppTree.exists('/apps/my-app/src/app/app.spec.tsx')).toBe(
true
);
expect(viteAppTree.exists('/my-app/src/app/app.spec.tsx')).toBe(true);
await applicationGenerator(viteAppTree, {
...schema,
@ -1071,9 +1060,9 @@ describe('app', () => {
inSourceTests: true,
});
expect(
viteAppTree.exists('/apps/insourceTests/src/app/app.spec.tsx')
).toBe(false);
expect(viteAppTree.exists('/insourceTests/src/app/app.spec.tsx')).toBe(
false
);
});
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 ${
testConfig.plainJS ? 'plain JS' : 'TypeScript'
} setup`, () => {
let cmpPath = `libs/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 cmpPath = `test-ui-lib/src/lib/test-ui-lib.${fileCmpExt}`;
let cypressStorySpecFilePath = `test-ui-lib-e2e/src/integration/test-ui-lib/test-ui-lib.spec.${fileExt}`;
if (!testConfig.plainJS) {
// hacky, but we should do this check only if we run with TypeScript,
@ -155,17 +155,17 @@ describe('react:component-cypress-spec', () => {
unitTestRunner: 'none',
});
// 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, {
componentPath: `lib/test-ui-lib.tsx`,
project: 'test-ui-lib',
cypressProject: 'other-e2e',
});
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();
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();
});
@ -179,8 +179,8 @@ describe('react:component-cypress-spec', () => {
style: 'css',
unitTestRunner: 'none',
});
appTree.delete(`apps/other-e2e/cypress.config.ts`);
appTree.write(`apps/other-e2e/cypress.json`, '{}');
appTree.delete(`other-e2e/cypress.config.ts`);
appTree.write(`other-e2e/cypress.json`, '{}');
await componentCypressSpecGenerator(appTree, {
componentPath: `lib/test-ui-lib.tsx`,
project: 'test-ui-lib',
@ -188,12 +188,12 @@ describe('react:component-cypress-spec', () => {
});
expect(
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();
expect(
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();
});
@ -203,7 +203,7 @@ export async function createTestUILib(
libName: string,
plainJS = false
): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
name: libName,
linter: Linter.EsLint,
@ -213,6 +213,7 @@ export async function createTestUILib(
skipTsConfig: false,
style: 'css',
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
// create some Nx app that we'll use to generate the cypress
@ -225,6 +226,7 @@ export async function createTestUILib(
skipFormat: true,
style: 'css',
unitTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
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', () => {
let appTree: Tree;
let cmpPath = 'libs/test-ui-lib/src/lib/test-ui-lib.tsx';
let storyFilePath = 'libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx';
let cmpPath = 'test-ui-lib/src/lib/test-ui-lib.tsx';
let storyFilePath = 'test-ui-lib/src/lib/test-ui-lib.stories.tsx';
describe('default setup', () => {
beforeEach(async () => {
@ -31,7 +31,7 @@ describe('react:component-story', () => {
});
} catch (e) {
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', () => {
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 () => {
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 './test.scss';
@ -494,11 +494,11 @@ describe('react:component-story', () => {
});
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 =
'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 =
'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(storyFilePathTwo, '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> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
name: libName,
linter: Linter.EsLint,
@ -533,6 +533,7 @@ export async function createTestUILib(libName: string): Promise<Tree> {
skipTsConfig: false,
style: 'css',
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
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>
> = assertMinimumCypressVersion as never;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
it('should create component test for tsx files', async () => {
mockedAssertMinimumCypressVersion.mockReturnValue();
@ -31,7 +31,7 @@ describe(componentTestGenerator.name, () => {
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 () => {
@ -52,7 +52,7 @@ describe(componentTestGenerator.name, () => {
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 () => {
@ -66,13 +66,13 @@ describe(componentTestGenerator.name, () => {
unitTestRunner: 'none',
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, {
project: 'some-lib',
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'
);
});
@ -111,10 +111,10 @@ describe(componentTestGenerator.name, () => {
await componentTestGenerator(tree, {
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', () => {
@ -131,9 +131,9 @@ describe(componentTestGenerator.name, () => {
});
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 */
export interface AnotherCmpProps {
@ -150,12 +150,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
);
await componentTestGenerator(tree, {
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(
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();
});
it('should handle no props', async () => {
@ -171,9 +171,9 @@ export function AnotherCmp(props: AnotherCmpProps) {
});
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() {
return <button>AnotherCmp</button>;
@ -182,12 +182,12 @@ export function AnotherCmp() {
);
await componentTestGenerator(tree, {
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(
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();
});
it('should handle default export', async () => {
@ -200,10 +200,11 @@ export function AnotherCmp() {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
tree.write(
'libs/some-lib/src/lib/some-lib.tsx',
'some-lib/src/lib/some-lib.tsx',
`
/* eslint-disable-next-line */
export interface AnotherCmpProps {
@ -224,12 +225,12 @@ export function AnotherCmp2() {
);
await componentTestGenerator(tree, {
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(
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();
});
@ -243,10 +244,11 @@ export function AnotherCmp2() {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
tree.write(
'libs/some-lib/src/lib/some-lib.tsx',
'some-lib/src/lib/some-lib.tsx',
`
/* eslint-disable-next-line */
export interface AnotherCmpProps {
@ -267,12 +269,12 @@ export function AnotherCmp2() {
);
await componentTestGenerator(tree, {
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(
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();
});
});
@ -288,10 +290,11 @@ export function AnotherCmp2() {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
tree.write(
'libs/some-lib/src/lib/some-lib.tsx',
'some-lib/src/lib/some-lib.tsx',
`
/* eslint-disable-next-line */
export interface AnotherCmpProps {
@ -308,12 +311,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
);
await componentTestGenerator(tree, {
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(
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();
});
it('should handle no props', async () => {
@ -327,15 +330,16 @@ export function AnotherCmp(props: AnotherCmpProps) {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
await componentTestGenerator(tree, {
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(
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();
});
it('should handle default export', async () => {
@ -348,10 +352,11 @@ export function AnotherCmp(props: AnotherCmpProps) {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
tree.write(
'libs/some-lib/src/lib/some-lib.tsx',
'some-lib/src/lib/some-lib.tsx',
`
/* eslint-disable-next-line */
export interface AnotherCmpProps {
@ -368,12 +373,12 @@ export default function AnotherCmp(props: AnotherCmpProps) {
);
await componentTestGenerator(tree, {
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(
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();
});
it('should handle named exports', async () => {
@ -386,10 +391,11 @@ export default function AnotherCmp(props: AnotherCmpProps) {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
tree.write(
'libs/some-lib/src/lib/some-lib.tsx',
'some-lib/src/lib/some-lib.tsx',
`
/* eslint-disable-next-line */
export interface AnotherCmpProps {
@ -406,12 +412,12 @@ export function AnotherCmp(props: AnotherCmpProps) {
);
await componentTestGenerator(tree, {
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(
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();
});
});

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 { createApp, createLib } from '../../utils/testing-generators';
import { componentGenerator } from './component';
// 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
jest.mock('@nx/cypress/src/utils/cypress-version');
describe('component', () => {
let appTree: Tree;
let projectName: string;
@ -16,7 +18,7 @@ describe('component', () => {
beforeEach(async () => {
mockedInstalledCypressVersion.mockReturnValue(10);
projectName = 'my-lib';
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
appTree = createTreeWithEmptyWorkspace();
await createApp(appTree, 'my-app');
await createLib(appTree, projectName);
jest.spyOn(logger, 'warn').mockImplementation(() => {});
@ -34,19 +36,17 @@ describe('component', () => {
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(
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();
expect(
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
).toMatch(/import styles from '.\/hello.module.css'/);
expect(
appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
).toMatch(/<div className={styles\['container']}>/);
expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
/import styles from '.\/hello.module.css'/
);
expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
/<div className={styles\['container']}>/
);
});
it('should generate files with global CSS', async () => {
@ -57,20 +57,16 @@ describe('component', () => {
globalCss: true,
});
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx')
).toBeTruthy();
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.css')).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css')
).toBeFalsy();
expect(
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>/);
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.css')).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.module.css')).toBeFalsy();
expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
/import '.\/hello.css'/
);
expect(appTree.read('my-lib/src/lib/hello/hello.tsx').toString()).toMatch(
/<div>/
);
});
it('should generate files for an app', async () => {
@ -80,12 +76,10 @@ describe('component', () => {
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(
appTree.exists('apps/my-app/src/app/hello/hello.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/hello/hello.module.css')
appTree.exists('my-app/src/app/hello/hello.module.css')
).toBeTruthy();
});
@ -97,14 +91,10 @@ describe('component', () => {
globalCss: true,
});
expect(appTree.exists('apps/my-app/src/app/hello/hello.tsx')).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/hello/hello.spec.tsx')
).toBeTruthy();
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();
expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/hello/hello.spec.tsx')).toBeTruthy();
expect(appTree.exists('my-app/src/app/hello/hello.css')).toBeTruthy();
expect(appTree.exists('my-app/src/app/hello/hello.module.css')).toBeFalsy();
});
describe('--classComponent', () => {
@ -117,7 +107,7 @@ describe('component', () => {
});
const tsxFileContent = appTree.read(
`libs/my-lib/src/lib/hello/hello.tsx/`,
`my-lib/src/lib/hello/hello.tsx/`,
'utf-8'
);
expect(tsxFileContent).toMatch(/override\srender\(\)/);
@ -133,7 +123,7 @@ describe('component', () => {
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/);
});
@ -146,7 +136,7 @@ describe('component', () => {
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/);
});
@ -160,14 +150,12 @@ describe('component', () => {
project: projectName,
pascalCaseFiles: true,
});
expect(appTree.exists('my-lib/src/lib/hello/Hello.tsx')).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.tsx')
appTree.exists('my-lib/src/lib/hello/Hello.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/Hello.module.css')
appTree.exists('my-lib/src/lib/hello/Hello.module.css')
).toBeTruthy();
});
});
@ -182,13 +170,13 @@ describe('component', () => {
pascalCaseDirectory: true,
});
expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.tsx')
appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.tsx')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.spec.tsx')
appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.spec.tsx')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/HelloWorld/HelloWorld.module.css')
appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.module.css')
).toBeTruthy();
});
});
@ -200,32 +188,24 @@ describe('component', () => {
project: projectName,
style: 'none',
});
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
appTree.exists('my-lib/src/lib/hello/hello.spec.tsx')
).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(
appTree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx')
).toBeTruthy();
expect(appTree.exists('libs/my-lib/src/lib/hello/hello.css')).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.scss')
appTree.exists('my-lib/src/lib/hello/hello.module.css')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styl')
appTree.exists('my-lib/src/lib/hello/hello.module.scss')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css')
).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')
appTree.exists('my-lib/src/lib/hello/hello.module.styl')
).toBeFalsy();
const content = appTree
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
expect(content).not.toContain('styled-components');
expect(content).not.toContain('<StyledHello>');
expect(content).not.toContain('@emotion/styled');
@ -250,15 +230,11 @@ describe('component', () => {
});
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styled-components')
appTree.exists('my-lib/src/lib/hello/hello.styled-components')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
const content = appTree
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
expect(content).toContain('styled-components');
expect(content).toContain('<StyledHello>');
});
@ -284,15 +260,11 @@ describe('component', () => {
});
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.@emotion/styled')
appTree.exists('my-lib/src/lib/hello/hello.@emotion/styled')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
const content = appTree
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
expect(content).toContain('@emotion/styled');
expect(content).toContain('<StyledHello>');
});
@ -319,15 +291,11 @@ describe('component', () => {
});
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.styled-jsx')
appTree.exists('my-lib/src/lib/hello/hello.styled-jsx')
).toBeFalsy();
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.tsx')
).toBeTruthy();
expect(appTree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
const content = appTree
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
expect(content).toContain('<style jsx>');
expect(content).not.toContain("styles['container']");
});
@ -353,9 +321,7 @@ describe('component', () => {
routing: true,
});
const content = appTree
.read('libs/my-lib/src/lib/hello/hello.tsx')
.toString();
const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString();
expect(content).toContain('react-router-dom');
expect(content).toMatch(/<Route\s*path="\/"/);
expect(content).toMatch(/<Link\s*to="\/"/);
@ -374,7 +340,7 @@ describe('component', () => {
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 () => {
@ -385,9 +351,7 @@ describe('component', () => {
directory: 'lib/foo',
});
expect(
appTree.exists('/libs/my-lib/src/lib/foo/hello-world/hello-world.tsx')
);
expect(appTree.exists('/my-lib/src/lib/foo/hello-world/hello-world.tsx'));
});
});
@ -400,7 +364,7 @@ describe('component', () => {
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 () => {
await componentGenerator(appTree, {
@ -411,7 +375,7 @@ describe('component', () => {
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>
> = assertMinimumCypressVersion as never;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
afterEach(() => {
@ -52,6 +52,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -61,6 +62,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
projectGraph = {
@ -93,7 +95,7 @@ describe('React:CypressComponentTestConfiguration', () => {
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();
});
@ -108,6 +110,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -117,6 +120,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
// --build-target still needs to build the graph in order for readTargetOptions to work
projectGraph = {
@ -149,7 +153,7 @@ describe('React:CypressComponentTestConfiguration', () => {
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(
@ -157,7 +161,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({
executor: '@nx/cypress:cypress',
options: {
cypressConfig: 'libs/some-lib/cypress.config.ts',
cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build',
skipServe: true,
testingType: 'component',
@ -175,6 +179,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -184,6 +189,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
projectGraph = {
@ -215,7 +221,7 @@ describe('React:CypressComponentTestConfiguration', () => {
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(
@ -223,7 +229,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({
executor: '@nx/cypress:cypress',
options: {
cypressConfig: 'libs/some-lib/cypress.config.ts',
cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build',
skipServe: true,
testingType: 'component',
@ -241,6 +247,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'webpack',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -250,6 +257,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
projectGraph = {
@ -281,7 +289,7 @@ describe('React:CypressComponentTestConfiguration', () => {
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(
@ -289,7 +297,7 @@ describe('React:CypressComponentTestConfiguration', () => {
).toEqual({
executor: '@nx/cypress:cypress',
options: {
cypressConfig: 'libs/some-lib/cypress.config.ts',
cypressConfig: 'some-lib/cypress.config.ts',
devServerTarget: 'my-app:build',
skipServe: true,
testingType: 'component',
@ -306,6 +314,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -315,6 +324,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'jest',
component: true,
projectNameAndRootFormat: 'as-provided',
});
await componentGenerator(tree, {
name: 'another-cmp',
@ -328,20 +338,17 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build',
});
expect(tree.exists('libs/some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
const compTest = tree.read(
'libs/some-lib/src/lib/some-lib.cy.tsx',
'utf-8'
);
expect(tree.exists('some-lib/src/lib/some-lib.cy.tsx')).toBeTruthy();
const compTest = tree.read('some-lib/src/lib/some-lib.cy.tsx', 'utf-8');
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(
'libs/some-lib/src/lib/another-cmp/another-cmp.cy.tsx',
'some-lib/src/lib/another-cmp/another-cmp.cy.tsx',
'utf-8'
);
expect(compTestNested).toMatchSnapshot();
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();
});
it('should generate tests for existing js components', async () => {
@ -354,6 +361,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -363,6 +371,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'jest',
js: true,
projectNameAndRootFormat: 'as-provided',
});
await componentGenerator(tree, {
name: 'some-cmp',
@ -384,19 +393,19 @@ describe('React:CypressComponentTestConfiguration', () => {
buildTarget: 'my-app:build',
});
expect(tree.exists('libs/some-lib/src/lib/some-cmp.cy.js')).toBeTruthy();
const compTest = tree.read('libs/some-lib/src/lib/some-cmp.cy.js', 'utf-8');
expect(tree.exists('some-lib/src/lib/some-cmp.cy.js')).toBeTruthy();
const compTest = tree.read('some-lib/src/lib/some-cmp.cy.js', 'utf-8');
expect(compTest).toMatchSnapshot();
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();
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'
);
expect(compTestNested).toMatchSnapshot();
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();
});
@ -410,6 +419,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
name: 'some-lib',
@ -418,6 +428,7 @@ describe('React:CypressComponentTestConfiguration', () => {
linter: Linter.None,
skipFormat: false,
skipTsConfig: false,
projectNameAndRootFormat: 'as-provided',
});
const appConfig = readProjectConfiguration(tree, 'my-app');
appConfig.targets['build'].executor = 'something/else';
@ -464,6 +475,7 @@ describe('React:CypressComponentTestConfiguration', () => {
unitTestRunner: 'none',
name: 'my-app',
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
linter: Linter.EsLint,
@ -473,6 +485,7 @@ describe('React:CypressComponentTestConfiguration', () => {
style: 'scss',
unitTestRunner: 'none',
component: true,
projectNameAndRootFormat: 'as-provided',
});
projectGraph = {
@ -505,7 +518,7 @@ describe('React:CypressComponentTestConfiguration', () => {
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(`
"import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
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(`
"import { mount } from 'cypress/react18';
// ***********************************************************

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

@ -9,7 +9,7 @@ describe('hook', () => {
beforeEach(async () => {
projectName = 'my-lib';
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
appTree = createTreeWithEmptyWorkspace();
await createApp(appTree, 'my-app');
await createLib(appTree, projectName);
jest.spyOn(logger, 'warn').mockImplementation(() => {});
@ -26,11 +26,9 @@ describe('hook', () => {
project: projectName,
});
expect(appTree.exists('my-lib/src/lib/use-form/use-form.ts')).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/use-form/use-form.ts')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/use-form/use-form.spec.tsx')
appTree.exists('my-lib/src/lib/use-form/use-form.spec.tsx')
).toBeTruthy();
});
@ -40,11 +38,9 @@ describe('hook', () => {
project: 'my-app',
});
expect(appTree.exists('my-app/src/app/use-form/use-form.ts')).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/use-form/use-form.ts')
).toBeTruthy();
expect(
appTree.exists('apps/my-app/src/app/use-form/use-form.spec.tsx')
appTree.exists('my-app/src/app/use-form/use-form.spec.tsx')
).toBeTruthy();
});
@ -56,10 +52,10 @@ describe('hook', () => {
});
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();
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();
});
@ -70,10 +66,10 @@ describe('hook', () => {
skipTests: true,
});
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();
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();
});
@ -85,7 +81,7 @@ describe('hook', () => {
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/);
});
@ -97,7 +93,7 @@ describe('hook', () => {
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/);
});
@ -111,10 +107,10 @@ describe('hook', () => {
skipTests: true,
});
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();
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();
});
});
@ -127,10 +123,10 @@ describe('hook', () => {
pascalCaseFiles: true,
});
expect(
appTree.exists('libs/my-lib/src/lib/use-hello/useHello.ts')
appTree.exists('my-lib/src/lib/use-hello/useHello.ts')
).toBeTruthy();
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();
});
});
@ -144,10 +140,10 @@ describe('hook', () => {
pascalCaseDirectory: true,
});
expect(
appTree.exists('libs/my-lib/src/lib/useHello/useHello.ts')
appTree.exists('my-lib/src/lib/useHello/useHello.ts')
).toBeTruthy();
expect(
appTree.exists('libs/my-lib/src/lib/useHello/useHello.spec.tsx')
appTree.exists('my-lib/src/lib/useHello/useHello.spec.tsx')
).toBeTruthy();
});
});
@ -161,7 +157,7 @@ describe('hook', () => {
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 () => {
@ -173,9 +169,7 @@ describe('hook', () => {
});
expect(
appTree.exists(
'/libs/my-lib/src/lib/foo/use-hello-world/use-hello-world.ts'
)
appTree.exists('/my-lib/src/lib/foo/use-hello-world/use-hello-world.ts')
);
});
});
@ -189,7 +183,7 @@ describe('hook', () => {
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 () => {
@ -201,7 +195,7 @@ describe('hook', () => {
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;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
it('should generate host files and configs', async () => {
@ -18,24 +18,26 @@ describe('hostGenerator', () => {
linter: Linter.None,
unitTestRunner: 'none',
e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/test/tsconfig.json'));
expect(tree.exists('apps/test/webpack.config.prod.js'));
expect(tree.exists('apps/test/webpack.config.js'));
expect(tree.exists('apps/test/src/bootstrap.tsx'));
expect(tree.exists('apps/test/src/main.ts'));
expect(tree.exists('apps/test/src/remotes.d.ts'));
expect(tree.exists('test/tsconfig.json'));
expect(tree.exists('test/webpack.config.prod.js'));
expect(tree.exists('test/webpack.config.js'));
expect(tree.exists('test/src/bootstrap.tsx'));
expect(tree.exists('test/src/main.ts'));
expect(tree.exists('test/src/remotes.d.ts'));
});
it('should install @nx/web for the file-server executor', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await hostGenerator(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
unitTestRunner: 'none',
e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
const packageJson = readJson(tree, 'package.json');
@ -50,18 +52,19 @@ describe('hostGenerator', () => {
linter: Linter.None,
unitTestRunner: 'none',
e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/test/tsconfig.json'));
expect(tree.exists('apps/test/webpack.config.prod.js'));
expect(tree.exists('apps/test/webpack.config.server.js'));
expect(tree.exists('apps/test/webpack.config.js'));
expect(tree.exists('apps/test/src/main.server.tsx'));
expect(tree.exists('apps/test/src/bootstrap.tsx'));
expect(tree.exists('apps/test/src/main.ts'));
expect(tree.exists('apps/test/src/remotes.d.ts'));
expect(tree.exists('test/tsconfig.json'));
expect(tree.exists('test/webpack.config.prod.js'));
expect(tree.exists('test/webpack.config.server.js'));
expect(tree.exists('test/webpack.config.js'));
expect(tree.exists('test/src/main.server.tsx'));
expect(tree.exists('test/src/bootstrap.tsx'));
expect(tree.exists('test/src/main.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: {
outDir: '../../out-tsc/server',
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 () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await hostGenerator(tree, {
name: 'hostApp',

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

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

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

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

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

@ -9,7 +9,7 @@ describe('redux', () => {
let appTree: Tree;
beforeEach(async () => {
appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
name: 'my-lib',
linter: Linter.EsLint,
@ -17,6 +17,7 @@ describe('redux', () => {
skipTsConfig: false,
style: 'css',
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
});
@ -37,11 +38,9 @@ describe('redux', () => {
project: 'my-lib',
});
expect(appTree.exists('/my-lib/src/lib/my-slice.slice.ts')).toBeTruthy();
expect(
appTree.exists('/libs/my-lib/src/lib/my-slice.slice.ts')
).toBeTruthy();
expect(
appTree.exists('/libs/my-lib/src/lib/my-slice.slice.spec.ts')
appTree.exists('/my-lib/src/lib/my-slice.slice.spec.ts')
).toBeTruthy();
});
@ -54,6 +53,7 @@ describe('redux', () => {
style: 'css',
unitTestRunner: 'none',
name: 'my-app',
projectNameAndRootFormat: 'as-provided',
});
await reduxGenerator(appTree, {
name: 'my-slice',
@ -71,7 +71,7 @@ describe('redux', () => {
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('configureStore');
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', () => {
it('should install @nx/web for the file-server executor', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await remote(tree, {
name: 'test',
devServerPort: 4201,
@ -14,6 +14,7 @@ describe('remote generator', () => {
skipFormat: false,
style: 'css',
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
const packageJson = readJson(tree, 'package.json');
@ -21,7 +22,7 @@ describe('remote generator', () => {
});
it('should not set the remote as the default project', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await remote(tree, {
name: 'test',
devServerPort: 4201,
@ -30,6 +31,7 @@ describe('remote generator', () => {
skipFormat: false,
style: 'css',
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
const { defaultProject } = readNxJson(tree);
@ -37,7 +39,7 @@ describe('remote generator', () => {
});
it('should generate a remote-specific server.ts file for --ssr', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await remote(tree, {
name: 'test',
@ -48,10 +50,11 @@ describe('remote generator', () => {
style: 'css',
unitTestRunner: 'jest',
ssr: true,
projectNameAndRootFormat: 'as-provided',
});
const mainFile = tree.read('apps/test/server.ts', 'utf-8');
expect(mainFile).toContain(`join(process.cwd(), 'dist/apps/test/browser')`);
const mainFile = tree.read('test/server.ts', 'utf-8');
expect(mainFile).toContain(`join(process.cwd(), 'dist/test/browser')`);
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,
unitTestRunner: '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.styl`}
`('should update stylesheet', async ({ stylesPath }) => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {},
});
tree.write(`apps/example/${stylesPath}`, `/* existing content */`);
tree.write(`example/${stylesPath}`, `/* existing content */`);
await update(tree, {
project: 'example',
});
expect(tree.read(`apps/example/${stylesPath}`).toString()).toContain(
expect(tree.read(`example/${stylesPath}`).toString()).toContain(
stripIndents`
@tailwind base;
@tailwind components;
@ -43,10 +43,10 @@ describe('setup-tailwind', () => {
});
it('should add postcss and tailwind config files', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {
build: {
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', {
dependencies: {
react: '999.9.9',
@ -68,56 +68,56 @@ describe('setup-tailwind', () => {
project: 'example',
});
expect(tree.exists(`apps/example/postcss.config.js`)).toBeTruthy();
expect(tree.exists(`apps/example/tailwind.config.js`)).toBeTruthy();
expect(tree.exists(`example/postcss.config.js`)).toBeTruthy();
expect(tree.exists(`example/tailwind.config.js`)).toBeTruthy();
expect(
readProjectConfiguration(tree, 'example').targets.build.options
.postcssConfig
).toEqual('apps/example/postcss.config.js');
).toEqual('example/postcss.config.js');
});
it('should skip update if postcss configuration already exists', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {},
});
tree.write(`apps/example/src/styles.css`, ``);
tree.write('apps/example/postcss.config.js', '// existing');
tree.write(`example/src/styles.css`, ``);
tree.write('example/postcss.config.js', '// existing');
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'
);
});
it('should skip update if tailwind configuration already exists', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {},
});
tree.write(`apps/example/src/styles.css`, ``);
tree.write('apps/example/tailwind.config.js', '// existing');
tree.write(`example/src/styles.css`, ``);
tree.write('example/tailwind.config.js', '// existing');
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'
);
});
it('should install packages', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {},
});
tree.write(`apps/example/src/styles.css`, ``);
tree.write(`example/src/styles.css`, ``);
writeJson(tree, 'package.json', {
dependencies: {
react: '999.9.9',
@ -145,13 +145,13 @@ describe('setup-tailwind', () => {
});
it('should support skipping package install', async () => {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
addProjectConfiguration(tree, 'example', {
root: 'apps/example',
sourceRoot: 'apps/example/src',
root: 'example',
sourceRoot: 'example/src',
targets: {},
});
tree.write(`apps/example/src/styles.css`, ``);
tree.write(`example/src/styles.css`, ``);
writeJson(tree, 'package.json', {
dependencies: {
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
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 './test.scss';
@ -47,11 +47,11 @@ describe('react:stories for applications', () => {
});
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();
expect(
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'
)
).toMatchSnapshot();
@ -64,11 +64,11 @@ describe('react:stories for applications', () => {
});
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();
expect(
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'
)
).toMatchSnapshot();
@ -77,7 +77,7 @@ describe('react:stories for applications', () => {
it('should ignore files that do not contain components', async () => {
// create another component
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;`
);
@ -88,13 +88,13 @@ describe('react:stories for applications', () => {
// should just create the story and not error, even though there's a js file
// not containing any react component
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();
});
it('should not update existing stories', async () => {
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'`
);
@ -103,14 +103,14 @@ describe('react:stories for applications', () => {
});
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();
});
describe('ignore paths', () => {
beforeEach(() => {
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 './test.scss';
@ -133,7 +133,7 @@ describe('react:stories for applications', () => {
);
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 './test.scss';
@ -161,23 +161,21 @@ describe('react:stories for applications', () => {
});
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();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
)
).toBeTruthy();
expect(
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'
)
).toBeTruthy();
});
@ -186,29 +184,27 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, {
project: 'test-ui-app',
ignorePaths: [
`apps/test-ui-app/src/app/anothercmp/**`,
`test-ui-app/src/app/anothercmp/**`,
`**/**/src/**/test-path/ignore-it/**`,
],
});
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();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeFalsy();
expect(
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();
expect(
appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
)
).toBeFalsy();
expect(
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();
});
@ -217,29 +213,27 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, {
project: 'test-ui-app',
ignorePaths: [
'apps/test-ui-app/src/app/anothercmp/**/*.skip.*',
'test-ui-app/src/app/anothercmp/**/*.skip.*',
'**/**/src/**/test-path/**',
],
});
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();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx'
)
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
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();
});
@ -247,34 +241,32 @@ describe('react:stories for applications', () => {
it('should ignore direct path to component', async () => {
await storiesGenerator(appTree, {
project: 'test-ui-app',
ignorePaths: ['apps/test-ui-app/src/app/anothercmp/**/*.skip.tsx'],
ignorePaths: ['test-ui-app/src/app/anothercmp/**/*.skip.tsx'],
});
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();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
appTree.exists(
'apps/test-ui-app/src/app/test-path/ignore-it/another-one.stories.tsx'
)
).toBeTruthy();
expect(
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();
});
it('should ignore a path that has a nested component, but still generate nested component stories', async () => {
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 './test.scss';
@ -299,28 +291,26 @@ describe('react:stories for applications', () => {
await storiesGenerator(appTree, {
project: 'test-ui-app',
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(
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
appTree.exists('test-ui-app/src/app/nx-welcome.stories.tsx')
).toBeTruthy();
expect(
appTree.exists('test-ui-app/src/app/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
appTree.exists(
'apps/test-ui-app/src/app/anothercmp/comp-a/comp-a.stories.tsx'
)
).toBeTruthy();
expect(
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();
});
@ -331,7 +321,7 @@ export async function createTestUIApp(
libName: string,
plainJS = false
): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await applicationGenerator(appTree, {
e2eTestRunner: 'cypress',
@ -341,6 +331,7 @@ export async function createTestUIApp(
unitTestRunner: 'none',
name: libName,
js: plainJS,
projectNameAndRootFormat: 'as-provided',
});
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
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 './test.scss';
@ -42,11 +42,11 @@ describe('react:stories for libraries', () => {
});
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();
expect(
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'
)
).toMatchSnapshot();
@ -67,11 +67,11 @@ describe('react:stories for libraries', () => {
interactionTests: false,
});
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();
expect(
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'
)
).toMatchSnapshot();
@ -90,7 +90,7 @@ describe('react:stories for libraries', () => {
describe('ignore paths', () => {
beforeEach(() => {
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';
export interface IgnoreProps {
@ -111,7 +111,7 @@ describe('react:stories for libraries', () => {
);
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';
export interface OtherTestProps {
@ -136,21 +136,19 @@ describe('react:stories for libraries', () => {
project: 'test-ui-lib',
});
expect(
appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
appTree.exists(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx'
)
).toBeTruthy();
expect(
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'
)
).toBeTruthy();
});
@ -159,26 +157,24 @@ describe('react:stories for libraries', () => {
await storiesGenerator(appTree, {
project: 'test-ui-lib',
ignorePaths: [
'libs/test-ui-lib/src/lib/anothercmp/**',
'test-ui-lib/src/lib/anothercmp/**',
'**/**/src/**/test-path/ignore-it/**',
],
});
expect(
appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
).toBeFalsy();
expect(
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();
expect(
appTree.exists(
'libs/test-ui-lib/src/lib/test-path/ignore-it/another-one.stories.tsx'
)
).toBeFalsy();
expect(
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();
});
@ -187,26 +183,24 @@ describe('react:stories for libraries', () => {
await storiesGenerator(appTree, {
project: 'test-ui-lib',
ignorePaths: [
'libs/test-ui-lib/src/lib/anothercmp/**/*.skip.*',
'test-ui-lib/src/lib/anothercmp/**/*.skip.*',
'**/test-ui-lib/src/**/test-path/**',
],
});
expect(
appTree.exists(
'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx'
)
appTree.exists('test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx')
).toBeTruthy();
expect(
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();
expect(
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();
});
@ -215,7 +209,7 @@ describe('react:stories for libraries', () => {
it('should ignore files that do not contain components', async () => {
// create another component
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;`
);
@ -226,7 +220,7 @@ describe('react:stories for libraries', () => {
// should just create the story and not error, even though there's a js file
// not containing any react component
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();
});
});
@ -235,7 +229,7 @@ export async function createTestUILib(
libName: string,
plainJS = false
): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
linter: Linter.EsLint,
@ -245,6 +239,7 @@ export async function createTestUILib(
style: 'css',
unitTestRunner: 'none',
name: libName,
projectNameAndRootFormat: 'as-provided',
});
// create some Nx app that we'll use to generate the cypress
@ -258,6 +253,7 @@ export async function createTestUILib(
unitTestRunner: 'none',
name: `${libName}-e2e`,
js: plainJS,
projectNameAndRootFormat: 'as-provided',
});
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 () => {
tree = await createTestUIApp('test-ui-app');
tree.write(
'apps/test-ui-app/components/test.tsx',
'test-ui-app/components/test.tsx',
`import './test.module.scss';
export interface TestProps {
@ -38,7 +38,7 @@ describe('nextjs:stories for applications', () => {
});
expect(
tree.exists('apps/test-ui-app/components/test.stories.tsx')
tree.exists('test-ui-app/components/test.stories.tsx')
).toMatchSnapshot();
const packageJson = JSON.parse(tree.read('package.json', 'utf-8'));
@ -58,7 +58,7 @@ describe('nextjs:stories for applications', () => {
});
expect(
tree.exists('apps/test-ui-app/components/test.stories.tsx')
tree.exists('test-ui-app/components/test.stories.tsx')
).toMatchSnapshot();
const packageJson = JSON.parse(tree.read('package.json', 'utf-8'));
expect(
@ -75,17 +75,15 @@ describe('nextjs:stories for applications', () => {
it('should ignore paths', async () => {
await storiesGenerator(tree, {
project: 'test-ui-app',
ignorePaths: ['apps/test-ui-app/components/**'],
ignorePaths: ['test-ui-app/components/**'],
});
expect(
tree.exists('apps/test-ui-app/components/test.stories.tsx')
).toBeFalsy();
expect(tree.exists('test-ui-app/components/test.stories.tsx')).toBeFalsy();
});
});
export async function createTestUIApp(name: string): Promise<Tree> {
const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const tree = createTreeWithEmptyWorkspace();
await applicationGenerator(tree, {
e2eTestRunner: 'none',
linter: Linter.EsLint,
@ -94,6 +92,7 @@ export async function createTestUIApp(name: string): Promise<Tree> {
unitTestRunner: 'none',
name,
bundler: 'vite',
projectNameAndRootFormat: 'as-provided',
});
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(
appTree.read('libs/test-ui-lib/.storybook/main.ts', 'utf-8')
appTree.read('test-ui-lib/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
appTree.exists('libs/test-ui-lib/tsconfig.storybook.json')
).toBeTruthy();
expect(appTree.exists('test-ui-lib/tsconfig.storybook.json')).toBeTruthy();
const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
expect(packageJson.devDependencies['@storybook/react-vite']).toBeDefined();
@ -66,7 +64,7 @@ describe('react:storybook-configuration', () => {
});
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();
});
@ -74,7 +72,7 @@ describe('react:storybook-configuration', () => {
appTree = await createTestUILib('test-ui-lib', true);
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 './test.scss';
@ -97,10 +95,7 @@ describe('react:storybook-configuration', () => {
});
expect(
appTree.read(
'libs/test-ui-lib/src/lib/test-ui-libplain.stories.jsx',
'utf-8'
)
appTree.read('test-ui-lib/src/lib/test-ui-libplain.stories.jsx', 'utf-8')
).toMatchSnapshot();
});
@ -110,10 +105,8 @@ describe('react:storybook-configuration', () => {
name: 'test-ui-app',
});
expect(appTree.exists('apps/test-ui-app/.storybook/main.ts')).toBeTruthy();
expect(
appTree.exists('apps/test-ui-app/tsconfig.storybook.json')
).toBeTruthy();
expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy();
expect(appTree.exists('test-ui-app/tsconfig.storybook.json')).toBeTruthy();
});
it('should generate stories for components', async () => {
@ -128,7 +121,7 @@ describe('react:storybook-configuration', () => {
// under the specified 'lib' directory
expect(
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'
)
).toMatchSnapshot();
@ -144,7 +137,7 @@ describe('react:storybook-configuration', () => {
expect(
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'
)
).toMatchSnapshot();
@ -155,7 +148,7 @@ export async function createTestUILib(
libName: string,
plainJS = false
): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
linter: Linter.EsLint,
@ -165,6 +158,7 @@ export async function createTestUILib(
style: 'css',
unitTestRunner: 'none',
name: libName,
projectNameAndRootFormat: 'as-provided',
});
return appTree;
}
@ -173,7 +167,7 @@ export async function createTestAppLib(
libName: string,
plainJS = false
): Promise<Tree> {
let appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
let appTree = createTreeWithEmptyWorkspace();
await applicationGenerator(appTree, {
e2eTestRunner: 'none',
@ -183,6 +177,7 @@ export async function createTestAppLib(
unitTestRunner: 'none',
name: libName,
js: plainJS,
projectNameAndRootFormat: 'as-provided',
});
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;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
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',
unitTestRunner: 'none',
name: appName,
projectNameAndRootFormat: 'as-provided',
});
}
export async function createLib(tree: Tree, libName: string): Promise<any> {
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, {
tags: [],
root: `libs/${fileName}`,
root: `${fileName}`,
projectType: 'library',
sourceRoot: `libs/${fileName}/src`,
sourceRoot: `${fileName}/src`,
targets: {},
});
}

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

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

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

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