Merge branch 'lace-ui-toolkit-staking' of github.com:input-output-hk/…

…wallet-world into lace-ui-toolkit-staking
input-output-hk · May 25, 2023 · 48b1e87 · 48b1e87
2 parents 4c03571 + a2deb53
commit 48b1e87
Show file tree

Hide file tree

Showing 223 changed files with 5,009 additions and 1,060 deletions.
diff --git a/.github/workflows/e2e-tests-linux.yml b/.github/workflows/e2e-tests-linux.yml
@@ -76,13 +76,14 @@ jobs:
           if [ ${BROWSER} == "edge" ]; then
             ./msedgedriver -port=4444 &
           else
-            echo "Skipping start of EdgeDriver"        
+            echo "Skipping start of EdgeDriver"
           fi
       - name: Execute E2E tests
         id: e2e-tests
         working-directory: ./packages/e2e-tests
         env:
           WALLET_1_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
+          TEST_DAPP_URL: ${{ secrets.TEST_DAPP_URL }}
           ENV: ${{ env.NETWORK }}
         run: |
           if [ "$TAGS" == "empty" ]; then

diff --git a/.github/workflows/e2e-tests-win.yml b/.github/workflows/e2e-tests-win.yml
@@ -25,7 +25,7 @@ on:
         options:
           - preprod
           - mainnet
-          
+
 run-name: "E2E | os: Windows | browser: ${{ github.event.inputs.browser || 'chrome' }} | tags: ${{ github.event.inputs.tags || 'empty' }} | network: ${{ github.event.inputs.network }} | #${{ github.run_number }}"
 
 env:
@@ -107,13 +107,14 @@ jobs:
           if [ ${BROWSER} == "edge" ]; then
             msedgedriver.exe -port=4444 &
           else
-            echo "Skipping start of EdgeDriver"        
+            echo "Skipping start of EdgeDriver"
           fi
       - name: Execute E2E tests
         working-directory: ./packages/e2e-tests
         id: e2e-tests
         env:
           WALLET_1_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
+          TEST_DAPP_URL: ${{ secrets.TEST_DAPP_URL }}
           ENV: ${{ env.NETWORK }}
         run: |
           if [ "$TAGS" == "empty" ]; then

diff --git a/.github/workflows/smoke-tests.yml b/.github/workflows/smoke-tests.yml
@@ -54,6 +54,7 @@ jobs:
         working-directory: ./packages/e2e-tests
         env:
           WALLET_1_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
+          TEST_DAPP_URL: ${{ secrets.TEST_DAPP_URL }}
         run: ./node_modules/.bin/wdio run wdio.conf.${BROWSER}.ts --cucumberOpts.tagExpression="@Smoke and not @Pending"
       - name: Create allure properties
         if: always()

diff --git a/.github/workflows/ui-toolkit-chromatic.yml b/.github/workflows/ui-toolkit-chromatic.yml
@@ -47,7 +47,7 @@ jobs:
 
       - name: 👩‍🔬 Tests
         working-directory: ./packages/ui
-        run: yarn test
+        run: yarn test-storybook:ci
 
       - name: 🌍 Publish to Chromatic
         if: github.ref != 'refs/heads/develop'

diff --git a/apps/browser-extension-wallet/.gitignore b/apps/browser-extension-wallet/.gitignore
@@ -5,4 +5,5 @@ dist
 node_modules
 
 # Do not ignore the following
-!src/typings/*
+!src/typings/*
+!test/types/*
diff --git a/apps/browser-extension-wallet/src/api/__tests__/block-transformer.test.ts b/apps/browser-extension-wallet/src/api/__tests__/block-transformer.test.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { blockTransformer } from '../transformers';
-import { blockMock, formatBlockMock } from '../../utils/test-helpers';
+import { blockMock, formatBlockMock } from '../../utils/mocks/test-helpers';
 
 describe('Testing blockTransformer function', () => {
   test('should format block information', () => {

diff --git a/apps/browser-extension-wallet/src/api/__tests__/input-output-transformer.test.ts b/apps/browser-extension-wallet/src/api/__tests__/input-output-transformer.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-magic-numbers */
 import '@testing-library/jest-dom';
 import { inputOutputTransformer } from '../transformers';
