vendredi 25 décembre 2020

How to test Ember computed properties that have no arguments/property dependencies?

You can find my source & test code below. I am testing the custom formHasSuccess() function, which has no arguments (or property dependencies). Using hasCorrectLength() & containsLettersAndNumbers(), formHasSuccess() will determine if a password is alphanumeric or of the correct length. In my test code, I've written a test case that I want to pass by returning true. However, when I run the tests, false is returned, which results in a failure.

  • ember-cli: v2.18.0
  • node: v10.16.3
  • os: win32 x64

Source code

import Ember from 'ember';
import layout from './template';

const { computed, defineProperty } = Ember;

export default Ember.Component.extend({
  layout: layout,
  viewport: Ember.inject.service(),
  classNames: ['input-password'],
  classNameBindings: ['showErrorClass:has-danger', 'isValid:has-success'],
  name: 'password',
  model: null,
  value: null,
  valuePath: '',
  show: false,
  validation: null,
  showValidations: false,
  didValidate: false,
  doesNotHaveFocus: true,

  notValidating: computed.not('validation.isValidating').readOnly(),
  hasContent: computed.notEmpty('value').readOnly(),
  hasWarnings: computed.notEmpty('validation.warnings').readOnly(),
  isValid: computed.and('hasContent', 'validation.isTruelyValid'),
  shouldDisplayValidations: computed.or('showValidations', 'didValidate', 'hasContent').readOnly(),
  showErrorClass: computed.and('doesNotHaveFocus', 'notValidating', 'showErrorMessage', 'validation'),
  showErrorMessage: computed.and('doesNotHaveFocus', 'shouldDisplayValidations', 'validation.isInvalid'),
  showWarningMessage: computed.and('doesNotHaveFocus', 'shouldDisplayValidations', 'hasWarnings', 'isValid').readOnly(),
  preventPaste: false,
  init() {
    this._super(...arguments);
    let valuePath = this.get('valuePath');

    defineProperty(this, 'validation', computed.readOnly(`model.validations.attrs.${valuePath}`));
    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
  },
  hasCorrectLength: Ember.computed('value', function () {
    var password = this.get('value');

    return password && password.length >= 8 && password.length <= 32;
  }),
  containsLettersAndNumbers: Ember.computed('value', function () {
    var password = this.get('value');

    return password && /[0-9]/.test(password) && /[a-zA-Z]/.test(password);
  }),
  // The code I am testing
  // -----------------------------------
  formHasSuccess: Ember.computed(function () {
    return this.hasCorrectLength || this.containsLettersAndNumbers;
  }),
  // -----------------------------------
});

Test code

import Ember from 'ember';
import sinon from 'sinon';
import { moduleFor, test } from 'ember-qunit';

moduleFor('component:ukb-password', 'Unit | Component | ukb-password', {
  unit: true,
  needs: ['service:viewport']
});

test("Should return 'true' as the password is alphanumeric & is of the correct length", async function(assert) {
  let component = this.subject();
  let mockPassword = "testpassword123";
  component.value = mockPassword;
  component.formHasSuccess = sinon.spy();
  await component.formHasSuccess();

  assert.ok(component.formHasSuccess.called, "The formHasSuccess method was called");
  assert.equal(component.formHasSuccess.returned(true), true, "Returned true");
});



Aucun commentaire:

Enregistrer un commentaire