test(extension): fix paper wallet tests after recent UI toolkit update [LW-12796] (#1866)

* test(extension): fix paper wallet tests after recent UI toolkit update

* test(extension): update unit tests for text area

* test(extension): fix tests for message signing

Author: wklos-iohk

apps/browser-extension-wallet/src/views/browser-view/features/sign-message/SignMessageDrawer.tsx

@@ -146,7 +146,7 @@ export const SignMessageDrawer: React.FC = () => {
           placeholder={t('core.signMessage.messagePlaceholder')}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
-          dataTestId="sign-message-input"
+          dataTestId="sign-message"
           rows={4}
           className={styles.customTextArea}
         />

packages/common/src/ui/components/Form/TextArea/TextArea.tsx

@@ -58,7 +58,10 @@ export const TextArea = ({
   return (
     <div className={cn(styles.wrapper, wrapperClassName)}>
       {label && (
-        <span className={cn('text-area-label', styles.label, { [styles.focused]: isFocused || localVal })}>
+        <span
+          className={cn('text-area-label', styles.label, { [styles.focused]: isFocused || localVal })}
+          data-testid={dataTestId ? `${dataTestId}-label` : 'text-area-label'}
+        >
           {label}
         </span>
       )}
@@ -72,7 +75,7 @@ export const TextArea = ({
           }
         }}
         onChange={onValChange}
-        data-testid={dataTestId}
+        data-testid={dataTestId ? `${dataTestId}-input` : 'text-area-input'}
         value={localVal}
         autoSize
         rows={props.rows ?? 1}

packages/common/src/ui/components/Form/TextArea/__tests__/TextArea.test.tsx

@@ -7,12 +7,12 @@ import { act } from 'react-dom/test-utils';
 describe('TextArea', () => {
   test('initial value is an empty string', () => {
     const { queryByTestId } = render(<TextArea dataTestId="text-area-test" />);
-    expect(queryByTestId('text-area-test')).toHaveValue('');
+    expect(queryByTestId('text-area-test-input')).toHaveValue('');
   });
   test('on input change value is updated and onChange function prop is called', () => {
     const onChange = jest.fn();
     const { queryByTestId } = render(<TextArea dataTestId="text-area-test" onChange={onChange} />);
-    const area = queryByTestId('text-area-test');
+    const area = queryByTestId('text-area-test-input');
     expect(area).toHaveValue('');
     act(() => {
       area && fireEvent.change(area, { target: { value: 'new value' } });
@@ -24,7 +24,7 @@ describe('TextArea', () => {
     const onBlur = jest.fn();
     const { queryByTestId } = render(<TextArea dataTestId="text-area-test" onBlur={onBlur} />);
     await waitFor(() => {
-      const area = queryByTestId('text-area-test');
+      const area = queryByTestId('text-area-test-input');
       area && fireEvent.blur(area);
     });
     expect(onBlur).toHaveBeenCalled();

packages/e2e-tests/src/elements/onboarding/SecureYourPaperWalletPage.ts

@@ -7,11 +7,10 @@ import clipboard from 'clipboardy';
 import testContext from '../../utils/testContext';
 
 class SecureYourPaperWalletPage extends CommonOnboardingElements {
-  // TODO: update selectors when new lace-ui-toolkit package is released
-  private PGP_KEY_NAME_INPUT = '[data-testid="pgp-public-key-reference"]';
-  private PGP_KEY_NAME_INPUT_LABEL = '//form//label';
-  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT = '[data-testid="pgp-public-key-block"]';
-  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT_LABEL = '//span[contains(@class, "text-area-label")]';
+  private PGP_KEY_NAME_INPUT = '[data-testid="pgp-public-key-reference-input"]';
+  private PGP_KEY_NAME_INPUT_LABEL = '[data-testid="pgp-public-key-reference-label"]';
+  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT = '[data-testid="pgp-public-key-block-input"]';
+  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT_LABEL = '[data-testid="pgp-public-key-block-label"]';
   private FINGERPRINT_ICON = '[data-testid="fingerprint-icon"]';
   private FINGERPRINT_TEXT = '[data-testid="fingerprint-text"]';
   private VALIDATION_ERROR = '[data-testid="validation-error"]';

packages/e2e-tests/src/elements/settings/MessageSigningAllDoneDrawer.ts

@@ -5,10 +5,10 @@ import type { ChainablePromiseElement } from 'webdriverio';
 class MessageSigningAllDoneDrawer extends CommonDrawerElements {
   private IMAGE = '[data-testid="result-message-img"]';
   private TITLE = '[data-testid="result-message-title"]';
-  private SIGNATURE = '[data-testid="sign-message-signature"]';
+  private SIGNATURE = '[data-testid="sign-message-signature-input"]';
   private SIGNATURE_LABEL = '[data-testid="result-message-signature-label"]';
   private SIGNATURE_COPY_TO_CLIPBOARD_BUTTON = '[data-testid="signature-copy-to-clipboard-button"]';
-  private KEY = '[data-testid="sign-message-key"]';
+  private KEY = '[data-testid="sign-message-key-input"]';
   private KEY_LABEL = '[data-testid="result-message-key-label"]';
   private KEY_COPY_TO_CLIPBOARD_BUTTON = '[data-testid="public-key-copy-to-clipboard-button"]';
   private SIGN_ANOTHER_MESSAGE_BUTTON = '[data-testid="sign-another-message-button"]';

packages/e2e-tests/src/elements/settings/SecureYourPaperWalletDrawer.ts

@@ -3,11 +3,10 @@ import CommonDrawerElements from '../CommonDrawerElements';
 import type { ChainablePromiseElement } from 'webdriverio';
 
 class SecureYourPaperWalletDrawer extends CommonDrawerElements {
-  // TODO: update selectors when new lace-ui-toolkit package is released
-  private PGP_KEY_NAME_INPUT = '[data-testid="pgp-public-key-reference"]';
-  private PGP_KEY_NAME_INPUT_LABEL = '//form//label';
-  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT = '[data-testid="pgp-public-key-block"]';
-  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT_LABEL = '//span[contains(@class, "text-area-label")]';
+  private PGP_KEY_NAME_INPUT = '[data-testid="pgp-public-key-reference-input"]';
+  private PGP_KEY_NAME_INPUT_LABEL = '[data-testid="pgp-public-key-reference-label"]';
+  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT = '[data-testid="pgp-public-key-block-input"]';
+  private YOUR_PUBLIC_PGP_KEY_BLOCK_INPUT_LABEL = '[data-testid="pgp-public-key-block-label"]';
   private NEXT_BUTTON = '[data-testid="next-button"]';
 
   get pgpKeyNameInput(): ChainablePromiseElement<WebdriverIO.Element> {