refactor(field): move tests closer to the code they test.

PiperOrigin-RevId: 468730710
material-components · Aug 19, 2022 · c7abd25 · c7abd25
1 parent f305806
commit c7abd25
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 72 deletions.
diff --git a/field/test/field_test.ts → field/lib/field_test.ts b/field/test/field_test.ts → field/lib/field_test.ts
@@ -7,7 +7,6 @@
 import 'jasmine';
 
 import {Environment} from '@material/web/testing/environment';
-import {State, TemplateBuilder, TemplateProps} from '@material/web/testing/templates';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
 
@@ -59,29 +58,21 @@ class TestField extends Field {
 describe('Field', () => {
   const env = new Environment();
 
-  const templates =
-      new TemplateBuilder().withHarness(FieldHarness).withVariants({
-        field(directive, props) {
-          return html`
-            <md-test-field
-              .label=${props.label}
-              ?disabled=${props.disabled ?? false}
-              .error=${props.error ?? false}
-              .populated=${props.populated ?? false}
-              .required=${props.required ?? false}
-              ${directive}
-            >
-              <input>
-            </md-test-field>
-          `;
-        },
-      });
-
-  async function setupTest(props: TemplateProps<FieldHarness> = {}) {
+  async function setupTest(props: Partial<Field> = {}) {
     // Variant type does not matter for shared tests
-    const template = templates.variant('field', props).render(State.DEFAULT);
-    const instance =
-        template ? env.render(template).querySelector('md-test-field') : null;
+    const template = html`
+      <md-test-field
+        .label=${props.label}
+        ?disabled=${props.disabled ?? false}
+        .error=${props.error ?? false}
+        .populated=${props.populated ?? false}
+        .required=${props.required ?? false}
+      >
+        <input>
+      </md-test-field>
+    `;
+    const root = env.render(template);
+    const instance = root.querySelector('md-test-field');
     if (!instance) {
       throw new Error('Could not query rendered <md-test-field>.');
     }

diff --git a/field/test/filled-field_test.ts → field/lib/filled-field_test.ts b/field/test/filled-field_test.ts → field/lib/filled-field_test.ts
@@ -7,7 +7,6 @@
 import 'jasmine';
 
 import {Environment} from '@material/web/testing/environment';
-import {State, TemplateBuilder, TemplateProps} from '@material/web/testing/templates';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
 
@@ -54,30 +53,21 @@ describe('Field', () => {
   describe('<md-filled-field>', () => {
     const env = new Environment();
 
-    const templates =
-        new TemplateBuilder().withHarness(FieldHarness).withVariants({
-          filled(directive, props) {
-            return html`
-              <md-test-filled-field
-                .label=${props.label}
-                ?disabled=${props.disabled ?? false}
-                .error=${props.error ?? false}
-                .populated=${props.populated ?? false}
-                .required=${props.required ?? false}
-                ${directive}
-              >
-                <input>
-              </md-test-filled-field>
-            `;
-          },
-        });
-
-    async function setupTest(props: TemplateProps<FieldHarness> = {}) {
+    async function setupTest(props: Partial<FilledField> = {}) {
       // Variant type does not matter for shared tests
-      const template = templates.variant('filled', props).render(State.DEFAULT);
-      const instance = template ?
-          env.render(template).querySelector('md-test-filled-field') :
-          null;
+      const template = html`
+        <md-test-filled-field
+          .label=${props.label}
+          ?disabled=${props.disabled ?? false}
+          .error=${props.error ?? false}
+          .populated=${props.populated ?? false}
+          .required=${props.required ?? false}
+        >
+          <input>
+        </md-test-filled-field>
+      `;
+      const root = env.render(template);
+      const instance = root.querySelector('md-test-filled-field');
       if (!instance) {
         throw new Error('Could not query rendered <md-test-filled-field>.');
       }

diff --git a/field/test/outlined-field_test.ts → field/lib/outlined-field_test.ts b/field/test/outlined-field_test.ts → field/lib/outlined-field_test.ts
@@ -7,7 +7,6 @@
 import 'jasmine';
 
 import {Environment} from '@material/web/testing/environment';
-import {State, TemplateBuilder, TemplateProps} from '@material/web/testing/templates';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
 
@@ -39,31 +38,21 @@ describe('Field', () => {
   describe('<md-outlined-field>', () => {
     const env = new Environment();
 
-    const templates =
-        new TemplateBuilder().withHarness(FieldHarness).withVariants({
-          outlined(directive, props) {
-            return html`
-              <md-test-outlined-field
-                .label=${props.label}
-                ?disabled=${props.disabled ?? false}
-                .error=${props.error ?? false}
-                .populated=${props.populated ?? false}
-                .required=${props.required ?? false}
-                ${directive}
-              >
-                <input>
-              </md-test-outlined-field>
-            `;
-          },
-        });
-
-    async function setupTest(props: TemplateProps<FieldHarness> = {}) {
+    async function setupTest(props: Partial<OutlinedField> = {}) {
       // Variant type does not matter for shared tests
-      const template =
-          templates.variant('outlined', props).render(State.DEFAULT);
-      const instance = template ?
-          env.render(template).querySelector('md-test-outlined-field') :
-          null;
+      const template = html`
+        <md-test-outlined-field
+          .label=${props.label}
+          ?disabled=${props.disabled ?? false}
+          .error=${props.error ?? false}
+          .populated=${props.populated ?? false}
+          .required=${props.required ?? false}
+        >
+          <input>
+        </md-test-outlined-field>
+      `;
+      const root = env.render(template);
+      const instance = root.querySelector('md-test-outlined-field');
       if (!instance) {
         throw new Error('Could not query rendered <md-test-outlined-field>.');
       }