packages/fela-dom/src/server/__tests__/renderToMarkup-test.js
import { createRenderer } from 'fela'
import { html as beautify } from 'js-beautify'
import renderToMarkup from '../renderToMarkup'
describe('Rendering to HTML markup', () => {
it('should add custom style attributes', () => {
const renderer = createRenderer({
styleNodeAttributes: {
none: 'abc',
},
})
renderer.renderRule(() => ({ color: 'red' }))
renderer.renderStatic('*{box-sizing:border-box}')
expect(beautify(renderToMarkup(renderer))).toMatchSnapshot()
})
it('should return a single HTML markup string', () => {
const rule = (props) => ({
color: props.color,
'@supports (display:flex)': {
color: 'yellow',
},
'@supports (display:grid)': {
color: 'brown',
},
'@media (min-height: 300px)': {
color: 'blue',
'@supports (display:flex)': {
color: 'green',
},
'@supports (display:grid)': {
color: 'black',
},
},
})
const renderer = createRenderer()
renderer.renderRule(rule, {
color: 'red',
})
renderer.renderStatic('*{box-sizing:border-box}')
renderer.renderStatic(
{
display: 'flex',
},
'div'
)
expect(beautify(renderToMarkup(renderer))).toMatchSnapshot()
})
it('should correctly sort rules', () => {
const rule1 = () => ({
':hover': { color: 'red' },
':active': { color: '#fff' },
})
const rule2 = () => ({
':hover': { color: '#000' },
':active': { color: '#fff' },
})
const renderer = createRenderer()
renderer.renderRule(rule1)
renderer.renderRule(rule2)
expect(beautify(renderToMarkup(renderer))).toMatchSnapshot()
})
})