Add example tests for PasswordValidationField

lib/PasswordValidationField/PasswordValidationField.js

@@ -33,7 +33,7 @@ class PasswordValidationField extends React.Component {
     const { username, resources } = this.props;
     const noUserNameRuleName = 'no_user_name';
 
-    if (!resources.validators.hasLoaded) {
+    if (!(resources.validators && resources.validators.hasLoaded)) {
       return undefined;
     }
 

lib/PasswordValidationField/tests/PasswordValidationField-test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { describe, beforeEach, it } from '@bigtest/mocha';
+import { when } from '@bigtest/convergence';
+import { Response } from '@bigtest/mirage';
+import { expect } from 'chai';
+
+import TextFieldInteractor from '@folio/stripes-components/lib/TextField/tests/interactor';
+
+import { setupApplication, mount } from '../../../tests/helpers';
+import connectStripes from '../../../tests/connectStripes';
+import TestForm from '../../../tests/TestForm';
+
+import PasswordValidationField from '../PasswordValidationField';
+
+const ConnectedField = connectStripes(PasswordValidationField);
+
+describe('PasswordValidationField', () => {
+  const field = new TextFieldInteractor();
+
+  setupApplication();
+
+  beforeEach(async function () {
+    let rulesLoaded = false;
+
+    // return rules for testing password validations
+    this.server.get('/tenant/rules', (schema, request) => {
+      rulesLoaded = true;
+
+      // stripes-connect requires `X-Request-URL` header for `response.url`
+      return new Response(200, { 'X-Request-URL': request.url }, {
+        rules: [
+          {
+            ruleId: '5105b55a-b9a3-4f76-9402-a5243ea63c95',
+            name: 'password_length',
+            type: 'RegExp',
+            validationType: 'Strong',
+            state: 'Enabled',
+            moduleName: 'mod-password-validator',
+            expression: '^.{8,}$',
+            description: 'The password length must be at least 8 characters long',
+            orderNo: 0,
+            errMessageId: 'password.length.invalid'
+          }
+        ],
+        totalRecords: 1
+      });
+    });
+
+    // mount the component under test
+    mount(
+      <TestForm>
+        <ConnectedField
+          id="password-test"
+          name="password"
+          label="Test"
+          username="test"
+        />
+      </TestForm>
+    );
+
+    // wait for validation to load
+    await when(() => rulesLoaded);
+  });
+
+  it('is a textfield component', () => {
+    expect(field.isPresent).to.be.true;
+  });
+
+  describe('with an invalid password', () => {
+    beforeEach(async () => {
+      await field
+        .focusInput()
+        .fillInput('test')
+        .blurInput();
+    });
+
+    it('shows a validation error', () => {
+      expect(field.inputError).to.be.true;
+    });
+  });
+});

tests/TestForm.js

@@ -0,0 +1,23 @@
+/*
+  Basic harness prop for testing redux-form functionality
+  children should be a <Field> component with the tested component passed
+  as the 'children' prop.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { reduxForm } from 'redux-form';
+
+class TestForm extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default reduxForm({
+  form: 'formsDemo'
+})(TestForm);

tests/connectStripes.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { withStripes } from '@folio/stripes-core';
+
+export default function connectStripes(component) {
+  class Connected extends Component {
+    constructor(props) {
+      super(props);
+      this.connected = props.stripes.connect(component);
+    }
+
+    render() {
+      return <this.connected {...this.props} />;
+    }
+  }
+
+  return withStripes(Connected);
+}

tests/helpers.js

@@ -0,0 +1,44 @@
+import { beforeEach } from '@bigtest/mocha';
+import setupStripesCore from '@folio/stripes-core/test/bigtest/helpers/setup-application';
+import { withModules, clearModules } from '@folio/stripes-core/test/bigtest/helpers/stripes-config';
+import mirageOptions from './network';
+
+export function setupApplication({
+  scenarios
+} = {}) {
+  setupStripesCore({
+    mirageOptions,
+    scenarios,
+
+    // setup a dummy app for smart components
+    modules: [{
+      type: 'app',
+      name: '@folio/ui-dummy',
+      displayName: 'dummy.title',
+      route: '/dummy',
+      module: null
+    }],
+
+    translations: {
+      'dummy.title': 'Dummy'
+    }
+  });
+
+  // go to the dummy app where smart components are mounted
+  beforeEach(function () { // eslint-disable-line func-names
+    this.visit('/dummy');
+  });
+}
+
+// replace the dummy app to mount the component
+export function mount(component) {
+  clearModules();
+
+  withModules([{
+    type: 'app',
+    name: '@folio/ui-dummy',
+    displayName: 'dummy.title',
+    route: '/dummy',
+    module: () => component
+  }]);
+}