Error status: {statusCode}
+ } + + export const getServerSideProps = ({ req, res, err }) => { + console.error('called _error getServerSideProps') + + if (req.url === '/500') { + throw new Error('should not export /500') + } + + return { + props: { + statusCode: res && res.statusCode ? res.statusCode : err ? err.statusCode : 404 + } + } + } + + export default Error + ` + ) + await fs.remove(join(appDir, '.next')) + const { stderr: buildStderr, code } = await nextBuild(appDir, [], { + stderr: true, + }) + await fs.rename(`${pages500}.bak`, pages500) + await fs.remove(pagesError) + console.log(buildStderr) + expect(buildStderr).not.toMatch(gip500Err) + expect(code).toBe(0) + expect(await fs.pathExists(join(appDir, '.next/server/pages/500.html'))).toBe( + false + ) + + let appStderr = '' + const appPort = await findPort() + const app = await nextStart(appDir, appPort, { + onStderr(msg) { + appStderr += msg || '' + }, + }) + + await renderViaHTTP(appPort, '/err') + await killApp(app) + + expect(appStderr).toContain('called _error getServerSideProps') +}) diff --git a/test/integration/500-page/test/index.test.js b/test/integration/500-page/test/index.test.js index dceebd117b..bedf93ef31 100644 --- a/test/integration/500-page/test/index.test.js +++ b/test/integration/500-page/test/index.test.js @@ -130,72 +130,6 @@ describe('500 Page Support', () => { expect(appStdout).toContain('rendered 500') }) - it('does build 500 statically with getInitialProps in _app and getStaticProps in pages/500', async () => { - await fs.writeFile( - pagesApp, - ` - import App from 'next/app' - - const page = ({ Component, pageProps }) =>Error status: {statusCode}
- } - - export const getServerSideProps = ({ req, res, err }) => { - console.error('called _error getServerSideProps') - - if (req.url === '/500') { - throw new Error('should not export /500') - } - - return { - props: { - statusCode: res && res.statusCode ? res.statusCode : err ? err.statusCode : 404 - } - } - } - - export default Error - ` - ) - await fs.remove(join(appDir, '.next')) - const { stderr: buildStderr, code } = await nextBuild(appDir, [], { - stderr: true, - }) - await fs.rename(`${pages500}.bak`, pages500) - await fs.remove(pagesError) - console.log(buildStderr) - expect(buildStderr).not.toMatch(gip500Err) - expect(code).toBe(0) - expect( - await fs.pathExists(join(appDir, '.next/server/pages/500.html')) - ).toBe(false) - - let appStderr = '' - const appPort = await findPort() - const app = await nextStart(appDir, appPort, { - onStderr(msg) { - appStderr += msg || '' - }, - }) - - await renderViaHTTP(appPort, '/err') - await killApp(app) - - expect(appStderr).toContain('called _error getServerSideProps') - }) - it('does not build 500 statically with no pages/500 and custom getInitialProps in _error and _app', async () => { await fs.rename(pages500, `${pages500}.bak`) await fs.writeFile( @@ -471,100 +352,4 @@ describe('500 Page Support', () => { expect(stderr).toMatch(gip500Err) }) - - it('does not show error with getStaticProps in pages/500 build', async () => { - await fs.move(pages500, `${pages500}.bak`) - await fs.writeFile( - pages500, - ` - const page = () => 'custom 500 page' - export const getStaticProps = () => ({ props: { a: 'b' } }) - export default page - ` - ) - await fs.remove(join(appDir, '.next')) - const { stderr, code } = await nextBuild(appDir, [], { stderr: true }) - await fs.remove(pages500) - await fs.move(`${pages500}.bak`, pages500) - - expect(stderr).not.toMatch(gip500Err) - expect(code).toBe(0) - }) - - it('does not show error with getStaticProps in pages/500 dev', async () => { - await fs.move(pages500, `${pages500}.bak`) - await fs.writeFile( - pages500, - ` - const page = () => 'custom 500 page' - export const getStaticProps = () => ({ props: { a: 'b' } }) - export default page - ` - ) - - let stderr = '' - appPort = await findPort() - app = await launchApp(appDir, appPort, { - onStderr(msg) { - stderr += msg || '' - }, - }) - await renderViaHTTP(appPort, '/abc') - await waitFor(1000) - - await killApp(app) - - await fs.remove(pages500) - await fs.move(`${pages500}.bak`, pages500) - - expect(stderr).not.toMatch(gip500Err) - }) - - it('shows error with getServerSideProps in pages/500 build', async () => { - await fs.move(pages500, `${pages500}.bak`) - await fs.writeFile( - pages500, - ` - const page = () => 'custom 500 page' - export const getServerSideProps = () => ({ props: { a: 'b' } }) - export default page - ` - ) - await fs.remove(join(appDir, '.next')) - const { stderr, code } = await nextBuild(appDir, [], { stderr: true }) - await fs.remove(pages500) - await fs.move(`${pages500}.bak`, pages500) - - expect(stderr).toMatch(gip500Err) - expect(code).toBe(1) - }) - - it('shows error with getServerSideProps in pages/500 dev', async () => { - await fs.move(pages500, `${pages500}.bak`) - await fs.writeFile( - pages500, - ` - const page = () => 'custom 500 page' - export const getServerSideProps = () => ({ props: { a: 'b' } }) - export default page - ` - ) - - let stderr = '' - appPort = await findPort() - app = await launchApp(appDir, appPort, { - onStderr(msg) { - stderr += msg || '' - }, - }) - await renderViaHTTP(appPort, '/500') - await waitFor(1000) - - await killApp(app) - - await fs.remove(pages500) - await fs.move(`${pages500}.bak`, pages500) - - expect(stderr).toMatch(gip500Err) - }) }) diff --git a/test/integration/create-next-app/index.test.ts b/test/integration/create-next-app/index.test.ts index 2eb8f2c37c..50e130de0f 100644 --- a/test/integration/create-next-app/index.test.ts +++ b/test/integration/create-next-app/index.test.ts @@ -475,416 +475,4 @@ describe('create next app', () => { shouldBeJavascriptProject({ cwd, projectName, template: 'app' }) }) }) - - it('should use npm as the package manager on supplying --use-npm', async () => { - await useTempDir(async (cwd) => { - const projectName = 'use-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-npm', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - } - ) - - expect(res.exitCode).toBe(0) - shouldBeJavascriptProject({ cwd, projectName, template: 'app' }) - }) - }) - - it('should use npm as the package manager on supplying --use-npm with example', async () => { - await useTempDir(async (cwd) => { - const projectName = 'use-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-npm', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd } - ) - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ - cwd, - projectName, - files: [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'package-lock.json', - 'node_modules/next', - ], - }) - }) - }) - - it('should use Yarn as the package manager on supplying --use-yarn', async () => { - await useTempDir(async (cwd) => { - const projectName = 'use-yarn' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-yarn', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - } - ) - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ - cwd, - projectName, - files: [ - 'package.json', - 'app/page.js', - '.gitignore', - '.eslintrc.json', - 'yarn.lock', - 'node_modules/next', - ], - }) - }) - }) - - it('should use Yarn as the package manager on supplying --use-yarn with example', async () => { - try { - await execa('yarn', ['--version']) - } catch (_) { - // install yarn if not available - await execa('npm', ['i', '-g', 'yarn']) - } - - await useTempDir(async (cwd) => { - const projectName = 'use-yarn' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-yarn', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd } - ) - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ - cwd, - projectName, - files: [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'yarn.lock', - 'node_modules/next', - ], - }) - }) - }) - - it('should use pnpm as the package manager on supplying --use-pnpm', async () => { - await useTempDir(async (cwd) => { - const projectName = 'use-pnpm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-pnpm', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - } - ) - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ - cwd, - projectName, - files: [ - 'package.json', - 'app/page.js', - '.gitignore', - '.eslintrc.json', - 'pnpm-lock.yaml', - 'node_modules/next', - ], - }) - }) - }) - - it('should use pnpm as the package manager on supplying --use-pnpm with example', async () => { - try { - await execa('pnpm', ['--version']) - } catch (_) { - // install pnpm if not available - await execa('npm', ['i', '-g', 'pnpm']) - } - - await useTempDir(async (cwd) => { - const projectName = 'use-pnpm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--use-pnpm', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd } - ) - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ - cwd, - projectName, - files: [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'pnpm-lock.yaml', - 'node_modules/next', - ], - }) - }) - }) - - it('should infer npm as the package manager', async () => { - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - env: { ...process.env, npm_config_user_agent: 'npm' }, - } - ) - - const files = [ - 'package.json', - 'app/page.js', - '.gitignore', - '.eslintrc.json', - 'package-lock.json', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) - - it('should infer npm as the package manager with example', async () => { - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd, env: { ...process.env, npm_config_user_agent: 'npm' } } - ) - - const files = [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'package-lock.json', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) - - it('should infer yarn as the package manager', async () => { - try { - await execa('yarn', ['--version']) - } catch (_) { - // install yarn if not available - await execa('npm', ['i', '-g', 'yarn']) - } - - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager-yarn' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - env: { ...process.env, npm_config_user_agent: 'yarn' }, - } - ) - - const files = [ - 'package.json', - 'app/page.js', - '.gitignore', - '.eslintrc.json', - 'yarn.lock', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) - - it('should infer yarn as the package manager with example', async () => { - try { - await execa('yarn', ['--version']) - } catch (_) { - // install yarn if not available - await execa('npm', ['i', '-g', 'yarn']) - } - - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd, env: { ...process.env, npm_config_user_agent: 'yarn' } } - ) - - const files = [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'yarn.lock', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) - - it('should infer pnpm as the package manager', async () => { - try { - await execa('pnpm', ['--version']) - } catch (_) { - // install pnpm if not available - await execa('npm', ['i', '-g', 'pnpm']) - } - - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--no-src-dir', - '--app', - `--import-alias=@/*`, - ], - { - cwd, - env: { ...process.env, npm_config_user_agent: 'pnpm' }, - } - ) - - const files = [ - 'package.json', - 'app/page.js', - '.gitignore', - '.eslintrc.json', - 'pnpm-lock.yaml', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) - - it('should infer pnpm as the package manager with example', async () => { - try { - await execa('pnpm', ['--version']) - } catch (_) { - // install pnpm if not available - await execa('npm', ['i', '-g', 'pnpm']) - } - - await useTempDir(async (cwd) => { - const projectName = 'infer-package-manager-npm' - const res = await run( - [ - projectName, - '--js', - '--no-tailwind', - '--eslint', - '--example', - `${exampleRepo}/${examplePath}`, - ], - { cwd, env: { ...process.env, npm_config_user_agent: 'pnpm' } } - ) - - const files = [ - 'package.json', - 'pages/index.tsx', - '.gitignore', - 'pnpm-lock.yaml', - 'node_modules/next', - ] - - expect(res.exitCode).toBe(0) - projectFilesShouldExist({ cwd, projectName, files }) - }) - }) }) diff --git a/test/integration/create-next-app/package-manager.test.ts b/test/integration/create-next-app/package-manager.test.ts new file mode 100644 index 0000000000..d0c1e12b3e --- /dev/null +++ b/test/integration/create-next-app/package-manager.test.ts @@ -0,0 +1,438 @@ +/* eslint-env jest */ +/** + * @fileoverview + * + * This file contains integration tests for `create-next-app`. It currently + * aliases all calls to `--js`. + * + * TypeScript project creation via `create-next-app --ts` is tested in + * `./templates.test.ts`, though additional tests can be added here using the + * `shouldBeTypescriptProject` helper. + */ + +import execa from 'execa' +import Conf from 'next/dist/compiled/conf' +import { useTempDir } from '../../lib/use-temp-dir' +import { projectFilesShouldExist, shouldBeJavascriptProject } from './lib/utils' + +const cli = require.resolve('create-next-app/dist/index.js') +const exampleRepo = 'https://github.com/vercel/next.js/tree/canary' +const examplePath = 'examples/basic-css' + +const run = (args: string[], options: execa.Options) => { + const conf = new Conf({ projectName: 'create-next-app' }) + conf.clear() + return execa('node', [cli].concat(args), options) +} + +it('should use npm as the package manager on supplying --use-npm', async () => { + await useTempDir(async (cwd) => { + const projectName = 'use-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-npm', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + } + ) + + expect(res.exitCode).toBe(0) + shouldBeJavascriptProject({ cwd, projectName, template: 'app' }) + }) +}) + +it('should use npm as the package manager on supplying --use-npm with example', async () => { + await useTempDir(async (cwd) => { + const projectName = 'use-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-npm', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd } + ) + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ + cwd, + projectName, + files: [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'package-lock.json', + 'node_modules/next', + ], + }) + }) +}) + +it('should use Yarn as the package manager on supplying --use-yarn', async () => { + await useTempDir(async (cwd) => { + const projectName = 'use-yarn' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-yarn', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + } + ) + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ + cwd, + projectName, + files: [ + 'package.json', + 'app/page.js', + '.gitignore', + '.eslintrc.json', + 'yarn.lock', + 'node_modules/next', + ], + }) + }) +}) + +it('should use Yarn as the package manager on supplying --use-yarn with example', async () => { + try { + await execa('yarn', ['--version']) + } catch (_) { + // install yarn if not available + await execa('npm', ['i', '-g', 'yarn']) + } + + await useTempDir(async (cwd) => { + const projectName = 'use-yarn' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-yarn', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd } + ) + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ + cwd, + projectName, + files: [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'yarn.lock', + 'node_modules/next', + ], + }) + }) +}) + +it('should use pnpm as the package manager on supplying --use-pnpm', async () => { + await useTempDir(async (cwd) => { + const projectName = 'use-pnpm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-pnpm', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + } + ) + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ + cwd, + projectName, + files: [ + 'package.json', + 'app/page.js', + '.gitignore', + '.eslintrc.json', + 'pnpm-lock.yaml', + 'node_modules/next', + ], + }) + }) +}) + +it('should use pnpm as the package manager on supplying --use-pnpm with example', async () => { + try { + await execa('pnpm', ['--version']) + } catch (_) { + // install pnpm if not available + await execa('npm', ['i', '-g', 'pnpm']) + } + + await useTempDir(async (cwd) => { + const projectName = 'use-pnpm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--use-pnpm', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd } + ) + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ + cwd, + projectName, + files: [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'pnpm-lock.yaml', + 'node_modules/next', + ], + }) + }) +}) + +it('should infer npm as the package manager', async () => { + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + env: { ...process.env, npm_config_user_agent: 'npm' }, + } + ) + + const files = [ + 'package.json', + 'app/page.js', + '.gitignore', + '.eslintrc.json', + 'package-lock.json', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) + +it('should infer npm as the package manager with example', async () => { + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd, env: { ...process.env, npm_config_user_agent: 'npm' } } + ) + + const files = [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'package-lock.json', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) + +it('should infer yarn as the package manager', async () => { + try { + await execa('yarn', ['--version']) + } catch (_) { + // install yarn if not available + await execa('npm', ['i', '-g', 'yarn']) + } + + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager-yarn' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + env: { ...process.env, npm_config_user_agent: 'yarn' }, + } + ) + + const files = [ + 'package.json', + 'app/page.js', + '.gitignore', + '.eslintrc.json', + 'yarn.lock', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) + +it('should infer yarn as the package manager with example', async () => { + try { + await execa('yarn', ['--version']) + } catch (_) { + // install yarn if not available + await execa('npm', ['i', '-g', 'yarn']) + } + + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd, env: { ...process.env, npm_config_user_agent: 'yarn' } } + ) + + const files = [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'yarn.lock', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) + +it('should infer pnpm as the package manager', async () => { + try { + await execa('pnpm', ['--version']) + } catch (_) { + // install pnpm if not available + await execa('npm', ['i', '-g', 'pnpm']) + } + + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--no-src-dir', + '--app', + `--import-alias=@/*`, + ], + { + cwd, + env: { ...process.env, npm_config_user_agent: 'pnpm' }, + } + ) + + const files = [ + 'package.json', + 'app/page.js', + '.gitignore', + '.eslintrc.json', + 'pnpm-lock.yaml', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) + +it('should infer pnpm as the package manager with example', async () => { + try { + await execa('pnpm', ['--version']) + } catch (_) { + // install pnpm if not available + await execa('npm', ['i', '-g', 'pnpm']) + } + + await useTempDir(async (cwd) => { + const projectName = 'infer-package-manager-npm' + const res = await run( + [ + projectName, + '--js', + '--no-tailwind', + '--eslint', + '--example', + `${exampleRepo}/${examplePath}`, + ], + { cwd, env: { ...process.env, npm_config_user_agent: 'pnpm' } } + ) + + const files = [ + 'package.json', + 'pages/index.tsx', + '.gitignore', + 'pnpm-lock.yaml', + 'node_modules/next', + ] + + expect(res.exitCode).toBe(0) + projectFilesShouldExist({ cwd, projectName, files }) + }) +}) diff --git a/test/integration/create-next-app/templates-app.test.ts b/test/integration/create-next-app/templates-app.test.ts new file mode 100644 index 0000000000..b542890dee --- /dev/null +++ b/test/integration/create-next-app/templates-app.test.ts @@ -0,0 +1,196 @@ +/* eslint-env jest */ +/** + * @fileoverview + * + * This file contains tests for `create-next-app` templates, currently + * JavaScript (default), TypeScript, and appDir. + */ + +import path from 'path' +import fs from 'fs-extra' +import { + createNextApp, + shouldBeTemplateProject, + spawnExitPromise, +} from './lib/utils' +import { Span } from 'next/dist/trace' + +import { useTempDir } from '../../lib/use-temp-dir' +import { fetchViaHTTP, findPort, killApp, launchApp } from 'next-test-utils' +import resolveFrom from 'resolve-from' +import { createNextInstall } from '../../lib/create-next-install' + +const startsWithoutError = async ( + appDir: string, + modes = ['default', 'turbo'], + usingAppDirectory: boolean = false +) => { + for (const mode of modes) { + appDir = await fs.realpath(appDir) + const appPort = await findPort() + const app = await launchApp(appDir, appPort, { + turbo: mode === 'turbo', + cwd: appDir, + nextBin: resolveFrom(appDir, 'next/dist/bin/next'), + }) + + try { + const res = await fetchViaHTTP(appPort, '/') + expect(await res.text()).toContain('Get started by editing') + expect(res.status).toBe(200) + + if (!usingAppDirectory) { + const apiRes = await fetchViaHTTP(appPort, '/api/hello') + expect(await apiRes.json()).toEqual({ name: 'John Doe' }) + expect(apiRes.status).toBe(200) + } + } finally { + await killApp(app) + } + } +} +let testVersion + +describe('create-next-app --app', () => { + beforeAll(async () => { + if (testVersion) return + const span = new Span({ name: 'parent' }) + testVersion = ( + await createNextInstall({ onlyPackages: true, parentSpan: span }) + ).get('next') + }) + + it('should create TS appDir projects with --ts', async () => { + await useTempDir(async (cwd) => { + const projectName = 'appdir-test' + const childProcess = createNextApp( + [ + projectName, + '--ts', + '--no-tailwind', + '--app', + '--eslint', + '--no-src-dir', + `--import-alias=@/*`, + ], + { + cwd, + }, + testVersion + ) + + const exitCode = await spawnExitPromise(childProcess) + expect(exitCode).toBe(0) + shouldBeTemplateProject({ cwd, projectName, template: 'app', mode: 'ts' }) + await startsWithoutError( + path.join(cwd, projectName), + ['default', 'turbo'], + true + ) + }) + }) + + it('should create JS appDir projects with --js', async () => { + await useTempDir(async (cwd) => { + const projectName = 'appdir-test' + const childProcess = createNextApp( + [ + projectName, + '--js', + '--no-tailwind', + '--app', + '--eslint', + '--no-src-dir', + `--import-alias=@/*`, + ], + { + cwd, + }, + testVersion + ) + + const exitCode = await spawnExitPromise(childProcess) + expect(exitCode).toBe(0) + shouldBeTemplateProject({ cwd, projectName, template: 'app', mode: 'js' }) + // is landed + await startsWithoutError( + path.join(cwd, projectName), + ['default', 'turbo'], + true + ) + }) + }) + + it('should create JS appDir projects with --js --src-dir', async () => { + await useTempDir(async (cwd) => { + const projectName = 'appdir-test' + const childProcess = createNextApp( + [ + projectName, + '--js', + '--no-tailwind', + '--app', + '--eslint', + '--src-dir', + '--import-alias=@/*', + ], + { + cwd, + stdio: 'inherit', + }, + testVersion + ) + + const exitCode = await spawnExitPromise(childProcess) + expect(exitCode).toBe(0) + shouldBeTemplateProject({ + cwd, + projectName, + template: 'app', + mode: 'js', + srcDir: true, + }) + await startsWithoutError( + path.join(cwd, projectName), + ['default', 'turbo'], + true + ) + }) + }) + + it('should create Tailwind CSS appDir projects with --tailwind', async () => { + await useTempDir(async (cwd) => { + const projectName = 'appdir-tailwind-test' + const childProcess = createNextApp( + [ + projectName, + '--ts', + '--tailwind', + '--app', + '--eslint', + '--src-dir', + `--import-alias=@/*`, + ], + { + cwd, + }, + testVersion + ) + + const exitCode = await spawnExitPromise(childProcess) + expect(exitCode).toBe(0) + shouldBeTemplateProject({ + cwd, + projectName, + template: 'app-tw', + mode: 'ts', + srcDir: true, + }) + await startsWithoutError( + path.join(cwd, projectName), + ['default', 'turbo'], + true + ) + }) + }) +}) diff --git a/test/integration/create-next-app/templates.test.ts b/test/integration/create-next-app/templates-pages.test.ts similarity index 69% rename from test/integration/create-next-app/templates.test.ts rename to test/integration/create-next-app/templates-pages.test.ts index a56732d28b..d8b302f2c9 100644 --- a/test/integration/create-next-app/templates.test.ts +++ b/test/integration/create-next-app/templates-pages.test.ts @@ -12,13 +12,12 @@ import { createNextApp, projectFilesShouldExist, shouldBeJavascriptProject, - shouldBeTemplateProject, shouldBeTypescriptProject, spawnExitPromise, } from './lib/utils' import { Span } from 'next/dist/trace' -import { useTempDir } from '../../../test/lib/use-temp-dir' +import { useTempDir } from '../../lib/use-temp-dir' import { check, fetchViaHTTP, @@ -27,7 +26,7 @@ import { launchApp, } from 'next-test-utils' import resolveFrom from 'resolve-from' -import { createNextInstall } from '../../../test/lib/create-next-install' +import { createNextInstall } from '../../lib/create-next-install' import ansiEscapes from 'ansi-escapes' const startsWithoutError = async ( @@ -176,29 +175,6 @@ describe('create-next-app templates', () => { }) }) - it('should create TS projects with --ts, --typescript with CI=1', async () => { - await useTempDir(async (cwd) => { - const projectName = 'typescript-test' - const childProcess = createNextApp( - [projectName, '--ts', '--no-tailwind', '--eslint', '--app'], - { - cwd, - env: { - ...process.env, - CI: '1', - GITHUB_ACTIONS: '1', - }, - }, - testVersion - ) - const exitCode = await spawnExitPromise(childProcess) - - expect(exitCode).toBe(0) - shouldBeTypescriptProject({ cwd, projectName, template: 'app' }) - await startsWithoutError(path.join(cwd, projectName), undefined, true) - }) - }) - it('should create JS projects with --js, --javascript', async () => { await useTempDir(async (cwd) => { const projectName = 'javascript-test' @@ -414,147 +390,3 @@ describe('create-next-app templates', () => { }) }) }) - -describe('create-next-app --app', () => { - beforeAll(async () => { - if (testVersion) return - const span = new Span({ name: 'parent' }) - testVersion = ( - await createNextInstall({ onlyPackages: true, parentSpan: span }) - ).get('next') - }) - - it('should create TS appDir projects with --ts', async () => { - await useTempDir(async (cwd) => { - const projectName = 'appdir-test' - const childProcess = createNextApp( - [ - projectName, - '--ts', - '--no-tailwind', - '--app', - '--eslint', - '--no-src-dir', - `--import-alias=@/*`, - ], - { - cwd, - }, - testVersion - ) - - const exitCode = await spawnExitPromise(childProcess) - expect(exitCode).toBe(0) - shouldBeTemplateProject({ cwd, projectName, template: 'app', mode: 'ts' }) - await startsWithoutError( - path.join(cwd, projectName), - ['default', 'turbo'], - true - ) - }) - }) - - it('should create JS appDir projects with --js', async () => { - await useTempDir(async (cwd) => { - const projectName = 'appdir-test' - const childProcess = createNextApp( - [ - projectName, - '--js', - '--no-tailwind', - '--app', - '--eslint', - '--no-src-dir', - `--import-alias=@/*`, - ], - { - cwd, - }, - testVersion - ) - - const exitCode = await spawnExitPromise(childProcess) - expect(exitCode).toBe(0) - shouldBeTemplateProject({ cwd, projectName, template: 'app', mode: 'js' }) - // is landed - await startsWithoutError( - path.join(cwd, projectName), - ['default', 'turbo'], - true - ) - }) - }) - - it('should create JS appDir projects with --js --src-dir', async () => { - await useTempDir(async (cwd) => { - const projectName = 'appdir-test' - const childProcess = createNextApp( - [ - projectName, - '--js', - '--no-tailwind', - '--app', - '--eslint', - '--src-dir', - '--import-alias=@/*', - ], - { - cwd, - stdio: 'inherit', - }, - testVersion - ) - - const exitCode = await spawnExitPromise(childProcess) - expect(exitCode).toBe(0) - shouldBeTemplateProject({ - cwd, - projectName, - template: 'app', - mode: 'js', - srcDir: true, - }) - await startsWithoutError( - path.join(cwd, projectName), - ['default', 'turbo'], - true - ) - }) - }) - - it('should create Tailwind CSS appDir projects with --tailwind', async () => { - await useTempDir(async (cwd) => { - const projectName = 'appdir-tailwind-test' - const childProcess = createNextApp( - [ - projectName, - '--ts', - '--tailwind', - '--app', - '--eslint', - '--src-dir', - `--import-alias=@/*`, - ], - { - cwd, - }, - testVersion - ) - - const exitCode = await spawnExitPromise(childProcess) - expect(exitCode).toBe(0) - shouldBeTemplateProject({ - cwd, - projectName, - template: 'app-tw', - mode: 'ts', - srcDir: true, - }) - await startsWithoutError( - path.join(cwd, projectName), - ['default', 'turbo'], - true - ) - }) - }) -}) diff --git a/test/integration/css-features/test/browserslist.test.js b/test/integration/css-features/test/browserslist.test.js new file mode 100644 index 0000000000..2fbf1d1190 --- /dev/null +++ b/test/integration/css-features/test/browserslist.test.js @@ -0,0 +1,71 @@ +/* eslint-env jest */ + +import { readdir, readFile, remove } from 'fs-extra' +import { nextBuild } from 'next-test-utils' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../fixtures') + +describe('Browserslist: Old', () => { + const appDir = join(fixturesDir, 'browsers-old') + + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"` + ) + }) +}) + +describe('Browserslist: New', () => { + const appDir = join(fixturesDir, 'browsers-new') + + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"` + ) + }) +}) diff --git a/test/integration/css-features/test/css-modules.test.js b/test/integration/css-features/test/css-modules.test.js new file mode 100644 index 0000000000..3def62504e --- /dev/null +++ b/test/integration/css-features/test/css-modules.test.js @@ -0,0 +1,125 @@ +/* eslint-env jest */ + +import { readdir, readFile, remove } from 'fs-extra' +import { nextBuild } from 'next-test-utils' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../fixtures') + +describe('Custom Properties: Fail for :root {} in CSS Modules', () => { + const appDir = join(fixturesDir, 'cp-global-modules') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should fail to build', async () => { + const { code, stderr } = await nextBuild(appDir, [], { + stderr: true, + }) + expect(code).not.toBe(0) + expect(stderr).toContain('Failed to compile') + expect(stderr).toContain('pages/styles.module.css') + expect(stderr).toContain('Selector ":root" is not pure') + }) +}) + +describe('Custom Properties: Fail for global element in CSS Modules', () => { + const appDir = join(fixturesDir, 'cp-el-modules') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should fail to build', async () => { + const { code, stderr } = await nextBuild(appDir, [], { + stderr: true, + }) + expect(code).not.toBe(0) + expect(stderr).toContain('Failed to compile') + expect(stderr).toContain('pages/styles.module.css') + expect(stderr).toContain('Selector "h1" is not pure') + }) +}) + +describe('CSS Modules: Import Global CSS', () => { + const appDir = join(fixturesDir, 'module-import-global') + + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `"a .styles_foo__Io_Us{all:initial}"` + ) + }) +}) + +describe('CSS Modules: Importing Invalid Global CSS', () => { + const appDir = join(fixturesDir, 'module-import-global-invalid') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should fail to build', async () => { + const { code, stderr } = await nextBuild(appDir, [], { + stderr: true, + }) + expect(code).not.toBe(0) + expect(stderr).toContain('Failed to compile') + expect(stderr).toContain('pages/styles.css') + expect(stderr).toContain('Selector "a" is not pure') + }) +}) + +describe('CSS Modules: Import Exports', () => { + const appDir = join(fixturesDir, 'module-import-exports') + + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `".styles_blk__CqbFg{color:#000}"` + ) + }) +}) diff --git a/test/integration/css-features/test/index.test.js b/test/integration/css-features/test/index.test.js index e2228031f4..d7eb6b0e73 100644 --- a/test/integration/css-features/test/index.test.js +++ b/test/integration/css-features/test/index.test.js @@ -6,70 +6,6 @@ import { join } from 'path' const fixturesDir = join(__dirname, '../fixtures') -describe('Browserslist: Old', () => { - const appDir = join(fixturesDir, 'browsers-old') - - let stdout - let code - beforeAll(async () => { - await remove(join(appDir, '.next')) - ;({ code, stdout } = await nextBuild(appDir, [], { - stdout: true, - })) - }) - - it('should have compiled successfully', () => { - expect(code).toBe(0) - expect(stdout).toMatch(/Compiled successfully/) - }) - - it(`should've emitted a single CSS file`, async () => { - const cssFolder = join(appDir, '.next/static/css') - - const files = await readdir(cssFolder) - const cssFiles = files.filter((f) => /\.css$/.test(f)) - - expect(cssFiles.length).toBe(1) - const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') - - expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( - `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"` - ) - }) -}) - -describe('Browserslist: New', () => { - const appDir = join(fixturesDir, 'browsers-new') - - let stdout - let code - beforeAll(async () => { - await remove(join(appDir, '.next')) - ;({ code, stdout } = await nextBuild(appDir, [], { - stdout: true, - })) - }) - - it('should have compiled successfully', () => { - expect(code).toBe(0) - expect(stdout).toMatch(/Compiled successfully/) - }) - - it(`should've emitted a single CSS file`, async () => { - const cssFolder = join(appDir, '.next/static/css') - - const files = await readdir(cssFolder) - const cssFiles = files.filter((f) => /\.css$/.test(f)) - - expect(cssFiles.length).toBe(1) - const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') - - expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( - `"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"` - ) - }) -}) - describe('Custom Properties: Pass-Through IE11', () => { const appDir = join(fixturesDir, 'cp-ie-11') @@ -134,124 +70,6 @@ describe('Custom Properties: Pass-Through Modern', () => { }) }) -describe('Custom Properties: Fail for :root {} in CSS Modules', () => { - const appDir = join(fixturesDir, 'cp-global-modules') - - beforeAll(async () => { - await remove(join(appDir, '.next')) - }) - - it('should fail to build', async () => { - const { code, stderr } = await nextBuild(appDir, [], { - stderr: true, - }) - expect(code).not.toBe(0) - expect(stderr).toContain('Failed to compile') - expect(stderr).toContain('pages/styles.module.css') - expect(stderr).toContain('Selector ":root" is not pure') - }) -}) - -describe('Custom Properties: Fail for global element in CSS Modules', () => { - const appDir = join(fixturesDir, 'cp-el-modules') - - beforeAll(async () => { - await remove(join(appDir, '.next')) - }) - - it('should fail to build', async () => { - const { code, stderr } = await nextBuild(appDir, [], { - stderr: true, - }) - expect(code).not.toBe(0) - expect(stderr).toContain('Failed to compile') - expect(stderr).toContain('pages/styles.module.css') - expect(stderr).toContain('Selector "h1" is not pure') - }) -}) - -describe('CSS Modules: Import Global CSS', () => { - const appDir = join(fixturesDir, 'module-import-global') - - let stdout - let code - beforeAll(async () => { - await remove(join(appDir, '.next')) - ;({ code, stdout } = await nextBuild(appDir, [], { - stdout: true, - })) - }) - - it('should have compiled successfully', () => { - expect(code).toBe(0) - expect(stdout).toMatch(/Compiled successfully/) - }) - - it(`should've emitted a single CSS file`, async () => { - const cssFolder = join(appDir, '.next/static/css') - - const files = await readdir(cssFolder) - const cssFiles = files.filter((f) => /\.css$/.test(f)) - - expect(cssFiles.length).toBe(1) - const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') - - expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( - `"a .styles_foo__Io_Us{all:initial}"` - ) - }) -}) - -describe('CSS Modules: Importing Invalid Global CSS', () => { - const appDir = join(fixturesDir, 'module-import-global-invalid') - - beforeAll(async () => { - await remove(join(appDir, '.next')) - }) - - it('should fail to build', async () => { - const { code, stderr } = await nextBuild(appDir, [], { - stderr: true, - }) - expect(code).not.toBe(0) - expect(stderr).toContain('Failed to compile') - expect(stderr).toContain('pages/styles.css') - expect(stderr).toContain('Selector "a" is not pure') - }) -}) - -describe('CSS Modules: Import Exports', () => { - const appDir = join(fixturesDir, 'module-import-exports') - - let stdout - let code - beforeAll(async () => { - await remove(join(appDir, '.next')) - ;({ code, stdout } = await nextBuild(appDir, [], { - stdout: true, - })) - }) - - it('should have compiled successfully', () => { - expect(code).toBe(0) - expect(stdout).toMatch(/Compiled successfully/) - }) - - it(`should've emitted a single CSS file`, async () => { - const cssFolder = join(appDir, '.next/static/css') - - const files = await readdir(cssFolder) - const cssFiles = files.filter((f) => /\.css$/.test(f)) - - expect(cssFiles.length).toBe(1) - const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') - - expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( - `".styles_blk__CqbFg{color:#000}"` - ) - }) -}) - describe('Inline Comments: Minify', () => { const appDir = join(fixturesDir, 'inline-comments') diff --git a/test/integration/css/test/basic-global-support.test.js b/test/integration/css/test/basic-global-support.test.js new file mode 100644 index 0000000000..e956947422 --- /dev/null +++ b/test/integration/css/test/basic-global-support.test.js @@ -0,0 +1,317 @@ +/* eslint-env jest */ +import 'flat-map-polyfill' +import { readdir, readFile, remove } from 'fs-extra' +import { nextBuild } from 'next-test-utils' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../..', 'css-fixtures') + +describe('Basic Global Support', () => { + const appDir = join(fixturesDir, 'single-global') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain( + 'color:red' + ) + }) +}) + +describe('Basic Global Support with special characters in path', () => { + const appDir = join(fixturesDir, 'single-global-special-characters', 'a+b') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain( + 'color:red' + ) + }) +}) + +describe('Basic Global Support with src/ dir', () => { + const appDir = join(fixturesDir, 'single-global-src') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain( + 'color:red' + ) + }) +}) + +describe('Multi Global Support', () => { + const appDir = join(fixturesDir, 'multi-global') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `".red-text{color:red}.blue-text{color:blue}"` + ) + }) +}) + +describe('Nested @import() Global Support', () => { + const appDir = join(fixturesDir, 'nested-global') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `".red-text{color:purple;font-weight:bolder;color:red}.blue-text{color:orange;font-weight:bolder;color:blue}"` + ) + }) +}) + +// Tests css ordering +describe('Multi Global Support (reversed)', () => { + const appDir = join(fixturesDir, 'multi-global-reversed') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot( + `".blue-text{color:blue}.red-text{color:red}"` + ) + }) +}) + +describe('CSS URL via `file-loader`', () => { + const appDir = join(fixturesDir, 'url-global') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted expected files`, async () => { + const cssFolder = join(appDir, '.next/static/css') + const mediaFolder = join(appDir, '.next/static/media') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch( + /^\.red-text\{color:red;background-image:url\(\/_next\/static\/media\/dark\.[a-f0-9]{8}\.svg\) url\(\/_next\/static\/media\/dark2\.[a-f0-9]{8}\.svg\)\}\.blue-text\{color:orange;font-weight:bolder;background-image:url\(\/_next\/static\/media\/light\.[a-f0-9]{8}\.svg\);color:blue\}$/ + ) + + const mediaFiles = await readdir(mediaFolder) + expect(mediaFiles.length).toBe(3) + expect( + mediaFiles + .map((fileName) => + /^(.+?)\..{8}\.(.+?)$/.exec(fileName).slice(1).join('.') + ) + .sort() + ).toMatchInlineSnapshot(` + Array [ + "dark.svg", + "dark2.svg", + "light.svg", + ] + `) + }) +}) + +describe('CSS URL via `file-loader` and asset prefix (1)', () => { + const appDir = join(fixturesDir, 'url-global-asset-prefix-1') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted expected files`, async () => { + const cssFolder = join(appDir, '.next/static/css') + const mediaFolder = join(appDir, '.next/static/media') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch( + /^\.red-text\{color:red;background-image:url\(\/foo\/_next\/static\/media\/dark\.[a-f0-9]{8}\.svg\) url\(\/foo\/_next\/static\/media\/dark2\.[a-f0-9]{8}\.svg\)\}\.blue-text\{color:orange;font-weight:bolder;background-image:url\(\/foo\/_next\/static\/media\/light\.[a-f0-9]{8}\.svg\);color:blue\}$/ + ) + + const mediaFiles = await readdir(mediaFolder) + expect(mediaFiles.length).toBe(3) + expect( + mediaFiles + .map((fileName) => + /^(.+?)\..{8}\.(.+?)$/.exec(fileName).slice(1).join('.') + ) + .sort() + ).toMatchInlineSnapshot(` + Array [ + "dark.svg", + "dark2.svg", + "light.svg", + ] + `) + }) +}) + +describe('CSS URL via `file-loader` and asset prefix (2)', () => { + const appDir = join(fixturesDir, 'url-global-asset-prefix-2') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted expected files`, async () => { + const cssFolder = join(appDir, '.next/static/css') + const mediaFolder = join(appDir, '.next/static/media') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch( + /^\.red-text\{color:red;background-image:url\(\/foo\/_next\/static\/media\/dark\.[a-f0-9]{8}\.svg\) url\(\/foo\/_next\/static\/media\/dark2\.[a-f0-9]{8}\.svg\)\}\.blue-text\{color:orange;font-weight:bolder;background-image:url\(\/foo\/_next\/static\/media\/light\.[a-f0-9]{8}\.svg\);color:blue\}$/ + ) + + const mediaFiles = await readdir(mediaFolder) + expect(mediaFiles.length).toBe(3) + expect( + mediaFiles + .map((fileName) => + /^(.+?)\..{8}\.(.+?)$/.exec(fileName).slice(1).join('.') + ) + .sort() + ).toMatchInlineSnapshot(` + Array [ + "dark.svg", + "dark2.svg", + "light.svg", + ] + `) + }) +}) diff --git a/test/integration/css/test/css-and-styled-jsx.test.js b/test/integration/css/test/css-and-styled-jsx.test.js new file mode 100644 index 0000000000..bc9d892803 --- /dev/null +++ b/test/integration/css/test/css-and-styled-jsx.test.js @@ -0,0 +1,72 @@ +/* eslint-env jest */ +import 'flat-map-polyfill' +import { remove } from 'fs-extra' +import { + findPort, + killApp, + launchApp, + nextBuild, + nextStart, +} from 'next-test-utils' +import webdriver from 'next-webdriver' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../..', 'css-fixtures') + +describe('Ordering with styled-jsx (dev)', () => { + const appDir = join(fixturesDir, 'with-styled-jsx') + + let appPort + let app + beforeAll(async () => { + await remove(join(appDir, '.next')) + appPort = await findPort() + app = await launchApp(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have the correct color (css ordering)', async () => { + const browser = await webdriver(appPort, '/') + + const currentColor = await browser.eval( + `window.getComputedStyle(document.querySelector('.my-text')).color` + ) + expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 128, 0)"`) + }) +}) + +describe('Ordering with styled-jsx (prod)', () => { + const appDir = join(fixturesDir, 'with-styled-jsx') + + let appPort + let app + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it('should have the correct color (css ordering)', async () => { + const browser = await webdriver(appPort, '/') + + const currentColor = await browser.eval( + `window.getComputedStyle(document.querySelector('.my-text')).color` + ) + expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 128, 0)"`) + }) +}) diff --git a/test/integration/css/test/css-compilation.test.js b/test/integration/css/test/css-compilation.test.js new file mode 100644 index 0000000000..43293d3cd1 --- /dev/null +++ b/test/integration/css/test/css-compilation.test.js @@ -0,0 +1,288 @@ +/* eslint-env jest */ +import cheerio from 'cheerio' +import 'flat-map-polyfill' +import { readdir, readFile, remove } from 'fs-extra' +import { + findPort, + killApp, + nextBuild, + nextStart, + renderViaHTTP, +} from 'next-test-utils' +import webdriver from 'next-webdriver' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../..', 'css-fixtures') + +describe('CSS Support', () => { + describe('CSS Compilation and Prefixing', () => { + const appDir = join(fixturesDir, 'compilation-and-prefixing') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've compiled and prefixed`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect( + cssContent.replace(/\/\*.*?\*\//g, '').trim() + ).toMatchInlineSnapshot( + `"@media (min-width:480px) and (max-width:767px){::placeholder{color:green}}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}.transform-parsing{transform:translate3d(0,0)}.css-grid-shorthand{grid-column:span 2}.g-docs-sidenav .filter::-webkit-input-placeholder{opacity:80%}"` + ) + + // Contains a source map + expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//) + }) + + it(`should've emitted a source map`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssMapFiles = files.filter((f) => /\.css\.map$/.test(f)) + + expect(cssMapFiles.length).toBe(1) + const cssMapContent = ( + await readFile(join(cssFolder, cssMapFiles[0]), 'utf8') + ).trim() + + const { version, mappings, sourcesContent } = JSON.parse(cssMapContent) + expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(` + Object { + "mappings": "AAAA,+CACE,cACE,WACF,CACF,CAEA,cACE,2CACF,CAEA,mBACE,0BACF,CAEA,oBACE,kBACF,CAEA,mDACE,WACF", + "sourcesContent": Array [ + "@media (480px <= width < 768px) { + ::placeholder { + color: green; + } + } + + .flex-parsing { + flex: 0 0 calc(50% - var(--vertical-gutter)); + } + + .transform-parsing { + transform: translate3d(0px, 0px); + } + + .css-grid-shorthand { + grid-column: span 2; + } + + .g-docs-sidenav .filter::-webkit-input-placeholder { + opacity: 80%; + } + ", + ], + "version": 3, + } + `) + }) + }) + + describe('React Lifecyce Order (production)', () => { + const appDir = join(fixturesDir, 'transition-react') + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + let appPort + let app + let code + let stdout + beforeAll(async () => { + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it('should have the correct color on mount after navigation', async () => { + let browser + try { + browser = await webdriver(appPort, '/') + + // Navigate to other: + await browser.waitForElementByCss('#link-other').click() + const text = await browser.waitForElementByCss('#red-title').text() + expect(text).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`) + } finally { + if (browser) { + await browser.close() + } + } + }) + }) + + describe('Has CSS in computed styles in Production', () => { + const appDir = join(fixturesDir, 'multi-page') + + let appPort + let app + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it('should have CSS for page', async () => { + const browser = await webdriver(appPort, '/page2') + + const currentColor = await browser.eval( + `window.getComputedStyle(document.querySelector('.blue-text')).color` + ) + expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + }) + + it(`should've preloaded the CSS file and injected it in `, async () => { + const content = await renderViaHTTP(appPort, '/page2') + const $ = cheerio.load(content) + + const cssPreload = $('link[rel="preload"][as="style"]') + expect(cssPreload.length).toBe(1) + expect(cssPreload.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/) + + const cssSheet = $('link[rel="stylesheet"]') + expect(cssSheet.length).toBe(1) + expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/) + + /* ensure CSS preloaded first */ + const allPreloads = [].slice.call($('link[rel="preload"]')) + const styleIndexes = allPreloads.flatMap((p, i) => + p.attribs.as === 'style' ? i : [] + ) + expect(styleIndexes).toEqual([0]) + }) + }) + + describe('Good CSS Import from node_modules', () => { + const appDir = join(fixturesDir, 'npm-import') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch(/nprogress/) + }) + }) + + describe('Good Nested CSS Import from node_modules', () => { + const appDir = join(fixturesDir, 'npm-import-nested') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect( + cssContent.replace(/\/\*.*?\*\//g, '').trim() + ).toMatchInlineSnapshot(`".other{color:blue}.test{color:red}"`) + }) + }) +}) + +// https://github.com/vercel/next.js/issues/15468 +describe('CSS Property Ordering', () => { + const appDir = join(fixturesDir, 'next-issue-15468') + + let appPort + let app + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it('should have the border width (property ordering)', async () => { + const browser = await webdriver(appPort, '/') + + const width1 = await browser.eval( + `window.getComputedStyle(document.querySelector('.test1')).borderWidth` + ) + expect(width1).toMatchInlineSnapshot(`"0px"`) + + const width2 = await browser.eval( + `window.getComputedStyle(document.querySelector('.test2')).borderWidth` + ) + expect(width2).toMatchInlineSnapshot(`"5px"`) + }) +}) diff --git a/test/integration/css/test/css-modules.test.js b/test/integration/css/test/css-modules.test.js new file mode 100644 index 0000000000..f2868d65ad --- /dev/null +++ b/test/integration/css/test/css-modules.test.js @@ -0,0 +1,455 @@ +/* eslint-env jest */ +import cheerio from 'cheerio' +import 'flat-map-polyfill' +import { readdir, readFile, remove } from 'fs-extra' +import { + check, + File, + findPort, + killApp, + launchApp, + nextBuild, + nextStart, + renderViaHTTP, + waitFor, +} from 'next-test-utils' +import webdriver from 'next-webdriver' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../..', 'css-fixtures') + +// https://github.com/vercel/next.js/issues/12343 +describe('Basic CSS Modules Ordering', () => { + const appDir = join(fixturesDir, 'next-issue-12343') + let app, appPort + + function tests() { + async function checkGreenButton(browser) { + await browser.waitForElementByCss('#link-other') + const titleColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#link-other')).backgroundColor` + ) + expect(titleColor).toBe('rgb(0, 255, 0)') + } + async function checkPinkButton(browser) { + await browser.waitForElementByCss('#link-index') + const titleColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#link-index')).backgroundColor` + ) + expect(titleColor).toBe('rgb(255, 105, 180)') + } + + it('should have correct color on index page (on load)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkGreenButton(browser) + } finally { + await browser.close() + } + }) + + it('should have correct color on index page (on hover)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkGreenButton(browser) + await browser.waitForElementByCss('#link-other').moveTo() + await waitFor(2000) + await checkGreenButton(browser) + } finally { + await browser.close() + } + }) + + it('should have correct color on index page (on nav)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkGreenButton(browser) + await browser.waitForElementByCss('#link-other').click() + + // Wait for navigation: + await browser.waitForElementByCss('#link-index') + await checkPinkButton(browser) + + // Navigate back to index: + await browser.waitForElementByCss('#link-index').click() + await checkGreenButton(browser) + } finally { + await browser.close() + } + }) + } + + describe('Development Mode', () => { + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + beforeAll(async () => { + appPort = await findPort() + app = await launchApp(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + tests() + }) + + describe('Production Mode', () => { + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + beforeAll(async () => { + await nextBuild(appDir, [], {}) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + tests() + }) +}) + +describe('should handle unresolved files gracefully', () => { + const workDir = join(fixturesDir, 'unresolved-css-url') + + it('should build correctly', async () => { + await remove(join(workDir, '.next')) + const { code } = await nextBuild(workDir) + expect(code).toBe(0) + }) + + it('should have correct file references in CSS output', async () => { + const cssFiles = await readdir(join(workDir, '.next/static/css')) + + for (const file of cssFiles) { + if (file.endsWith('.css.map')) continue + + const content = await readFile( + join(workDir, '.next/static/css', file), + 'utf8' + ) + console.log(file, content) + + // if it is the combined global CSS file there are double the expected + // results + const howMany = content.includes('p{') || content.includes('p,') ? 2 : 1 + + expect(content.match(/\(\/vercel\.svg/g).length).toBe(howMany) + // expect(content.match(/\(vercel\.svg/g).length).toBe(howMany) + expect(content.match(/\(\/_next\/static\/media/g).length).toBe(1) + expect(content.match(/\(https:\/\//g).length).toBe(howMany) + } + }) +}) + +describe('Data URLs', () => { + const workDir = join(fixturesDir, 'data-url') + + it('should compile successfully', async () => { + await remove(join(workDir, '.next')) + const { code } = await nextBuild(workDir) + expect(code).toBe(0) + }) + + it('should have emitted expected files', async () => { + const cssFolder = join(workDir, '.next/static/css') + const files = await readdir(cssFolder) + const cssFiles = files.filter((f) => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') + expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch( + /background:url\("data:[^"]+"\)/ + ) + }) +}) + +describe('Ordering with Global CSS and Modules (dev)', () => { + const appDir = join(fixturesDir, 'global-and-module-ordering') + + let appPort + let app + beforeAll(async () => { + await remove(join(appDir, '.next')) + appPort = await findPort() + app = await launchApp(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should not execute scripts in any order', async () => { + const content = await renderViaHTTP(appPort, '/') + const $ = cheerio.load(content) + + let asyncCount = 0 + let totalCount = 0 + for (const script of $('script').toArray()) { + ++totalCount + if ('async' in script.attribs) { + ++asyncCount + } + } + + expect(asyncCount).toBe(0) + expect(totalCount).not.toBe(0) + }) + + it('should have the correct color (css ordering)', async () => { + const browser = await webdriver(appPort, '/') + + const currentColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#blueText')).color` + ) + expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + }) + + it('should have the correct color (css ordering) during hot reloads', async () => { + let browser + try { + browser = await webdriver(appPort, '/') + + const blueColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#blueText')).color` + ) + expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + + const yellowColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#yellowText')).color` + ) + expect(yellowColor).toMatchInlineSnapshot(`"rgb(255, 255, 0)"`) + + const cssFile = new File(join(appDir, 'pages/index.module.css')) + try { + cssFile.replace('color: yellow;', 'color: rgb(1, 1, 1);') + await check( + () => + browser.eval( + `window.getComputedStyle(document.querySelector('#yellowText')).color` + ), + 'rgb(1, 1, 1)' + ) + await check( + () => + browser.eval( + `window.getComputedStyle(document.querySelector('#blueText')).color` + ), + 'rgb(0, 0, 255)' + ) + } finally { + cssFile.restore() + } + } finally { + if (browser) { + await browser.close() + } + } + }) +}) + +describe('Ordering with Global CSS and Modules (prod)', () => { + const appDir = join(fixturesDir, 'global-and-module-ordering') + + let appPort + let app + let stdout + let code + beforeAll(async () => { + await remove(join(appDir, '.next')) + ;({ code, stdout } = await nextBuild(appDir, [], { + stdout: true, + })) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should have compiled successfully', () => { + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it('should have the correct color (css ordering)', async () => { + const browser = await webdriver(appPort, '/') + + const currentColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#blueText')).color` + ) + expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + }) +}) + +// https://github.com/vercel/next.js/issues/12445 +describe('CSS Modules Composes Ordering', () => { + const appDir = join(fixturesDir, 'composes-ordering') + let app, appPort + + function tests(isDev = false) { + async function checkBlackTitle(browser) { + await browser.waitForElementByCss('#black-title') + const titleColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#black-title')).color` + ) + expect(titleColor).toBe('rgb(17, 17, 17)') + } + async function checkRedTitle(browser) { + await browser.waitForElementByCss('#red-title') + const titleColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#red-title')).color` + ) + expect(titleColor).toBe('rgb(255, 0, 0)') + } + + it('should have correct color on index page (on load)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkBlackTitle(browser) + } finally { + await browser.close() + } + }) + + it('should have correct color on index page (on hover)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkBlackTitle(browser) + await browser.waitForElementByCss('#link-other').moveTo() + await waitFor(2000) + await checkBlackTitle(browser) + } finally { + await browser.close() + } + }) + + if (!isDev) { + it('should not change color on hover', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkBlackTitle(browser) + await browser.waitForElementByCss('#link-other').moveTo() + await waitFor(2000) + await checkBlackTitle(browser) + } finally { + await browser.close() + } + }) + + it('should have correct CSS injection order', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkBlackTitle(browser) + + const prevSiblingHref = await browser.eval( + `document.querySelector('link[rel=stylesheet][data-n-p]').previousSibling.getAttribute('href')` + ) + const currentPageHref = await browser.eval( + `document.querySelector('link[rel=stylesheet][data-n-p]').getAttribute('href')` + ) + expect(prevSiblingHref).toBeDefined() + expect(prevSiblingHref).toBe(currentPageHref) + + // Navigate to other: + await browser.waitForElementByCss('#link-other').click() + await checkRedTitle(browser) + + const newPrevSibling = await browser.eval( + `document.querySelector('style[data-n-href]').previousSibling.getAttribute('data-n-css')` + ) + const newPageHref = await browser.eval( + `document.querySelector('style[data-n-href]').getAttribute('data-n-href')` + ) + expect(newPrevSibling).toBe('') + expect(newPageHref).toBeDefined() + expect(newPageHref).not.toBe(currentPageHref) + + // Navigate to home: + await browser.waitForElementByCss('#link-index').click() + await checkBlackTitle(browser) + + const newPrevSibling2 = await browser.eval( + `document.querySelector('style[data-n-href]').previousSibling.getAttribute('data-n-css')` + ) + const newPageHref2 = await browser.eval( + `document.querySelector('style[data-n-href]').getAttribute('data-n-href')` + ) + expect(newPrevSibling2).toBe('') + expect(newPageHref2).toBeDefined() + expect(newPageHref2).toBe(currentPageHref) + } finally { + await browser.close() + } + }) + } + + it('should have correct color on index page (on nav from index)', async () => { + const browser = await webdriver(appPort, '/') + try { + await checkBlackTitle(browser) + await browser.waitForElementByCss('#link-other').click() + + // Wait for navigation: + await browser.waitForElementByCss('#link-index') + await checkRedTitle(browser) + + // Navigate back to index: + await browser.waitForElementByCss('#link-index').click() + await checkBlackTitle(browser) + } finally { + await browser.close() + } + }) + + it('should have correct color on index page (on nav from other)', async () => { + const browser = await webdriver(appPort, '/other') + try { + await checkRedTitle(browser) + await browser.waitForElementByCss('#link-index').click() + + // Wait for navigation: + await browser.waitForElementByCss('#link-other') + await checkBlackTitle(browser) + + // Navigate back to other: + await browser.waitForElementByCss('#link-other').click() + await checkRedTitle(browser) + } finally { + await browser.close() + } + }) + } + + describe('Development Mode', () => { + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + beforeAll(async () => { + appPort = await findPort() + app = await launchApp(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + tests(true) + }) + + describe('Production Mode', () => { + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + beforeAll(async () => { + await nextBuild(appDir, [], {}) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + tests() + }) +}) diff --git a/test/integration/css/test/css-rendering.test.js b/test/integration/css/test/css-rendering.test.js new file mode 100644 index 0000000000..846b74ddf9 --- /dev/null +++ b/test/integration/css/test/css-rendering.test.js @@ -0,0 +1,406 @@ +/* eslint-env jest */ +import 'flat-map-polyfill' +import { pathExists, readFile, readJSON, remove } from 'fs-extra' +import { + check, + findPort, + killApp, + nextBuild, + nextStart, + waitFor, +} from 'next-test-utils' +import webdriver from 'next-webdriver' +import { join } from 'path' + +const fixturesDir = join(__dirname, '../..', 'css-fixtures') + +describe('CSS Support', () => { + describe('CSS Import from node_modules', () => { + const appDir = join(fixturesDir, 'npm-import-bad') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should fail the build', async () => { + const { code, stderr } = await nextBuild(appDir, [], { stderr: true }) + + expect(code).toBe(0) + expect(stderr).not.toMatch(/Can't resolve '[^']*?nprogress[^']*?'/) + expect(stderr).not.toMatch(/Build error occurred/) + }) + }) + + // https://github.com/vercel/next.js/issues/18557 + describe('CSS page transition inject