Cleanup

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/test/keywords/element-runtime-test.ts

@@ -8,7 +8,7 @@ import {
 
 import { template } from '@ember/template-compiler/runtime';
 
-class KeywordElement extends RenderTest {
+class KeywordElementRuntime extends RenderTest {
   static suiteName = 'keyword helper: element (runtime)';
 
   @test
@@ -26,40 +26,30 @@ class KeywordElement extends RenderTest {
   }
 
   @test
-  'implicit scope'(assert: Assert) {
-    const compiled = template('{{#let (element "h1") as |Tag|}}<Tag>Hello</Tag>{{/let}}', {
+  'explicit scope (shadowed)'() {
+    const compiled = template('{{element "h1"}}', {
       strictMode: true,
-      eval() {
-        return eval(arguments[0]);
-      },
+      scope: () => ({ element: () => 'surprise' }),
     });
 
     this.renderComponent(compiled);
-
-    let h1 = castToBrowser(this.element, 'div').querySelector('h1');
-    assert.ok(h1, 'h1 element exists');
-    assert.strictEqual(h1!.textContent, 'Hello');
+    this.assertHTML('surprise');
   }
 
   @test
-  'MustacheStatement with explicit scope'(assert: Assert) {
-    const Child = template('{{#let @tag as |Tag|}}<Tag>World</Tag>{{/let}}', {
-      strictMode: true,
-      scope: () => ({}),
-    });
-
-    const compiled = template('<Child @tag={{element "span"}} />', {
+  'implicit scope (eval)'(assert: Assert) {
+    const compiled = template('{{#let (element "h1") as |Tag|}}<Tag>Hello</Tag>{{/let}}', {
       strictMode: true,
-      scope: () => ({
-        Child,
-      }),
+      eval() {
+        return eval(arguments[0]);
+      },
     });
 
     this.renderComponent(compiled);
 
-    let span = castToBrowser(this.element, 'div').querySelector('span');
-    assert.ok(span, 'span element exists');
-    assert.strictEqual(span!.textContent, 'World');
+    let h1 = castToBrowser(this.element, 'div').querySelector('h1');
+    assert.ok(h1, 'h1 element exists');
+    assert.strictEqual(h1!.textContent, 'Hello');
   }
 
   @test
@@ -81,4 +71,4 @@ class KeywordElement extends RenderTest {
   }
 }
 
-jitSuite(KeywordElement);
+jitSuite(KeywordElementRuntime);

packages/@glimmer-workspace/integration-tests/test/keywords/element-test.ts

@@ -2,16 +2,15 @@ import { castToBrowser } from '@glimmer/debug-util';
 import { jitSuite, RenderTest, test } from '@glimmer-workspace/integration-tests';
 
 import { template } from '@ember/template-compiler';
-import { element } from '@ember/helper';
 
 class KeywordElement extends RenderTest {
   static suiteName = 'keyword helper: element';
 
   @test
-  'it works as a SubExpression'(assert: Assert) {
+  'explicit scope'(assert: Assert) {
     const compiled = template('{{#let (element "h1") as |Tag|}}<Tag>Hello</Tag>{{/let}}', {
       strictMode: true,
-      scope: () => ({ element }),
+      scope: () => ({}),
     });
 
     this.renderComponent(compiled);
@@ -22,9 +21,19 @@ class KeywordElement extends RenderTest {
   }
 
   @test
-  'it works with the runtime compiler'(assert: Assert) {
-    hide(element);
+  'explicit scope (shadowed)'() {
+    let element = () => 'surprise';
+    const compiled = template('{{element "h1"}}', {
+      strictMode: true,
+      scope: () => ({ element }),
+    });
 
+    this.renderComponent(compiled);
+    this.assertHTML('surprise');
+  }
+
+  @test
+  'implicit scope (eval)'(assert: Assert) {
     const compiled = template('{{#let (element "h1") as |Tag|}}<Tag>Hello</Tag>{{/let}}', {
       strictMode: true,
       eval() {
@@ -40,18 +49,15 @@ class KeywordElement extends RenderTest {
   }
 
   @test
-  'it works as a MustacheStatement'(assert: Assert) {
+  'MustacheStatement'(assert: Assert) {
     const Child = template('{{#let @tag as |Tag|}}<Tag>World</Tag>{{/let}}', {
       strictMode: true,
       scope: () => ({}),
     });
 
     const compiled = template('<Child @tag={{element "span"}} />', {
       strictMode: true,
-      scope: () => ({
-        element,
-        Child,
-      }),
+      scope: () => ({ Child }),
     });
 
     this.renderComponent(compiled);
@@ -63,17 +69,3 @@ class KeywordElement extends RenderTest {
 }
 
 jitSuite(KeywordElement);
-
-/**
- * This function is used to hide a variable from the transpiler, so that it
- * doesn't get removed as "unused". It does not actually do anything with the
- * variable, it just makes it be part of an expression that the transpiler
- * won't remove.
- *
- * It's a bit of a hack, but it's necessary for testing.
- *
- * @param variable The variable to hide.
- */
-const hide = (variable: unknown) => {
-  new Function(`return (${JSON.stringify(variable)});`);
-};

smoke-tests/scenarios/basic-test.ts

@@ -406,23 +406,29 @@ function basicTest(scenarios: Scenarios, appName: string) {
               import { setupRenderingTest } from 'ember-qunit';
               import { render } from '@ember/test-helpers';
 
-              import Component from '@glimmer/component';
-
-              class Demo extends Component {
-                <template>
-                  {{#let (element "h1") as |Tag|}}
-                    <Tag class="greeting">Hello from element keyword</Tag>
-                  {{/let}}
-                </template>
-              }
-
               module('{{element}} as keyword', function(hooks) {
                 setupRenderingTest(hooks);
 
                 test('it works', async function(assert) {
-                  await render(Demo);
+                  await render(
+                    <template>
+                      {{#let (element "h1") as |Tag|}}
+                        <Tag class="greeting">Hello from element keyword</Tag>
+                      {{/let}}
+                    </template>
+                  );
                   assert.dom('h1.greeting').hasText('Hello from element keyword');
                 });
+
+                test('can be shadowed', async function(assert) {
+                  let element = () => 'surprise';
+                  await render(
+                    <template>
+                      <span data-test>{{element "h1"}}</span>
+                    </template>
+                  );
+                  assert.dom('[data-test]').hasText('surprise');
+                });
               });
             `,
             'fn-as-keyword-but-its-shadowed-test.gjs': `