test(elements): only declare helpers if needed (#36114) (#37226)

Previously, helper modules/components classes were declared even if the
tests were not run (because the environment did not support Custom
Elements for example).

This commit moves the declaration of the helpers inside the `describe()`
block, so they are not declared unnecessarily. This is in preparation of
adding more helpers that need to access variables declared inside the
`describe()` block.

PR Close #36114

PR Close #37226

packages/elements/test/create-custom-element_spec.ts

@@ -110,59 +110,59 @@ if (browserDetection.supportsCustomElements) {
          expect(strategy.inputs.get('fooFoo')).toBe('foo-foo-value');
          expect(strategy.inputs.get('barBar')).toBe('barBar-value');
        });
+
+    // Helpers
+    @Component({
+      selector: 'test-component',
+      template: 'TestComponent|foo({{ fooFoo }})|bar({{ barBar }})',
+    })
+    class TestComponent {
+      @Input() fooFoo: string = 'foo';
+      // TODO(issue/24571): remove '!'.
+      @Input('barbar') barBar!: string;
+
+      @Output() bazBaz = new EventEmitter<boolean>();
+      @Output('quxqux') quxQux = new EventEmitter<Object>();
+    }
+    @NgModule({
+      imports: [BrowserModule],
+      declarations: [TestComponent],
+      entryComponents: [TestComponent],
+    })
+    class TestModule implements DoBootstrap {
+      ngDoBootstrap() {}
+    }
+
+    class TestStrategy implements NgElementStrategy {
+      connectedElement: HTMLElement|null = null;
+      disconnectCalled = false;
+      inputs = new Map<string, any>();
+
+      events = new Subject<NgElementStrategyEvent>();
+
+      connect(element: HTMLElement): void {
+        this.connectedElement = element;
+      }
+
+      disconnect(): void {
+        this.disconnectCalled = true;
+      }
+
+      getInputValue(propName: string): any {
+        return this.inputs.get(propName);
+      }
+
+      setInputValue(propName: string, value: string): void {
+        this.inputs.set(propName, value);
+      }
+    }
+
+    class TestStrategyFactory implements NgElementStrategyFactory {
+      testStrategy = new TestStrategy();
+
+      create(): NgElementStrategy {
+        return this.testStrategy;
+      }
+    }
   });
 }
-
-// Helpers
-@Component({
-  selector: 'test-component',
-  template: 'TestComponent|foo({{ fooFoo }})|bar({{ barBar }})',
-})
-class TestComponent {
-  @Input() fooFoo: string = 'foo';
-  // TODO(issue/24571): remove '!'.
-  @Input('barbar') barBar!: string;
-
-  @Output() bazBaz = new EventEmitter<boolean>();
-  @Output('quxqux') quxQux = new EventEmitter<Object>();
-}
-@NgModule({
-  imports: [BrowserModule],
-  declarations: [TestComponent],
-  entryComponents: [TestComponent],
-})
-class TestModule implements DoBootstrap {
-  ngDoBootstrap() {}
-}
-
-export class TestStrategy implements NgElementStrategy {
-  connectedElement: HTMLElement|null = null;
-  disconnectCalled = false;
-  inputs = new Map<string, any>();
-
-  events = new Subject<NgElementStrategyEvent>();
-
-  connect(element: HTMLElement): void {
-    this.connectedElement = element;
-  }
-
-  disconnect(): void {
-    this.disconnectCalled = true;
-  }
-
-  getInputValue(propName: string): any {
-    return this.inputs.get(propName);
-  }
-
-  setInputValue(propName: string, value: string): void {
-    this.inputs.set(propName, value);
-  }
-}
-
-export class TestStrategyFactory implements NgElementStrategyFactory {
-  testStrategy = new TestStrategy();
-
-  create(): NgElementStrategy {
-    return this.testStrategy;
-  }
-}