US206196 pfe-modal code revisions and automatated tests

chrisdo1 · chrisdo1 · commit 44487527047a · 2019-08-14T13:54:03.000-04:00
* added ATs.
* removed pfe-sass from demo file
* updated pacakge.json pfe versions.
* added z-index sass map and mixin
diff --git a/elements/pfe-modal/package.json b/elements/pfe-modal/package.json
@@ -4,7 +4,7 @@
     "className": "PfeModal",
     "elementName": "pfe-modal"
   },
-  "version": "1.0.0-prerelease.17",
+  "version": "1.0.0-prerelease.19",
   "publishConfig": {
     "access": "public"
   },
@@ -36,8 +36,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@patternfly/pfe-sass": "1.0.0-prerelease.17",
-    "@patternfly/pfelement": "1.0.0-prerelease.17"
+    "@patternfly/pfe-sass": "1.0.0-prerelease.19",
+    "@patternfly/pfelement": "1.0.0-prerelease.19"
   },
   "generator-pfelement-version": "1.1.0"
 }
diff --git a/elements/pfe-modal/src/pfe-modal.scss b/elements/pfe-modal/src/pfe-modal.scss
@@ -30,7 +30,7 @@ $pfe-modal--breakpoint--medium: 640px;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		z-index: var(--pfe-z--modal, 2000); // Reset this to use the z-index map.
+		z-index: #{pfe-var($cssvar: modal, $map: $z-index)};
 
 		&[hidden] {
 			display: none;
diff --git a/elements/pfe-modal/test/pfe-modal_test.html b/elements/pfe-modal/test/pfe-modal_test.html
@@ -8,18 +8,51 @@
     <script type="module" src="../pfe-modal.js"></script>
   </head>
   <body>
-
     <pfe-modal>
-      This is the element content.
+      <button slot="pfe-modal--trigger">Open the modal</button>
+      <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 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <pfe-cta>
+        <a href="#bar">Learn more</a>
+      </pfe-cta>
     </pfe-modal>
-
     <script>
       suite('<pfe-modal>', () => {
-        test('it should upgrade', () => {
-          assert.instanceOf(document.querySelector('pfe-modal'), customElements.get("pfe-modal", 'pfe-modal should be an instance of pfeModal'));
+        test('it should upgrade pfe-modal', () => {
+          assert.instanceOf(document.querySelector('pfe-modal'), customElements.get("pfe-modal", 'pfe-modal should be an instance of PfeModal'));
+        });
+
+        test('it should add the proper attributes to the modal window', () => {
+          const pfeModal = document.querySelector('pfe-modal');
+          const outer = pfeModal.querySelector('pfe-modal__outer');
+          const modalWindow = pfeModal.querySelector('pfe-modal__window');
+          const button = pfeModal.querySelector('pfe-modal__close');
+
+          assert.isTrue(pfeModal.hasAttribute('has_trigger'));
+          assert.isTrue(pfeModal.hasAttribute('has_header'));
+          assert.isTrue(pfeModal.hasAttribute('has_body'));
+          assert.equal(modalWindow.getAttribute('tabindex'), '0');
+          assert.isTrue(modalWindow.hasAttribute('hidden'));
+          assert.equal(button.getAttribute('aria-label'), 'Close dialog');
+        });
+
+        test('it should open the modal window when the trigger is clicked', () => {
+          const pfeModal = document.querySelector('pfe-modal');
+          const outer = pfeModal.querySelector('pfe-modal__outer');
+          const modalWindow = pfeModal.querySelector('pfe-modal__window');
+          const button = pfeModal.querySelector('pfe-modal__close');
+          const trigger = pfeModal.querySelector('[slot=pfe-modal--trigger');
+
+          trigger.click();
+
+          assert.isNotTrue(modalWindow.hasAttribute('hidden'));
+
+          // reset
+          button.click();
+          assert.isTrue(modalWindow.hasAttribute('hidden'));
+
         });
 
-        // you need to write more tests!!!
 
       });
     </script>
diff --git a/elements/pfe-sass/variables/_maps.scss b/elements/pfe-sass/variables/_maps.scss
@@ -227,3 +227,10 @@ $pfe-vars: (
   animation-timing:              cubic-bezier(0.465, 0.183, 0.153, 0.946),
   opacity:                       .3
 );
+
+$z-index: (
+  modal: 99,
+  navigation: 98,
+  overlay: 97,
+  content: 0
+);
diff --git a/examples/index.html b/examples/index.html
@@ -27,7 +27,6 @@ <h1>Demos</h1>
 					<li><a href="../elements/pfe-number/demo">pfe-number</a></li>
 					<li><a href="../elements/pfe-page-status/demo">pfe-page-status</a></li>
 					<li><a href="../elements/pfe-progress-indicator/demo">pfe-progress-indicator</a></li>
-					<li><a href="../elements/pfe-styles/demo">pfe-styles</a></li>
 					<li><a href="../elements/pfe-tabs/demo">pfe-tabs</a></li>
 				</ul>
     </body>
