Rectangle 27 101

I had the same need (to test my angularjs app), and the only way I found is to use require.js:

var json = require('./data.json'); //(with path)
var json = require('./data.json'); //(with path)

note: the file is loaded once, further calls will use the cache.

If you're doing this with jest, then remember to do jest.dontMock('./data.json'); or else the result is empty. Might be useful for someone out there :)

What is the context of this code? What do you do with json?

javascript - Loading local JSON file - Stack Overflow

javascript jquery json firebug local-files
Rectangle 27 96

I had the same need (to test my angularjs app), and the only way I found is to use require.js:

var json = require('./data.json'); //(with path)

note: the file is loaded once, further calls will use the cache.

If you're doing this with jest, then remember to do jest.dontMock('./data.json'); or else the result is empty. Might be useful for someone out there :)

What is the context of this code? What do you do with json?

javascript - Loading local JSON file - Stack Overflow

javascript jquery json firebug local-files
Rectangle 27 96

I had the same need (to test my angularjs app), and the only way I found is to use require.js:

var json = require('./data.json'); //(with path)

note: the file is loaded once, further calls will use the cache.

If you're doing this with jest, then remember to do jest.dontMock('./data.json'); or else the result is empty. Might be useful for someone out there :)

What is the context of this code? What do you do with json?

javascript - Loading local JSON file - Stack Overflow

javascript jquery json firebug local-files
Rectangle 27 95

I had the same need (to test my angularjs app), and the only way I found is to use require.js:

var json = require('./data.json'); //(with path)

note: the file is loaded once, further calls will use the cache.

If you're doing this with jest, then remember to do jest.dontMock('./data.json'); or else the result is empty. Might be useful for someone out there :)

What is the context of this code? What do you do with json?

javascript - Loading local JSON file - Stack Overflow

javascript jquery json firebug local-files
Rectangle 27 1

If you are running PhantomJS directly, then you need to create a script to load the page. See the example below. That said, if you are trying to test your Web pages, there are headless testing frameworks designed to work with PhantomJS. These frameworks take care of the details of loading HTML, scripts, and other resources when running tests. Personally, I use the Karma Test Runner with the karma-requirejs plugin to run unit tests.

If you are trying to run PhatomJS directly, you need to create a script to open the HTML page. In the simple example below, run.js, the 'testFile.html' page is opened, and it prints the title of the page. It then sets a 100ms time out that prints the title again and exits.

var page = require('webpage').create();

page.open('testFile.html', function(status) {
  var title = page.evaluate(function() {
    return document.title;
  });
  console.log('Page title is ' + title);
  setTimeout(function () {
    var title  = page.evaluate(function () {
      return document.title;
    });
    console.log('Page title is ' + title);
    phantom.exit()
  }, 100);
});

Below is an example of the output running the command:

phantomjs run.js 
Page title is Original Title
Page title is Title Updated

The reason for the timeout is that the AMD modules are loaded asynchronously, and you'll need to build a way in your run.js script to take into account the asynchronous nature of the AMD modules. I strongly suggest using one of the existing test runners that integrate with RequireJS instead of reinventing the wheel.

To see this in action, modify your testFile.html to be:

<html>
<head>
    <title>Original Title</title>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js">    
    </script>
    <script type="text/javascript">
        require(["fakeTest"], function () {});
    </script>
</head>
<body>
</body>
</html>
define(["require", "exports"], function (require, exports) {
  document.title = 'Title Updated';
});

javascript - RequireJS errors in PhantomJS but not Chrome/FireFox - St...

javascript requirejs phantomjs
Rectangle 27 1

As a help to whoever else may have this problem, I tried all these things and nothing worked for me. Here's what does work. I am not sure exactly what causes this error, but apparently when you just press "F5" in VS to debug your app, it runs YourProject.vshost.exe as the process name. If you run the same app from the command line, it will show up as YourProject.exe, and the javascript errors vanish. I think IE sees the app running visa via VSHOST and decides this is fishy and disables javascript from loading correctly.

So... go into your project setting for your executable. Select "Debug" options. Select "Start External Program". Browse to and select Debug\YourProgram.exe (NOT YourProgram.vshost.exe). Save, recompile, and hit F5.

Everything should work as per usual now, and Visual Studio even attaches to the process for you automatically.

c# - WebBrowser control and JavaScript errors - Stack Overflow

c# javascript .net winforms webbrowser-control
Rectangle 27 0

errors.html is in my views folder yes, and it has some markup. However, that markup doesn't get rendered. No markup does, the app just redirects to the error url but then it's blank..

javascript - Templates not loading in angularJS and Ionic - Stack Over...

