[DDW-839] Discreet mode - automated tests (#2756)

* [DDW-839] Discreet mode integration tests

* [DDW-839] Remove aria-query from yarnlock

* [DDW-839] Remove istanbul from yarnlock

* [DDW-839] Tests for public api

* [DDW-839] Run lockfile:fix

* [DDW-839] Update changelog

Author: renanvalentin

CHANGELOG.md

@@ -25,7 +25,7 @@
 
 ### Features
 
-- Implemented "discreet mode" ([PR 2723](https://github.com/input-output-hk/daedalus/pull/2723), [PR 2724](https://github.com/input-output-hk/daedalus/pull/2724), [PR 2725](https://github.com/input-output-hk/daedalus/pull/2725), [PR 2742](https://github.com/input-output-hk/daedalus/pull/2742), [PR 2740](https://github.com/input-output-hk/daedalus/pull/2740))
+- Implemented "discreet mode" ([PR 2723](https://github.com/input-output-hk/daedalus/pull/2723), [PR 2724](https://github.com/input-output-hk/daedalus/pull/2724), [PR 2725](https://github.com/input-output-hk/daedalus/pull/2725), [PR 2742](https://github.com/input-output-hk/daedalus/pull/2742), [PR 2740](https://github.com/input-output-hk/daedalus/pull/2740), [PR 2756](https://github.com/input-output-hk/daedalus/pull/2756))
 - Implemented "Catalyst Fund7" voting registration changes ([PR 2732](https://github.com/input-output-hk/daedalus/pull/2732))
 - Added "Over-saturation" warning in the delegation wizard ([PR 2733](https://github.com/input-output-hk/daedalus/pull/2733), [PR 2738](https://github.com/input-output-hk/daedalus/pull/2738))
 - Added Catalyst footer links ([PR 2721](https://github.com/input-output-hk/daedalus/pull/2721))

jest.config.js

@@ -175,7 +175,11 @@ module.exports = {
   // timers: "real",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.svg$': 'jest-svg-transformer',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

package.json

@@ -87,6 +87,8 @@
     "@storybook/addons": "5.3.14",
     "@storybook/core": "5.3.14",
     "@storybook/react": "5.3.14",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^12.1.2",
     "asar": "2.1.0",
     "autodll-webpack-plugin": "0.4.2",
     "axios": "0.21.1",
@@ -130,9 +132,11 @@
     "hash.js": "1.1.7",
     "html-loader": "0.5.5",
     "husky": "4.3.0",
+    "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
+    "jest-css-modules-transform": "^4.3.0",
     "jest-environment-jsdom": "26.6.2",
-    "identity-obj-proxy": "3.0.0",
+    "jest-svg-transformer": "^1.0.0",
     "markdown-loader": "5.1.0",
     "mini-css-extract-plugin": "0.9.0",
     "minimist": "1.2.5",
@@ -279,7 +283,6 @@
     "**/**/node-fetch": "2.6.1",
     "**/**/mobx-react-lite": "2.2.2",
     "**/**/ini": "1.3.8",
-    "**/**/usb": "1.7.2",
-    "**/**/istanbul-lib-report": "2.0.8"
+    "**/**/usb": "1.7.2"
   }
 }

source/renderer/app/features/discreet-mode/__mocks__/react-svg-inline.js

@@ -0,0 +1,6 @@
+// @flow
+import React from 'react';
+
+export default function ReactInlineSVG() {
+  return <svg />;
+}

source/renderer/app/features/discreet-mode/integration-tests.spec.js

@@ -0,0 +1,162 @@
+// @flow
+import React, { Component } from 'react';
+import type { Node } from 'react';
+import { IntlProvider } from 'react-intl';
+import BigNumber from 'bignumber.js';
+import { observer } from 'mobx-react';
+import { render, fireEvent, screen, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { BrowserLocalStorageBridge } from '../local-storage';
+import { DiscreetModeFeatureProvider } from './context';
+import {
+  DiscreetWalletAmount,
+  DiscreetModeToggle,
+  DiscreetTokenWalletAmount,
+  DiscreetValue,
+  withDiscreetMode,
+} from './ui';
+import { DiscreetMode } from './feature';
+
+describe('Discreet Mode feature', () => {
+  afterEach(cleanup);
+
+  function TestDecorator({
+    children,
+    testId,
+  }: {
+    children: Node,
+    testId: string,
+  }) {
+    return (
+      <IntlProvider locale="en-US">
+        <BrowserLocalStorageBridge>
+          <DiscreetModeFeatureProvider>
+            <>
+              <DiscreetModeToggle />
+
+              <div data-testid={testId}>{children}</div>
+            </>
+          </DiscreetModeFeatureProvider>
+        </BrowserLocalStorageBridge>
+      </IntlProvider>
+    );
+  }
+
+  const discreetWalletAmountCases = [
+    // testId, [amount, currency, withCurrency, long], [expected]
+    ['custom ticker', [new BigNumber(1), 'TEST', true, true], '1.000000 TEST'],
+    ['ada as ticker', [new BigNumber(1), undefined, true, false], '1 ADA'],
+    ['no currency', [new BigNumber(1), 'TEST', false, false], '1'],
+  ];
+
+  test.each(discreetWalletAmountCases)(
+    '<DiscreetWalletAmount /> should replace wallet amount with %s by sensitive data symbol',
+    async (testId, [amount, currency, withCurrency, long], expected) => {
+      expect.assertions(2);
+
+      render(
+        <TestDecorator testId={testId}>
+          <DiscreetWalletAmount
+            amount={amount}
+            currency={currency}
+            withCurrency={withCurrency}
+            long={long}
+          />
+        </TestDecorator>
+      );
+
+      expect(screen.getByTestId(testId)).toHaveTextContent(expected);
+
+      fireEvent.click(
+        screen.getByRole('button', { name: /discreetModeToggle/i })
+      );
+
+      expect(screen.getByTestId(testId)).toHaveTextContent('***');
+    }
+  );
+
+  const discreetTokenWalletAmountCases = [
+    // testId, [amount, metada, decimals], [expected]
+    ['without ticker', [new BigNumber(1), null, 0], '1'],
+    ['with ticker', [new BigNumber(1), { ticker: 'TEST' }, 5], '0.00001 TEST'],
+  ];
+
+  test.each(discreetTokenWalletAmountCases)(
+    '<DiscreetTokenWalletAmount /> should replace token wallet amount with %s by sensitive data symbol',
+    (testId, [amount, metadata, decimals], expected) => {
+      expect.assertions(2);
+
+      render(
+        <TestDecorator testId={testId}>
+          <DiscreetTokenWalletAmount
+            amount={amount}
+            metadata={metadata}
+            decimals={decimals}
+          />
+        </TestDecorator>
+      );
+
+      expect(screen.getByTestId(testId)).toHaveTextContent(expected);
+
+      fireEvent.click(
+        screen.getByRole('button', { name: /discreetModeToggle/i })
+      );
+
+      expect(screen.getByTestId(testId)).toHaveTextContent('***');
+    }
+  );
+
+  test('<DiscreetValue /> should replace value by sensitive data symbol', () => {
+    expect.assertions(2);
+
+    const value = 'test';
+    const testId = 'discreet-value';
+
+    render(
+      <TestDecorator testId={testId}>
+        <DiscreetValue>{value}</DiscreetValue>
+      </TestDecorator>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveTextContent(value);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /discreetModeToggle/i })
+    );
+
+    expect(screen.getByTestId(testId)).toHaveTextContent('***');
+  });
+
+  test('<withDiscreetMode /> high order component should replace value by sensitive data symbol', () => {
+    expect.assertions(2);
+
+    const value = 'test';
+    const testId = 'discreet-value';
+    const HighOrderComponentApi = withDiscreetMode(
+      observer(
+        class View extends Component<{ discreetModeFeature: DiscreetMode }> {
+          render() {
+            return this.props.discreetModeFeature.discreetValue({
+              value,
+            });
+          }
+        }
+      )
+    );
+
+    render(
+      <TestDecorator testId={testId}>
+        <HighOrderComponentApi />
+      </TestDecorator>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveTextContent(value);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /discreetModeToggle/i })
+    );
+
+    expect(screen.getByTestId(testId)).toHaveTextContent('***');
+  });
+});

source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetModeToggle.js

@@ -19,7 +19,11 @@ export const DiscreetModeToggleComponent = ({
   onToggle: () => void,
 }) => {
   return (
-    <button className={classNames(styles.root, className)} onClick={onToggle}>
+    <button
+      className={classNames(styles.root, className)}
+      onClick={onToggle}
+      aria-label="discreetModeToggle"
+    >
       <SVGInline
         svg={isDiscreetMode ? hideIcon : revealIcon}
         className={classNames(styles.icon, isDiscreetMode && styles.hideIcon)}

utils/lockfile-checker/index.js

@@ -16,7 +16,7 @@ lodash.map(json.object, (entry, key) => {
   }
 });
 
-const dependencyNamesToRemove = ['@types/react-syntax-highlighter', '@types/npmlog', '@types/reactcss', '@types/uglify-js', '@types/parse-json', '@types/html-minifier-terser', '@types/minimist', 'blake2b-wasm@https://github.com/BitGo/blake2b-wasm', 'blake2b@https://github.com/BitGo/blake2b'];
+const dependencyNamesToRemove = ['@types/react-syntax-highlighter', '@types/npmlog', '@types/reactcss', '@types/uglify-js', '@types/parse-json', '@types/html-minifier-terser', '@types/minimist', 'blake2b-wasm@https://github.com/BitGo/blake2b-wasm', 'blake2b@https://github.com/BitGo/blake2b', '@types/aria-query', '@types/istanbul-lib-report'];
 const dependenciesToRemove = Object.keys(json.object).filter(key => dependencyNamesToRemove.find(name => key.includes(name)));
 const affectedDependencies = Object.keys(json.object).filter(key => {
   const { dependencies } = json.object[key];