mercredi 2 septembre 2015

I don't Know What to Test (Angular)

I'm using angular (1.3) for our admin page (SPA). As I am learning angular, I realized that I need to test my code, but I didn't know what to test in my code.

Most of the code is about displaying datagrid, create and update form. I've searched through google but I couldn't find any relevant test case that suits me.

I need direction to what I need to test in my code, so that I could test the rest of it.

Below is my code for product attribute key grid and form (Controller):

attribute-key-grid.controller.js

(function() {

  "use strict";

  angular
    .module('attribute-key-grid.controller', [
      'cgNotify',
      'smart-table',
      'st-utils.service',
      'utils.service',
      'attribute-key.service'
    ])
    .controller('AttributeKeyGridController', AttributeKeyGridController)
  ;

  AttributeKeyGridController.$inject = [
    '$http', 
    '$scope', 
    '$window', 
    'stUtils', 
    '$translate',
    'notify', 
    'AttributeKey',
    'Utils' 
  ];

  function AttributeKeyGridController($http, $scope, $window, stUtils, $translate, notify, AttributeKey, Utils) {
    var translations;

    translations = $translate(['ARE_YOU_SURE', 'DATA_SAVE_SUCCESS', 'DATA_SAVE_ERROR', 'DATA_NOT_FOUND']);
    $scope.getTableData = getTableData;
    $scope.toggleEnabled = toggleEnabled;

    function getTableData(tableState) {
      var params;

      params = stUtils.getTableStateParams(tableState);

      AttributeKey.query(params, function(response) {
        var i, j, result, translation, collection;

        collection = response.data;

        // Change value data to string
        for (i=0; i<collection.length; i++) {
          result = [];

          for (j=0; j<collection[i].values.length; j++) {
            translation = Utils.getTranslation(collection[i].values[j].translations);
            result.push(translation.name);
          }

          translation = Utils.getTranslation(collection[i].translations);
          collection[i].name = translation.name;                                  
          collection[i].valueString = result.toString();                          
        }

        $scope.tableData = collection;
        $scope.tableIndex = tableState.pagination.start + 1;
        tableState.pagination.numberOfPages = response.numberOfPages;
      });
    }

    function toggleEnabled(attributeKey, index) {
      translations.then(function(translations) {
        if ($window.confirm(translations.ARE_YOU_SURE)) {
          var params, data;

          params = {
            id: attributeKey.id
          };

          data = {
            attributekey: {
              enabled: !attributeKey.enabled
            }
          };

          AttributeKey.change(params, data, function(data) {
            attributeKey.enabled = data.enabled;
            notify({ messageTemplate:  '<span><i class="fa fa-check"></i> ' + translations.DATA_SAVE_SUCCESS + '</span>' });
          });
        }
      });
    }
  }
})();

attribute-key-form.controller.js

