terra-button - npm Package Compare versions

Comparing version 3.49.0 to 3.50.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.50.0 - (November 17, 2020)
+
+* Changed
+  * Update wdio tests to remove deprecated Terra.it helpers
+
 ## 3.49.0 - (November 10, 2020)
@@ -7,0 +12,0 @@

package.json

 {
   "name": "terra-button",
   "main": "lib/Button.js",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "description": "The terra-button component provides users a way to trigger actions in the UI.",
@@ -45,6 +45,6 @@ "repository": {
     "prop-types": "^15.5.8",
-    "terra-icon": "^3.37.0",
+    "terra-icon": "^3.38.0",
     "terra-theme-context": "^1.0.0"
   },
-  "gitHead": "1b981da7df893b44257a6fbffb2cbaccc6714b97"
+  "gitHead": "0e7146c606856f9b2cba0b1defb1d48181b6c089"
 }

tests/wdio/button-spec.js

 Terra.describeViewports('Button', ['tiny'], () => {
   describe('Neutral', () => {
-    before(() => {
-      browser.url('/#/raw/tests/terra-button/button/variants/neutral-button');
+    it('displays default neutral Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/neutral-button');
       browser.moveToObject('#root', 0, 700); // move cursor to remove focus styles
+
+      Terra.validates.element('default', { selector: '#neutral' });
     });
 
-    Terra.it.validatesElement({ selector: '#neutral' });
+    it('displays neutral Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-    describe('Neutral-Keyboard Focus', () => {
-      before(() => {
-        browser.keys('Tab');
-      });
-
-      Terra.it.validatesElement({ selector: '#neutral' });
+      Terra.validates.element('neutral-keyboard focus', { selector: '#neutral' });
     });
 
-    describe('Neutral-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays Neutral-Active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#neutralActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#neutralActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#neutralActive' });
+      Terra.validates.element('active and focused', { selector: '#neutralActiveFocusSpan' });
     });
@@ -27,17 +25,19 @@ });
   describe('Emphasis', () => {
-    before(() => browser.url('/#/raw/tests/terra-button/button/variants/emphasis-button'));
+    it('displays default emphasis Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/emphasis-button');
 
-    Terra.it.validatesElement({ selector: '#emphasis' });
+      Terra.validates.element('default', { selector: '#emphasis' });
+    });
 
-    describe('Emphasis-Keyboard Focus', () => {
-      before(() => browser.keys('Tab'));
+    it('displays emphasis Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-      Terra.it.validatesElement({ selector: '#emphasis' });
+      Terra.validates.element('emphasis-keyboard focus', { selector: '#emphasis' });
     });
 
-    describe('Emphasis-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays emphasis-active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#emphasisActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#emphasisActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#emphasisActive' });
+      Terra.validates.element('active and focused', { selector: '#emphasisActiveFocusSpan' });
     });
@@ -47,17 +47,19 @@ });
   describe('Ghost', () => {
-    before(() => browser.url('/#/raw/tests/terra-button/button/variants/ghost-button'));
+    it('displays default ghost Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/ghost-button');
 
-    Terra.it.validatesElement({ selector: '#ghost' });
+      Terra.validates.element('default', { selector: '#ghost' });
+    });
 
-    describe('Ghost-Keyboard Focus', () => {
-      before(() => browser.keys('Tab'));
+    it('displays ghost Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-      Terra.it.validatesElement({ selector: '#ghost' });
+      Terra.validates.element('ghost-keyboard focus', { selector: '#ghost' });
     });
 
-    describe('Ghost-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays ghost-active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#ghostActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#ghostActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#ghostActive' });
+      Terra.validates.element('active and focused', { selector: '#ghostActiveFocusSpan' });
     });
@@ -67,17 +69,19 @@ });
   describe('De-emphasis', () => {
-    before(() => browser.url('/#/raw/tests/terra-button/button/variants/deemphasis-button'));
+    it('displays default de-emphasis Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/deemphasis-button');
 
-    Terra.it.validatesElement({ selector: '#de-emphasis' });
+      Terra.validates.element('default', { selector: '#de-emphasis' });
+    });
 
