Card - Updating position of available brands (#1539)

* feat: compact view as default plus fixed tests * fix: e2e test * fix: reset yarn lock * feat: fix unit test
Adyen · Mar 21, 2022 · 75ca18b · 75ca18b
1 parent d3a0d4b
commit 75ca18b
Show file tree

Hide file tree

Showing 16 changed files with 45 additions and 28 deletions.
diff --git a/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js b/packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js
@@ -1,6 +1,7 @@
 import DropinPage from '../../_models/Dropin.page';
 import CardComponentPage from '../../_models/CardComponent.page';
 import { BCMC_DUAL_BRANDED_VISA, DUAL_BRANDED_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../utils/constants';
+import { Selector } from 'testcafe';
 
 const dropinPage = new DropinPage({
     components: {
@@ -18,17 +19,17 @@ test('#1 Check Bancontact comp is correctly presented at startup', async t => {
     // Wait for field to appear in DOM
     await t.wait(1000);
 
-    await t.expect(dropinPage.brandsImages.count).eql(3);
+    const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
+    const images = brandsInsidePaymentMethod.find('img');
 
     // Expect 3 card brand logos to be displayed (not concerned about order)
+    await t.expect(images.count).eql(3);
     await t
-        .expect(dropinPage.brandsHolder.exists)
+        .expect(images.nth(0).withAttribute('alt', 'bcmc').exists)
         .ok()
-        .expect(dropinPage.brandsImages.withAttribute('alt', 'bcmc').exists)
+        .expect(images.nth(1).withAttribute('alt', 'visa').exists)
         .ok()
-        .expect(dropinPage.brandsImages.withAttribute('alt', 'visa').exists)
-        .ok()
-        .expect(dropinPage.brandsImages.withAttribute('alt', 'maestro').exists)
+        .expect(images.nth(2).withAttribute('alt', 'maestro').exists)
         .ok();
 
     // Hidden cvc field

diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.clientScripts.js
@@ -1,4 +1,3 @@
 window.cardConfig = {
-    brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'],
-    showBrandsUnderCardNumber: true
+    brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc']
 };
diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js
@@ -0,0 +1,4 @@
+window.cardConfig = {
+    brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'dineXrs', 'jcb', 'synchrony_cbcc'],
+    showBrandsUnderCardNumber: false
+};
diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js
@@ -8,12 +8,12 @@ fixture`Cards - Available brands on Card Component`.page(CARDS_URL).beforeEach(a
     cardComponent = new CardComponent('.card-field');
 });
 
-test('Available brands show underneath Card Number field if property `showBrandsUnderCardNumber` is set', async t => {
+test('Available brands dont show underneath Card Number field if property `showBrandsUnderCardNumber` is set to false', async t => {
     const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
-    await t.expect(brandsInsidePaymentMethod.find('img').count).eql(10);
-}).clientScripts('./availableBrands.clientScripts.js');
+    await t.expect(brandsInsidePaymentMethod.find('img').count).eql(0);
+}).clientScripts('./availableBrands.disabled.clientScripts.js');
 
-test('Available brands dont show underneath Card Number field by default', async t => {
+test('Available brands show underneath Card Number field by default', async t => {
     const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
-    await t.expect(brandsInsidePaymentMethod.find('img').count).eql(0);
-});
+    await t.expect(brandsInsidePaymentMethod.find('img').count).eql(10);
+}).clientScripts('./availableBrands.clientScripts.js');
diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.clientScripts.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.clientScripts.js
@@ -1,7 +1,7 @@
 window.mainConfiguration = {
     paymentMethodsConfiguration: {
         card: {
-            showBrandsUnderCardNumber: true
+            showBrandsUnderCardNumber: false
         }
     }
 };
diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.compactView.test.js
@@ -8,7 +8,6 @@ let dropinPage = null;
 fixture`Cards - Available Brands (Compact view)`
     .page(DROPIN_SESSIONS_URL)
     .requestHooks([mock])
-    .clientScripts('availableBrands.clientScripts.js')
     .beforeEach(() => {
         dropinPage = new DropinPage({});
     });

diff --git a/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js b/packages/e2e/tests/cards/availableBrands/dropin/availableBrands.defaultView.test.js
@@ -8,6 +8,7 @@ let dropinPage = null;
 fixture`Cards - Available Brands (Default view)`
     .page(DROPIN_SESSIONS_URL)
     .requestHooks([mock])
+    .clientScripts('./availableBrands.clientScripts.js')
     .beforeEach(() => {
         dropinPage = new DropinPage({});
     });

diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
@@ -15,7 +15,7 @@ export class CardElement extends UIElement<CardElementProps> {
 
     protected static defaultProps = {
         onBinLookup: () => {},
-        showBrandsUnderCardNumber: false,
+        showBrandsUnderCardNumber: true,
         SRConfig: {}
     };
 

diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx
@@ -53,8 +53,8 @@ describe('CardInput', () => {
 });
 
 describe('CardInput - Brands beneath Card Number field', () => {
-    test('should not render brands if property `showBrandsUnderCardNumber` isnt set', () => {
-        const wrapper = mount(<CardInput i18n={i18n} />);
+    test('should not render brands if property `showBrandsUnderCardNumber` is set to false', () => {
+        const wrapper = mount(<CardInput i18n={i18n} showBrandsUnderCardNumber={false} />);
         expect(wrapper.find('span.adyen-checkout__card__brands').exists()).toBeFalsy();
     });
 
@@ -68,14 +68,24 @@ describe('CardInput - Brands beneath Card Number field', () => {
         expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0);
     });
 
+    test('should render brands if property `showBrandsUnderCardNumber` is not set', () => {
+        const brandsIcons = [
+            { name: 'visa', icon: 'visa.png' },
+            { name: 'mc', icon: 'mc.png' }
+        ];
+        const wrapper = mount(<CardInput i18n={i18n} brandsIcons={brandsIcons} />);
+        expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper')).toHaveLength(2);
+        expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0);
+    });
+
     test('should disable the brands icons that are not detected', () => {
         const detectedBrand = 'visa';
         const brandsIcons = [
             { name: 'visa', icon: 'visa.png' },
             { name: 'mc', icon: 'mc.png' },
             { name: 'amex', icon: 'amex.png' }
         ];
-        const wrapper = mount(<CardInput i18n={i18n} brand={detectedBrand} showBrandsUnderCardNumber brandsIcons={brandsIcons} />);
+        const wrapper = mount(<CardInput i18n={i18n} brand={detectedBrand} brandsIcons={brandsIcons} />);
         const brands = wrapper.find('.adyen-checkout__card__brands__brand-wrapper');
 
         expect(brands.at(0).is('.adyen-checkout__card__brands__brand-wrapper--disabled')).toBeFalsy();

diff --git a/.../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.scss b/.../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.scss
@@ -5,7 +5,7 @@
   flex-basis: auto;
   flex-shrink: 1;
   flex-wrap: wrap;
-  height: 16px;
+  gap: 4px;
   margin-top: -8px;
   margin-bottom: 16px;
 }
@@ -22,7 +22,6 @@
 .adyen-checkout__card__brands__brand-wrapper {
   display: inline-block;
   height: 16px;
-  margin-right: 4px;
   transition: opacity .2s ease-out;
   width: 24px;
   position: relative;

diff --git a/...b/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx b/...b/src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx
@@ -12,7 +12,7 @@ interface PaymentMethodBrandsProps {
 }
 
 const AvailableBrands = ({ brands, activeBrand }: PaymentMethodBrandsProps) => {
-    if (!brands.length) {
+    if (!brands?.length) {
         return null;
     }
 

diff --git a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts
@@ -11,6 +11,7 @@ export default {
     enableStoreDetails: false,
     hasCVC: true,
     showBrandIcon: true,
+    showBrandsUnderCardNumber: true,
     positionHolderNameOnTop: false,
     billingAddressRequired: false,
     billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],

diff --git a/...mponents/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx b/...mponents/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx
@@ -19,8 +19,13 @@ describe('PaymentMethodBrands', () => {
         expect(wrapper.find(CompactView)).toHaveLength(1);
     });
 
-    test('should render all brands if compact view is not set', () => {
+    test('should render compact view if prop is not', () => {
         const wrapper = mount(<PaymentMethodBrands brands={brands} isPaymentMethodSelected />);
+        expect(wrapper.find(CompactView)).toHaveLength(1);
+    });
+
+    test('should not render compact view if prop is set to false', () => {
+        const wrapper = mount(<PaymentMethodBrands brands={brands} isPaymentMethodSelected isCompactView={false} />);
         expect(wrapper.find(PaymentMethodIcon)).toHaveLength(6);
     });
 });
diff --git a/...rc/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx b/...rc/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx
@@ -10,7 +10,7 @@ interface PaymentMethodBrandsProps {
     isCompactView?: boolean;
 }
 
-const PaymentMethodBrands = ({ activeBrand, brands, isPaymentMethodSelected, isCompactView = false }: PaymentMethodBrandsProps) => {
+const PaymentMethodBrands = ({ activeBrand, brands, isPaymentMethodSelected, isCompactView = true }: PaymentMethodBrandsProps) => {
     if (isCompactView) {
         return <CompactView brands={brands} isPaymentMethodSelected={isPaymentMethodSelected} />;
     }

diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss
@@ -58,6 +58,7 @@
     $payment-button-padding: $spacing-xsmall;
     padding: $spacing-medium - $payment-button-padding;
     padding-left: $spacing-xxlarge - $payment-button-padding;
+    padding-right: $spacing-medium;
     position: relative;
     transition: background 0.1s ease-out;
     width: 100%;

diff --git a/packages/playground/src/pages/Dropin/session.js b/packages/playground/src/pages/Dropin/session.js
@@ -31,9 +31,6 @@ export async function initSession() {
         paymentMethodsConfiguration: {
             paywithgoogle: {
                 buttonType: 'plain'
-            },
-            card: {
-                showBrandsUnderCardNumber: true
             }
         }
     });