chore: Minor testing updates (#1690)

zhawkins · Zack Hawkins · heyMP · web-flow · commit c9c3b5654ac0 · 2021-06-24T12:51:09.000Z
* Minor testing updates

* chore: update changelog

Co-authored-by: Zack Hawkins &lt;zhawkins@redhat.com&gt;
Co-authored-by: heyMP &lt;mgp140@gmail.com&gt;
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,3 +1,7 @@
+# 1.x.x (TBD)
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) chore: Minor testing updates
+
 # 1.9.3 (2021-06-16)
 
 - [b7fc80d](https://github.com/patternfly/patternfly-elements/commit/b7fc80d3417eb14be519c6e37895fcff639d1bbd) fix: set margin-top for ctas in footer on mobile
diff --git a/generators/test/templates/_element.spec.js b/generators/test/templates/_element.spec.js
@@ -11,37 +11,37 @@ import '../dist/<%= elementName %>';
 
 // One element, defined here, is used
 // in multiple tests. It's torn down and recreated each time.
-const element =
+const testElement =
   `<<%= elementName %>>
    </<%= elementName %>>
    `;
 
 describe("<<%= elementName %>>", () => {
 
-    it("it should upgrade", async () => {
-      const el = await createFixture(element);
-
-      expect(el).to.be.an.instanceOf(
-        customElements.get("<%= elementName %>"),
-        '<%= elementName %> should be an instance of <%= className %>'
-      );
-    });
-
-    // Example test.
-    it("should apply attributes correctly", async () => {
-      // Use the same markup that's declared at the top of the file.
-      const el = await createFixture(element);
-    });
-
-    // Example test.
-    it("should have a slot", async () => {
-      // If you need custom markup for this single test, pass it into the
-      // fixture wrapper.
-      const el = await createFixture(`
-        <<%= elementName %>>
-          <div>Hello world 👋</div>
-        </<%= elementName %>>
-      `);
-      expect(el).to.exist;
-    });
+  it("it should upgrade", async () => {
+    const el = await createFixture(testElement);
+
+    expect(el).to.be.an.instanceOf(
+      customElements.get("<%= elementName %>"),
+      '<%= elementName %> should be an instance of <%= className %>'
+    );
+  });
+
+  // Example test.
+  it("should apply attributes correctly", async () => {
+    // Use the same markup that's declared at the top of the file.
+    const el = await createFixture(testElement);
+  });
+
+  // Example test.
+  it("should have a slot", async () => {
+    // If you need custom markup for this single test, pass it into the
+    // fixture wrapper.
+    const el = await createFixture(`
+      <<%= elementName %>>
+        <div>Hello world 👋</div>
+      </<%= elementName %>>
+    `);
+    expect(el).to.exist;
+  });
 });
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
@@ -5,12 +5,22 @@ export default {
     }
   },
   files: "elements/*/test/*.spec.js",
+  testRunnerHtml: testFramework =>
+    `<html>
+      <head>
+        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+      </head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>`,
   groups: [
     {
       name: 'with-vue',
       testRunnerHtml: testFramework =>
         `<html>
           <head>
+            <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
             <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" crossorigin></script>
           </head>
           <body>
@@ -24,6 +34,7 @@ export default {
       testRunnerHtml: testFramework =>
         `<html>
           <head>
+            <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
             <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
             <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
             <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