javascript angularjs ionic-framework
Rectangle 27 0

I struggled with this error for a little while, but managed to come up with an sensible solution.

What I wanted to achieve is to successfully stub the Service and force a response, on controllers it was possible to use $httpBackend with a request stub or exception before initiating the controller. In app.run() when you load the module it initialises the object and it's connected Services etc.

I managed to stub the Service using the following example.

describe('Testing App Run', function () {
    beforeEach(module('plunker', function ($provide) {
        return $provide.decorator('config', function () {
            return {
                load: function () {
                    return {};
                }
            };
        });
    }));


    var $rootScope;
    beforeEach(inject(function (_$rootScope_) {
        return $rootScope = _$rootScope_;
    }));

    it("defines a value I previously could not test", function () {
        return expect($rootScope.value).toEqual('testing');
    });

});

I hope this helps your app.run() testing in the future.

javascript - Unit test when loading things at app run with AngularJS -...

javascript angularjs
Rectangle 27 0

I have observed the same problem for fullScreen iOS webApp's installed on the homeScreen. I'm sure it's a bug, but I can remove the spinner with a hard reSet or by reStarting the device. After reSet, the webApp runs without problems until the day the device detects some random netWork problem on loading the app. This problem is remembered by your device until it's reSat. The bug first occured in iOS 6 but unfortunately not solved on iOS 7.

javascript - ios constantly displaying loading spinner for mobile web ...

javascript ios angularjs mobile mobile-safari
Rectangle 27 0

I am not sure what you mean by "not loading itself" but anyways it is possible to mock the .reload() in tests. I did it in my App by first of all using Angular service $window.location instead of native javascript location in my App like this after injection $window as dependency to my controller:

$window.location.reload();

Then in the spec file I have the following (with one example test case using the mocked reload):

describe('Controller: MyCtrl', function () {

  // load the controller's module
  beforeEach(module('myApp'));

  var MyCtrl,
    scope,
    mockBackend,
    window;

  beforeEach(function(){
    inject(function(_$httpBackend_, $controller, $rootScope, $window) {
        scope = $rootScope.$new();
        mockBackend = _$httpBackend_;
        window = $window;
        spyOn(window.location, 'reload');
        myCtrl = $controller('MyCtrl', {
            $scope: scope,
            $window: window
        });
    });
  });

it('logout should fail if $window.reload() is called on unsuccessful logout call', function(){
    scope.logout();
    mockBackend.expectGET('/rest/session/logout').respond(404);

    mockBackend.flush();
    expect(window.location.reload.calls.count()).toEqual(0);

    mockBackend.verifyNoOutstandingExpectation();
    mockBackend.verifyNoOutstandingRequest();
  });
});

This is a bit differently structured to your spec file, but I hope this example clarifies how to mock $window object and use spies on it.

See, this is exactly the issue, the reload() refreshes the test page. (Im running tests in HTML). I need it to stop!

By changing the location.reload() in your controller to use angular service ($window.location.reload()), you can create a Jasmine spy on it and that will stop doing the actual page reloads in your tests - like in my example above. More info on spies in Jasmine is at jasmine.github.io/2.1/introduction.html#section-Spies

Rationale here is that global objects as such cannot be mocked directly. More info on mocking in general is available e.g. from this nice article: sitepoint.com/mocking-dependencies-angularjs-tests

The spy did not stop the operation of the reload.

angularjs - How to avoid location.reload() in angular tests via jasmin...

angularjs testing jasmine
Rectangle 27 0

