Skip to content

Commit

Permalink
Replace spawnd with execa in wait-for-data-match utility and update r…
Browse files Browse the repository at this point in the history 
…elated tests
  • Loading branch information
@1aron
1aron committed Jan 17, 2025
1 parent 0668a0e commit 2588a44
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 49 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
"cross-env": "^7.0.3",
"eslint": "^9.18.0",
"eslint-plugin-playwright": "^2.1.0",
"execa": "^9.5.2",
"fast-glob": "^3.3.3",
"get-tsconfig": "^4.8.1",
"jest-extended": "^4.0.2",
"jest-text-transformer": "^1.0.4",
"js-beautify": "^1.15.1",
"nanoid": "^4.0.2",
"shuffle-array": "^1.0.1",
"spawnd": "^9.0.2",
"strip-ansi": "^7.1.0",
"techor": "^3.1.7",
"tinybench": "^3.1.0",
Expand Down
28 changes: 14 additions & 14 deletions packages/cli/tests/extract/watch/test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import cssEscape from 'shared/utils/css-escape'
import waitForDataMatch from 'shared/utils/wait-for-data-match'
import dedent from 'ts-dedent'
import { it, beforeAll, afterAll, expect } from 'vitest'
import { spawnd, SpawndChildProcess } from 'spawnd'
import { execa, ExecaChildProcess } from 'execa'

