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

chore(nextjs): update nextjs plugin's unit test to use as-provided (#18969)

Browse Source
This commit is contained in:
Nicholas Cunningham 2023-09-01 11:55:15 -06:00 committed by GitHub
parent ede4b96e8d
commit f3f12d4201
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 317 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
packages/next/src/generators/application/application.spec.ts
View File

@ -12,34 +12,38 @@ describe('app', () => {
let tree: Tree;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
it('should add a .gitkeep file to the public directory', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app/public/.gitkeep')).toBe(true);
expect(tree.exists(`${name}/public/.gitkeep`)).toBe(true);
});
it('should update tags and implicit dependencies', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
tags: 'one,two',
projectNameAndRootFormat: 'as-provided',
});
const projects = Object.fromEntries(getProjects(tree));
expect(projects).toMatchObject({
'my-app': {
[`${name}`]: {
tags: ['one', 'two'],
},
'my-app-e2e': {
[`${name}-e2e`]: {
tags: [],
implicitDependencies: ['my-app'],
implicitDependencies: [name],
},
});
});
@ -47,47 +51,53 @@ describe('app', () => {
it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
tree.rename('tsconfig.base.json', 'tsconfig.json');
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const tsConfig = readJson(tree, 'apps/my-app/tsconfig.json');
expect(tsConfig.extends).toBe('../../tsconfig.json');
const tsConfig = readJson(tree, `${name}/tsconfig.json`);
expect(tsConfig.extends).toBe('../tsconfig.json');
});
describe('App Router', () => {
it('should generate files for app layout', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'testApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const tsConfig = readJson(tree, 'apps/test-app/tsconfig.json');
const tsConfig = readJson(tree, `${name}/tsconfig.json`);
expect(tsConfig.include).toEqual([
'**/*.ts',
'**/*.tsx',
'**/*.js',
'**/*.jsx',
'../../apps/test-app/.next/types/**/*.ts',
'../../dist/apps/test-app/.next/types/**/*.ts',
`../${name}/.next/types/**/*.ts`,
`../dist/${name}/.next/types/**/*.ts`,
'next-env.d.ts',
]);
expect(tree.exists('apps/test-app/pages/styles.css')).toBeFalsy();
expect(tree.exists('apps/test-app/app/global.css')).toBeTruthy();
expect(tree.exists('apps/test-app/app/page.tsx')).toBeTruthy();
expect(tree.exists('apps/test-app/app/layout.tsx')).toBeTruthy();
expect(tree.exists('apps/test-app/app/api/hello/route.ts')).toBeTruthy();
expect(tree.exists('apps/test-app/app/page.module.css')).toBeTruthy();
expect(tree.exists('apps/test-app/public/favicon.ico')).toBeTruthy();
expect(tree.exists(`${name}/pages/styles.css`)).toBeFalsy();
expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
expect(tree.exists(`${name}/app/page.tsx`)).toBeTruthy();
expect(tree.exists(`${name}/app/layout.tsx`)).toBeTruthy();
expect(tree.exists(`${name}/app/api/hello/route.ts`)).toBeTruthy();
expect(tree.exists(`${name}/app/page.module.css`)).toBeTruthy();
expect(tree.exists(`${name}/public/favicon.ico`)).toBeTruthy();
});
it('should add layout types correctly for standalone apps', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'testApp',
name,
style: 'css',
appDir: true,
rootProject: true,
projectNameAndRootFormat: 'as-provided',
});
const tsConfig = readJson(tree, 'tsconfig.json');
@ -97,17 +107,19 @@ describe('app', () => {
'**/*.js',
'**/*.jsx',
'.next/types/**/*.ts',
'dist/test-app/.next/types/**/*.ts',
`dist/${name}/.next/types/**/*.ts`,
'next-env.d.ts',
]);
});
it('should generate an unstyled component page', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'testApp',
name,
style: 'none',
appDir: true,
rootProject: true,
projectNameAndRootFormat: 'as-provided',
});
const content = tree.read('app/page.tsx').toString();
@ -120,39 +132,43 @@ describe('app', () => {
describe('Pages Router', () => {
it('should generate files for pages layout', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
appDir: false,
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app/tsconfig.json')).toBeTruthy();
expect(tree.exists('apps/my-app/pages/index.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/specs/index.spec.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/pages/index.module.css')).toBeTruthy();
expect(tree.exists(`${name}/tsconfig.json`)).toBeTruthy();
expect(tree.exists(`${name}/pages/index.tsx`)).toBeTruthy();
expect(tree.exists(`${name}/specs/index.spec.tsx`)).toBeTruthy();
expect(tree.exists(`${name}/pages/index.module.css`)).toBeTruthy();
});
it('should update configurations', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
expect(readProjectConfiguration(tree, 'my-app').root).toEqual(
'apps/my-app'
);
expect(readProjectConfiguration(tree, 'my-app-e2e').root).toEqual(
'apps/my-app-e2e'
expect(readProjectConfiguration(tree, name).root).toEqual(name);
expect(readProjectConfiguration(tree, `${name}-e2e`).root).toEqual(
`${name}-e2e`
);
});
it('should generate an unstyled component page', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'testApp',
name,
style: 'none',
appDir: false,
projectNameAndRootFormat: 'as-provided',
});
const content = tree.read('apps/test-app/pages/index.tsx').toString();
const content = tree.read(`${name}/pages/index.tsx`).toString();
expect(content).not.toContain('import styles from');
expect(content).not.toContain('const StyledPage');
@ -162,22 +178,24 @@ describe('app', () => {
describe('--style scss', () => {
it('should generate scss styles', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'scss',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app/app/page.module.scss')).toBeTruthy();
expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
expect(tree.exists(`${name}/app/page.module.scss`)).toBeTruthy();
expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).toContain(`import styles from './page.module.scss'`);
expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"import './global.css';
export const metadata = {
title: 'Welcome to my-app',
title: 'Welcome to ${name}',
description: 'Generated by create-nx-workspace',
};
@ -198,23 +216,25 @@ describe('app', () => {
});
describe('--style less', () => {
it('should generate scss styles', async () => {
it('should generate less styles', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'less',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app/app/page.module.less')).toBeTruthy();
expect(tree.exists('apps/my-app/app/global.less')).toBeTruthy();
expect(tree.exists(`${name}/app/page.module.less`)).toBeTruthy();
expect(tree.exists(`${name}/app/global.less`)).toBeTruthy();
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).toContain(`import styles from './page.module.less'`);
expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"import './global.less';
export const metadata = {
title: 'Welcome to my-app',
title: 'Welcome to ${name}',
description: 'Generated by create-nx-workspace',
};
@ -235,36 +255,40 @@ describe('app', () => {
});
describe('--style styl', () => {
it('should generate scss styles', async () => {
it('should generate styl styles', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'styl',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app/app/page.module.styl')).toBeTruthy();
expect(tree.exists('apps/my-app/app/global.styl')).toBeTruthy();
expect(tree.exists(`${name}/app/page.module.styl`)).toBeTruthy();
expect(tree.exists(`${name}/app/global.styl`)).toBeTruthy();
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).toContain(`import styles from './page.module.styl'`);
});
});
describe('--style styled-components', () => {
it('should generate styles', async () => {
it('should generate styled-components styles', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'styled-components',
projectNameAndRootFormat: 'as-provided',
});
expect(
tree.exists('apps/my-app/app/page.module.styled-components')
tree.exists(`${name}/app/page.module.styled-components`)
).toBeFalsy();
expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).not.toContain(`import styles from './page.module`);
expect(indexContent).toContain(`import styled from 'styled-components'`);
expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"import './global.css';
import { StyledComponentsRegistry } from './registry';
@ -289,7 +313,7 @@ describe('app', () => {
}
"
`);
expect(tree.read('apps/my-app/app/registry.tsx', 'utf-8'))
expect(tree.read(`${name}/app/registry.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"'use client';
@ -330,26 +354,29 @@ describe('app', () => {
});
describe('--style @emotion/styled', () => {
it('should generate styles', async () => {
it('should generate @emotion/styled styles', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: '@emotion/styled',
projectNameAndRootFormat: 'as-provided',
});
expect(
tree.exists('apps/my-app/app/page.module.styled-components')
tree.exists(`${name}/app/page.module.styled-components`)
).toBeFalsy();
expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).not.toContain(`import styles from './page.module`);
expect(indexContent).toContain(`import styled from '@emotion/styled'`);
expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"import './global.css';
export const metadata = {
title: 'Welcome to my-app',
title: 'Welcome to ${name}',
description: 'Generated by create-nx-workspace',
};
@ -369,12 +396,15 @@ describe('app', () => {
});
it('should add jsxImportSource in tsconfig.json', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: '@emotion/styled',
projectNameAndRootFormat: 'as-provided',
});
const tsconfigJson = readJson(tree, 'apps/my-app/tsconfig.json');
const tsconfigJson = readJson(tree, `${name}/tsconfig.json`);
expect(tsconfigJson.compilerOptions['jsxImportSource']).toEqual(
'@emotion/react'
@ -384,22 +414,25 @@ describe('app', () => {
describe('--style styled-jsx', () => {
it('should use <style jsx> in index page', async () => {
const name = 'my-app';
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'styled-jsx',
projectNameAndRootFormat: 'as-provided',
});
const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(indexContent).toMatchSnapshot();
expect(tree.exists('apps/my-app/app/page.module.styled-jsx')).toBeFalsy();
expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
expect(tree.exists(`${name}/app/page.module.styled-jsx`)).toBeFalsy();
expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
expect(indexContent).not.toContain(`import styles from './page.module`);
expect(indexContent).not.toContain(
`import styled from 'styled-components'`
);
expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"import './global.css';
import { StyledJsxRegistry } from './registry';
@ -419,7 +452,7 @@ describe('app', () => {
}
"
`);
expect(tree.read('apps/my-app/app/registry.tsx', 'utf-8'))
expect(tree.read(`${name}/app/registry.tsx`, 'utf-8'))
.toMatchInlineSnapshot(`
"'use client';
@ -446,110 +479,132 @@ describe('app', () => {
});
it('should setup jest with tsx support', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'my-app',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.read('apps/my-app/jest.config.ts', 'utf-8')).toContain(
expect(tree.read(`${name}/jest.config.ts`, 'utf-8')).toContain(
`moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],`
);
});
it('should setup jest with SVGR support', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'my-app',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.read('apps/my-app/jest.config.ts', 'utf-8')).toContain(
expect(tree.read(`${name}/jest.config.ts`, 'utf-8')).toContain(
`'^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest'`
);
});
it('should set up the nx next build builder', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'my-app',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const projectConfiguration = readProjectConfiguration(tree, 'my-app');
const projectConfiguration = readProjectConfiguration(tree, name);
expect(projectConfiguration.targets.build.executor).toEqual(
'@nx/next:build'
);
expect(projectConfiguration.targets.build.options).toEqual({
outputPath: 'dist/apps/my-app',
outputPath: `dist/${name}`,
});
});
it('should set up the nx next server builder', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'my-app',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const projectConfiguration = readProjectConfiguration(tree, 'my-app');
const projectConfiguration = readProjectConfiguration(tree, name);
expect(projectConfiguration.targets.serve.executor).toEqual(
'@nx/next:server'
);
expect(projectConfiguration.targets.serve.options).toEqual({
buildTarget: 'my-app:build',
buildTarget: `${name}:build`,
dev: true,
});
expect(projectConfiguration.targets.serve.configurations).toEqual({
development: {
buildTarget: 'my-app:build:development',
buildTarget: `${name}:build:development`,
dev: true,
},
production: { dev: false, buildTarget: 'my-app:build:production' },
production: { dev: false, buildTarget: `${name}:build:production` },
});
});
it('should set up the nx next export builder', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'my-app',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const projectConfiguration = readProjectConfiguration(tree, 'my-app');
const projectConfiguration = readProjectConfiguration(tree, name);
expect(projectConfiguration.targets.export.executor).toEqual(
'@nx/next:export'
);
expect(projectConfiguration.targets.export.options).toEqual({
buildTarget: 'my-app:build:production',
buildTarget: `${name}:build:production`,
});
});
describe('--unit-test-runner none', () => {
it('should not generate test configuration', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
unitTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('jest.config.ts')).toBeFalsy();
expect(tree.exists('apps/my-app/specs/index.spec.tsx')).toBeFalsy();
expect(tree.exists(`${name}/specs/index.spec.tsx`)).toBeFalsy();
});
});
describe('--e2e-test-runner none', () => {
it('should not generate test configuration', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
e2eTestRunner: 'none',
projectNameAndRootFormat: 'as-provided',
});
expect(tree.exists('apps/my-app-e2e')).toBeFalsy();
expect(tree.exists(`${name}-e2e`)).toBeFalsy();
});
});
it('should generate functional components by default', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const appContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
const appContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
expect(appContent).not.toMatch(/extends Component/);
});
@ -557,9 +612,12 @@ describe('app', () => {
describe('--linter', () => {
describe('default (eslint)', () => {
it('should add .eslintrc.json and dependencies', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
const packageJson = readJson(tree, '/package.json');
@ -570,14 +628,14 @@ describe('app', () => {
},
});
const eslintJson = readJson(tree, '/apps/my-app/.eslintrc.json');
const eslintJson = readJson(tree, `${name}/.eslintrc.json`);
expect(eslintJson).toMatchInlineSnapshot(`
{
"extends": [
"plugin:@nx/react-typescript",
"next",
"next/core-web-vitals",
"../../.eslintrc.json",
"../.eslintrc.json",
],
"ignorePatterns": [
"!**/*",
@ -602,7 +660,7 @@ describe('app', () => {
"rules": {
"@next/next/no-html-link-for-pages": [
"error",
"apps/my-app/pages",
"${name}/pages",
],
},
},
@ -639,11 +697,14 @@ describe('app', () => {
describe('root level', () => {
it('should adjust eslint config for root level projects', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'testApp',
name,
style: 'css',
appDir: true,
rootProject: true,
projectNameAndRootFormat: 'as-provided',
});
const eslintJSON = readJson(tree, '.eslintrc.json');
@ -664,23 +725,29 @@ describe('app', () => {
describe('--js', () => {
it('generates JS files', async () => {
const name = uniq();
await applicationGenerator(tree, {
name: 'myApp',
name,
style: 'css',
js: true,
});
expect(tree.exists('apps/my-app/app/page.js')).toBeTruthy();
expect(tree.exists('apps/my-app/specs/index.spec.js')).toBeTruthy();
expect(tree.exists('apps/my-app/index.d.js')).toBeFalsy();
expect(tree.exists('apps/my-app/index.d.ts')).toBeFalsy();
expect(tree.exists(`${name}/app/page.js`)).toBeTruthy();
expect(tree.exists(`${name}/specs/index.spec.js`)).toBeTruthy();
expect(tree.exists(`${name}/index.d.js`)).toBeFalsy();
expect(tree.exists(`${name}/index.d.ts`)).toBeFalsy();
const tsConfig = readJson(tree, 'apps/my-app/tsconfig.json');
const tsConfig = readJson(tree, `${name}/tsconfig.json`);
expect(tsConfig.compilerOptions.allowJs).toEqual(true);
const tsConfigApp = readJson(tree, 'apps/my-app/tsconfig.json');
const tsConfigApp = readJson(tree, `${name}/tsconfig.json`);
expect(tsConfigApp.include).toContain('**/*.js');
expect(tsConfigApp.exclude).not.toContain('**/*.spec.js');
});
});
});
function uniq() {
return `str-${(Math.random() * 10000).toFixed(0)}`;
}

45
packages/next/src/generators/application/lib/add-linting.spec.ts
View File

@ -16,19 +16,20 @@ describe('updateEslint', () => {
beforeEach(async () => {
schema = {
projectName: 'my-app',
appProjectRoot: 'apps/my-app',
appProjectRoot: 'my-app',
linter: Linter.EsLint,
unitTestRunner: 'jest',
e2eProjectName: 'my-app-e2e',
e2eProjectRoot: 'apps/my-app-e2e',
outputPath: 'dist/apps/my-app',
e2eProjectRoot: 'my-app-e2e',
outputPath: 'dist/my-app',
name: 'my-app',
parsedTags: [],
fileName: 'index',
e2eTestRunner: 'cypress',
styledModule: null,
projectNameAndRootFormat: 'as-provided',
};
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
const project: ProjectConfiguration = {
root: schema.appProjectRoot,
sourceRoot: schema.appProjectRoot,
@ -54,7 +55,7 @@ describe('updateEslint', () => {
"plugin:@nx/react-typescript",
"next",
"next/core-web-vitals",
"../../.eslintrc.json",
"../.eslintrc.json",
],
"ignorePatterns": [
"!**/*",
@ -79,7 +80,7 @@ describe('updateEslint', () => {
"rules": {
"@next/next/no-html-link-for-pages": [
"error",
"apps/my-app/pages",
"my-app/pages",
],
},
},
@ -122,7 +123,7 @@ describe('updateEslint', () => {
.toMatchInlineSnapshot(`
"const FlatCompat = require("@eslint/eslintrc");
const js = require("@eslint/js");
const baseConfig = require("../../eslint.config.js");
const baseConfig = require("../eslint.config.js");
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
@ -131,35 +132,35 @@ describe('updateEslint', () => {
module.exports = [
{
files: ["apps/my-app/**/*.*"],
files: ["my-app/**/*.*"],
rules: { "@next/next/no-html-link-for-pages": "off" }
},
...baseConfig,
{
"files": [
"apps/my-app/**/*.ts",
"apps/my-app/**/*.tsx",
"apps/my-app/**/*.js",
"apps/my-app/**/*.jsx"
"my-app/**/*.ts",
"my-app/**/*.tsx",
"my-app/**/*.js",
"my-app/**/*.jsx"
],
"rules": {
"@next/next/no-html-link-for-pages": [
"error",
"apps/my-app/pages"
"my-app/pages"
]
}
},
{
files: [
"apps/my-app/**/*.ts",
"apps/my-app/**/*.tsx"
"my-app/**/*.ts",
"my-app/**/*.tsx"
],
rules: {}
},
{
files: [
"apps/my-app/**/*.js",
"apps/my-app/**/*.jsx"
"my-app/**/*.js",
"my-app/**/*.jsx"
],
rules: {}
},
@ -167,13 +168,13 @@ describe('updateEslint', () => {
...compat.config({ env: { jest: true } }).map(config => ({
...config,
files: [
"apps/my-app/**/*.spec.ts",
"apps/my-app/**/*.spec.tsx",
"apps/my-app/**/*.spec.js",
"apps/my-app/**/*.spec.jsx"
"my-app/**/*.spec.ts",
"my-app/**/*.spec.tsx",
"my-app/**/*.spec.js",
"my-app/**/*.spec.jsx"
]
})),
{ ignores: ["apps/my-app/.next/**/*"] }
{ ignores: ["my-app/.next/**/*"] }
];
"
`);

38
packages/next/src/generators/component/component.spec.ts
View File

@ -11,10 +11,11 @@ describe('component', () => {
const libName = 'my-lib';
beforeEach(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
await applicationGenerator(tree, {
name: appName,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
await libraryGenerator(tree, {
name: libName,
@ -23,6 +24,7 @@ describe('component', () => {
skipFormat: true,
skipTsConfig: false,
unitTestRunner: 'jest',
projectNameAndRootFormat: 'as-provided',
});
});
@ -33,12 +35,10 @@ describe('component', () => {
style: 'css',
});
expect(tree.exists('apps/my-app/components/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-app/components/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-app/components/hello/hello.spec.tsx')).toBeTruthy();
expect(
tree.exists('apps/my-app/components/hello/hello.spec.tsx')
).toBeTruthy();
expect(
tree.exists('apps/my-app/components/hello/hello.module.css')
tree.exists('my-app/components/hello/hello.module.css')
).toBeTruthy();
});
@ -49,13 +49,9 @@ describe('component', () => {
style: 'css',
});
expect(tree.exists('libs/my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(
tree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx')
).toBeTruthy();
expect(
tree.exists('libs/my-lib/src/lib/hello/hello.module.css')
).toBeTruthy();
expect(tree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/lib/hello/hello.module.css')).toBeTruthy();
});
it('should allow directory override', async () => {
@ -72,15 +68,11 @@ describe('component', () => {
style: 'css',
});
expect(tree.exists('apps/my-app/foo/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/foo/hello/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/foo/hello/hello.module.css')).toBeTruthy();
expect(tree.exists('libs/my-lib/src/bar/world/world.tsx')).toBeTruthy();
expect(
tree.exists('libs/my-lib/src/bar/world/world.spec.tsx')
).toBeTruthy();
expect(
tree.exists('libs/my-lib/src/bar/world/world.module.css')
).toBeTruthy();
expect(tree.exists('my-app/foo/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-app/foo/hello/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('my-app/foo/hello/hello.module.css')).toBeTruthy();
expect(tree.exists('my-lib/src/bar/world/world.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/bar/world/world.spec.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/bar/world/world.module.css')).toBeTruthy();
});
});

32
packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
View File

@ -1,11 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cypress-component-configuration generator should setup nextjs app 1`] = `
exports[`cypress-component-configuration generator should setup nextjs app:
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
"node",
],
}
} 1`] = `
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../../dist/out-tsc",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
@ -26,12 +38,24 @@ exports[`cypress-component-configuration generator should setup nextjs app 1`] =
}
`;
exports[`cypress-component-configuration generator should setup nextjs lib 1`] = `
exports[`cypress-component-configuration generator should setup nextjs lib:
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
"node",
],
}
} 1`] = `
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../../dist/out-tsc",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",

73
packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts
View File

@ -7,19 +7,23 @@ import { setupTailwindGenerator } from '@nx/react';
import { Linter } from '@nx/linter';
describe('cypress-component-configuration generator', () => {
let tree: any;
let tree: Tree;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
});
it('should setup nextjs app', async () => {
await applicationGenerator(tree, { name: 'demo', style: 'css' });
await applicationGenerator(tree, {
name: 'demo',
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
await cypressComponentConfiguration(tree, {
generateTests: true,
project: 'demo',
});
expect(readJson(tree, 'apps/demo/tsconfig.json').exclude).toEqual(
expect(readJson(tree, 'demo/tsconfig.json').exclude).toEqual(
expect.arrayContaining([
'cypress/**/*',
'cypress.config.ts',
@ -29,9 +33,20 @@ describe('cypress-component-configuration generator', () => {
'**/*.cy.jsx',
])
);
expect(readJson(tree, 'apps/demo/cypress/tsconfig.json')).toMatchSnapshot();
expect(tree.read('apps/demo/cypress.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
expect(readJson(tree, 'demo/cypress/tsconfig.json')).toMatchSnapshot(`
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
"node",
],
}
}`);
expect(tree.read('demo/cypress.config.ts', 'utf-8')).toMatchInlineSnapshot(`
"import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
import { defineConfig } from 'cypress';
@ -40,7 +55,7 @@ describe('cypress-component-configuration generator', () => {
});
"
`);
expect(tree.read('apps/demo/cypress/support/component.ts', 'utf-8'))
expect(tree.read('demo/cypress/support/component.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { mount } from 'cypress/react18';
import './styles.ct.css';
@ -76,13 +91,13 @@ describe('cypress-component-configuration generator', () => {
Cypress.Commands.add('mount', mount);
"
`);
expect(tree.exists('apps/demo/pages/index.cy.ts')).toBeFalsy();
expect(tree.exists('demo/pages/index.cy.ts')).toBeFalsy();
expect(
readProjectConfiguration(tree, 'demo').targets['component-test']
).toEqual({
executor: '@nx/cypress:cypress',
options: {
cypressConfig: 'apps/demo/cypress.config.ts',
cypressConfig: 'demo/cypress.config.ts',
skipServe: true,
testingType: 'component',
},
@ -90,14 +105,18 @@ describe('cypress-component-configuration generator', () => {
});
it('should add styles setup in app', async () => {
await applicationGenerator(tree, { name: 'demo', style: 'css' });
await applicationGenerator(tree, {
name: 'demo',
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
await setupTailwindGenerator(tree, { project: 'demo' });
await cypressComponentConfiguration(tree, {
generateTests: false,
project: 'demo',
});
expect(tree.read('apps/demo/cypress/support/styles.ct.css', 'utf-8'))
expect(tree.read('demo/cypress/support/styles.ct.css', 'utf-8'))
.toMatchInlineSnapshot(`
"/* This is where you can load global styles to apply to all components. */
@tailwind base;
@ -105,9 +124,9 @@ describe('cypress-component-configuration generator', () => {
@tailwind utilities;
"
`);
expect(
tree.read('apps/demo/cypress/support/component.ts', 'utf-8')
).toContain(`import './styles.ct.css';`);
expect(tree.read('demo/cypress/support/component.ts', 'utf-8')).toContain(
`import './styles.ct.css';`
);
});
it('should setup nextjs lib', async () => {
@ -117,21 +136,33 @@ describe('cypress-component-configuration generator', () => {
style: 'css',
unitTestRunner: 'jest',
component: true,
projectNameAndRootFormat: 'as-provided',
});
await cypressComponentConfiguration(tree, {
generateTests: true,
project: 'demo',
});
expect(readJson(tree, 'libs/demo/tsconfig.json').references).toEqual(
expect(readJson(tree, 'demo/tsconfig.json').references).toEqual(
expect.arrayContaining([
{
path: './cypress/tsconfig.json',
},
])
);
expect(readJson(tree, 'libs/demo/cypress/tsconfig.json')).toMatchSnapshot();
expect(tree.read('libs/demo/cypress.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
expect(readJson(tree, 'demo/cypress/tsconfig.json')).toMatchSnapshot(`
{
"compilerOptions": {
"allowJs": true,
"module": "commonjs",
"outDir": "../dist/out-tsc",
"sourceMap": false,
"types": [
"cypress",
"node",
],
}
}`);
expect(tree.read('demo/cypress.config.ts', 'utf-8')).toMatchInlineSnapshot(`
"import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
import { defineConfig } from 'cypress';
@ -140,13 +171,13 @@ describe('cypress-component-configuration generator', () => {
});
"
`);
expect(tree.exists('libs/demo/pages/index.cy.ts')).toBeFalsy();
expect(tree.exists('demo/pages/index.cy.ts')).toBeFalsy();
expect(
readProjectConfiguration(tree, 'demo').targets['component-test']
).toEqual({
executor: '@nx/cypress:cypress',
options: {
cypressConfig: 'libs/demo/cypress.config.ts',
cypressConfig: 'demo/cypress.config.ts',
skipServe: true,
testingType: 'component',
},

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

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

15
packages/next/src/generators/library/library.spec.ts
View File

@ -22,14 +22,15 @@ describe('next library', () => {
unitTestRunner: 'jest',
style: 'css',
component: true,
projectNameAndRootFormat: 'as-provided',
};
const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
...baseOptions,
name: 'myLib',
});
const tsconfigTypes = readJson(appTree, 'libs/my-lib/tsconfig.lib.json')
const tsconfigTypes = readJson(appTree, 'my-lib/tsconfig.lib.json')
.compilerOptions.types;
expect(tsconfigTypes).toContain('@nx/next/typings/image.d.ts');
@ -44,9 +45,10 @@ describe('next library', () => {
unitTestRunner: 'jest',
style: 'css',
component: true,
projectNameAndRootFormat: 'as-provided',
};
const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
const appTree = createTreeWithEmptyWorkspace();
await libraryGenerator(appTree, {
...baseOptions,
@ -59,12 +61,10 @@ describe('next library', () => {
});
expect(
readJson(appTree, 'libs/my-lib/tsconfig.json').compilerOptions
.jsxImportSource
readJson(appTree, 'my-lib/tsconfig.json').compilerOptions.jsxImportSource
).not.toBeDefined();
expect(
readJson(appTree, 'libs/my-lib2/tsconfig.json').compilerOptions
.jsxImportSource
readJson(appTree, 'my-lib2/tsconfig.json').compilerOptions.jsxImportSource
).toEqual('@emotion/react');
});
@ -79,6 +79,7 @@ describe('next library', () => {
unitTestRunner: 'jest',
style: 'css',
component: true,
projectNameAndRootFormat: 'as-provided',
});
expect(appTree.read('my-lib/src/index.ts', 'utf-8')).toContain(

26
packages/next/src/generators/page/page.spec.ts
View File

@ -11,16 +11,18 @@ describe('component', () => {
beforeEach(async () => {
projectName = 'my-app';
appRouterProjectName = 'my-app-router';
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
tree = createTreeWithEmptyWorkspace();
await applicationGenerator(tree, {
name: projectName,
style: 'css',
appDir: false,
projectNameAndRootFormat: 'as-provided',
});
await applicationGenerator(tree, {
name: appRouterProjectName,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
});
@ -32,10 +34,8 @@ describe('component', () => {
style: 'css',
});
expect(tree.exists('apps/my-app/pages/hello/index.tsx')).toBeTruthy();
expect(
tree.exists('apps/my-app/pages/hello/index.module.css')
).toBeTruthy();
expect(tree.exists('my-app/pages/hello/index.tsx')).toBeTruthy();
expect(tree.exists('my-app/pages/hello/index.module.css')).toBeTruthy();
});
it('should support dynamic routes and directories', async () => {
@ -47,14 +47,14 @@ describe('component', () => {
});
expect(
tree.exists('apps/my-app/pages/posts/[dynamic]/index.tsx')
tree.exists('my-app/pages/posts/[dynamic]/index.tsx')
).toBeTruthy();
expect(
tree.exists('apps/my-app/pages/posts/[dynamic]/index.module.css')
tree.exists('my-app/pages/posts/[dynamic]/index.module.css')
).toBeTruthy();
const content = tree
.read('apps/my-app/pages/posts/[dynamic]/index.tsx')
.read('my-app/pages/posts/[dynamic]/index.tsx')
.toString();
expect(content).toMatch(/DynamicProps/);
});
@ -69,10 +69,10 @@ describe('component', () => {
});
expect(
tree.exists(`apps/${appRouterProjectName}/app/about/page.tsx`)
tree.exists(`${appRouterProjectName}/app/about/page.tsx`)
).toBeTruthy();
expect(
tree.exists(`apps/${appRouterProjectName}/app/about/page.module.css`)
tree.exists(`${appRouterProjectName}/app/about/page.module.css`)
).toBeTruthy();
});
@ -85,16 +85,16 @@ describe('component', () => {
});
expect(
tree.exists(`apps/${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
tree.exists(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
).toBeTruthy();
expect(
tree.exists(
`apps/${appRouterProjectName}/app/posts/[dynamic]/page.module.css`
`${appRouterProjectName}/app/posts/[dynamic]/page.module.css`
)
).toBeTruthy();
const content = tree
.read(`apps/${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
.read(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
.toString();
expect(content).toMatch(/DynamicProps/);
});