rsnext/test/e2e/app-dir/app/standalone.test.ts
Jiachi Liu e117c000e4
Redesign nextjs logging (#54713)
The current logging styles has been existed for a while, this PR gives a fresh impression for the logging output from Next.js.
We want to achieve few new goals that makes the output clean, modernized, sweet 🍫 .

Few goals are addressed with this redesign:

## Refresh Impression & Simplification

The new design of logging is much more information centralized and streamlined.

* Given a `ready` message at the begining when compilers are bootstrapped.
* Only show `compiled` event with green check mark indicating succesful compilation, this will merge the unclear `compiling` event which shows `(client and server)` before, now tell you the route compilation info in one line.

hello world app

### `next dev`

#### After vs Before


<img src="https://github.com/vercel/next.js/assets/4800338/9649b340-8241-4756-a2b3-a989f0b74003" height="120"> 
<img src="https://github.com/vercel/next.js/assets/4800338/ee181263-3dd4-40d0-9ffc-819a56b45900" height="120">  

 


 

### `next build`

#### After vs Before


<img src="https://github.com/vercel/next.js/assets/4800338/5db9829a-9ffc-49f0-b030-93ee92f5c248" width="360"> 
<img src="https://github.com/vercel/next.js/assets/4800338/b9527b83-27c8-4426-9c0d-c0d4072b7d58" width="360">





### error status

#### After vs Before

<img src="https://github.com/vercel/next.js/assets/4800338/00455226-ace7-468b-8d90-0d36bf038489" height="120"> 
<img src="https://github.com/vercel/next.js/assets/4800338/1be8c451-d3f0-465c-9ef7-6b0dde7cff85" height="120"> 



## Streamlization

If you have customized envs and experiments Next.js will give the brief in the early summary about your network information, env vars, and enabled experimental features

<img src="https://github.com/vercel/next.js/assets/4800338/ca1a7409-1532-46cb-850f-687e61e587b2" width="400">


## Polish

### fetching logging structure 

#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/97526397-dffe-4736-88ed-e5cbe5e945bd" width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/ab77c907-5ab5-48bb-8347-6146d2e60932" width="400">


### Dedupe Duplicates

The logging is moved from `@next/env` to `next` itself, `@next/env` will only notify the invoker that the env is reloaded. Then the duplicated logs for the env reloading cases can be avoid.

#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/04799295-e739-4035-87aa-61cec962fc39" width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/e29020c9-0031-4bf3-a21b-8b64633f43a2" width="400"> 


### Different indicators

Use unicode text icons for different situation: 
* passed -> check mark
* warning -> warning
* error -> red cross
* loading -> circle

<img src="https://github.com/vercel/next.js/assets/4800338/715c34bd-298f-4990-a5d7-e12e455ead44" width="400">



Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2023-09-05 11:40:00 +00:00

104 lines
2.9 KiB
TypeScript

import { createNextDescribe } from 'e2e-utils'
import fs from 'fs-extra'
import os from 'os'
import path from 'path'
import {
findPort,
initNextServerScript,
killApp,
fetchViaHTTP,
} from 'next-test-utils'
if (!(globalThis as any).isNextStart) {
it('should skip for non-next start', () => {})
} else {
createNextDescribe(
'output: standalone with app dir',
{
files: __dirname,
skipStart: true,
},
({ next }) => {
beforeAll(async () => {
await next.patchFile(
'next.config.js',
(await next.readFile('next.config.js')).replace('// output', 'output')
)
await next.start()
})
it('should handle trace files correctly for route groups (nodejs only)', async () => {
expect(next.cliOutput).not.toContain('Failed to copy traced files')
const serverDirPath = path.join(
next.testDir,
'.next/standalone/.next/server'
)
for (const page of [
'(newroot)/dashboard/another',
'(newroot)/dashboard/project/[projectId]',
'(rootonly)/dashboard/changelog',
]) {
const pagePath = path.join(serverDirPath, 'app', page)
expect(
await fs.pathExists(path.join(pagePath, 'page.js.nft.json'))
).toBe(true)
const files = (
await fs.readJSON(path.join(pagePath, 'page.js.nft.json'))
).files as string[]
for (const file of files) {
expect(await fs.pathExists(path.join(pagePath, file))).toBe(true)
}
}
})
it('should work correctly with output standalone', async () => {
const tmpFolder = path.join(
os.tmpdir(),
'next-standalone-' + Date.now()
)
await fs.move(path.join(next.testDir, '.next/standalone'), tmpFolder)
let server: any
try {
const testServer = path.join(tmpFolder, 'server.js')
const appPort = await findPort()
server = await initNextServerScript(
testServer,
/- Local:/,
{
...process.env,
PORT: appPort.toString(),
},
undefined,
{
cwd: tmpFolder,
}
)
for (const testPath of [
'/',
'/api/hello',
'/blog/first',
'/dashboard',
'/dashboard/another',
'/dashboard/changelog',
'/dashboard/deployments/breakdown',
'/dashboard/deployments/123',
'/dashboard/hello',
'/dashboard/project/123',
'/catch-all/first',
]) {
const res = await fetchViaHTTP(appPort, testPath)
expect(res.status).toBe(200)
}
} finally {
if (server) await killApp(server)
await fs.remove(tmpFolder)
}
})
}
)
}