chore: Update tests and build scripts

elements/pfe-band/demo/demo.css

@@ -45,7 +45,7 @@ pfe-band {
 }
 
 #test-custom {
-    --pfe-band--BackgroundColor: rgb(6, 105, 6);
+    --pfe-band--BackgroundColor: green;
     --context: saturated;
 }
 

elements/pfe-band/demo/index.html

@@ -10,27 +10,28 @@
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- Stylesheets for testing light DOM styles.
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
-    --> 
-  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
+      -->
 
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
   </noscript>
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
-  <link href="demo.css" rel="stylesheet">
+  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
   <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
 
+  <link href="demo.css" rel="stylesheet">
+
   <script>
     require([
       '../dist/pfe-band.umd.js',

elements/pfe-band/src/pfe-band.scss

@@ -2,7 +2,6 @@
 
 $LOCAL: band;
 
-
 $LOCAL-VARIABLES: (
   // Default spacing values
   Padding--vertical:    calc( #{pfe-var(container-spacer)} * 4),

elements/pfe-clipboard/demo/index.html

@@ -6,35 +6,29 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>PatternFly Element | pfe-clipboard Demo</title>
 
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
+
+  <!-- Stylesheets for testing light DOM styles.
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
+      -->
+
   <noscript>
-    <link href="../../pfelement/dist/pfelement-noscript.min.css" rel="stylesheet">
+    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
   </noscript>
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
-  <!-- Stylesheets for testing light DOM styles.
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
-    -->
-
+  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
-  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
-
-  <!-- Use webcomponents-loader when you are adding support for more modern browsers -->
-  <!-- <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.min.js"></script> -->
-
-  <!-- IE11 test: use bundle + require with umd files -->
-  <!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->
   <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
-
-
-  <!-- Tests require pulling in the UMD version of the files -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+
   <script>
     require([
       "../dist/pfe-clipboard.umd.js",

elements/pfe-clipboard/test/pfe-clipboard_e2e.js

@@ -3,6 +3,7 @@ const element = require("../package.json").pfelement.elementName;
 describe(element, () => {
   before(() => {
     browser.url(`/elements/${element}/demo`);
+    browser.pause(1000);
   });
 
   it("should take a screenshot", () => {

elements/pfe-collapse/demo/index.html

@@ -7,13 +7,17 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
+  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
+
   <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
+    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet" />
   </noscript>
 
-  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
-
-  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
+  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet" />
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>

elements/pfe-collapse/test/pfe-collapse_e2e.js

@@ -4,10 +4,14 @@ describe(element, () => {
   before(() => {
     browser.url(`/elements/${element}/demo`);
 
-    const collapse = $("#collapse");
-    collapse.$(function () {
-      this.toggle();
+    browser.execute(function () {
+      Promise.all([
+        customElements.whenDefined("pfe-collapse")
+      ]).then(function () {
+        document.querySelector("pfe-collapse").toggle();
+      });
     });
+
     browser.pause(1000);
   });
 

elements/pfe-dropdown/demo/index.html

@@ -13,7 +13,7 @@
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
-
+  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />

elements/pfe-icon/demo/index_e2e.html

@@ -7,6 +7,17 @@
 
   <title>PatternFly Element | pfe-icon Demo</title>
 
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
+
+  <!-- Stylesheets for testing light DOM styles.
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
+    --> 
+  <link rel="stylesheet" href="../../pfe-styles/dist/pf-vars-rem.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
+
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
   </noscript>
@@ -21,17 +32,11 @@
   <script>
     require([
       '../dist/pfe-icon.umd.js',
-      '../../pfe-card/dist/pfe-card.umd.js'
+      '../../pfe-card/dist/pfe-card.umd.js',
+      '../../pfe-band/dist/pfe-band.umd.js'
     ])
 
   </script>
-
-  <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-  </noscript>
-
-  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
-  <link href="../../pfe-styles/dist/pfe-layouts.min.css" rel="stylesheet">
 </head>
 
 <body unresolved>
@@ -601,13 +606,6 @@ <h3>Forced stretch</h3>
           <pfe-icon color="darker" size="lg" circled icon="rh-icon-app-unsecured"></pfe-icon>
         </div>
       </pfe-card>
-      <!-- <pfe-card color="lightest" border>
-        <h3>Locally hosted icons</h3>
-        <pfe-icon size="xl" icon="local-square" class="has-fallback">
-          Icon failed to load.</pfe-icon>
-        <pfe-icon size="xl" color="complement" icon="local-rh-icon-api" class="has-fallback">Icon
-          failed to load.</pfe-icon>
-      </pfe-card> -->
     </div>
   </pfe-band>
 

elements/pfe-icon/test/pfe-icon_e2e.js

@@ -5,12 +5,16 @@ describe(element, () => {
     browser.url(`/elements/${element}/demo/index_e2e.html`);
   });
 
-  it("should take a screenshot", () => {
-    browser.pause(15000);
-    browser.saveFullPageScreen(element);
-  });
+  if (browser.capabilities.browserName !== "IE") {
+    it.skip("should take a screenshot");
+  } else {
+    it("should take a screenshot", () => {
+      browser.pause(5000);
+      browser.saveFullPageScreen(element);
+    });
 
-  it("should compare to the baseline", () => {
-    expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
-  });
+    it("should compare to the baseline", () => {
+      expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
+    });
+  }
 });

elements/pfe-modal/demo/index.html

@@ -57,7 +57,7 @@ <h1>&lt;pfe-modal&gt;</h1>
     <h2 slot="pfe-band--header">Modal: Standard modal</h2>
     <pfe-modal>
       <pfe-cta slot="pfe-modal--trigger">
-        <button>Open modal</button>
+        <button id="first-modal">Open modal</button>
       </pfe-cta>
       <h2 slot="pfe-modal--header">Modal with a header</h2>
       <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt

elements/pfe-modal/test/pfe-modal_e2e.js

@@ -8,11 +8,7 @@ describe(element, () => {
 
     browser.execute(function () {
       window.scrollTo(0, 0);
-      Promise.all([
-        customElements.whenDefined("pfe-modal")
-      ]).then(function () {
-        document.querySelector("pfe-modal").open();
-      });
+      document.querySelector("#first-modal").click();
     });
 
     browser.pause(1000);

elements/pfe-readtime/test/pfe-readtime_e2e.js

@@ -3,6 +3,7 @@ const element = require("../package.json").pfelement.elementName;
 describe(element, () => {
   before(() => {
     browser.url(`/elements/${element}/demo/index_e2e.html`);
+    browser.pause(1000);
   });
 
   it("should take a screenshot", () => {

elements/pfe-toast/test/pfe-toast_e2e.js

@@ -4,9 +4,14 @@ describe(element, () => {
   before(() => {
     browser.url(`/elements/${element}/demo`);
 
-    const toastBtn = $("#example2");
-    toastBtn.click();
-    browser.pause(3000);
+    browser.pause(1000);
+
+    browser.execute(function () {
+      window.scrollTo(0, 0);
+      document.querySelector("#example2").click();
+    });
+
+    browser.pause(1000);
   });
 
   it("should take a screenshot", () => {

scripts/build.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 process.env.FORCE_COLOR = 3;
 
-// @TODO: Incorporate docs compile?
 const shell = require("shelljs");
 const tools = require("./tools.js");
 const argv = require("yargs")
@@ -34,33 +33,9 @@ const argv = require("yargs")
     }
   }).argv;
 
-// Default to _all_ elements.
-let components = [];
-
 // Arguments with no prefix are added to the `argv._` array.
-if (argv._.length > 0) {
-  // If someone passes in `*` we treat it like _all_ elements.
-  if (argv._[0] === "*") {
-    // Use the default already defined above.
-    // i.e. `components = [];`
-  } else if (argv._[0].includes(",")) {
-    // Support components passed in seperated by a comma.
-    // i.e. `npm run build "{pfe-select,pfe-accordion}"`
-    let elements = [];
-    argv._.forEach(item => {
-      // Remove any `{}`.
-      const el = item.replace(/{|}/g, "");
-      const individualElements = el.split(",");
-      // Add individual elements to the array.
-      elements = [
-        ...elements,
-        ...individualElements
-      ];
-    });
-    // Validate that these components are actually elements.
-    components = tools.validateElementNames(elements);
-  }
-}
+// Default to _all_ elements.
+const components = argv._.length > 0 ? tools.validateElementNames(argv._) : [];
 
 // Build the command out to be run
 const build = tools.lernaRun("build", components);

scripts/tools.js

@@ -17,8 +17,11 @@ module.exports.printOpts = (key, value) =>
       : `="${value}"`
   }`;
 
-module.exports.lernaRun = (command, components) => `lerna -- run ${command} --no-bail --parallel --include-dependencies ${
-  components.length > 0 ? components.map(item => `--scope '*/${item}'`).join(" ") : ""}`;
+module.exports.lernaRun = (command, components) => {
+  return `lerna -- run ${command} --no-bail --parallel --include-dependencies ${
+    components.map(item => `--scope '*/${item}'`).join(" ")
+  }`;
+}
 
 
 // Optional filter input
@@ -37,14 +40,27 @@ module.exports.getElementNames = (filterHandler = undefined) => {
 };
 
 module.exports.validateElementNames = (components) => {
+  if (components[0].replace(/[\{|\}]/g, "") === "*") return [];
   let allComponents = this.getElementNames();
 
+  let separated = [];
+  let remaining = components.filter(item => {
+    // Strip opening and closing {}, split on a comma
+    const multiple = item.replace(/[\{|\}]/g, "").split(",");
+    if (multiple.length > 1) {
+      separated = multiple;
+      return false;
+    } else return true;
+  });
+
+  if (separated.length > 0) components = remaining.concat(separated);
+
   // Validate component inputs
   let invalid = components.filter(item => !allComponents.includes(item));
   if (invalid.length > 0) {
     // Try adding the pfe- prefix and check again
-    invalid = components.filter((item, idx) => {
-      let isValid = allComponents.includes(`pfe-${item}`);
+    invalid = invalid.filter((item, idx) => {
+      const isValid = allComponents.includes(`pfe-${item}`);
       // Replace the entry in components if it is valid
       if (isValid) components.splice(idx, 1, `pfe-${item}`);
       return !isValid;
@@ -55,8 +71,8 @@ module.exports.validateElementNames = (components) => {
     shell.echo(chalk`{bold No component directory found for: {red ${invalid.join(", ")}}}\n`);
     // Remove invalid items from the array
     components = components.filter(item => !invalid.includes(item));
-    // If the array is now empty, exit the script
-    if (components.length === 0) shell.exit(1);
+    // If the array is now empty, return an empty array
+    if (components.length === 0) return [];
   }
 
   return components;

scripts/watch.js

@@ -38,7 +38,7 @@ const watch = tools.lernaRun("watch", components);
 
 // Set up the commands to be run in parallel
 let parallel = [], serial = [];
-if (argv.build) serial = [`build ${components.join(" ")}`].concat(parallel);
+if (argv.build) serial = [tools.lernaRun("build", components)].concat(parallel);
 if (argv.storybook) serial = ["storybook"].concat(parallel);
 parallel = parallel.concat([watch, "start"])