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