Skip to content

Added test for script deduplication #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added test for script deduplication #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 82 additions & 22 deletions test/enhance.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import MyExternalScript from './fixtures/templates/my-external-script.mjs'
import MyInstanceID from './fixtures/templates/my-instance-id.mjs'
import MyContextParent from './fixtures/templates/my-context-parent.mjs'
import MyContextChild from './fixtures/templates/my-context-child.mjs'
import MySomething from './fixtures/templates/my-something.mjs'

function Head() {
return `
Expand Down Expand Up @@ -77,7 +78,7 @@ test('expand template', t => {
t.end()
})

test('Passing state through multiple levels', t=> {
test('Passing state through multiple levels', t => {
const html = enhance({
elements: {
'my-pre-page': MyPrePage,
Expand Down Expand Up @@ -111,7 +112,7 @@ test('Passing state through multiple levels', t=> {
t.end()
})

test('should render as div tag with slot name', t=> {
test('should render as div tag with slot name', t => {
const html = enhance({
elements: {
'my-multiples': MyMultiples
Expand Down Expand Up @@ -152,19 +153,19 @@ test('should render as div tag with slot name', t=> {
t.end()
})

test('should not duplicate slotted elements', t=> {
const html = enhance({
test('should not duplicate slotted elements', t => {
const html = enhance({
elements: {
'my-outline': MyOutline
}
})
})

const actual = html`
const actual = html`
${Head()}
<my-outline>
<div slot="toc" class="toc">things</div>
</my-outline>`
const expected = `
const expected = `
<!DOCTYPE html>
<html>
<head>
Expand All @@ -185,7 +186,7 @@ ${Head()}
t.end()
})

test('fill named slot', t=> {
test('fill named slot', t => {
const html = enhance({
elements: {
'my-paragraph': MyParagraph
Expand Down Expand Up @@ -217,7 +218,7 @@ ${Head()}
t.end()
})

test('should not render default content in unnamed slots', t=> {
test('should not render default content in unnamed slots', t => {
const html = enhance({
elements: {
'my-unnamed': MyUnnamed
Expand Down Expand Up @@ -245,7 +246,7 @@ test('should not render default content in unnamed slots', t=> {
t.end()
})

test('add authored children to unnamed slot', t=> {
test('add authored children to unnamed slot', t => {
const html = enhance({
elements: {
'my-content': MyContent
Expand Down Expand Up @@ -276,7 +277,7 @@ test('add authored children to unnamed slot', t=> {
t.end()
})

test('pass attributes as state', t=> {
test('pass attributes as state', t => {
const html = enhance({
elements: {
'my-link': MyLink
Expand Down Expand Up @@ -323,7 +324,7 @@ test('pass attribute array values correctly', t => {
'my-list': MyList
}
})
const things = [{ title: 'one' },{ title: 'two' },{ title: 'three' }]
const things = [{ title: 'one' }, { title: 'two' }, { title: 'three' }]
const actual = html`
${Head()}
<my-list items="${things}"></my-list>
Expand Down Expand Up @@ -365,7 +366,7 @@ test('pass attribute array values correctly', t => {
})


test('should update deeply nested slots', t=> {
test('should update deeply nested slots', t => {
const html = enhance({
elements: {
'my-content': MyContent
Expand Down Expand Up @@ -413,14 +414,14 @@ test('should update deeply nested slots', t=> {
t.end()
})

test('fill nested rendered slots', t=> {
test('fill nested rendered slots', t => {
const html = enhance({
elements: {
'my-list-container': MyListContainer,
'my-list': MyList
}
})
const items = [{ title: 'one' },{ title: 'two' },{ title: 'three' }]
const items = [{ title: 'one' }, { title: 'two' }, { title: 'three' }]
const actual = html`
${Head()}
<my-list-container items="${items}">
Expand Down Expand Up @@ -479,7 +480,7 @@ test('fill nested rendered slots', t=> {
t.end()
})

test('should allow supplying custom head tag', t=> {
test('should allow supplying custom head tag', t => {
const html = enhance({
elements: {
'my-counter': MyCounter
Expand Down Expand Up @@ -621,8 +622,8 @@ test('should run style transforms', t => {
'my-transform-style': MyTransformStyle
},
styleTransforms: [
function ({ attrs, raw, tagName, context }) {
if (attrs.find(i=>i.name==="scope")?.value==="global"&&context==="template") return ''
function({ attrs, raw, tagName, context }) {
if (attrs.find(i => i.name === "scope")?.value === "global" && context === "template") return ''
return `
${raw}
/*
Expand Down Expand Up @@ -688,9 +689,9 @@ test('should not add duplicated style tags to head', t => {
'my-transform-style': MyTransformStyle,
},
styleTransforms: [
function ({ attrs, raw, tagName, context }) {
function({ attrs, raw, tagName, context }) {
// if tagged as global only add to the head
if (attrs.find(i=>i.name==="scope")?.value==="global"&&context==="template") return ''
if (attrs.find(i => i.name === "scope")?.value === "global" && context === "template") return ''

return `
${raw}
Expand Down Expand Up @@ -818,7 +819,7 @@ test('should add multiple external scripts', t => {
t.end()
})

test('should support unnamed slot without whitespace', t=> {
test('should support unnamed slot without whitespace', t => {
const html = enhance({
elements: {
'my-unnamed': MyUnnamed
Expand Down Expand Up @@ -846,7 +847,7 @@ test('should support unnamed slot without whitespace', t=> {
t.end()
})

test('should support nested custom elements with nested slots', t=> {
test('should support nested custom elements with nested slots', t => {
const html = enhance({
elements: {
'my-heading': MyHeading,
Expand Down Expand Up @@ -976,3 +977,62 @@ test('should supply context', t => {
t.end()

})

test('Deduplicate scripts and styles when possible', t => {
t.plan(2)
const html = enhance({
elements: {
'my-something': MySomething,
}
})
const actualNoDuplicates = html`
${Head()}
<my-something message="one"></my-something>
<my-something message="two"></my-something>
`
const expectedNoDuplicates = `
<!DOCTYPE html>
<html>
<head>
<style>"one""two"</style>
</head>
<body>
<my-something message="one"></my-something>
<my-something message="two"></my-something>
<script>//"one"</script>
<script>//"two"</script>
</body>
</html>
`
t.equal(
strip(actualNoDuplicates),
strip(expectedNoDuplicates),
'Adds all script and style variations'
)

const actualWithDuplicates = html`
${Head()}
<my-something message="one"></my-something>
<my-something message="one"></my-something>
`
const expectedWithDuplicates = `
<!DOCTYPE html>
<html>
<head>
<style>"one"</style>
</head>
<body>
<my-something message="one"></my-something>
<my-something message="one"></my-something>
<script>//"one"</script>
</body>
</html>
`
t.equal(
strip(actualWithDuplicates),
strip(expectedWithDuplicates),
'Deduplicates styles and scripts'
)
t.end()

})
13 changes: 13 additions & 0 deletions test/fixtures/templates/my-something.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function MySomething({ html, state }) {
const { attrs, context } = state
const { message } = attrs
context.message = message

return html`
<style>
${JSON.stringify(state.context.message)}
</style >
<slot></slot>
<script>//${JSON.stringify(state.context.message)}</script>
`
}