$injector is a singleton for an application and not for a module. However, angular.injector will actually try to create a new injector for each module (I suppose you have a

beforeEach(module("app"));

I had the same problem while using Angular, RequireJS, Karma and Jasmine and I figured out two ways to solve it. I created a provider for the injector function as a separate dependency in my tests. For example MyInjectorProvider which provides a singleton instance of $injector.

The other way was to move the following statements:

beforeEach(module("app"));
beforeEach(inject(function($injector){
    ...
})

inside the test suite description. So here is how it looked before:

After applying the fix it looks like this:

define(['services/SignupFormValidator'], function(validator){
    var validator;

    describe("Signup Validation Tests", function(){
        beforeEach(module("app"));
        beforeEach(inject(function($injector){
            validator = $injector.get("SignupFormValidator");
        });

        it("...", function(){...});
    });
});

javascript - Unit test when loading things at app run with AngularJS -...

javascript angularjs
Rectangle 27 0

Script url that you are using for loading is perfect. You can check your Url by posting "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" in browser url if you will get the javascript text file then it is working. I test it and that url is working fine on my side.Error is some where else either there is restriction(security resons) or there is internet connection problem on the system when ever you run that web application on the system. solution is either use minified copy in you web application and provide the relative path or use

<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
 }
 </script>

javascript - Why is $(document).ready(); undefined? - Stack Overflow

javascript jquery html
Rectangle 27 0

There's nothing to trigger the script after it's initial run. This is because AngularJS apps are 'single page' apps and navigating inside the app doesn't trigger a full page refresh (by design). This is why Angular routes appear after the hash symbol http://localhost:9000/#/myRoute Where did you place your directive? The directive JS will fire each time the directive is rendered. If the directive code isn't being run again it's because it isn't being re-rendered.

I placed my directive in a seperate JS file known as app.js. What can I do else ?

app.js is where you defined your directive. Where is it placed in your HTML? For instance: <my-directive-name></my-directive-name> This is what will determine how/how many times your directive is rendered.

Ohh, In that case, I placed my directive in one of the partial view file, 'main.html'

javascript - Script not loading when redirecting to a view in AngularJ...

javascript angularjs angularjs-directive youtube-api
Rectangle 27 0

If you want to hide your app while AngularJS loads then default your spinner to being displayed using plain HTML, and use ng-cloak to hide the angular portions of the application.

Once your app loads you can turn off the spinner using ng-hide/ng-show.

<div ng-controller="TopController">
  <div class="spinner" ng-hide="appLoaded"/>
  <div ng-cloak ng-view>
     ... All Angular view giblets go here...
  </div>
</div>

I'll presume that ng-cloak shows automatically once it's hit in the code without any additional config? But how do I hide the spinner once it's loaded? As your example in your other answer expects a service...

So how would I detect the app has loaded? As you're just using a timeout: $timeout(function() { $scope.loaded = true; }, 5000); and setting the loaded to true after 5 seconds... but I'd want it to relate to the actual loading of assets (e.g. the app is ready and all data has loaded for the initial view).

Or have I misunderstood the way that timeout is working? Is it counting down 5 seconds AFTER everything has loaded?

after 5 seconds run that function. It will load 5 seconds after angular loads which is there just so you can see the spinner. You wouldn't do that in a normal application. Once your controller loads the app has loaded. However, if you also want to make sure the data is loaded then it's my first answer where you wait till the service responds to remove the spinner.

javascript - Initial loading spinner for AngularJS - Stack Overflow

javascript angularjs
Rectangle 27 0

When you are building a single page app with Angularjs, the best practice is to concatenate and minify all of your javascript into a single file and precompile all of your html views in a single file. You can then include these directly into your index.html file. This means that a client can make just two network requests to get all of the code necessary for your app to run and won't ever need to wait to download stuff when switching views.

Personally, I use gulp to build my files, but there are lots of different build systems. Here's a sample from my gulpfile that handles the script building:

And then in the index.html file:

As you can see, the directory structure doesn't matter at all at the end of the day. Personally I switched to using the modular approach and found that for larger projects it is a ton easier to keep organized and componentized.

javascript - AngularJS: does the directory structure (e.g. modular pro...

javascript angularjs angularjs-module angularjs-model
Rectangle 27 0

The cordova.js script tag should be in the header. Also you need to check that the cordova.js file is present in the www directory of the app. I have rewritten the html file. You can use the code below to test your jquery mobile app. Happy coding!!!

<html>
<head>
    <title>UIAdv</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!-- link rel="stylesheet" type="text/css" href="css/index.css" /-->

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.external-png-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-png-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-svg-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.3.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.3.css" />

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.3.js"></script>
    <!-- script type="text/javascript" src="js/index.js"></script -->
    <!-- script type="text/javascript"> app.initialize(); </script -->
</head>
<body>
<div class="app">
    <h1>Welcome to UIAdv</h1>
    <a href="#" class="ui-btn ui-btn-inline">Anchor</a>
</div>
</body>
</html>

javascript - jquery mobile not loading in phonegap app - Stack Overflo...

javascript jquery jquery-mobile cordova
Rectangle 27 0

You don't need the angular.mock.module thing, just need to inject your app module. Something like this:

var httpBackend;

beforeEach(module('app'));
beforeEach(inject(function($httpBackend) {
  httpBackend = $httpBackend;
  $httpBackend.expectGET('/config').respond(200, {'googleAnalyticsAccount': 'something'});
}));

In your tests, when you need the mocked http to answer, you will call httpBackend.flush(). This is why we have a reference to it, so you don't need to inject it in every single test you have.

Thanks for your answer. If I do any injection before calling angular.mock.module I get an error saying that the Injector was already created

Post the related specs, please.

javascript - Unit test when loading things at app run with AngularJS -...

javascript angularjs