-    describe('De-emphasis-Keyboard Focus', () => {
-      before(() => browser.keys('Tab'));
+    it('displays de-emphasis Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-      Terra.it.validatesElement({ selector: '#de-emphasis' });
+      Terra.validates.element('de-emphasis-keyboard focus', { selector: '#de-emphasis' });
     });
 
-    describe('De-emphasis-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays de-emphasis-active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#de-emphasisActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#de-emphasisActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#de-emphasisActive' });
+      Terra.validates.element('active and focused', { selector: '#de-emphasisActiveFocusSpan' });
     });
@@ -87,17 +91,19 @@ });
   describe('Action', () => {
-    before(() => browser.url('/#/raw/tests/terra-button/button/variants/action-button'));
+    it('displays default action Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/action-button');
 
-    Terra.it.validatesElement({ selector: '#action' });
+      Terra.validates.element('default', { selector: '#action' });
+    });
 
-    describe('Action-Keyboard Focus', () => {
-      before(() => browser.keys('Tab'));
+    it('displays action Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-      Terra.it.validatesElement({ selector: '#action' });
+      Terra.validates.element('action-keyboard focus', { selector: '#action' });
     });
 
-    describe('Action-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays action-active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#actionActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#actionActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#actionActive' });
+      Terra.validates.element('active and focused', { selector: '#actionActiveFocusSpan' });
     });
