Skip to content

Commit

Permalink
test(slatetohtml): reorganise (#166)
Browse files Browse the repository at this point in the history 
Reorganise for thompsonsj/slate-serializers-demo#32
  • Loading branch information
@thompsonsj
thompsonsj authored Oct 23, 2024
1 parent 26f75ae commit 17f44f4
Show file tree
Hide file tree
Showing 7 changed files with 297 additions and 274 deletions.
2 changes: 1 addition & 1 deletion packages/dom/src/lib/config/payload.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Element, Text } from 'domhandler'
import { config as defaultConfig } from './default'
import { SlateToDomConfig } from '../..'
import { styleToString } from '@slate-serializers/utilities';
import { styleToString } from '../utilities';

/**
* Configuration for Payload CMS
Expand Down
276 changes: 3 additions & 273 deletions packages/html/src/lib/serializers/slateToHtml/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,231 +4,9 @@ import { slateToHtml } from '.'
import { slateToHtmlConfig, SlateToHtmlConfig } from '@slate-serializers/html'
import { isEmptyObject, styleMapToAttribs } from '@slate-serializers/dom'

describe('slateToHtml expected behaviour', () => {
it('does not encode HTML entities', () => {
const html = `<h1>What's Heading 1</h1>`
const slate = [
{
children: [
{
text: "What's Heading 1",
},
],
type: 'h1',
},
]
expect(slateToHtml(slate)).toEqual(html)
})

it('encodes HTML entities if encodeEntities is true', () => {
const html = `<h1>What&apos;s Heading 1</h1>`
const slate = [
{
children: [
{
text: "What's Heading 1",
},
],
type: 'h1',
},
]
expect(slateToHtml(slate, {
...slateToHtmlConfig,
encodeEntities: true,
})).toEqual(html)
})

/**
* @see https://www.w3.org/International/questions/qa-escapes#use
*/
it('encodes `breaking` HTML entities', () => {
const html = `<p>2 &gt; 1 but is &lt; 3 &amp; it can break HTML</p>`
const slate = [
{
children: [
{
text: '2 > 1 but is < 3 & it can break HTML',
},
],
type: 'p',
},
]
expect(slateToHtml(slate)).toEqual(html)
})

it('encodes `non breaking` HTML entities', () => {
const html = `<p>The company’s priority is 'inside sales' and changing the spelling of cafe to café.</p>`
const slate = [
{
children: [
{
text: "The company’s priority is 'inside sales' and changing the spelling of cafe to café.",
},
],
type: 'p',
},
]
expect(slateToHtml(slate)).toEqual(html)
})

it('encodes `breaking` HTML entities only if option is active', () => {
const html = `<p>2 &gt; 1 but is &lt; 3 &amp; it can break HTML</p><p>The company’s priority is 'inside sales' and changing the spelling of cafe to café.</p>`
const slate = [
{
children: [
{
text: '2 > 1 but is < 3 & it can break HTML',
},
],
type: 'p',
},
{
children: [
{
text: "The company’s priority is 'inside sales' and changing the spelling of cafe to café.",
},
],
type: 'p',
},
]
expect(
slateToHtml(slate, {
...slateToHtmlConfig,
encodeEntities: false,
alwaysEncodeBreakingEntities: true,
}),
).toEqual(html)
})

it('does not encode HTML entities with the appropriate option', () => {
const html = `<h1>What's Heading 1</h1>`
const slate = [
{
children: [
{
text: "What's Heading 1",
},
],
type: 'h1',
},
]
expect(slateToHtml(slate, { ...slateToHtmlConfig, encodeEntities: false })).toEqual(html)
})

it('can handle inline code tags', () => {
const html =
'<p>This is editable <strong>rich</strong> text, <i>much</i> better than a <pre><code>&lt;textarea&gt;</code></pre>!</p>'
const slate = [
{
type: 'p',
children: [
{
text: 'This is editable ',
},
{
text: 'rich',
bold: true,
},
{
text: ' text, ',
},
{
text: 'much',
italic: true,
},
{
text: ' better than a ',
},
{
text: '<textarea>',
code: true,
},
{
text: '!',
},
],
},
]
expect(slateToHtml(slate)).toEqual(html)
})
})

