test(ssr): tests for utils and props rendering

packages/server-renderer/__tests__/escape.spec.ts

@@ -1 +0,0 @@
-test('ssr: escape HTML', () => {})

packages/server-renderer/__tests__/renderProps.spec.ts

@@ -1,19 +1,124 @@
-describe('ssr: render props', () => {
-  test('class', () => {})
+import { renderProps, renderClass, renderStyle } from '../src'
 
-  test('style', () => {
-    // only render numbers for properties that allow no unit numbers
+describe('ssr: renderProps', () => {
+  test('ignore reserved props', () => {
+    expect(
+      renderProps({
+        key: 1,
+        ref: () => {},
+        onClick: () => {}
+      })
+    ).toBe('')
   })
 
-  test('normal attrs', () => {})
+  test('normal attrs', () => {
+    expect(
+      renderProps({
+        id: 'foo',
+        title: 'bar'
+      })
+    ).toBe(` id="foo" title="bar"`)
+  })
 
-  test('boolean attrs', () => {})
+  test('escape attrs', () => {
+    expect(
+      renderProps({
+        id: '"><script'
+      })
+    ).toBe(` id="&quot;&gt;&lt;script"`)
+  })
 
-  test('enumerated attrs', () => {})
+  test('boolean attrs', () => {
+    expect(
+      renderProps({
+        checked: true,
+        multiple: false
+      })
+    ).toBe(` checked`) // boolean attr w/ false should be ignored
+  })
 
-  test('ignore falsy values', () => {})
+  test('ignore falsy values', () => {
+    expect(
+      renderProps({
+        foo: false,
+        title: null,
+        baz: undefined
+      })
+    ).toBe(` foo="false"`) // non boolean should render `false` as is
+  })
 
-  test('props to attrs', () => {})
-
-  test('ignore non-renderable props', () => {})
+  test('props to attrs', () => {
+    expect(
+      renderProps({
+        readOnly: true, // simple lower case conversion
+        htmlFor: 'foobar' // special cases
+      })
+    ).toBe(` readonly for="foobar"`)
+  })
+})
+
+describe('ssr: renderClass', () => {
+  test('via renderProps', () => {
+    expect(
+      renderProps({
+        class: ['foo', 'bar']
+      })
+    ).toBe(` class="foo bar"`)
+  })
+
+  test('standalone', () => {
+    expect(renderClass(`foo`)).toBe(`foo`)
+    expect(renderClass([`foo`, `bar`])).toBe(`foo bar`)
+    expect(renderClass({ foo: true, bar: false })).toBe(`foo`)
+    expect(renderClass([{ foo: true, bar: false }, `baz`])).toBe(`foo baz`)
+  })
+
+  test('escape class values', () => {
+    expect(renderClass(`"><script`)).toBe(`&quot;&gt;&lt;script`)
+  })
+})
+
+describe('ssr: renderStyle', () => {
+  test('via renderProps', () => {
+    expect(
+      renderProps({
+        style: {
+          color: 'red'
+        }
+      })
+    ).toBe(` style="color:red;"`)
+  })
+
+  test('standalone', () => {
+    expect(renderStyle(`color:red`)).toBe(`color:red`)
+    expect(
+      renderStyle({
+        color: `red`
+      })
+    ).toBe(`color:red;`)
+    expect(
+      renderStyle([
+        { color: `red` },
+        { fontSize: `15px` } // case conversion
+      ])
+    ).toBe(`color:red;font-size:15px;`)
+  })
+
+  test('number handling', () => {
+    expect(
+      renderStyle({
+        fontSize: 15, // should be ignored since font-size requires unit
+        opacity: 0.5
+      })
+    ).toBe(`opacity:0.5;`)
+  })
+
+  test('escape inline CSS', () => {
+    expect(renderStyle(`"><script`)).toBe(`&quot;&gt;&lt;script`)
+    expect(
+      renderStyle({
+        color: `"><script`
+      })
+    ).toBe(`color:&quot;&gt;&lt;script;`)
+  })
 })

packages/server-renderer/__tests__/ssrUtils.spec.ts

@@ -0,0 +1,38 @@
+import { escapeHtml, interpolate } from '../src'
+
+test('ssr: escapeHTML', () => {
+  expect(escapeHtml(`foo`)).toBe(`foo`)
+  expect(escapeHtml(true)).toBe(`true`)
+  expect(escapeHtml(false)).toBe(`false`)
+  expect(escapeHtml(`a && b`)).toBe(`a && b`)
+  expect(escapeHtml(`"foo"`)).toBe(`"foo"`)
+  expect(escapeHtml(`'bar'`)).toBe(`'bar'`)
+  expect(escapeHtml(`<div>`)).toBe(`&lt;div&gt;`)
+})
+
+test('ssr: interpolate', () => {
+  expect(interpolate(0)).toBe(`0`)
+  expect(interpolate(`foo`)).toBe(`foo`)
+  expect(interpolate(`<div>`)).toBe(`&lt;div&gt;`)
+  // should escape interpolated values
+  expect(interpolate([1, 2, 3])).toBe(
+    escapeHtml(JSON.stringify([1, 2, 3], null, 2))
+  )
+  expect(
+    interpolate({
+      foo: 1,
+      bar: `<div>`
+    })
+  ).toBe(
+    escapeHtml(
+      JSON.stringify(
+        {
+          foo: 1,
+          bar: `<div>`
+        },
+        null,
+        2
+      )
+    )
+  )
+})