@@ -107,87 +113,72 @@ });
   describe('Utility', () => {
-    before(() => browser.url('/#/raw/tests/terra-button/button/variants/utility-button'));
+    it('displays default utility Button', () => {
+      browser.url('/raw/tests/terra-button/button/variants/utility-button');
 
-    Terra.it.validatesElement({ selector: '#utility' });
+      Terra.validates.element({ selector: '#utility' });
+    });
 
-    describe('Utility-Keyboard Focus', () => {
-      before(() => browser.keys('Tab'));
+    it('displays utility Button with keyboard focus', () => {
+      browser.keys('Tab');
 
-      Terra.it.validatesElement({ selector: '#utility' });
+      Terra.validates.element('utility-keyboard focus', { selector: '#utility' });
     });
 
-    describe('Utility-Active', () => {
-      before(() => browser.url('/#/raw/tests/terra-button/button/active-variant-buttons'));
+    it('displays utility-active Button', () => {
+      browser.url('/raw/tests/terra-button/button/active-variant-buttons');
 
-      Terra.it.validatesElement('active', { selector: '#utilityActive' });
-      Terra.it.validatesElement('active and focused', { selector: '#utilityActiveFocusSpan' });
+      Terra.validates.element('active', { selector: '#utilityActive' });
+      Terra.validates.element('active and focused', { selector: '#utilityActiveFocusSpan' });
     });
   });
 
-  describe('Long Text', () => {
-    before(() => {
-      browser.url('/#/raw/tests/terra-button/button/long-text-button');
-      browser.moveToObject('#root');
-    });
+  it('displays Button with long text', () => {
+    browser.url('/raw/tests/terra-button/button/long-text-button');
+    browser.moveToObject('#root');
 
-    Terra.it.validatesElement({ selector: '#long-text' });
+    Terra.validates.element('long text', { selector: '#long-text' });
   });
 
-  describe('Block', () => {
-    before(() => {
-      browser.url('/#/raw/tests/terra-button/button/long-text-button');
-      browser.moveToObject('#root');
-    });
-
-    Terra.it.validatesElement({ selector: '#long-text' });
-  });
-
   describe('Button Types', () => {
     before(() => {
-      browser.url('/#/raw/tests/terra-button/button/button-types');
+      browser.url('/raw/tests/terra-button/button/button-types');
       browser.moveToObject('#root');
     });
 
-    Terra.it.isAccessible();
-
-    describe('Type reset', () => {
-      Terra.it.validatesElement({ selector: '#buttonWithTypeReset' });
+    it('displays type reset', () => {
+      Terra.validates.element('type reset', { selector: '#buttonWithTypeReset' });
     });
 
-    describe('Type submit', () => {
-      Terra.it.matchesScreenshot({ selector: '#buttonWithTypeSubmit' });
+    it('displays type submit', () => {
+      Terra.validates.element('type submit', { selector: '#buttonWithTypeSubmit' });
     });
 
-    describe('Type button', () => {
-      Terra.it.matchesScreenshot({ selector: '#buttonWithTypeButton' });
+    it('displays type button', () => {
+      Terra.validates.element('type button', { selector: '#buttonWithTypeButton' });
     });
   });
 
-  describe('Button with Icon', () => {
+  describe('displays Button with Icon', () => {
     before(() => {
-      browser.url('/#/raw/tests/terra-button/button/icon-button');
+      browser.url('/raw/tests/terra-button/button/icon-button');
       browser.moveToObject('#root');
     });
 
-    Terra.it.isAccessible();
-
-    describe('Icon and Text', () => {
-      Terra.it.matchesScreenshot({ selector: '#iconNeutralButton' });
+    it('displays icon and text', () => {
+      Terra.validates.element('icon and text', { selector: '#iconNeutralButton' });
     });
 
-    describe('Icon and Text Reversed', () => {
-      Terra.it.matchesScreenshot({ selector: '#iconReversedButton' });
+    it('displays icon and text reversed', () => {
+      Terra.validates.element('icon and text reversed', { selector: '#iconReversedButton' });
     });
 
-    describe('Icon only', () => {
-      Terra.it.matchesScreenshot({ selector: '#iconOnlyButton' });
+    it('displays icon only', () => {
+      Terra.validates.element('icon only', { selector: '#iconOnlyButton' });
     });
   });
 
-  describe('Compact Button', () => {
-    before(() => {
-      browser.url('/#/raw/tests/terra-button/button/compact-button');
-      browser.moveToObject('#root');
-    });
+  it('displays compact Button', () => {
+    browser.url('/raw/tests/terra-button/button/compact-button');
+    browser.moveToObject('#root');
 
-    Terra.it.validatesElement({ selector: '#compactButton' });
+    Terra.validates.element('compact', { selector: '#compactButton' });
   });
@@ -197,16 +188,19 @@
     before(() => {
-      browser.url('/#/raw/tests/terra-button/button/programmatic-focus');
+      browser.url('/raw/tests/terra-button/button/programmatic-focus');
+    });
+
+    it('displays programmatic focus on Button 2', () => {
       browser.click('#button1');
+
+      Terra.validates.element('focused Button 2');
     });
 
-    Terra.it.matchesScreenshot('Button 2 focused programmatically');
-
-    it('focuses button 1', () => {
+    it('displays programmatic focus on Button 1', () => {
       browser.keys(['Enter']);
-      Terra.validates.screenshot('Button 1 focused programmatically');
+      Terra.validates.element('focused Button 1');
     });
 
-    it('focuses button 3', () => {
+    it('displays programmatic focus on Button 2', () => {
       browser.click('#button3');
-      Terra.validates.screenshot('Button 3 clicked without focus styles');
+      Terra.validates.element('Button 3 clicked without focus styles');
     });
@@ -220,9 +214,9 @@
   describe('Dismissing Modal should focus the button', () => {
-    before(() => {
-      browser.url('/#/raw/tests/terra-button/button/button-modal-focus');
+    it('displays Button with focus', () => {
+      browser.url('/raw/tests/terra-button/button/button-modal-focus');
       browser.click('#modal-open-button');
       browser.pause(300);
+
+      Terra.validates.element('Button has focus');
     });
-
-    Terra.it.validatesElement('Button has focus');
   });
@@ -232,3 +226,3 @@
     before(() => {
-      browser.url('/#/raw/tests/terra-button/button/programmatic-disabled');
+      browser.url('/raw/tests/terra-button/button/programmatic-disabled');
     });
@@ -238,11 +232,11 @@
       browser.keys(['Tab']);
+
+      Terra.validates.element('Button has focus', { selector: '#root' });
     });
 
-    Terra.it.validatesElement('Button has focus', { selector: '#root' });
-
     it('disables button', () => {
       browser.click('#programmaticDisabledButton');
+
+      Terra.validates.element('Button is Disabled', { selector: '#root' });
     });
-
-    Terra.it.validatesElement('Button is Disabled', { selector: '#root' });
   });
@@ -252,3 +246,3 @@
     before(() => {
-      browser.url('/#/raw/tests/terra-button/button/programmatic-disable-enable');
+      browser.url('/raw/tests/terra-button/button/programmatic-disable-enable');
     });
@@ -255,0 +249,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

216406

increased by0.17%

Worsened metrics

Lines of code

2295

decreased by-0.13%

Dependency changes

• Updatedterra-icon@^3.38.0