Merge remote-tracking branch 'origin/main' into WT-2017

immutable · Feb 14, 2024 · 921a998 · 921a998
2 parents 9356110 + b143bc1
commit 921a998
Show file tree

Hide file tree

Showing 13 changed files with 490 additions and 458 deletions.
diff --git a/packages/checkout/widgets-lib/cypress/support/commands.ts b/packages/checkout/widgets-lib/cypress/support/commands.ts
@@ -8,30 +8,19 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+
+import { useTranslation } from 'react-i18next';
+import * as ReactI18next from 'react-i18next';
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      stubI18n: typeof useTranslation;
+    }
+  }
+}
+
+Cypress.Commands.add('stubI18n', () => {
+  const t = (key: string) => key; // Simplistic translation function
+  cy.stub(ReactI18next, 'useTranslation').returns({ t });
+});
diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx
@@ -11,11 +11,11 @@ describe('FeesBreakdown', () => {
     cy.viewport('ipad-2');
   });
 
-  it('should the total fees amount, even if there are no sub fees', () => {
+  it('should show the total fees amount, even if there are no sub fees', () => {
     mount(
       <ViewContextTestComponent>
         <SimpleLayout>
-          <FeesBreakdown fees={[]} totalAmount="1.0" totalFiatAmount="Approx USD $0.70" tokenSymbol="IMX">
+          <FeesBreakdown fees={[]} totalAmount="1.0" totalFiatAmount="0.70" tokenSymbol="IMX">
             <Button testId="fee-button">
               Fees
             </Button>
@@ -25,11 +25,49 @@ describe('FeesBreakdown', () => {
     );
     cySmartGet('fee-button').click();
     cySmartGet('Drawer__container__header').should('be.visible');
-    cySmartGet('Drawer__container__header').should('have.text', 'Fee breakdown');
+    cySmartGet('Drawer__container__header').should('have.text', 'Fees');
     cySmartGet('fees-breakdown-content').should('be.visible');
-    cySmartGet('fee-item-fees-total').should('be.visible');
-    cySmartGet('fees-total__price').should('have.text', 'IMX 1');
-    cySmartGet('fees-total__fiatAmount').should('have.text', 'Approx USD $0.70');
+    cySmartGet('fee-item-total-fees').should('be.visible');
+    cySmartGet('total-fees__price').should('have.text', 'IMX 1');
+    cySmartGet('total-fees__fiatAmount').should('have.text', '~ USD $0.70');
+  });
+
+  it('should not include totals if only fees are provided', () => {
+    const fees = [
+      {
+        label: 'Gas fee',
+        fiatAmount: 'Approx USD $1234.0',
+        amount: '0.12345',
+      },
+      {
+        label: 'Maker fee',
+        fiatAmount: 'Approx USD $5544.0',
+        amount: '1234.444',
+      },
+    ];
+    mount(
+      <ViewContextTestComponent>
+        <SimpleLayout>
+          <FeesBreakdown fees={fees} tokenSymbol="IMX">
+            <Button testId="fee-button">
+              Fees
+            </Button>
+          </FeesBreakdown>
+        </SimpleLayout>
+      </ViewContextTestComponent>,
+    );
+    cySmartGet('fee-button').click();
+    cySmartGet('fees-breakdown-content').should('be.visible');
+
+    cySmartGet('fee-item-gas-fee').should('be.visible');
+    cySmartGet('gas-fee__price').should('have.text', 'IMX 0.12345');
+    cySmartGet('gas-fee__fiatAmount').should('have.text', 'Approx USD $1,234.0');
+
+    cySmartGet('fee-item-maker-fee').should('be.visible');
+    cySmartGet('maker-fee__price').should('have.text', 'IMX 1,234.444');
+    cySmartGet('maker-fee__fiatAmount').should('have.text', 'Approx USD $5,544.0');
+
+    cySmartGet('fee-item-total-fees').should('not.exist');
   });
 
   it('should enumerate the provided fees', () => {
@@ -60,11 +98,11 @@ describe('FeesBreakdown', () => {
     cySmartGet('fees-breakdown-content').should('be.visible');
 
     cySmartGet('fee-item-gas-fee').should('be.visible');
-    cySmartGet('gas-fee__price').should('have.text', 'IMX 0.123450'); // TODO: This should not be formatting with a zero on the end if only 5 decimal places
+    cySmartGet('gas-fee__price').should('have.text', 'IMX 0.12345');
     cySmartGet('gas-fee__fiatAmount').should('have.text', 'Approx USD $1,234.0');
 
     cySmartGet('fee-item-maker-fee').should('be.visible');
-    cySmartGet('maker-fee__price').should('have.text', 'IMX 1,234.44');
+    cySmartGet('maker-fee__price').should('have.text', 'IMX 1,234.444');
     cySmartGet('maker-fee__fiatAmount').should('have.text', 'Approx USD $5,544.0');
   });
 });
diff --git a/packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx b/packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx
@@ -1,13 +1,11 @@
 import { mount } from 'cypress/react18';
 import { WidgetTheme } from '@imtbl/checkout-sdk';
 import { ViewContextTestComponent } from 'context/view-context/test-components/ViewContextTestComponent';
-import { useTranslation } from 'react-i18next';
 import { SimpleLayout } from '../SimpleLayout/SimpleLayout';
 import { cySmartGet } from '../../lib/testUtils';
 import { QuickswapFooter } from './QuickswapFooter';
 
 describe('Quickswap Footer', () => {
-  const { t } = useTranslation();
   it('should show the Quickswap logo', () => {
     mount(
       <ViewContextTestComponent theme={WidgetTheme.LIGHT}>
@@ -29,7 +27,8 @@ describe('Quickswap Footer', () => {
       'quickswap-footer-disclaimer-text',
     ).should(
       'have.text',
-      t('footers.quickswapFooter.disclaimerText'),
+      // eslint-disable-next-line max-len
+      'Quickswap is a third party app. Immutable neither builds, owns, operates or deploys Quickswap. For further info, refer to Quickswap’s website.',
     );
   });
 });
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx
@@ -28,7 +28,7 @@ describe('SelectForm', () => {
         />
       </ViewContextTestComponent>,
     );
-    cySmartGet('select-form-test-select__target__controlledLabel').should('have.text', 'IMX');
+    cySmartGet('select-form-test-select__target__label').should('have.text', 'IMX');
   });
 
   it('should show options in options list', () => {
@@ -80,7 +80,7 @@ describe('SelectForm', () => {
         />
       </ViewContextTestComponent>,
     );
-    cySmartGet('select-form-test-select__target__defaultLabel').should('have.text', 'Select coin');
+    cySmartGet('select-form-test-select__target__label').should('have.text', 'Select coin');
   });
 
   it('should show select coin when options is empty', () => {
@@ -94,7 +94,7 @@ describe('SelectForm', () => {
         />
       </ViewContextTestComponent>,
     );
-    cySmartGet('select-form-test-select__target__defaultLabel').should('have.text', 'Select coin');
+    cySmartGet('select-form-test-select__target__label').should('have.text', 'Select coin');
   });
 
   it('should show select coin when selected option not in options list', () => {
@@ -109,6 +109,6 @@ describe('SelectForm', () => {
         />
       </ViewContextTestComponent>,
     );
-    cySmartGet('select-form-test-select__target__defaultLabel').should('have.text', 'Select coin');
+    cySmartGet('select-form-test-select__target__label').should('have.text', 'Select coin');
   });
 });