@ryanto wrote:
I’m working on some code that tests fastboot rendered applications inside of Ember’s test runner.
I’m able to render the fastboot response and use
assert.domto test the server rendered content. It’s pretty cool!Here’s an example test…
import { module, test, skip } from 'qunit'; import { setup, visit, renderedHtml } from 'ember-cli-fastboot-testing/test-support'; module('Fastboot | basic', function(hooks) { setup(hooks); skip('it renders html that matches the browser', async function(assert) { let { body } = await visit('/'); assert.equal(body, renderedHtml()); }); test('it renders the correct h1 title', async function(assert) { await visit('/'); assert.dom('h1').includesText('FastbootTesting'); }); test('it renders the correct og:title', async function(assert) { let { htmlDocument } = await visit('/'); assert .dom('meta[property="og:title"]', htmlDocument) .hasAttribute('content', 'Fastboot testing'); }); test('it gets a success response code', async function(assert) { let { statusCode } = await visit('/'); assert.equal(statusCode, 200); }); });and here’s a preview of it running
Rehydration
@rwjblue suggested having these tests verify that the server rendered HTML matches the browser’s client side rendering, so that we know the client side HTML can be rehydrated correctly. It’s kinda awesome that we can do this!
Here’s why this matters… in fastboot, it’s possible generate html that’s invalid. For example, you could render this on the server:
<p><div>hi</div></p>and the browser will auto correct it to:
<p></p> <div>hi</div> <p></p>It turns out
divtags are not allowed inside ofp! This re-arranging of HTML will screw up Ember’s rehydration of the server rendered HTML.In order to test this, I’m rendering the fastboot’s body html and then comparing it to the brower’s rendering.
let fastbootHtml = '<body> ...'; document.querySelector('#ember-testing').innerHTML = fastbootHtml; let browserHtml = document.querySelector('#ember-testing').innerHTML; fastbootHtml === browserHtml; // do these match!?Rehydration is a black box to me and I’m noticing a couple of differences between the fastboot rendered content and the browser corrected content. I’d love to understand how these affect rehydration.
Does
fastbootHtmlandbrowserHtmlneed to be an exact string match? If not, what does glimmer need to successfully rehydrate?What do I want to compare? Fastboot ships an entire HTML document, but the testing container is made for rendering an application template. I don’t believe I can render
<!DOCTYPE>,<html>, or<head>tags inside of#ember-testing? Right now I’m only rendering what’s between the fastboot body boundaries.Is
innerHTMLthe best way to test this? Or is comparing the dom’s tree structure better?In testing an app I noticed the server will render
<div data-hello></div>and the browser correct that to<div data-hello=""></div>. How do attributes affect rehydration?In testing an addon that ships an SVG I noticed that the server renders
<path ... />in fastboot, but the browser auto corrects it to<path ...></path>. How do self closing tags affect rehydration?Do different browsers auto correct HTML in different ways? Are there differences that should be ignored?
What other questions should I be asking!?
Thanks for reading!
Posts: 2
Participants: 2