-import { mockAsset, mockPrices } from '../../utils/test-helpers';
+import { mockAsset, mockPrices } from '../../utils/mocks/test-helpers';
 import { Wallet } from '@light-wallet/cardano';
 import { defaultCurrency } from '@providers/currency/constants';
 

diff --git a/apps/browser-extension-wallet/src/api/__tests__/token-transformer.test.ts b/apps/browser-extension-wallet/src/api/__tests__/token-transformer.test.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { tokenTransformer } from '../transformers';
-import { mockAsset, mockPrices } from '../../utils/test-helpers';
+import { mockAsset, mockPrices } from '../../utils/mocks/test-helpers';
 import { Wallet } from '@light-wallet/cardano';
 import { defaultCurrency } from '@providers/currency/constants';
 

diff --git a/apps/browser-extension-wallet/src/api/__tests__/transform-token-map.test.ts b/apps/browser-extension-wallet/src/api/__tests__/transform-token-map.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-magic-numbers */
 import '@testing-library/jest-dom';
 import { transformTokenMap } from '../transformers';
-import { mockAsset, mockPrices } from '../../utils/test-helpers';
+import { mockAsset, mockPrices } from '../../utils/mocks/test-helpers';
 import { Wallet } from '@light-wallet/cardano';
 import { defaultCurrency } from '@providers/currency/constants';
 

diff --git a/apps/browser-extension-wallet/src/components/BackButton/BackButton.tsx b/apps/browser-extension-wallet/src/components/BackButton/BackButton.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Button } from '@light-wallet/common';
 import styles from './BackButton.module.scss';
