The files are *inside* the computer?!
' + ); + + const html = await ctx.renderToHTML('/'); + assert.ok( + assertHtmlMatches( + html, + 'The files are *inside* the computer?!
{{outlet}}
'); + ctx.template('index', 'index'); + ctx.template('photos', 'photos'); + + const [indexHtml, photosHtml] = await ctx.all([ + ctx.renderToHTML('/'), + ctx.renderToHTML('/photos'), + ]); + + assert.ok( + assertHtmlMatches(indexHtml, 'index
'), + `index HTML should match, got: ${indexHtml}` + ); + assert.ok( + assertHtmlMatches(photosHtml, 'photos
'), + `photos HTML should match, got: ${photosHtml}` + ); + }); + + test('lifecycle hooks disabled', async () => { + let didReceiveAttrsCalled = false; + let willRenderCalled = false; + let didRenderCalled = false; + let willInsertElementCalled = false; + let didInsertElementCalled = false; + + ctx.template('application', "{{my-component foo='bar'}}{{outlet}}"); + + ctx.component('my-component', { + didReceiveAttrs() { + didReceiveAttrsCalled = true; + }, + willRender() { + willRenderCalled = true; + }, + didRender() { + didRenderCalled = true; + }, + willInsertElement() { + willInsertElementCalled = true; + }, + didInsertElement() { + didInsertElementCalled = true; + }, + }); + + await ctx.renderToHTML('/'); + + assert.ok(didReceiveAttrsCalled, 'should trigger didReceiveAttrs hook'); + assert.ok(!willRenderCalled, 'should not trigger willRender hook'); + assert.ok(!didRenderCalled, 'should not trigger didRender hook'); + assert.ok(!willInsertElementCalled, 'should not trigger willInsertElement hook'); + assert.ok(!didInsertElementCalled, 'should not trigger didInsertElement hook'); + }); +}); diff --git a/smoke-tests/node-template/tests/node/component-rendering.test.js b/smoke-tests/node-template/tests/node/component-rendering.test.js new file mode 100644 index 00000000000..1636fd8f6b5 --- /dev/null +++ b/smoke-tests/node-template/tests/node/component-rendering.test.js @@ -0,0 +1,51 @@ +import { describe, test, beforeEach, afterEach } from 'node:test'; +import assert from 'node:assert/strict'; +import { createComponentContext } from './helpers/setup-component.js'; + +describe('Components can be rendered without a DOM dependency', () => { + let ctx; + + beforeEach(async () => { + ctx = await createComponentContext(); + }); + + afterEach(() => { + ctx.destroy(); + }); + + test('Simple component', () => { + let html = ctx.render('Error template rendered!
'); + ctx.template('a', 'Error template rendered!
', + })(result); + }); + + test('Resource-discovery setup', async () => { + class Network { + constructor() { + this.requests = []; + } + fetch(url) { + this.requests.push(url); + return Promise.resolve(); + } + } + + ctx.routes(function () { + this.route('a'); + this.route('b'); + this.route('c'); + this.route('d'); + this.route('e'); + }); + + let network; + + ctx.route('a', { + model: function () { return network.fetch('/a'); }, + afterModel: function () { this.router.replaceWith('b'); }, + }); + + ctx.route('b', { + model: function () { return network.fetch('/b'); }, + afterModel: function () { this.router.replaceWith('c'); }, + }); + + ctx.route('c', { + model: function () { return network.fetch('/c'); }, + }); + + ctx.route('d', { + model: function () { return network.fetch('/d'); }, + afterModel: function () { this.router.replaceWith('e'); }, + }); + + ctx.route('e', { + model: function () { return network.fetch('/e'); }, + }); + + ctx.template('a', '{{x-foo}}'); + ctx.template('b', '{{x-foo}}'); + ctx.template('c', '{{x-foo}}'); + ctx.template('d', '{{x-foo}}'); + ctx.template('e', '{{x-foo}}'); + + let xFooInstances = 0; + + ctx.component('x-foo', { + init: function () { + this._super(); + xFooInstances++; + }, + }); + + let App = ctx.createApplication(); + + async function assertResources(url, resources) { + network = new Network(); + + let instance = await App.visit(url, { isBrowser: false, shouldRender: false }); + try { + let viewRegistry = instance.lookup('-view-registry:main'); + assert.equal(Object.keys(viewRegistry).length, 0, 'did not create any views'); + assert.deepEqual(network.requests, resources); + } finally { + instance.destroy(); + } + } + + await assertResources('/a', ['/a', '/b', '/c']); + await assertResources('/b', ['/b', '/c']); + await assertResources('/c', ['/c']); + await assertResources('/d', ['/d', '/e']); + await assertResources('/e', ['/e']); + + assert.equal(xFooInstances, 0, 'it should not create any x-foo components'); + }); + + test('FastBoot: tagless components can render', async () => { + ctx.template('application', "The files are *inside* the computer?!
\ - ' - ); - - return this.renderToHTML('/').then(function (html) { - assert.htmlMatches( - html, - 'The files are *inside* the computer?!
{{outlet}}
'); - this.template('index', 'index'); - this.template('photos', 'photos'); - - let promises = []; - promises.push( - this.renderToHTML('/').then(function (html) { - assert.htmlMatches(html, 'index
'); - }) - ); - - promises.push( - this.renderToHTML('/photos').then(function (html) { - assert.htmlMatches(html, 'photos
'); - }) - ); - - return this.all(promises); - }); - - QUnit.test('lifecycle hooks disabled', function (assert) { - assert.expect(1); - - this.template('application', "{{my-component foo='bar'}}{{outlet}}"); - - this.component('my-component', { - didReceiveAttrs() { - assert.ok(true, 'should trigger didReceiveAttrs hook'); - }, - willRender() { - assert.ok(false, 'should not trigger willRender hook'); - }, - didRender() { - assert.ok(false, 'should not trigger didRender hook'); - }, - willInsertElement() { - assert.ok(false, 'should not trigger willInsertElement hook'); - }, - didInsertElement() { - assert.ok(false, 'should not trigger didInsertElement hook'); - }, - }); - - return this.renderToHTML('/'); - }); -}); diff --git a/tests/node/component-rendering-test.js b/tests/node/component-rendering-test.js deleted file mode 100644 index 826c9322ca4..00000000000 --- a/tests/node/component-rendering-test.js +++ /dev/null @@ -1,45 +0,0 @@ -const setupComponentTest = require('./helpers/setup-component'); - -QUnit.module('Components can be rendered without a DOM dependency', function (hooks) { - setupComponentTest(hooks); - - QUnit.test('Simple component', function (assert) { - let html = this.render('Error template rendered!
'); - this.template('a', 'Error template rendered!
', - }), - handleError(assert) - ), - ]); - }); - - QUnit.test('Resource-discovery setup', function (assert) { - class Network { - constructor() { - this.requests = []; - } - - fetch(url) { - this.requests.push(url); - return Promise.resolve(); - } - } - - this.routes(function () { - this.route('a'); - this.route('b'); - this.route('c'); - this.route('d'); - this.route('e'); - }); - - let network; - this.route('a', { - model: function () { - return network.fetch('/a'); - }, - afterModel: function () { - this.router.replaceWith('b'); - }, - }); - - this.route('b', { - model: function () { - return network.fetch('/b'); - }, - afterModel: function () { - this.router.replaceWith('c'); - }, - }); - - this.route('c', { - model: function () { - return network.fetch('/c'); - }, - }); - - this.route('d', { - model: function () { - return network.fetch('/d'); - }, - afterModel: function () { - this.router.replaceWith('e'); - }, - }); - - this.route('e', { - model: function () { - return network.fetch('/e'); - }, - }); - - this.template('a', '{{x-foo}}'); - this.template('b', '{{x-foo}}'); - this.template('c', '{{x-foo}}'); - this.template('d', '{{x-foo}}'); - this.template('e', '{{x-foo}}'); - - let xFooInstances = 0; - - this.component('x-foo', { - init: function () { - this._super(); - xFooInstances++; - }, - }); - - let App = this.createApplication(); - - function assertResources(url, resources) { - network = new Network(); - - return App.visit(url, { isBrowser: false, shouldRender: false }).then(function (instance) { - try { - let viewRegistry = instance.lookup('-view-registry:main'); - assert.strictEqual(Object.keys(viewRegistry).length, 0, 'did not create any views'); - - assert.deepEqual(network.requests, resources); - } finally { - instance.destroy(); - } - }, handleError(assert)); - } - - return assertResources('/a', ['/a', '/b', '/c']) - .then(() => { - return assertResources('/b', ['/b', '/c']); - }) - .then(() => { - return assertResources('/c', ['/c']); - }) - .then(() => { - return assertResources('/d', ['/d', '/e']); - }) - .then(() => { - return assertResources('/e', ['/e']); - }) - .then(() => { - assert.strictEqual(xFooInstances, 0, 'it should not create any x-foo components'); - }); - }); - - QUnit.test('FastBoot: tagless components can render', function (assert) { - this.template('application', "