wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Integrations setup (#4354)

Browse source 
* add integration test tools

* setup jest in the integrations folder

* add `test:integrations` script

The default `npm test` script will ignore all the tests in the
`integrations` folder.

* add integration tests with `webpack 5`

* add integration tests with `postcss-cli`

* add `npm run install:integrations` script

This script will run `npm install` in every integration, and in the
integrations folder itself (to setup Jest for example).

* add `toIncludeCss` custom matcher

* increate Jest timeout for integration tests

* add integration tests with `vite`

* add integration tests with `webpack 4`

* add isomorphic fetch

* add the ability to wait for specific stdout/stderr output

* write vite tests, assert using API calls

We will wait for the correct stdout/stderr output, once we know that we
can request the fresh css, we will fetch it and make assertions
accordingly.

Port is currently hardcoded, maybe we should use a packaage to ensure
that we use a free port.

* add integration tests with `rollup`

* add integration tests with `parcel`

* run all integration tests in band

* add .gitignore in integrations folder
This commit is contained in:
Robin Malfait 2021-05-18 17:21:35 +02:00 • committed by GitHub
parent 7d4f053bb6
commit 7565099c1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 64042 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

238
integrations/postcss-cli/tests/integration.test.js Normal file
View file

@ -0,0 +1,238 @@
let $ = require('../../execute')
let { css, html, javascript } = require('../../syntax')
let {
readOutputFile,
appendToInputFile,
writeInputFile,
waitForOutputFileCreation,
waitForOutputFileChange,
} = require('../../io')({ output: 'dist', input: 'src' })
describe('static build', () => {
it('should be possible to generate tailwind output', async () => {
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
await $('postcss ./src/index.css -o ./dist/main.css', {
env: { NODE_ENV: 'production' },
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
`
)
})
})
describe('watcher', () => {
test('classes are generated when the html file changes', async () => {
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', {
env: { TAILWIND_MODE: 'watch' },
})
await waitForOutputFileCreation('main.css')
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
`
)
await waitForOutputFileChange('main.css', async () => {
await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
.font-normal {
font-weight: 400;
}
`
)
await waitForOutputFileChange('main.css', async () => {
await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}
.font-bold {
font-weight: 700;
}
.font-normal {
font-weight: 400;
}
`
)
return runningProcess.stop()
})
test('classes are generated when the tailwind.config.js file changes', async () => {
await writeInputFile('index.html', html`<div class="font-bold md:font-medium"></div>`)
let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', {
env: { TAILWIND_MODE: 'watch' },
})
await waitForOutputFileCreation('main.css')
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
@media (min-width: 768px) {
.md\\:font-medium {
font-weight: 500;
}
}
`
)
await waitForOutputFileChange('main.css', async () => {
await writeInputFile(
'../tailwind.config.js',
javascript`
module.exports = {
purge: ['./src/index.html'],
mode: 'jit',
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
screens: {
md: '800px'
},
fontWeight: {
bold: 'bold'
}
},
},
variants: {
extend: {},
},
corePlugins: {
preflight: false,
},
plugins: [],
}
`
)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: bold;
}
@media (min-width: 800px) {
.md\\:font-medium {
font-weight: 500;
}
}
`
)
return runningProcess.stop()
})
test('classes are generated when the index.css file changes', async () => {
await writeInputFile('index.html', html`<div class="font-bold btn"></div>`)
let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', {
env: { TAILWIND_MODE: 'watch' },
})
await waitForOutputFileCreation('main.css')
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
`
)
await waitForOutputFileChange('main.css', async () => {
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply px-2 py-1 rounded;
}
}
`
)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.btn {
border-radius: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.font-bold {
font-weight: 700;
}
`
)
await waitForOutputFileChange('main.css', async () => {
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply px-2 py-1 rounded bg-red-500;
}
}
`
)
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.btn {
border-radius: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.font-bold {
font-weight: 700;
}
`
)
return runningProcess.stop()
})
})