describe('custom config', () => {
it('respects the alwaysEncodeCodeEntities option if encodeEntities is false', () => {
const html = '<p>Regular text &amp; <pre><code>&lt;textarea&gt;</code></pre>.</p>'
const slate = [
{
type: 'p',
children: [
{
text: 'Regular text & ',
},
{
text: '<textarea>',
code: true,
},
{
text: '.',
},
],
},
]
expect(slateToHtml(slate, { ...slateToHtmlConfig, encodeEntities: false, alwaysEncodeCodeEntities: true })).toEqual(
html,
)
})

it('processes an element map value', () => {
const html = '<h1>Heading 1</h1>'
const slate = [
{
type: 'heading-one',
children: [
{
text: 'Heading 1',
},
],
},
]
const config = {
...slateToHtmlConfig,
elementMap: {
['heading-one']: 'h1',
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})

it('processes an element transform', () => {
const html = '<p>Paragraph</p><img src="https://picsum.photos/id/237/200/300">'
const slate = [
{
type: 'p',
children: [
{
text: 'Paragraph',
},
],
},
{
type: 'image',
url: 'https://picsum.photos/id/237/200/300',
},
]
const config = {
...slateToHtmlConfig,
elementTransforms: {
...slateToHtmlConfig.elementTransforms,
image: ({ node }: { node?: any }) => {
return new Element('img', {
src: node.url,
})
},
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})


// can this be replaced by mapTransforms?
it('maps Slate attribute to inline style from element style map', () => {
const html = '<p style="font-size:96px;"><strong>Paragraph</strong></p>'
const slate = [
Expand Down Expand Up @@ -256,55 +34,7 @@ describe('custom config', () => {
expect(slateToHtml(slate, config)).toEqual(html)
})

it('processes a mark map value', () => {
const html = '<p><sub>Subscript text</sub></p>'
const slate = [
{
type: 'p',
children: [
{
text: 'Subscript text',
subScript: true,
},
],
},
]
const config = {
...slateToHtmlConfig,
markMap: {
subScript: ['sub'],
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})

it('processes a mark transform', () => {
const html = '<p><span style="font-size:96px;"><strong>Paragraph</strong></span></p>'
const slate = [
{
type: 'p',
children: [
{
bold: true,
fontSize: '96px',
text: 'Paragraph',
},
],
},
]
const config: SlateToHtmlConfig = {
...slateToHtmlConfig,
markTransforms: {
...slateToHtmlConfig.markTransforms,
fontSize: ({ node }) => {
return new Element('span', {
style: `font-size:${node.fontSize};`,
})
},
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})


it('demo for issue #59', () => {
const html = '<p><span style="font-size:20px;"><strong><sub>Paragraph</sub></strong></span></p>'
Expand Down
24 changes: 24 additions & 0 deletions packages/html/src/lib/tests/slateToHtml/configuration/elementMap.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { slateToHtml, slateToHtmlConfig } from '@slate-serializers/html'

describe("slateToHtml elementMap", () => {
it('processes an element map value', () => {
const html = '<h1>Heading 1</h1>'
const slate = [
{
type: 'heading-one',
children: [
{
text: 'Heading 1',
},
],
},
]
const config = {
...slateToHtmlConfig,
elementMap: {
['heading-one']: 'h1',
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})
})
34 changes: 34 additions & 0 deletions packages/html/src/lib/tests/slateToHtml/configuration/elementTransforms.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Element } from 'domhandler'
import { slateToHtml, slateToHtmlConfig } from "@slate-serializers/html"

describe("slateToHtml elementTransforms", () => {
it('processes an element transform', () => {
const html = '<p>Paragraph</p><img src="https://picsum.photos/id/237/200/300">'
const slate = [
{
type: 'p',
children: [
{
text: 'Paragraph',
},
],
},
{
type: 'image',
url: 'https://picsum.photos/id/237/200/300',
},
]
const config = {
...slateToHtmlConfig,
elementTransforms: {
...slateToHtmlConfig.elementTransforms,
image: ({ node }: { node?: any }) => {
return new Element('img', {
src: node.url,
})
},
},
}
expect(slateToHtml(slate, config)).toEqual(html)
})
})
Loading

0 comments on commit 17f44f4

Please sign in to comment.