To demonstrate how to test a Cubbles component in a browser.
Prerequisites
To be able to test a component, you should have:
Created a or component. In the case of this tutorial, we will test the currency-converter elementary, whose webpackage can be cloned from its .
Installed the CDT dependencies running the npm install command from its root folder (usually called devtools)
You can check to know how to create elementary components and to read more details about the currency-converter` elementary. Also, a demo of this component is available .
Testing the currency-converter component
To be able to test our component, we need to have a test environment to write and run unit tests. Run the task to generate that environment.
The created environment will allow you to write tests using assertions and .
Preparing the tests
As you may know, you should write the component tests in the currency-converter-test.js file inside the test folder. You should follow the following steps:
For our purposes, you can remove the sample tests and leave only the outer describe of the script
Set a high timeout number (e.g. 70000) because loading components locally can take too long depending on the internet connection and the number of components
Create a variable to access the component
Create a variable for a stub to wrap the makeRequest function that makes the AJAX requests in the component, so that our tests do not rely on an external API. For more information about Sinon Stubs check
Create a variable to maintain the expected values for the assertions
Init those values within a before function
Wait until the component is ready to run the tests
Restore the created stub within an after function
The previous process is illustrated below:
describe('<currency-converter>', function () { // ---------- Step 1 ----------
// ---------- Step 2 ----------
this.timeout(70000);
// ---------- Step 3 ----------
var currencyConverter;
// ---------- Step 4 ----------
var makeRequestStub;
// ---------- Step 5 ----------
var expectedVals= {
init: {
base: 'EUR',
foreignCurrency: 'USD',
date: '2018-01-01',
conversion: 1
},
set: {
base: 'COP',
foreignCurrency: 'EUR',
date: '2018-07-07',
conversion: 2
}
};
// ---------- Step 6 ----------
before(function (done) {
// Select component
currencyConverter = document.querySelector('currency-converter');
var rootNode = document.querySelector('[cubx-core-crc]');
// ---------- Step 7 ----------
rootNode.addEventListener('cifInitReady', function () {
// Wrap sendQuery since it makes Ajax requests (When it is already defined in the component)
makeRequestStub = sinon.stub(currencyConverter, 'makeRequest', function (url, callback) {
var data = {};
var values;
switch (currencyConverter.getBase()) {
case expectedVals.init.base:
values = expectedVals.init;
break;
case expectedVals.set.base:
values = expectedVals.set;
break;
default:
converted = null;
}
// Return data as API will do it
var conversion = {};
conversion[values.date] = values.conversion
data[values.base + '_' + values.foreignCurrency] = {
val: conversion
};
callback(data);
});
done();
});
});
// ---------- Step 8 ----------
after(function () {
makeRequestStub.restore();
});
});
Testing initial status of the currency-converter component
Note that the currency-converter slots should have the initial values defined in its manifest.webpackage file. These values are presented below:
Slot
Value
base
'EUR'
foreignCurrency
'USD'
date
'2018-01-01'
As you may noticed, the makeRequestStub Stub that we defined will return an object in the format in which the conversion API would do it (i.e. { [base_foreignCurrency]: { val: { [date]: conversion } }). It will use the values of expectedVals.init if the value of the slot is equal to expectedVals.init.base, which corresponds to the value defined in the manifest.
Therefore, we will test that:
The initial value of the foreignCurrency slot is equal to the one defined in the manifest.webpackage file
The initial value of the date slot is equal to the one defined in the manifest.webpackage file
The initial value of the base slot is equal to the one defined in the manifest.webpackage file
The makeRequest method is called (An API request is done)
The first value of the conversion slot is equal to the value of expectedVals.init.conversion. That is, that the API answer is processed correctly
The above tests can be done with the following code:
describe('<currency-converter>', function () {
//...
describe('should have initial values set in manifest', function () {
// ---------- Test 1 ----------
it('should set the value of "foreignCurrency" slot = "' + expectedVals.init.foreignCurrency + '"', function () {
expect(currencyConverter.getForeignCurrency()).to.be.equal(expectedVals.init.foreignCurrency);
});
// ---------- Test 2 ----------
it('should have the initial value of "date" slot = "' + expectedVals.init.date + '"', function () {
expect(currencyConverter.getDate()).to.be.equal(expectedVals.init.date);
});
// ---------- Test 3 ----------
it('should have the initial value of "base" slot = "' + expectedVals.init.base + '"', function () {
expect(currencyConverter.getBase()).to.be.equal(expectedVals.init.base);
});
// ---------- Test 4, 5 ----------
it('should make the request with the initial values and set ', function () {
expect(makeRequestStub.calledOnce).to.be.equal(true);
expect(currencyConverter.getConversion()).to.be.equal(expectedVals.init.conversion);
});
});
Testing that slots of the currency-converter component are set correctly
Now, we will test that the component behaves correctly when the slots are set using the setSlotName methods offer by Cubbles. We should:
Set all the input slots and call the method that sends the query to eh API
Check that the foreignCurrency slot was set correctly
Check that the date slot was set correctly
Check that the base slot was set correctly
Check that the conversion slot was calculated correctly
The code below illustrates the previous steps:
describe('<currency-converter>', function () {
//...
describe('should set slots values correctly', function () {
// ---------- Step 1 ----------
before(function() {
currencyConverter.setForeignCurrency(expectedVals.set.foreignCurrency);
currencyConverter.setDate(expectedVals.set.date);
currencyConverter.setBase(expectedVals.set.base);
currencyConverter.sendQuery();
});
// ---------- Test 2 ----------
it('should have the initial value of "foreignCurrency" slot = "' + expectedVals.set.foreignCurrency + '"', function () {
expect(currencyConverter.getForeignCurrency()).to.be.equal(expectedVals.set.foreignCurrency);
});
// ---------- Test 3 ----------
it('should have the initial value of "date" slot = "' + expectedVals.set.date + '"', function () {
expect(currencyConverter.getDate()).to.be.equal(expectedVals.set.date);
});
// ---------- Test 4 ----------
it('should have the initial value of "base" slot = "' + expectedVals.set.base + '"', function () {
expect(currencyConverter.getBase()).to.be.equal(expectedVals.set.base);
});
// ---------- Test 5 ----------
it('should make the request with the initial values and set ', function () {
expect(currencyConverter.getConversion()).to.be.equal(expectedVals.set.conversion);
});
});
Result
T o run the tests in the browser, start a local webserver running the following command:
grunt +startWebserver
If everything goes well, the bash will display the following message:
Currently mapped Webpackage: org.john.doe.my-first-webpackage (@see ../webpackages/.workspace)
Running "cubx-http-server:dev" (cubx-http-server) task
Server running on http://localhost:8282/
Hit CTRL-C to stop the server
Check it online
Then, navigate to . Wait until the tests are executed. If everything goes well, you should get the following messages:
You can run the tests . Also, the source code of the tests is available at .
