Merge pull request #97 from lucantini/feat/cover_brand_icon_component

chore: tests brand icon component
stone-payments · Oct 30, 2018 · 978a7e7 · 978a7e7
2 parents 67ca990 + acfe699
commit 978a7e7
Showing 1 changed file with 69 additions and 13 deletions.
diff --git a/packages/sling-web-component-brand-icon/src/component/BrandIcon.test.js b/packages/sling-web-component-brand-icon/src/component/BrandIcon.test.js
@@ -1,10 +1,9 @@
-/* eslint-disable */
 import { registerComponent } from 'sling-helpers';
 import { BrandIcon } from './BrandIcon.js';
 
 registerComponent('sling-brand-icon', BrandIcon);
 
-let $brandIcon
+let $brandIcon;
 
 describe('Brand Icon', () => {
   beforeEach(() => {
@@ -17,24 +16,81 @@ describe('Brand Icon', () => {
     $brandIcon = undefined;
   });
 
-  it('Should reflect "brandid", "width" and "heigth" attribute to property ', () => {
+  it('Should reflect "brandid", "width" and "height" '
+  + 'attribute to property ', () => {
     $brandIcon.setAttribute('brandid', '2');
     $brandIcon.setAttribute('width', 50);
     $brandIcon.setAttribute('height', 50);
 
-    expect($brandIcon.brandid).to.equal(2)
-    expect($brandIcon.width).to.equal('50')
-    expect($brandIcon.height).to.equal('50')
-  })
+    expect($brandIcon.brandid).to.equal(2);
+    expect($brandIcon.width).to.equal('50');
+    expect($brandIcon.height).to.equal('50');
+  });
 
-  it('Should reflect "brandid", "width" and "heigth" property to attribute ', () => {
+  it('Should reflect "brandid", "width" and "height" '
+  + ' property to attribute ', () => {
     $brandIcon.brandid = 3;
     $brandIcon.width = 50;
     $brandIcon.height = 50;
 
-    expect($brandIcon.getAttribute('brandid')).to.equal('3')
-    expect($brandIcon.getAttribute('width')).to.equal('50')
-    expect($brandIcon.getAttribute('height')).to.equal('50')
-  })
-});
+    expect($brandIcon.getAttribute('brandid')).to.equal('3');
+    expect($brandIcon.getAttribute('width')).to.equal('50');
+    expect($brandIcon.getAttribute('height')).to.equal('50');
+  });
+
+  it('Should not set "brandid", "width" and "height" property and remove ' +
+    'the respective attribute', () => {
+    $brandIcon.brandid = false;
+    $brandIcon.width = false;
+    $brandIcon.height = false;
+
+    expect($brandIcon.getAttribute('brandid')).to.equal(null);
+    expect($brandIcon.getAttribute('width')).to.equal(null);
+    expect($brandIcon.getAttribute('height')).to.equal(null);
+  });
 
+  it('Should get the correct svg based on the id', () => {
+    // Visa
+    $brandIcon.brandid = 1;
+    expect($brandIcon.getSvg().includes('visa')).to.equal(true);
+    // Mastercard
+    $brandIcon.brandid = 2;
+    expect($brandIcon.getSvg().includes('mastercard')).to.equal(true);
+    // American Express
+    $brandIcon.brandid = 3;
+    expect($brandIcon.getSvg().includes('amex')).to.equal(true);
+    // Ticket
+    $brandIcon.brandid = 5;
+    expect($brandIcon.getSvg().includes('ticket')).to.equal(true);
+    // Sodexo
+    $brandIcon.brandid = 6;
+    expect($brandIcon.getSvg().includes('sodexo')).to.equal(true);
+    // VR
+    $brandIcon.brandid = 7;
+    expect($brandIcon.getSvg().includes('vr')).to.equal(true);
+    // Alelo
+    $brandIcon.brandid = 8;
+    expect($brandIcon.getSvg().includes('alelo')).to.equal(true);
+    // Hipercard
+    $brandIcon.brandid = 9;
+    expect($brandIcon.getSvg().includes('hiper')).to.equal(true);
+    // Senff
+    $brandIcon.brandid = 12;
+    expect($brandIcon.getSvg().includes('Page-1')).to.equal(true);
+    // Elo
+    $brandIcon.brandid = 171;
+    expect($brandIcon.getSvg().includes('elo')).to.equal(true);
+  });
+
+  describe('parseUnit', () => {
+    it('Should return the value with `px` when theres no `px` or `%`', () => {
+      expect(BrandIcon.parseUnit('50')).to.equal('50px');
+    });
+
+    it('Should return the value when the value contains ' +
+      '`%` or `px` sign', () => {
+      expect(BrandIcon.parseUnit('50px')).to.equal('50px');
+      expect(BrandIcon.parseUnit('50%')).to.equal('50%');
+    });
+  });
+});