const HTMLFilepath = path.join(__dirname, 'test.html')
const originHTMLText = dedent`
Expand Down Expand Up @@ -51,19 +51,19 @@ export default config

const virtualCSSFilepath = path.join(__dirname, '.virtual/master.css')

let child: SpawndChildProcess
let subprocess: ExecaChildProcess

beforeAll(() => {
fs.writeFileSync(HTMLFilepath, originHTMLText, { flag: 'w+' })
fs.writeFileSync(optionsFilepath, originOptionsText, { flag: 'w+' })
fs.writeFileSync(configFilepath, originConfigText, { flag: 'w+' })
child = spawnd('tsx ../../../src/bin extract -w', { shell: true, cwd: __dirname })
subprocess = execa('tsx ../../../src/bin extract -w', { shell: true, cwd: __dirname })
}, 120000)

it('start watch process', async () => {
await Promise.all([
waitForDataMatch(child, (data) => data.includes('Start watching source changes')),
waitForDataMatch(child, (data) => data.includes('exported'))
waitForDataMatch(subprocess, (data) => data.includes('Start watching source changes')),
waitForDataMatch(subprocess, (data) => data.includes('exported'))
])
const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
expect(fileCSSText).toContain(cssEscape('font:heavy'))
Expand All @@ -74,39 +74,39 @@ it('start watch process', async () => {

it('change options file `fixed` and reset process', async () => {
await Promise.all([
waitForDataMatch(child, (data) => data.includes('watching source changes'), async () => {
waitForDataMatch(subprocess, (data) => data.includes('watching source changes'), async () => {
fs.writeFileSync(optionsFilepath, originOptionsText.replace('fixed: []', 'fixed: [\'fg:red\']'))
}),
waitForDataMatch(child, (data) => data.includes(`inserted 'fg:red'`)),
waitForDataMatch(child, (data) => data.includes('exported')),
waitForDataMatch(subprocess, (data) => data.includes(`inserted 'fg:red'`)),
waitForDataMatch(subprocess, (data) => data.includes('exported')),
])
const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
expect(fileCSSText).toContain(cssEscape('fg:red'))
}, 120000)

it('change config file `styles` and reset process', async () => {
await Promise.all([
waitForDataMatch(child, (data) => data.includes('watching source changes'), async () => {
waitForDataMatch(subprocess, (data) => data.includes('watching source changes'), async () => {
fs.writeFileSync(configFilepath, originConfigText.replace('bg:red', 'bg:blue'))
}),
waitForDataMatch(child, (data) => data.includes('exported'))
waitForDataMatch(subprocess, (data) => data.includes('exported'))
])
const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
expect(fileCSSText).toContain('.btn{background-color:rgb(var(--blue))')
}, 120000)

it('change html file class attr and update', async () => {
await Promise.all([
waitForDataMatch(child, (data) => data.includes('watching source changes'), () => {
waitForDataMatch(subprocess, (data) => data.includes('watching source changes'), () => {
fs.writeFileSync(HTMLFilepath, originHTMLText.replace('hmr-test', 'text:underline'))
}),
waitForDataMatch(child, (data) => data.includes(`classes inserted`)),
waitForDataMatch(child, (data) => data.includes('exported'))
waitForDataMatch(subprocess, (data) => data.includes(`classes inserted`)),
waitForDataMatch(subprocess, (data) => data.includes('exported'))
])
const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
expect(fileCSSText).toContain(cssEscape('text:underline'))
}, 120000)

afterAll(async () => {
await child.destroy()
subprocess.kill()
}, 120000)
8 changes: 4 additions & 4 deletions packages/extractor.vite/tests/nuxt.js/dev.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import path from 'path'
import cssEscape from 'shared/utils/css-escape'
import puppeteer, { type Browser, type Page } from 'puppeteer-core'
import { copy } from 'shared/utils/fs'
import { SpawndChildProcess, spawnd } from 'spawnd'
import waitForDataMatch from 'shared/utils/wait-for-data-match'
import { execa, ExecaChildProcess } from 'execa'

const examplePath = path.join(__dirname, '../../../../examples/nuxt.js-with-static-extraction')
const tmpDir = path.join(__dirname, 'tmp/dev')

let devProcess: SpawndChildProcess
let devProcess: ExecaChildProcess
let browser: Browser
let page: Page
let error: Error
Expand All @@ -24,7 +24,7 @@ test.todo('nuxt.js dev tests timeout in CI', () => {
templatePath = path.join(tmpDir, 'app.vue')
templateContent = fs.readFileSync(templatePath).toString()
masterCSSConfigPath = path.join(tmpDir, 'master.css.ts')
devProcess = spawnd('pnpm dev', { shell: true, cwd: tmpDir, env: { ...process.env, NODE_ENV: 'development' } })
devProcess = execa('pnpm dev', { shell: true, cwd: tmpDir, env: { ...process.env, NODE_ENV: 'development' } })
const urlPattern = /(http:\/\/localhost:).*?([0-9]+)/
const data = await waitForDataMatch(devProcess, (data) => urlPattern.exec(data)?.length)
const result = urlPattern.exec(data)
Expand Down Expand Up @@ -76,6 +76,6 @@ test.todo('nuxt.js dev tests timeout in CI', () => {
afterAll(async () => {
await page.close()
await browser.close()
await devProcess.destroy()
devProcess.kill()
}, 60000)
})
9 changes: 4 additions & 5 deletions packages/extractor.vite/tests/react/dev.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ import path from 'path'
import cssEscape from 'shared/utils/css-escape'
import puppeteer, { type Browser, type Page } from 'puppeteer-core'
import { copy, rm } from 'shared/utils/fs'
import { SpawndChildProcess, spawnd } from 'spawnd'
import { execa, ExecaChildProcess } from 'execa'
import waitForDataMatch from 'shared/utils/wait-for-data-match'
import delay from 'shared/utils/delay'

test.todo('react dev tests timeout in CI')
if (!process.env.GITHUB_ACTIONS) {
const examplePath = path.join(__dirname, '../../../../examples/react-with-static-extraction')
const tmpDir = path.join(__dirname, 'tmp/dev')

let devProcess: SpawndChildProcess
let devProcess: ExecaChildProcess
let browser: Browser
let page: Page
let error: Error
Expand All @@ -26,7 +25,7 @@ if (!process.env.GITHUB_ACTIONS) {
templatePath = path.join(tmpDir, 'src/App.tsx')
templateContent = fs.readFileSync(templatePath).toString()
masterCSSConfigPath = path.join(tmpDir, 'master.css.ts')
devProcess = spawnd('pnpm dev --port 4003', { shell: true, cwd: tmpDir })
devProcess = execa('pnpm dev --port 4003', { shell: true, cwd: tmpDir })
const urlPattern = /(http:\/\/localhost:).*?([0-9]+)/
const data = await waitForDataMatch(devProcess, (data) => urlPattern.exec(data)?.length)
const result = urlPattern.exec(data)
Expand Down Expand Up @@ -77,6 +76,6 @@ if (!process.env.GITHUB_ACTIONS) {
afterAll(async () => {
await page.close()
await browser.close()
await devProcess.destroy()
devProcess.kill()
}, 60000)
}
9 changes: 4 additions & 5 deletions packages/extractor.vite/tests/vite/dev.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ import path from 'path'
import cssEscape from 'shared/utils/css-escape'
import puppeteer, { type Browser, type Page } from 'puppeteer-core'
import { copy, rm } from 'shared/utils/fs'
import { SpawndChildProcess, spawnd } from 'spawnd'
import waitForDataMatch from 'shared/utils/wait-for-data-match'
import delay from 'shared/utils/delay'
import { execa, ExecaChildProcess } from 'execa'

test.todo('vite dev tests timeout in CI')
if (!process.env.GITHUB_ACTIONS) {
const examplePath = path.join(__dirname, '../../../../examples/vite-with-static-extraction')
const tmpDir = path.join(__dirname, 'tmp/dev')

let devProcess: SpawndChildProcess
let devProcess: ExecaChildProcess
let browser: Browser
let page: Page
let error: Error
Expand All @@ -26,7 +25,7 @@ if (!process.env.GITHUB_ACTIONS) {
templatePath = path.join(tmpDir, 'index.html')
templateContent = fs.readFileSync(templatePath).toString()
masterCSSConfigPath = path.join(tmpDir, 'master.css.ts')
devProcess = spawnd('pnpm dev --port 4005', { shell: true, cwd: tmpDir })
devProcess = execa('pnpm dev --port 4005', { shell: true, cwd: tmpDir })
const urlPattern = /(http:\/\/localhost:).*?([0-9]+)/
const data = await waitForDataMatch(devProcess, (data) => urlPattern.exec(data)?.length)
const result = urlPattern.exec(data)
Expand Down Expand Up @@ -76,6 +75,6 @@ if (!process.env.GITHUB_ACTIONS) {
afterAll(async () => {
await page.close()
await browser.close()
await devProcess.destroy()
devProcess.kill()
}, 60000)
}
15 changes: 3 additions & 12 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 8 additions & 8 deletions shared/utils/wait-for-data-match.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import { SpawndChildProcess } from 'spawnd'
import stripAnsi from 'strip-ansi'
import { ExecaChildProcess } from 'execa'

export default function (child: SpawndChildProcess, doesDataMatch: (data: string) => any, onReady?: () => void): Promise<string> {
export default function (child: ExecaChildProcess, doesDataMatch: (data: string) => any, onReady?: () => void): Promise<string> {
return new Promise<string>((resolve, reject) => {
const handler = (data: any) => {
const strippedData = stripAnsi(data.toString())
if (doesDataMatch(strippedData)) {
child.stdout.off('data', handler)
child.stderr.off('data', errorHandler)
child?.stdout?.off('data', handler)
child?.stderr?.off('data', errorHandler)
resolve(strippedData)
}
}
const errorHandler = (data: any) => {
const strippedData = stripAnsi(data.toString().replace(/(?:\r\n|\n|\r)/g, ''))
if (strippedData) {
child.stdout.off('data', handler)
child.stderr.off('data', errorHandler)
child?.stdout?.off('data', handler)
child?.stderr?.off('data', errorHandler)
reject(strippedData)
}
}
child.stdout.on('data', handler)
child.stderr.on('data', errorHandler)
child?.stdout?.on('data', handler)
child?.stderr?.on('data', errorHandler)
onReady?.()
})
}

0 comments on commit 2588a44

Please sign in to comment.