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.

Follow Polymer on Google+: plus.google.com/107187849809354688692
--- 
You received this message because you are subscribed to the Google Groups 
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/polymer-dev/1398f8cb-0686-408c-b7ab-7fe5bc1ecc78%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to