SK-26: added tests (#28)

jest.config.js

@@ -22,6 +22,7 @@ export default {
   // coveragePathIgnorePatterns: [
   //   "/node_modules/"
   // ],
+  coverageProvider: 'v8',
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
   //   "json",

package.json

@@ -55,6 +55,7 @@
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.8.3",
     "@types/chrome": "^0.0.133",
     "@types/classnames": "^2.2.11",
     "@types/jest": "^26.0.20",

src/testing.tsx

@@ -1,3 +1,4 @@
+export * from '@testing-library/react';
 import { render as externalRender } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 

src/views/CreatePassword/CreatePassword.test.tsx

@@ -0,0 +1,68 @@
+import userEvent from '@testing-library/user-event';
+import { Identity } from '@kiltprotocol/core';
+
+import { render, screen } from '../../testing';
+import { saveEncrypted } from '../../utilities/storageEncryption/storageEncryption';
+
+import { CreatePassword } from './CreatePassword';
+
+jest.mock('@kiltprotocol/core');
+(Identity.buildFromMnemonic as jest.Mock).mockImplementation(() => 'mnemonic');
+
+jest.mock('../../utilities/storageEncryption/storageEncryption');
+(saveEncrypted as jest.Mock).mockImplementation(async () => '');
+
+const props = {
+  backupPhrase:
+    'one two three four five six seven eight nine ten eleven twelve',
+};
+
+describe('CreatePassword', () => {
+  it('should render', async () => {
+    const { container } = render(<CreatePassword {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should allow the strong password', async () => {
+    render(<CreatePassword {...props} />);
+
+    userEvent.click(screen.getByText('Next Step'));
+    expect(saveEncrypted).not.toHaveBeenCalled();
+
+    userEvent.type(
+      screen.getByLabelText('Please enter your password:'),
+      'Hello, World!11',
+    );
+    userEvent.click(screen.getByText('Next Step'));
+
+    expect(saveEncrypted).toHaveBeenCalled();
+  });
+
+  it('should allow visible and hidden passwords', async () => {
+    const { container } = render(<CreatePassword {...props} />);
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(screen.getByText('Show'));
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(screen.getByText('Hide'));
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should report weak password errors', async () => {
+    const { container } = render(<CreatePassword {...props} />);
+    const password = screen.getByLabelText('Please enter your password:');
+
+    userEvent.type(password, 'H');
+    expect(container).toMatchSnapshot();
+
+    userEvent.type(password, 'ello');
+    expect(container).toMatchSnapshot();
+
+    userEvent.type(password, '1');
+    expect(container).toMatchSnapshot();
+
+    userEvent.type(password, '!');
+    expect(container).toMatchSnapshot();
+  });
+});

src/views/CreatePassword/CreatePassword.tsx

@@ -71,7 +71,7 @@ export function CreatePassword({ backupPhrase }: Props): JSX.Element {
     async (event) => {
       event.preventDefault();
 
-      if (error) {
+      if (!modified || error) {
         return;
       }
 
@@ -80,7 +80,7 @@ export function CreatePassword({ backupPhrase }: Props): JSX.Element {
 
       history.push('/account/create/success');
     },
-    [error, history, backupPhrase, password],
+    [modified, error, history, backupPhrase, password],
   );
 
   const handleHideClick = useCallback(() => {
@@ -140,18 +140,18 @@ export function CreatePassword({ backupPhrase }: Props): JSX.Element {
             required
             minLength={MIN_LENGTH}
           />
-
-          {visible ? (
-            <button type="button" onClick={handleHideClick}>
-              {t('view_CreatePassword_hide')}
-            </button>
-          ) : (
-            <button type="button" onClick={handleShowClick}>
-              {t('view_CreatePassword_show')}
-            </button>
-          )}
         </label>
 
+        {visible ? (
+          <button type="button" onClick={handleHideClick}>
+            {t('view_CreatePassword_hide')}
+          </button>
+        ) : (
+          <button type="button" onClick={handleShowClick}>
+            {t('view_CreatePassword_show')}
+          </button>
+        )}
+
         <p className={styles.errors}>{error}</p>
         <button type="submit">{t('view_CreatePassword_CTA')}</button>
       </form>