Karma automation platform in AngularJs
Karma is a research automation
platform developed by Google's AngularJS team. Installing Karma is the first
step to using Karma. Karma is installed via npm (which is a package manager
used on a local machine to easily install modules).
Karma's installation
In a two-step process, the
installation of Karma through npm is achieved.
Step 1)
From inside the command line,
execute the line below
Karma
karma-chrome-launcher karma-jasmine npm install
The node package manager
command-line utility used to install custom modules on any machine is npm.
The install parameter tells the npm
command-line utility that it needs to be installed.
In the command line, 3 libraries are
listed to work with karma.
The central library that will be
used for research purposes is karma.
Karma-Chrome-Launcher is a separate
library that allows the Chrome browser to recognize karma commands.
Karma-jasmine
This includes jasmine, which is a
Karma-dependent framework.
Step 2
Downloading the karma command-line
utility is the next phase. For executing karma line commands, this is
necessary. To initialize the karma environment for testing, the karma line
utility will be used.
Execute the following line from
inside the command line to install the command-line utility.
Install
npm karma-cli
The Karma system configuration
The next step is to configure karma
that can be accomplished by using the button.
"karma-init"
The karma will create a
karma.conf.js file after the above phase is executed. It is likely the file
would look like the snippet below.
[Files:
[Files:
'AngularJS
/ AngularJS.js'/Name of your script,'
'AngularJS-mocks
/ AngularJS-mocks.js'/Your application name,'
'lib/app.js','
'Pruebas/*.js'
]
The configuration files above tell
the karma runtime engine the following things:
'Name of your submission'-This will
be replaced with your application name.
'Name of your
application'/AngularJS/AngularJS.js'-This informs Karma that your application
in AngularJS relies on the core modules
'Name of your application'/AngularJS-mocks/AngularJS-mocks.js'-This
tells Karma to use AngularJS Unit Testing from Angular. JS-mocks.js file.
In your application's lib folder,
all of the main application or business logic files are present.
The folder of the tests will contain
all the unit tests
Build a file named Sample.js to
check if karma works, put it in the code below, and position it in the test
directory.
Describe('Sample
test, 'function) ({Sample test'
It('True
state, 'function)
Anticipate('AngularJS)
'.toBe
});;
});;
The code above has the following
aspects.
The Describe function is used to
define a test definition. In our case, we are giving our test the 'Sample Test'
definition.
The feature 'it' is used to give the
test a name. We give the name of our test in our case as 'State is Valid'. The
test's name needs to be meaningful.
The 'Expect' and 'ToBe' keyword
combination shows what the anticipated and actual significance of the test
outcome is. If the real and predicted value is the same, the evaluation will
pass if it fails elsewhere.
If you execute the following line at
the command prompt, the test file above will be executed.
Starting KARMA
The output below is taken from the
IDE Webstorm in which the measures listed above were performed.
Testing by AngularJS using Karma:
Unit and End to End Testing
In Webstorm, the production comes
from the Karma explorer. The execution of all tests specified in the karma
framework is shown in this window.
You can see here that the
"Sample test" description of the executed test is shown.
First, you will see that the test
itself is performed with a "Condition is Valid" name.
Notice that there is a green
"Ok" icon next to all grades, symbolizing that all grades have been
passed.
AngularJS Controllers Testing
The platform for karma research also
has the functionality to monitor end-to-end controllers. This involves checking
the object $scope that is used inside the Controllers.
Let's see an example of how we can
accomplish this.
In our illustration,
We'd need to identify a controller
first. The steps mentioned below would be carried out by this controller
Construct and assign a value of 5 to
an ID variable.
Assign the ID variable to the object
of the $scope.
Our test will test this controller's
existence and also test to see if the $scope object's ID variable is set to 5.
We need to make sure that the
following requirement is in place first
Via npm, install the Angular.
JS-mocks library. This can be achieved by running the command prompt in the
line below.
Installing AngularJS-mocks by npm
The next move is to change the
karma.conf.js file to ensure that the correct files for the test are used. The
section below only shows the karma.conf.js file portion that needs to be
updated.
The following files:
['lib/AngularJS.js', 'lib/AngularJS-mocks.js', 'lib/index.js', 'test/*.js']
Basically, the 'data' parameter
informs Karma of all the data that are required to run the tests.
To run AngularJS unit tests,
AngularJS.js and AngularJS-mocks.js files are needed.
The index.js file is going to have
our controller code in it.
The test folder will contain all of
our tests with AngularJS
Below is our Angular. JS code that
will be stored in our application's test folder as an Index.js file.
The code below does only the
following things. know more about angular train Angular course in onlineitguru
Build a
module for AngularJS called sampleApp
Build an
AngularJSController controller named
Develop
a variable called ID, give it a value of 5 and assign it to an object called
$scope.
SampleApp
var = AngularJS.module('sampleApp,]); '[var
SampleApp.controller('AngularJSController,
'feature($scope)
$scope.identifier
= 5;
});;
Once the above code is successfully
implemented, the next move is to build a test case to ensure that the code has
been correctly written and implemented.
As shown below, the code for our
test will be.
The code will be placed in the test
folder in a separate file called ControllerTest.js. The following code does
only the following main things.
BeforeEach function
This function is used before the
test run to load our AngularJS.JS module named 'sampleApp.' Notice that this is
the name of the module in a file called index.js.
The $controller object is generated
as the " Angular JSController' 'controller mockup object that is specified
in our index.js file. A mock object represents a dummy object that would actually
be used for testing in some form of unit testing. The actions of our controller
will actually be simulated by this mock piece.
BeforeEach(inject(function($controller))
This is used in our test to inject
the mock object so that it acts like the current controller.
Var $scope =}; {For the $scope
object, this is a mock object being generated.
Var controller =
$controller('AngularJSController ', { $scope: $scope }); - The existence of a
controller called' Angular.JSController 'is being tested here. We are also
allotting all the variables from our $scope object within our Index.js
controller to the $scope object in our test file here.
Finally, the $scope. ID is
contrasted with 5
Describe('AngularJSController;
'function)
BeforeEvery(module('sampleApp));;
$controller
var;
BeforeEvery(inject(function(
$controller ))
$controllers
= $controllers ;
}));;);
Describe('$scope.ID',
function() {'$scope.ID"
It('Scope
object search, 'function)
$scope
var =};
Controller
var = $controller('AngularJSController ', { $scope: $scope });;
Outlook($scope.
ID).toEqual(5);
});;
});;
});;
In the karma browser, the above test
will run and offer the same pass result as was shown in the previous issue.
Checking the directives of AngularJS
The system of karma testing also has
the features for testing custom directives. This covers the templateURLs used
inside the custom directives.
Let's see an example of how we can
accomplish this.
We will first define a custom
directive in our example, which does the following things.
Build a module from AngularJS called
sampleApp.
Build a custom directive with the
name.
Build a function that returns a
prototype that shows the text "This is AngularJS Testing" with a
header tag.
SampleApp
var = AngularJS.module('sampleApp,]); '[var
SampleApp.directive(',
'function)
Returning
Restrict
the following:' E',
Replace:
true, true, true,
Model:'
Template:
This is
Experimenting for AngularJS
};
});;
Once the above code is successfully
executed, the next move will be to build a test case to ensure that the code
has been written and properly executed.
As shown below, the code for our
test will be The code will be put in the test folder in a separate file called
DirectiveTest.js.
The above code does only the
following main things.know more about angular code than learn angular training in onlineitguru
BeforeEach function
This function is used before the
test run to load our Angular JS module named 'sampleApp.'
For compiling the directive, the
$compile service is used.
This is a required service and must
be declared so that it can be used by Angular. JS to compile our custom
directive. In every AngularJS.JS program, the $rootscope is the primary scope.
In earlier chapters, we saw the
$scope controller object. Ok, the $scope object is the object child of the
object $rootscope. The reason this is mentioned here is that, through our
custom directive, we are making a change to an actual HTML tag in the DOM.
Therefore, we need to use the $rootscope service that actually listens or knows
from inside an HTML document when any shift occurs.
Conclusion
I hope you reach to a conclusion
about the Karma platform in AngularJS. You can learn more through AngularJS online training.