(function() {

  "use strict";

  /**
   * @ngdoc module 
   * @name attribute-key-form.controller
   * @description
   *
   * The module create AttributeKeyFormController.
   *
   * AttributeKeyFormController will handle create and update AttributeKey.
   */
  angular
    .module('attribute-key-form.controller', [
      'cgNotify',
      'ui.router',
      'utils.service',
      'language.service',
      'attribute-key.service'
    ])
    .controller('AttributeKeyFormController', AttributeKeyFormController)
  ;

  AttributeKeyFormController.$inject = [
    '$http', 
    '$scope', 
    '$state', 
    '$stateParams', 
    '$translate', 
    '$window',
    'notify', 
    'AttributeKey',
    'Language',
    'Upload',
    'Utils'
  ];

  function AttributeKeyFormController($http, $scope, $state, $stateParams, $translate, $window, notify, AttributeKey, Language, Upload, Utils) {
    var tAttributeKey, translations;
    translations = $translate(['ARE_YOU_SURE', 'DATA_SAVE_SUCCESS']);
    tAttributeKey = AttributeKey.getTemplate();

    $scope.attributeKeyModel = {
      enabled: true,
      values: []
    };

    $scope.tmp = {
      images: []
    };

    $scope.attributeKey = angular.copy($scope.attributeKeyModel);
    $scope.languageOptions = Language.cget();

    // Bind data on edit
    if (angular.isDefined($stateParams.id)) {
      AttributeKey.get({id: $stateParams.id}, function(data) {
        var i, j, translation;

        Utils.bindData($scope.attributeKey, data, tAttributeKey);
        translation = Utils.getTranslation(data.translations);
        $scope.attributeKeyName = translation.name;

        for (i=0; i<data.values.length; i++) {
          if (data.values[i].image) {
            $scope.tmp.images[i] = {
              url: data.values[i].image.thumbnailUrl
            };
          }
        }
      });
    }

    // Attach function to $scope
    $scope.save = save;
    $scope.addValue = addValue;
    $scope.removeValue = removeValue;
    $scope.uploadValueImage = uploadValueImage;

    /**
     * Save attribute key form
     *
     * @param {boolean} redirect - Redirect page flag
     */
    function save(redirect) {
      var attributeKey;

      redirect = typeof redirect !== 'undefined' ? redirect : false;
      $scope.form.$setSubmitted();

      if (validate()) {
        attributeKey = {};
        Utils.extractData(attributeKey, $scope.attributeKey, tAttributeKey);
        translations.then(function(translations) {
          if (angular.isDefined($stateParams.id)) {
            AttributeKey.update({id: $stateParams.id}, {attributekey: attributeKey}, function(data) {
              notify({ messageTemplate:  '<span><i class="fa fa-check"></i> ' + translations.DATA_SAVE_SUCCESS + '</span>' });
              reset(redirect);
            }, function(error) {
              console.log('Update AttributeKey Error!');
              console.error(error);
            });
          }
          else {
            AttributeKey.save({attributekey: attributeKey}, function(data) {
              notify({ messageTemplate:  '<span><i class="fa fa-check"></i> ' + translations.DATA_SAVE_SUCCESS + '</span>' });
              reset(redirect);
            }, function(error) {
              console.log('Save AttributeKey Error!');
              console.error(error);
            });
          }
        });
      }
    }

    /**
     * Check form validity
     *
     * @returns {boolean}
     */
    function validate() {
      return $scope.form.$valid && $scope.attributeKey.values.length;
    }

    /**
     * Reset form data
     *
     * @param {boolean} redirect - Redirect page flag
     */
    function reset(redirect) {
      if (redirect) {
        $state.go('attribute-key', null, {reload: true});
      }
      else {
        if (angular.isUndefined($stateParams.id)) {
          $scope.attributeKey = angular.copy($scope.attributeKeyModel);
          $scope.tmp.images = [];
          $scope.form.$setPristine();
          $scope.form.$setUntouched();
        }
      }
    }

    /**
     * Add new value to $scope.attributeKey.values
     *
     * @param {Object} value - the new value     
     */
    function addValue() {
      if (angular.isUndefined($scope.attributeKey.values)) {
        $scope.attributeKey.values = [];
      }
      $scope.attributeKey.values.push(angular.copy({}));
    }

    /**
     * Remove a value from $scope.attributeKey.values
     *
     * @param {Number} index - position of the value
     */
    function removeValue(index) {
      $scope.attributeKey.values.splice(index, 1);
      $scope.tmp.images.splice(index, 1);
    }

    /**
     * Handle value image upload
     *
     * @param {File} $files - array of uploaded file
     * @param {File} $file - uploaded file
     * @param {Event} $event - upload event object
     * @param {Number} $index - position of value
     */
    function uploadValueImage($files, $file, $event, $index) {
      if ($files && $files.length) {
        var image = $files[0];
        Upload.upload({
          url: $window.Routing.generate('api_v1_post_mediafile', null, true),
          fields: {
            'mediafile[group]': 'attributekey',
          },
          file: image,
          fileFormDataName: 'mediafile[image][file]',
          ignoreLoadingBar: true
        }).progress(function(e) {
          var percentage = parseInt(100.0 * e.loaded / e.total);
          $scope.tmp.images[$index].progress = percentage;
        }).success(function(data, status, headers, config) {
          $scope.tmp.images[$index].url = data.thumbnailUrl;
          $scope.attributeKey.values[$index].image = data.id;
        });
      }
    }
  }
})();

And also, any critics on my code readability are very welcome.

Aucun commentaire:

Enregistrer un commentaire