more stuffs

Author: runspired

packages/diagnostic/.eslintrc.cjs

@@ -15,7 +15,7 @@ module.exports = {
     base.rules(),
     imports.rules(),
     isolation.rules({
-      allowedImports: ['@ember/debug', '@ember/test-helpers'],
+      allowedImports: ['@ember/debug', '@ember/test-helpers', '@glimmer/manager', '@ember/runloop'],
     }),
     {}
   ),

packages/diagnostic/package.json

@@ -75,7 +75,8 @@
   "peerDependencies": {
     "@ember/test-helpers": ">= 3.3.0",
     "@embroider/addon-shim": ">= 1.8.7",
-    "ember-cli-test-loader": ">= 3.1.0"
+    "ember-cli-test-loader": ">= 3.1.0",
+    "ember-source": ">= 4.12.0"
   },
   "peerDependenciesMeta": {
     "@ember/test-helpers": {
@@ -86,12 +87,16 @@
     },
     "@embroider/addon-shim": {
       "optional": true
+    },
+    "ember-source": {
+      "optional": true
     }
   },
   "dependencies": {
     "chalk": "^5.3.0",
     "debug": "^4.3.4",
     "pnpm-sync-dependencies-meta-injected": "0.0.10",
+    "ember-cli-htmlbars": "^6.3.0",
     "tmp": "^0.2.1"
   },
   "devDependencies": {

packages/diagnostic/rollup.config.mjs

@@ -14,7 +14,7 @@ export default {
   // You can augment this if you need to.
   output: addon.output(),
 
-  external: external(['@ember/test-helpers', 'ember-cli-test-loader/test-support/index']),
+  external: external(['@ember/runloop', '@ember/test-helpers', 'ember-cli-test-loader/test-support/index']),
 
   plugins: [
     // These are the modules that users should be able to import from your

packages/diagnostic/src/-ember/is-component.ts

@@ -0,0 +1,19 @@
+// @ts-expect-error: types for this API is not consistently available (via transitive
+// deps) and we do not currently want to make it an explicit dependency. It
+// does, however, consistently work at runtime. :sigh:
+import { getInternalComponentManager as getComponentManager } from '@glimmer/manager';
+
+export type ComponentLike = object;
+
+/**
+ * We should ultimately get a new API from @glimmer/runtime that provides this functionality
+ * (see https://github.com/emberjs/rfcs/pull/785 for more info).
+ * @private
+ * @param {Object} maybeComponent The thing you think might be a component
+ * @returns {boolean} True if it's a component, false if not
+ */
+function isComponent(maybeComponent: object): maybeComponent is ComponentLike {
+  return !!getComponentManager(maybeComponent, true);
+}
+
+export default isComponent;

packages/diagnostic/src/ember.ts

@@ -1,17 +1,27 @@
+import { run } from '@ember/runloop';
 import type { SetupContextOptions, TestContext as EmberTestContext } from '@ember/test-helpers';
 import { getTestMetadata, hasCalledSetupRenderingContext, setupContext, teardownContext } from '@ember/test-helpers';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
+import { hbs } from 'ember-cli-htmlbars';
 import AbstractTestLoader from 'ember-cli-test-loader/test-support/index';
 
 import { module as _module, skip as _skip, test as _test, todo as _todo } from './-define';
+import isComponent from './-ember/is-component';
 import type { Hooks, ModuleCallback, TestCallback } from './-types';
 import { setupGlobalHooks } from './internals/config';
 import { PublicTestInfo } from './internals/run';
 
+// const OUTLET_TEMPLATE = hbs`{{outlet}}`;
+const INVOKE_PROVIDED_COMPONENT = hbs`<this.ProvidedComponent />` as object;
+
 export interface TestContext extends EmberTestContext {
   element: HTMLDivElement;
 }
+export interface RenderingTestContext extends TestContext {
+  [hasCalledSetupRenderingContext]: boolean;
+  render(template: object): Promise<void>;
+}
 
 export function module<TC extends TestContext = TestContext>(name: string, cb: ModuleCallback<TC>): void {
   return _module<TC>(name, cb);
@@ -67,12 +77,13 @@ export function setupTest<TC extends TestContext>(hooks: Hooks<TC>, opts?: Setup
   });
 }
 
-function upgradeContext(context: TestContext): asserts context is TestContext & {
-  [hasCalledSetupRenderingContext]: boolean;
+type Outlet = { appendTo: (element: Element) => void; setOutletState: (state: object) => void };
+
+function upgradeContext(context: TestContext): asserts context is RenderingTestContext & {
   [PublicTestInfo]: { id: string; name: string };
   rootElement: HTMLDivElement;
 } {
-  (context as unknown as { [hasCalledSetupRenderingContext]: boolean })[hasCalledSetupRenderingContext] = true;
+  (context as unknown as RenderingTestContext)[hasCalledSetupRenderingContext] = true;
 }
 
 function upgradeOwner(owner: Owner): asserts owner is FullOwner {}
@@ -85,6 +96,7 @@ export function setupRenderingTest<TC extends TestContext>(hooks: Hooks<TC>, opt
 
   hooks.beforeEach(async function () {
     upgradeContext(this);
+    this.render = (template: object) => render(this, template);
     const opts = Object.assign({}, _options);
     const testMetadata = getTestMetadata(this);
     testMetadata.setupTypes.push('setupRenderingContext');
@@ -102,7 +114,7 @@ export function setupRenderingTest<TC extends TestContext>(hooks: Hooks<TC>, opt
     const { owner } = this;
     upgradeOwner(owner);
 
-    const OutletView = owner.factoryFor('view:-outlet');
+    const OutletView = owner.factoryFor('view:-outlet')!;
     const environment = owner.lookup('-environment:main');
     const template = owner.lookup('template:-outlet');
     testContainer.setAttribute('test-id', this[PublicTestInfo].id);
@@ -111,7 +123,7 @@ export function setupRenderingTest<TC extends TestContext>(hooks: Hooks<TC>, opt
     const toplevelView = OutletView.create({
       template,
       environment,
-    }) as { appendTo: (element: Element) => void };
+    }) as Outlet;
 
     owner.register('-top-level-view:main', {
       create() {
@@ -177,3 +189,99 @@ export function configure() {
 
   loadTests();
 }
+
+export function isRenderingTestContext(context: TestContext): context is RenderingTestContext {
+  return hasCalledSetupRenderingContext in context;
+}
+
+function isTemplateFunction(template: unknown): template is (owner: Owner) => object {
+  return typeof template === 'function';
+}
+
+function lookupTemplate(owner: Owner, templateFullName: RegistryKey): object | undefined {
+  upgradeOwner(owner);
+  const template = owner.lookup(templateFullName) as object | ((owner: Owner) => object) | undefined;
+  if (isTemplateFunction(template)) return template(owner);
+  return template;
+}
+
+function lookupOutletTemplate(owner: Owner): object {
+  upgradeOwner(owner);
+  const OutletTemplate = lookupTemplate(owner, 'template:-outlet');
+  if (!OutletTemplate) {
+    throw new Error(`Could not find -outlet template`);
+    // owner.register('template:-outlet', OUTLET_TEMPLATE);
+    // OutletTemplate = lookupTemplate(owner, 'template:-outlet');
+  }
+
+  return OutletTemplate;
+}
+
+let templateId = 0;
+// eslint-disable-next-line @typescript-eslint/require-await
+export async function render(context: TestContext, template: object): Promise<void> {
+  if (!template) {
+    throw new Error('you must pass a template to `render()`');
+  }
+
+  if (!context || !isRenderingTestContext(context)) {
+    throw new Error('Cannot call `render` without having first called `setupRenderingContext`.');
+  }
+
+  const { owner } = context;
+  upgradeOwner(owner);
+  const testMetadata = getTestMetadata(context);
+  testMetadata.usedHelpers.push('render');
+
+  // SAFETY: this is all wildly unsafe, because it is all using private API.
+  // At some point we should define a path forward for this kind of internal
+  // API. For now, just flagging it as *NOT* being safe!
+
+  const toplevelView = owner.lookup('-top-level-view:main') as Outlet;
+  const OutletTemplate = lookupOutletTemplate(owner);
+
+  let controllerContext: object = context;
+  if (isComponent(template)) {
+    controllerContext = {
+      ProvidedComponent: template,
+    };
+    template = INVOKE_PROVIDED_COMPONENT;
+  }
+
+  templateId += 1;
+  const templateFullName = `template:-undertest-${templateId}` as const;
+  owner.register(templateFullName, template);
+  const finalTemplate = lookupTemplate(owner, templateFullName);
+
+  const outletState = {
+    render: {
+      owner,
+      into: undefined,
+      outlet: 'main',
+      name: 'application',
+      controller: undefined,
+      ViewClass: undefined,
+      template: OutletTemplate,
+    },
+
+    outlets: {
+      main: {
+        render: {
+          owner,
+          into: undefined,
+          outlet: 'main',
+          name: 'index',
+          controller: controllerContext,
+          ViewClass: undefined,
+          template: finalTemplate,
+          outlets: {},
+        },
+        outlets: {},
+      },
+    },
+  };
+
+  run(() => {
+    toplevelView.setOutletState(outletState);
+  });
+}

packages/diagnostic/tsconfig.json

@@ -25,6 +25,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSourceMap": true,
-    "inlineSources": true
+    "inlineSources": true,
+    "types": ["ember-source/types"]
   }
 }

pnpm-lock.yaml

@@ -19,7 +19,7 @@
     "_build:production": "bun run build:tests -e production",
     "lint": "eslint . --quiet --cache --cache-strategy=content --ext .js,.ts,.mjs,.cjs --report-unused-disable-directives",
     "check:types": "tsc --noEmit",
-    "start": "ember test --port=0 --serve --no-launch",
+    "start": "bun run build:tests --watch",
     "test": "bun ./diagnostic.js",
     "_test:production": "bun ./diagnostic.js",
     "_syncPnpm": "bun run sync-dependencies-meta-injected"

tests/warp-drive__ember/package.json

@@ -1,16 +1,17 @@
-import { render, rerender, settled } from '@ember/test-helpers';
+import { rerender, settled } from '@ember/test-helpers';
 
 import { hbs } from 'ember-cli-htmlbars';
 
 import { createDeferred, setPromiseResult } from '@ember-data/request';
+import type { RenderingTestContext } from '@warp-drive/diagnostic/ember';
 import { module, setupRenderingTest, test } from '@warp-drive/diagnostic/ember';
 import type { PromiseState } from '@warp-drive/ember';
 import { getPromiseState } from '@warp-drive/ember';
 
 module('Integration | get-promise-state', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders each stage of a promise resolving in a new microtask queue', async function (assert) {
+  test('it renders each stage of a promise resolving in a new microtask queue', async function (this: RenderingTestContext, assert) {
     const defer = createDeferred();
 
     let state: PromiseState;
@@ -26,7 +27,7 @@ module('Integration | get-promise-state', function (hooks) {
       return ++counter;
     });
 
-    await render(
+    await this.render(
       hbs`{{#let (this.getPromiseState this.promise) as |state|}}{{state.result}}<br>Count: {{this.countFor state.result}}{{/let}}`
     );
     assert.equal(state!.result, null);
@@ -41,7 +42,7 @@ module('Integration | get-promise-state', function (hooks) {
     assert.equal(this.element.textContent?.trim(), 'Our DataCount: 2');
   });
 
-  test('it renders each stage of a promise resolving in the same microtask queue', async function (assert) {
+  test('it renders each stage of a promise resolving in the same microtask queue', async function (this: RenderingTestContext, assert) {
     const promise = Promise.resolve().then(() => 'Our Data');
 
     let state: PromiseState;
@@ -57,16 +58,20 @@ module('Integration | get-promise-state', function (hooks) {
       return ++counter;
     });
 
-    await render(
+    await this.render(
       hbs`{{#let (this.getPromiseState this.promise) as |state|}}{{state.result}}<br>Count: {{this.countFor state.result}}{{/let}}`
     );
     assert.equal(state!, getPromiseState(promise));
+    assert.equal(state!.result, null);
+    assert.equal(counter, 1);
+    assert.equal(this.element.textContent?.trim(), 'Count: 1');
+    await rerender();
     assert.equal(state!.result, 'Our Data');
     assert.equal(counter, 2);
     assert.equal(this.element.textContent?.trim(), 'Our DataCount: 2');
   });
 
-  test('it renders only once when the promise already has a result cached', async function (assert) {
+  test('it renders only once when the promise already has a result cached', async function (this: RenderingTestContext, assert) {
     const promise = Promise.resolve().then(() => 'Our Data');
 
     const result = await promise;
@@ -80,7 +85,7 @@ module('Integration | get-promise-state', function (hooks) {
       return ++counter;
     });
 
-    await render(
+    await this.render(
       hbs`{{#let (this.getPromiseState this.promise) as |state|}}{{state.result}}<br>Count: {{this.countFor state.result}}{{/let}}`
     );
 

tests/warp-drive__ember/tests/integration/get-promise-state-test.ts

@@ -18,7 +18,7 @@ setApplication(Application.create(config.APP));
 void start({
   tryCatch: false,
   debug: false,
-  concurrency: 10,
+  concurrency: 1,
   groupLogs: false,
   instrument: true,
   hideReport: false,