-import { RECEIVE_TOOLBAR } from '../../utils/test-ids';
 import arrowBack from '../../assets/icons/back-icon.svg';
 
 export interface BackButtonProps {
@@ -15,7 +14,7 @@ export const BackButton = ({
   onBackClick,
   dataTestid = 'back-btn'
 }: BackButtonProps): React.ReactElement => (
-  <div data-testid={RECEIVE_TOOLBAR} className={styles.BackButtonContainer}>
+  <div data-testid="receive-toolbar" className={styles.BackButtonContainer}>
     <Button data-testid={dataTestid} onClick={onBackClick}>
       {label}
       <img className={styles.icon} src={arrowBack} />

diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss
@@ -1,16 +1,17 @@
 @import '../../../../../packages/common/src/ui/styles/theme.scss';
 
-.avatarBtn[data-color='secondary'] {
+.avatarBtn {
   min-height: size_unit(6) !important;
   min-width: 0 !important;
   padding: 0 !important;
   border-radius: 100px !important;
   border-width: 2px !important;
+  background-color: var(--bg-color-body, #ffffff) !important;
 
   &.open {
-    background: var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey, #333333));
+    background: var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey, #333333)) !important;
     &:hover {
-      background: var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey, #333333));
+      background: var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey, #333333)) !important;
     }
   }
 

diff --git a/apps/browser-extension-wallet/src/components/Layout/ContentLayout.tsx b/apps/browser-extension-wallet/src/components/Layout/ContentLayout.tsx
@@ -5,7 +5,6 @@ import cn from 'classnames';
 import { useHasScrollBar } from '@light-wallet/common';
 import { walletRoutePaths } from '@routes/wallet-paths';
 import { SectionTitle, SectionTitleProps } from './SectionTitle';
-import { CONTENT_LAYOUT, CONTENT_LAYOUT_SPINNER } from '../../utils/test-ids';
 import { Credit } from '@components/Credit';
 import { COINGECKO_URL } from '@utils/constants';
 import styles from './ContentLayout.module.scss';
@@ -62,7 +61,7 @@ export const ContentLayout = ({
       )}
       {isLoading ? (
         <div className={styles.spinnerContainer}>
-          <Skeleton data-testid={CONTENT_LAYOUT_SPINNER} />
+          <Skeleton data-testid="content-layout-spinner" />
         </div>
       ) : (
         <main
@@ -80,7 +79,7 @@ export const ContentLayout = ({
       <div
         ref={scrollabelContainer}
         id={id}
-        data-testid={CONTENT_LAYOUT}
+        data-testid="content-layout"
         className={cn(styles.content, { [styles.white]: isMvpStyledRoute })}
       >
         {content}

diff --git a/apps/browser-extension-wallet/src/components/Layout/SectionTitle.tsx b/apps/browser-extension-wallet/src/components/Layout/SectionTitle.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classnames from 'classnames';
-import { SECTION_TITLE_BTN_ICON, SECTION_TITLE, SECTION_TITLE_COUNTER } from '../../utils/test-ids';
 import styles from './SectionTitle.module.scss';
 import { Button, Typography } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
@@ -31,18 +30,18 @@ export const SectionTitle = ({
   >
     {withIcon && (
       <Button
-        data-testid={SECTION_TITLE_BTN_ICON}
+        data-testid="section-title-btn-icon"
         onClick={handleIconClick}
         shape="circle"
         icon={<ArrowLeftOutlined />}
       />
     )}
     <div className={styles.sectionTitle}>
-      <Text data-testid={rest['data-testid'] || SECTION_TITLE} className={styles.title}>
+      <Text data-testid={rest['data-testid'] || 'section-title'} className={styles.title}>
         {title}
       </Text>
       {sideText && (
-        <Text data-testid={SECTION_TITLE_COUNTER} className={styles.sideText}>
+        <Text data-testid="section-title-counter" className={styles.sideText}>
           {' '}
           {sideText}
         </Text>

diff --git a/apps/browser-extension-wallet/src/components/Layout/__tests__/ContentLayout.test.tsx b/apps/browser-extension-wallet/src/components/Layout/__tests__/ContentLayout.test.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { render, within, queryByText, fireEvent } from '@testing-library/react';
 import { ContentLayout } from '../ContentLayout';
-import { CONTENT_LAYOUT, SECTION_TITLE, SECTION_TITLE_BTN_ICON } from '../../../utils/test-ids';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
 import { ReactElement } from 'react';
@@ -42,7 +41,7 @@ describe('Testing ContentLayout component', () => {
       </WrappedContentLayout>
     );
 
-    await findByTestId(CONTENT_LAYOUT);
+    await findByTestId('content-layout');
   });
 
   test('should render title', async () => {
@@ -54,8 +53,8 @@ describe('Testing ContentLayout component', () => {
       </WrappedContentLayout>
     );
 
-    const content = await findByTestId(CONTENT_LAYOUT);
-    const title = await within(content).findByTestId(SECTION_TITLE);
+    const content = await findByTestId('content-layout');
+    const title = await within(content).findByTestId('section-title');
 
     expect(title).toHaveTextContent(testTitle);
   });
@@ -69,8 +68,8 @@ describe('Testing ContentLayout component', () => {
       </WrappedContentLayout>
     );
 
-    const content = await findByTestId(CONTENT_LAYOUT);
-    const icon = await within(content).findByTestId(SECTION_TITLE_BTN_ICON);
+    const content = await findByTestId('content-layout');
+    const icon = await within(content).findByTestId('section-title-btn-icon');
 
     expect(icon).toBeInTheDocument();
   });
@@ -84,7 +83,7 @@ describe('Testing ContentLayout component', () => {
       </WrappedContentLayout>
     );
 
-    const content = await findByTestId(CONTENT_LAYOUT);
+    const content = await findByTestId('content-layout');
 
     expect(queryByText(content, 'content')).not.toBeInTheDocument();
   });
@@ -98,8 +97,8 @@ describe('Testing ContentLayout component', () => {
       </WrappedContentLayout>
     );
 
-    const content = await findByTestId(CONTENT_LAYOUT);
-    const btn = await within(content).findByTestId(SECTION_TITLE_BTN_ICON);
+    const content = await findByTestId('content-layout');
+    const btn = await within(content).findByTestId('section-title-btn-icon');
     fireEvent.click(btn);
 
     expect(mockBackAction).toHaveBeenCalled();

diff --git a/apps/browser-extension-wallet/src/features/dapp/components/Connect.tsx b/apps/browser-extension-wallet/src/features/dapp/components/Connect.tsx
@@ -14,6 +14,7 @@ import { UserPromptService } from '@lib/scripts/background/services/dappService'
 import { of } from 'rxjs';
 import ShieldExclamation from '@assets/icons/shield-exclamation.svg';
 import { Banner } from '@components/Banner';
+
 const DAPP_TOAST_DURATION = 50;
 
 const closeWindow = () => window.close();
@@ -51,7 +52,11 @@ export const Connect = (): React.ReactElement => {
   const { logo, url, name } = useSearchParams(['logo', 'url', 'name']);
 
   return (
-    <Layout pageClassname={styles.spaceBetween} title={t(sectionTitle[DAPP_VIEWS.CONNECT])}>
+    <Layout
+      pageClassname={styles.spaceBetween}
+      title={t(sectionTitle[DAPP_VIEWS.CONNECT])}
+      data-testid="connect-layout"
+    >
       <div className={styles.container}>
         <AuthorizeDapp
           dappInfo={{ logo, name, url }}
@@ -66,10 +71,19 @@ export const Connect = (): React.ReactElement => {
         />
       </div>
       <div className={styles.footer}>
-        <Button className={styles.footerBtn} onClick={() => setModalVisible(true)}>
+        <Button
+          className={styles.footerBtn}
+          data-testid="connect-authorize-button"
+          onClick={() => setModalVisible(true)}
+        >
           {t('dapp.connect.btn.accept')}
         </Button>
-        <Button data-test-id="deny-dapp" className={styles.footerBtn} color="secondary" onClick={closeWindow}>
+        <Button
+          className={styles.footerBtn}
+          data-testid="connect-cancel-button"
+          color="secondary"
+          onClick={closeWindow}
+        >
           {t('dapp.connect.btn.cancel')}
         </Button>
       </div>
@@ -83,14 +97,23 @@ export const Connect = (): React.ReactElement => {
         // eslint-disable-next-line unicorn/no-null
         footer={null}
       >
-        <div className={styles.modalContent}>
-          <div className={styles.modalSubheading}>{t('dapp.connect.modal.header')}</div>
-          <div className={styles.modalDescription}>{t('dapp.connect.modal.description')}</div>
+        <div className={styles.modalContent} data-testid="connect-modal-container">
+          <div className={styles.modalSubheading} data-testid="connect-modal-title">
+            {t('dapp.connect.modal.header')}
+          </div>
+          <div className={styles.modalDescription} data-testid="connect-modal-description">
+            {t('dapp.connect.modal.description')}
+          </div>
           <div className={styles.modalActions}>
-            <Button block data-test-id="allow-dapp" onClick={() => authorize('allow', url)}>
+            <Button block data-testid="connect-modal-accept-always" onClick={() => authorize('allow', url)}>
               {t('dapp.connect.modal.allowAlways')}
             </Button>
-            <Button block data-test-id="allow-dapp-once" onClick={() => authorize('just-once', url)} color="secondary">
+            <Button
+              block
+              data-testid="connect-modal-accept-once"
+              onClick={() => authorize('just-once', url)}
+              color="secondary"
+            >
               {t('dapp.connect.modal.allowOnce')}
             </Button>
           </div>

diff --git a/apps/browser-extension-wallet/src/features/dapp/components/Layout.tsx b/apps/browser-extension-wallet/src/features/dapp/components/Layout.tsx
@@ -11,7 +11,9 @@ type layoutProps = {
 
 export const Layout = ({ title, children, layoutClassname, pageClassname }: layoutProps): React.ReactElement => (
   <div className={classnames([styles.layout, layoutClassname])}>
-    <div className={styles.title}>{title}</div>
+    <div data-testid="layout-title" className={styles.title}>
+      {title}
+    </div>
     <div className={classnames([styles.page, pageClassname])}>{children}</div>
   </div>
 );
diff --git a/apps/browser-extension-wallet/src/features/delegation/api/__tests__/transformers.test.ts b/apps/browser-extension-wallet/src/features/delegation/api/__tests__/transformers.test.ts
@@ -1,5 +1,5 @@
 import { stakePoolTransformer } from '../transformers';
-import { cardanoStakePoolMock, transformedStakePool } from '../../../../utils/test-helpers';
+import { cardanoStakePoolMock, transformedStakePool } from '../../../../utils/mocks/test-helpers';
 import { cardanoCoin } from '@src/utils/constants';
 
 describe('Testing transformers', () => {

diff --git a/...r-extension-wallet/src/features/delegation/stores/__tests__/createDelegationStore.test.ts b/...r-extension-wallet/src/features/delegation/stores/__tests__/createDelegationStore.test.ts
@@ -4,7 +4,7 @@ import {
   cardanoStakePoolMock,
   TransactionBuildMock,
   cardanoStakePoolSelectedDetails
-} from '../../../../utils/test-helpers';
+} from '../../../../utils/mocks/test-helpers';
 import { DelegationStore } from '../../types';
 
 describe('Testing useDelegationStore hook', () => {

diff --git a/apps/browser-extension-wallet/src/features/receive-info/components/ReceiveInfo.tsx b/apps/browser-extension-wallet/src/features/receive-info/components/ReceiveInfo.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { InfoWallet } from '@light-wallet/core';
 import { Drawer, DrawerHeader, DrawerNavigation } from '@light-wallet/common';
 import { useTranslation } from 'react-i18next';
-import { RECEIVE_ADDRESS_QR } from '../../../utils/test-ids';
 import styles from './ReceiveInfo.module.scss';
 import { WalletInfo } from '@src/types';
 import { useTheme } from '@providers/ThemeProvider';
@@ -39,7 +38,7 @@ export const ReceiveInfo = ({ wallet, goBack }: ReceiveInfoProps): React.ReactEl
       navigation={<DrawerNavigation onCloseIconClick={handleOnClose} />}
       popupView
     >
-      <div className={styles.container} data-testid={RECEIVE_ADDRESS_QR}>
+      <div className={styles.container} data-testid="receive-address-qr">
         <InfoWallet
           getQRCodeOptions={() => getQRCodeOptions(theme, QR_SIZE)}
           isPopupView

diff --git a/...wser-extension-wallet/src/features/receive-info/components/__tests__/ReceiveInfo.test.tsx b/...wser-extension-wallet/src/features/receive-info/components/__tests__/ReceiveInfo.test.tsx
@@ -5,8 +5,7 @@ import { render } from '@testing-library/react';
 import { ReceiveInfo, ReceiveInfoProps } from '../ReceiveInfo';
 import '@testing-library/jest-dom';
 import i18n from '../../../../lib/i18n';
-import { RECEIVE_ADDRESS_QR } from '../../../../utils/test-ids';
-import { mockWalletInfoTestnet } from '@src/utils/test-helpers';
+import { mockWalletInfoTestnet } from '@src/utils/mocks/test-helpers';
 import { ThemeProvider } from '@providers/ThemeProvider';
 
 class ResizeObserver {
@@ -40,7 +39,7 @@ describe('Testing ReceiveInfo component', () => {
       </I18nextProvider>
     );
     const copyButton = await findByTestId('copy-address-btn');
-    const addressQR = await findByTestId(RECEIVE_ADDRESS_QR);
+    const addressQR = await findByTestId('receive-address-qr');
 
     expect(addressQR).toBeInTheDocument();
     expect(copyButton).toBeInTheDocument();

diff --git a/apps/browser-extension-wallet/src/features/send/__tests__/selectors.test.ts b/apps/browser-extension-wallet/src/features/send/__tests__/selectors.test.ts
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { getSendStoreContext } from '../../../utils/test-helpers';
+import { getSendStoreContext } from '../../../utils/mocks/test-helpers';
 import { cancelModalSelector, sendTransactionSelector } from '../selectors';
 import { useSendStore } from '../stores';