Ajout exo Karma

This commit is contained in:
William Petit 2015-04-10 00:30:02 +02:00
parent 24ebf33c75
commit 22eb8175fe
16 changed files with 227 additions and 5 deletions

View File

@ -0,0 +1,12 @@
var myApp = angular.module('myApp', []);
myApp.controller('ExoCtrl', ['$scope', function($scope) {
$scope.val1 = 1;
$scope.val2 = 2;
$scope.add = function() {
$scope.result = $scope.val1 + $scope.val2;
};
}]);

View File

@ -0,0 +1,68 @@
// Karma configuration
// Generated on Fri Apr 10 2015 00:15:38 GMT+0200 (CEST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/app.js',
'test/**/*Spec.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};

View File

@ -0,0 +1,21 @@
{
"name": "karma-exercice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"angular-mocks": "^1.3.15",
"karma": "^0.12.31"
},
"devDependencies": {
"jasmine-core": "^2.2.0",
"karma-chrome-launcher": "^0.1.7",
"karma-firefox-launcher": "^0.1.4",
"karma-jasmine": "^0.3.5"
}
}

View File

@ -0,0 +1,29 @@
describe('ExoController', function() {
beforeEach(module('myApp'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.add', function() {
it('Il additionne les valeurs $scope.val1 et $scope.val2 et stocke le résultat dans $scope.result', function() {
var $scope = {};
var controller = $controller('ExoCtrl', {$scope: $scope});
$scope.val1 = 2;
$scope.val2 = 4;
$scope.add();
expect($scope.result).toEqual(6);
});
});
});

View File

@ -0,0 +1,12 @@
var myApp = angular.module('myApp', []);
myApp.controller('ExoCtrl', ['$scope', function($scope) {
$scope.val1 = 1;
$scope.val2 = 2;
$scope.add = function() {
$scope.result = $scope.val1 + $scope.val2;
};
}]);

View File

@ -37,7 +37,7 @@
</table>
</div>
</div>
<script src="../node_modules/angular/angular.js"></script>
<script src="../../node_modules/angular/angular.js"></script>
<script src="todos.js"></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -38,6 +38,10 @@
'routage-1',
'routage-2',
'routage-3',
'projet-outils-1',
'projet-outils-2',
'projet-outils-3',
'projet-outils-4',
'questions',
'licence'
];

View File

@ -11,7 +11,7 @@
- Les filtres
- Création de directives
- Utilisation de modules
- Cycle de vie d'un projet et outillage
- Menée de projet et outils
- Mise en pratique
???
@ -38,7 +38,8 @@
- Utilisation de modules
- Routage avec module ngRoute
- API REST & ngResource
- Cycle de vie d'un projet et outillage
- Menée de projet et outils
- Structuration d'un projet
- Batarang
- Tests unitaires
- Tests fonctionnels

View File

@ -0,0 +1,26 @@
# .cadoles-slide-title[Menée de projet & outils (1/)]
**Organisation d'un petit projet**
```text
myApp-client
|-> vendor | bower_components | node_modules - Répertoire des librairies tierces
|-> js
| |-> controllers
| |-> services
| |-> filters
| |-> directives
| |-> templates
| |-> app.js - Point d'amorçage de l'application
|-> assets - Images, ressources textuelles ou autres...
|-> css
|-> bower.json | package.json - Manifeste pour le gestionnaire de paquet
|-> .jshintrc - Règles spécifiques de mise en forme pour le projet
|-> Makefile | Gulpfile.js | Gruntfile.js - Tâches pour pipeline de développement
|-> index.html - Point d'entrée HTML
|-> README.md - Description du projet, avec "Getting started"
|-> LICENCE
```
- Un seul module Angular pour l'application
- Gestionnaire de paquets pour gérer les dépendances (avec inclusion ou non des dépendances dans le dépôt)
- Définir au plus tôt les règles de validation du code, et les fixer dans le fichier `.jshintrc`

View File

@ -0,0 +1,31 @@
# .cadoles-slide-title[Menée de projet & outils (2/)]
**Organisation d'un projet plus important**
```text
# Structure basée sur la même idée, mais avec une approche orientée composants, récursive
myApp-client
|-> js
|-> main.js - Amorçage de l'application
|-> config.js - Configuration de l'application
|-> app.js - Définition du module principale
|-> shared - Fonctionnalités du module
| |-> controllers
| | |-> templates - Templates liés aux contrôleurs du module
| |-> directives
| | |-> templates - Templates liés aux directives du module
| |-> filters
|-> components - Sous modules
|-> module1
| |-> module1.js
| |-> shared
| | |...
| |-> components
| |...
|-> module2
|-> module2.js
|-> shared
| |...
|-> components
|...
```

View File

@ -0,0 +1,11 @@
# .cadoles-slide-title[Menée de projet & outils (3/)]
**Extension Chromium: ng-inspector**
.cadoles-center[
<img src="img/ng_inspector.png" style="max-width: 100%" />
[Disponible sur le Chromium Store](https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj/related)
]

View File

@ -0,0 +1,7 @@
# .cadoles-slide-title[Menée de projet & outils (4/)]
**Tests unitaires avec Karma & Jasmine**
.cadoles-center[
<img src="img/karma.png" style="max-width: 100%" />
]

View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Routage dans le navigateur (1/)]
# .cadoles-slide-title[Routage dans le navigateur (1/3)]
**Différences entre la navigation classique et la navigation côté client**
.cadoles-left-column[

View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Routage dans le navigateur (2/)]
# .cadoles-slide-title[Routage dans le navigateur (2/3)]
**Le module `ngRoute`**
- Il permet de gérer l'association entre vue/contrôleur/route côté client.