Polymer test-fixture - variable declared inside "suite" is not available inside functions
268 views
Skip to first unread message
Subrata Sarkar
Mar 30, 2016, 8:42:56 AM3/30/16
to Polymer
Hi,
I have stepped into `Polymer unit test` and `sinon server` things only a couple of days back. To start with I watched these videos https://youtu.be/YBNBr9ECXLo and https://youtu.be/_9qARcdCAn4.
I created the `suits` the way it has been explained there. But for some reason the variable `objAjax` is not being accessed inside functions. Below is my code. Please tell what I am doing wrong :(
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<!-- Step 1: import the element to test -->
<link rel="import" href="../ajax-cached-data.html">
<link rel="import" href="../sinon-test.html">
</head>
<body>
<!-- You can use the document as a place to set up your fixtures. -->
<test-fixture id="ajax-cached-data-fixture">
<template>
<ajax-cached-data api-key="ThisIsMyKey" endpoint="http://localhost/api" method-url="/get/data" parameters='{"id": "123"}'></ajax-cached-data>
</template>
</test-fixture>
<!-- Sinon -->
<test-fixture id="sinon-test-fixture">
<template>
<sinon-test url="/responds_to_get_with_json"></sinon-test>
</template>
</test-fixture>
<script>
//For sinon test
suite('<sinon-test>', function () {
var objAjax;
var request;
var server;
var responseHeader = {
json: { 'Content-Type': 'application/json' }
}
//Setting up sion server here.
setup(function () {
server = sinon.fakeServer.create();
server.respondWith(
'GET',
/\/responds_to_get_with_json.*/, [
200,
responseHeader.json,
'{"success": true}'
]
);
});
teardown(function () {
server.restore();
});
suite('when making simple GET requests for JSON', function () {
setup(function () {
objAjax = fixture('sinon-test-fixture')
});
});
//if (objAjax) {
test('has sane defaults that love you', function () {
alert(objAjax);
req = objAjax.generateRequest();
server.respond();
expect(request.response).to.be.ok;
expect(request.response).to.be.an('object');
expect(request.response.success).to.be.equal(true);
});
//}
});
suite('<ajax-cached-data>', function () {
var myEl;
setup(function () {
myEl = fixture('ajax-cached-data-fixture');
});
test('check endpoint and methodUrl property', function () {
assert.equal(myEl.endpoint, 'http://localhost/api');
assert.equal(myEl.methodUrl, '/get/data');
});
test('check computed _url property', function () {
// should be endpoint combined with method url
assert.equal(myEl._url, myEl.endpoint + myEl.methodUrl);
});
test('checek api key.', function () {
assert.equal(myEl.apiKey, 'ThisIsMyKey');
});
test('check computed property updates', function () {
// make sure that the computed url value updates
var newValue = '/get/data/customer';
myEl.methodUrl = newValue;
assert.equal(myEl._url, myEl.endpoint + newValue);
assert.equal(myEl._storageKey, myEl.storageKeyPrefix + 'ThisIsMyKey-get-data-customer');
});
test('check timestamp method', function () {
assert.equal(myEl._getTimeStamp(), Date.now());
});
test('check ajax body', function () {
assert.deepEqual(myEl._requestBody, { id: "123", apikey: "ThisIsMyKey" });
});
test('check ajax body from object parameters', function () {
var param = { id: "567", foo: "bar" };
myEl.parameters = param;
param['apikey'] = "ThisIsMyKey";
assert.deepEqual(myEl._requestBody, param);
});
test('check cache invalidator from endpoint', function () {
myEl._cacheValid = true;
myEl.apiKey = 'newkey';
assert.equal(myEl._cacheValid, false);
myEl._cacheValid = true;
myEl.methodUrl = '/new/method';
assert.equal(myEl._cacheValid, false);
});
test('check cache invalidate from objects', function () {
myEl._cacheValid = true;
myEl.parameters = { "foo": "bar" };
assert.equal(myEl._cacheValid, false);
myEl._cacheValid = true;
myEl._response = { "foo": "bar" };
assert.equal(myEl._cacheValid, false);
});
test('cache save and load session', function () {
myEl.useSession = true;
var someValue = { "foo": "bar" };
myEl._cacheSave(someValue);
assert.equal(myEl._cacheLoad(), true);
assert.deepEqual(myEl._cachedResponse, someValue);
myEl.clearCache();
});
test('cache save and load localstorage', function () {
myEl.useSession = false;
var someValue = { "foo": "bar" };
myEl._cacheSave(someValue);
assert.equal(myEl._cacheLoad(), true);
assert.deepEqual(myEl._cachedResponse, someValue);
myEl.clearCache();
});
//test('real broker api call', function() {
// myEl.useSession = true;
// myEl.apiKey = 'ThisIsMyKey';
// myEl.endpoint = 'http://localhost/api';
// myEl.methodUrl = '/get/data';
// myEl.parameters = {};
// var request = myEl.getData();
// expect(myEl.loading).to.be.equal(true);
// return request.completes.then(function() {
// expect(myEl.loading).to.be.equal(false);
// });
// myEl.addEventListener('ajax-cached-data-response', function(data, cache, timestamp) {
// assert.equal('cache', 'false');
// assert.equal(data.broker.id, 1075);
// console.log(data);
// console.log(JSON.stringify(data));
// console.log('cached: ' + cache);
// });
// myEl.getData();
//});
});
</script>
</body>
</html>
<!-- end snippet -->
However, the variable `myEl` decalred inside `suite('<ajax-cached-data>', function () {...}` is accessed and I can see the test results passing.
And for `objAjax` I am getting "Error: objAjax is undefined <unknown> at basic-test.html:75". Please help me to understand why they are behaving differently although placed in a similar manner on the page.
I have stepped into `Polymer unit test` and `sinon server` things only a couple of days back. To start with I watched these videos https://youtu.be/YBNBr9ECXLo and https://youtu.be/_9qARcdCAn4.
I created the `suits` the way it has been explained there. But for some reason the variable `objAjax` is not being accessed inside functions. Below is my code. Please tell what I am doing wrong :(
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<!-- Step 1: import the element to test -->
<link rel="import" href="../ajax-cached-data.html">
<link rel="import" href="../sinon-test.html">
</head>
<body>
<!-- You can use the document as a place to set up your fixtures. -->
<test-fixture id="ajax-cached-data-fixture">
<template>
<ajax-cached-data api-key="ThisIsMyKey" endpoint="http://localhost/api" method-url="/get/data" parameters='{"id": "123"}'></ajax-cached-data>
</template>
</test-fixture>
<!-- Sinon -->
<test-fixture id="sinon-test-fixture">
<template>
<sinon-test url="/responds_to_get_with_json"></sinon-test>
</template>
</test-fixture>
<script>
//For sinon test
suite('<sinon-test>', function () {
var objAjax;
var request;
var server;
var responseHeader = {
json: { 'Content-Type': 'application/json' }
}
//Setting up sion server here.
setup(function () {
server = sinon.fakeServer.create();
server.respondWith(
'GET',
/\/responds_to_get_with_json.*/, [
200,
responseHeader.json,
'{"success": true}'
]
);
});
teardown(function () {
server.restore();
});
suite('when making simple GET requests for JSON', function () {
setup(function () {
objAjax = fixture('sinon-test-fixture')
});
});
//if (objAjax) {
test('has sane defaults that love you', function () {
alert(objAjax);
req = objAjax.generateRequest();
server.respond();
expect(request.response).to.be.ok;
expect(request.response).to.be.an('object');
expect(request.response.success).to.be.equal(true);
});
//}
});
suite('<ajax-cached-data>', function () {
var myEl;
setup(function () {
myEl = fixture('ajax-cached-data-fixture');
});
test('check endpoint and methodUrl property', function () {
assert.equal(myEl.endpoint, 'http://localhost/api');
assert.equal(myEl.methodUrl, '/get/data');
});
test('check computed _url property', function () {
// should be endpoint combined with method url
assert.equal(myEl._url, myEl.endpoint + myEl.methodUrl);
});
test('checek api key.', function () {
assert.equal(myEl.apiKey, 'ThisIsMyKey');
});
test('check computed property updates', function () {
// make sure that the computed url value updates
var newValue = '/get/data/customer';
myEl.methodUrl = newValue;
assert.equal(myEl._url, myEl.endpoint + newValue);
assert.equal(myEl._storageKey, myEl.storageKeyPrefix + 'ThisIsMyKey-get-data-customer');
});
test('check timestamp method', function () {
assert.equal(myEl._getTimeStamp(), Date.now());
});
test('check ajax body', function () {
assert.deepEqual(myEl._requestBody, { id: "123", apikey: "ThisIsMyKey" });
});
test('check ajax body from object parameters', function () {
var param = { id: "567", foo: "bar" };
myEl.parameters = param;
param['apikey'] = "ThisIsMyKey";
assert.deepEqual(myEl._requestBody, param);
});
test('check cache invalidator from endpoint', function () {
myEl._cacheValid = true;
myEl.apiKey = 'newkey';
assert.equal(myEl._cacheValid, false);
myEl._cacheValid = true;
myEl.methodUrl = '/new/method';
assert.equal(myEl._cacheValid, false);
});
test('check cache invalidate from objects', function () {
myEl._cacheValid = true;
myEl.parameters = { "foo": "bar" };
assert.equal(myEl._cacheValid, false);
myEl._cacheValid = true;
myEl._response = { "foo": "bar" };
assert.equal(myEl._cacheValid, false);
});
test('cache save and load session', function () {
myEl.useSession = true;
var someValue = { "foo": "bar" };
myEl._cacheSave(someValue);
assert.equal(myEl._cacheLoad(), true);
assert.deepEqual(myEl._cachedResponse, someValue);
myEl.clearCache();
});
test('cache save and load localstorage', function () {
myEl.useSession = false;
var someValue = { "foo": "bar" };
myEl._cacheSave(someValue);
assert.equal(myEl._cacheLoad(), true);
assert.deepEqual(myEl._cachedResponse, someValue);
myEl.clearCache();
});
//test('real broker api call', function() {
// myEl.useSession = true;
// myEl.apiKey = 'ThisIsMyKey';
// myEl.endpoint = 'http://localhost/api';
// myEl.methodUrl = '/get/data';
// myEl.parameters = {};
// var request = myEl.getData();
// expect(myEl.loading).to.be.equal(true);
// return request.completes.then(function() {
// expect(myEl.loading).to.be.equal(false);
// });
// myEl.addEventListener('ajax-cached-data-response', function(data, cache, timestamp) {
// assert.equal('cache', 'false');
// assert.equal(data.broker.id, 1075);
// console.log(data);
// console.log(JSON.stringify(data));
// console.log('cached: ' + cache);
// });
// myEl.getData();
//});
});
</script>
</body>
</html>
<!-- end snippet -->
However, the variable `myEl` decalred inside `suite('<ajax-cached-data>', function () {...}` is accessed and I can see the test results passing.
And for `objAjax` I am getting "Error: objAjax is undefined <unknown> at basic-test.html:75". Please help me to understand why they are behaving differently although placed in a similar manner on the page.
Reply all
Reply to author
Forward
0 new messages