Skip to content

Instantly share code, notes, and snippets.

@kbailles

kbailles/isc-messages-data-helper-test.html

Last active September 26, 2018 11:33
Show Gist options
  • Save kbailles/f996358ad02bcbbbef68 to your computer and use it in GitHub Desktop.
Save kbailles/f996358ad02bcbbbef68 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer TDD example
Raw
isc-messages-data-helper-test.html
<!doctype html>
<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>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../isc-messages-data-helper.html">
</head>
<body>
<test-fixture id="IscMessagesDataHelper">
<template>
<isc-messages-data-helper>
</isc-messages-data-helper>
</template>
</test-fixture>
<script>
describe('<isc-messages-data-helper>', function() {
var myEl
, commerceUrl
, iscToken
, server
, spy;
beforeEach(function() {
server = sinon.fakeServer.create();
server.respondImmediately = true;
//Spy MUST be created before fixture is called
var proto = document.createElement('iron-ajax').constructor.prototype;
spy = sinon.spy(proto, 'generateRequest');
myEl = fixture('IscMessagesDataHelper');
commerceUrl = 'https://testsite.com';
iscToken = '1234oeiwjfijXijweofijw82348932oiwejfwoeijfio';
});
afterEach(function() {
server.restore();
var proto = document.createElement('iron-ajax').constructor.prototype;
proto['generateRequest'].restore();
});
it('should start with "/api/v1/messages/" for messagesEndpoint', function() {
var actual = myEl.messagesEndpoint;
var expected = '/api/v1/messages/';
assert.equal(actual, expected);
});
it('should compute url correctly', function() {
myEl.commerceUrl = commerceUrl;
var actual = myEl.computeUrl();
var expected = commerceUrl + myEl.messagesEndpoint;
assert.equal(actual, expected);
});
it('should not allow the outside world to set "messages" property', function() {
var outsideWorldMessages = { foreign: true };
myEl.messages = outsideWorldMessages;
assert.isUndefined(myEl.messages);
});
it('should not make any HTTP requests when element is just initialized', function() {
server.respondWith('GET', /.*/, [200, { "Content-Type": "application/json" }, '{}']);
assert.isFalse(spy.called);
});
it('should make one HTTP request when commerceUrl and iscToken is set', function() {
server.respondWith('GET', /.*/, [200, { "Content-Type": "application/json" }, '{}']);
myEl.commerceUrl = commerceUrl;
myEl.iscToken = iscToken;
assert.isTrue(spy.calledOnce);
});
it('should correctly set Authorization header on requests', function() {
server.respondWith('GET', /.*/, [200, { "Content-Type": "application/json" }, '{}']);
myEl.commerceUrl = commerceUrl;
myEl.iscToken = iscToken;
var expected = 'Bearer ' + iscToken;
var actual = server.requests[0].requestHeaders.Authorization;
assert.strictEqual(actual, expected);
});
it('should make additional HTTP requests whenever you change iscToken, commerceUrl, or messageEndpoint', function() {
server.respondWith('GET', /.*/, [200, { "Content-Type": "application/json" }, '{}']);
myEl.commerceUrl = commerceUrl;
myEl.iscToken = iscToken;
myEl.commerceUrl = 'https://newurl.com';
assert.isTrue(spy.calledTwice);
});
it('should set "messages" property when a successful HTTP request was made', function(done) {
var expected = JSON.stringify({ "messages": "[]" });
server.respondWith('GET', /.*/, [200, { "Content-Type": "application/json" }, expected]);
var handleResponseOrig = myEl._handleResponse;
sinon.stub(myEl, '_handleResponse', function() {
handleResponseOrig.bind(this)(arguments[0]);
var actual = JSON.stringify(myEl.messages);
assert.strictEqual(actual, expected);
done();
});
myEl.commerceUrl = commerceUrl;
myEl.iscToken = iscToken;
});
});
</script>
</body>
</html>
Raw
isc-messages-data-helper.html
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<dom-module id="isc-messages-data-helper">
<template>
<iron-ajax id="ajax"
handle-as="json"
on-response="_handleResponse">
</iron-ajax>
</template>
</dom-module>
<script>
(function() { 'use strict';
Polymer({
is: 'isc-messages-data-helper',
properties: {
commerceUrl: {
type: String
},
iscToken: {
type: String
},
messagesEndpoint: {
type: String,
value: '/api/v1/messages/'
},
messages: {
type: Object,
readOnly: true,
notify: true
}
},
observers: [
'_tryLoadMessages(commerceUrl, messagesEndpoint, iscToken)'
],
computeUrl: function() {
return this.commerceUrl + this.messagesEndpoint;
},
_tryLoadMessages: function() {
this.$.ajax.headers = { Authorization: ( 'Bearer ' + this.iscToken )};
this.$.ajax.url = this.computeUrl();
this.$.ajax.generateRequest();
},
_handleResponse: function(e) {
this._setMessages(e.detail.response);
}
})
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment