Ajout exo Karma
This commit is contained in:
parent
67b56e88ec
commit
361715d79e
|
|
@ -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;
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
@ -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
|
||||
});
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
@ -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 |
|
|
@ -38,6 +38,10 @@
|
|||
'routage-1',
|
||||
'routage-2',
|
||||
'routage-3',
|
||||
'projet-outils-1',
|
||||
'projet-outils-2',
|
||||
'projet-outils-3',
|
||||
'projet-outils-4',
|
||||
'questions',
|
||||
'licence'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
@ -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
|
||||
|...
|
||||
```
|
||||
|
|
@ -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)
|
||||
]
|
||||
|
|
@ -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%" />
|
||||
]
|
||||
|
|
@ -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[
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue