1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-05 20:52:53 +02:00
Files
slate/playwright/integration/examples/styling.test.ts
Kyle McLean 9c4097a26f Simplify implementation of custom editor styling (#5278)
* Switch back to using inline styles for default editor styles

* Add example page and test for editor styling

* Add section in docs for editor styling

* Add test for editor height being set to placeholder height

* Add changeset
2023-01-31 19:17:27 -07:00

114 lines
3.2 KiB
TypeScript

import { test, expect } from '@playwright/test'
test.describe('styling example', () => {
test.beforeEach(
async ({ page }) =>
await page.goto('http://localhost:3000/examples/styling')
)
test('applies styles to editor from style prop', async ({ page }) => {
page.waitForLoadState('domcontentloaded')
const editor = page.locator('[data-slate-editor=true]').nth(0)
const styles = await editor.evaluate(el => {
const {
backgroundColor,
minHeight,
outlineWidth,
outlineStyle,
outlineColor,
position,
whiteSpace,
wordWrap,
} = window.getComputedStyle(el)
return {
backgroundColor,
minHeight,
outlineWidth,
outlineStyle,
outlineColor,
position,
whiteSpace,
wordWrap,
}
})
// Provided styles
expect(styles.backgroundColor).toBe('rgb(255, 230, 156)')
expect(styles.minHeight).toBe('200px')
expect(styles.outlineWidth).toBe('2px')
expect(styles.outlineStyle).toBe('solid')
expect(styles.outlineColor).toBe('rgb(0, 128, 0)')
// Default styles
expect(styles.position).toBe('relative')
expect(styles.whiteSpace).toBe('pre-wrap')
expect(styles.wordWrap).toBe('break-word')
})
test('applies styles to editor from className prop', async ({ page }) => {
page.waitForLoadState('domcontentloaded')
const editor = page.locator('[data-slate-editor=true]').nth(1)
const styles = await editor.evaluate(el => {
const {
backgroundColor,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
fontSize,
minHeight,
outlineWidth,
outlineStyle,
outlineColor,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomRightRadius,
borderBottomLeftRadius,
outlineOffset,
position,
whiteSpace,
wordWrap,
} = window.getComputedStyle(el)
return {
backgroundColor,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
fontSize,
minHeight,
outlineWidth,
outlineStyle,
outlineColor,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomRightRadius,
borderBottomLeftRadius,
outlineOffset,
position,
whiteSpace,
wordWrap,
}
})
expect(styles.backgroundColor).toBe('rgb(218, 225, 255)')
expect(styles.paddingTop).toBe('40px')
expect(styles.paddingRight).toBe('40px')
expect(styles.paddingBottom).toBe('40px')
expect(styles.paddingLeft).toBe('40px')
expect(styles.fontSize).toBe('20px')
expect(styles.minHeight).toBe('150px')
expect(styles.borderBottomLeftRadius).toBe('20px')
expect(styles.borderBottomRightRadius).toBe('20px')
expect(styles.borderTopLeftRadius).toBe('20px')
expect(styles.borderTopRightRadius).toBe('20px')
expect(styles.outlineOffset).toBe('-20px')
expect(styles.outlineWidth).toBe('3px')
expect(styles.outlineStyle).toBe('dashed')
expect(styles.outlineColor).toBe('rgb(0, 94, 128)')
expect(styles.whiteSpace).toBe('pre-wrap')
})
})