Results 1 to 7 of 7

Thread: Karma + Jasmine ExtJS Testing

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Posts
    3
    Vote Rating
    1
      1  

    Default Karma + Jasmine ExtJS Testing

    I am looking for a working example of running Jasmine tests for ExtJS using Karma. I have found many example that work for ExtJS 4 but not for 6. Basically the goal is to automatically run ExtJS Jasmine tests using Karma with PhantomJS.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506
    Vote Rating
    296
      0  

    Default

    Have you also considered Sencha Test?
    https://www.sencha.com/blog/sencha-t...available-now/

  3. #3
    Sencha User
    Join Date
    Nov 2015
    Posts
    2
    Vote Rating
    1
      1  

    Default Jasmine ExtJS

    As far as Sencha Test, tried it. Very buggy, UI is clunky and will stop responding/working for no apparent reason. Also not included in Pro or Premium, so an additional cost. Pricing isn't announced, so we don't even know how much it's going to cost us to add it to our stack. Frustrating that Sencha immediately says "buy this new thing" when someone asks a pretty straight-forward technical question.

    Getting Jasmine+Karma+Phantom up and running has a few gotchas. I'm working on putting together an example which I'll post here sometime next week. In the meantime here's a quick overview of how to get tests up and running with a vanilla Jasmine SpecRunner.html.

    The first thing to get working is establishing the Ext context and the loader so that each js file will get fetched on demand. I recommend running it in Chrome dev tools so you can see the files being fetched, and any errors. I like to use the Sencha cmd app watch for my normal red/green/refactor loop. Other devs like to execute a build command manually before refreshing the specs page. This example is for modern, but you can tweak for regular using ext-all-debug.js instead.

    First, add a folder to your app folder called lib. Inside lib add a folder for Ext and a folder for jasmine. In the Ext folder copy the ext-modern-all-debug.js from the /sdk/build folder. Copy the jasmine files into the jasmine folder.

    In the /app folder add a SpecRunner.html file.

    Start with a SpecRunner.html file that loads the jasmine and ext dependencies in this order:

    <link rel="shortcut icon" type="image/png" href="lib/jasmine/jasmine_favicon.png">
    <link rel="stylesheet" href="lib/jasmine/jasmine.css">

    <script type="text/javascript" src="ext/build/ext-modern-all-debug.js"></script> <!-- this is the Ext framework file that must be loaded before jasmine it's referenced in the setPath below-->


    <script src="lib/jasmine/jasmine.js"></script>
    <script src="lib/jasmine/jasmine-html.js"></script>
    <script src="lib/jasmine/boot.js"></script>
    <script src="setup-ext.js"></script> <!-- this is the file that configures the loader, sets the path, and creates the application -->

    <!-- the rest of the scripts are tests that go here -->
    <script src="verify-ext.js"></script>

    setup-ext.js should look something like this:

    Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
    });

    Ext.Loader.setPath({
    'Ext': 'ext',
    '<put the name of your app here>': 'app'
    });

    Ext.application({name: '<put the name of your app here>'});

    Ext.require('Ext.data.Model');

    afterEach(function () {
    Ext.data.Model.cache = {};
    });

    and then your verify-ext.js is the first actual spec that verifies Ext is initialized:

    describe("Ext", function() {
    it("is defined", function() {
    expect(Ext).toBeDefined();
    });

    it("is version 6", function() {
    expect(Ext.getVersion().major).toEqual(6);
    });
    });

    Once that's green you can start creating specs for your other controllers, views, etc.

    The bits for Phantom and Karma are a little more involved.

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    29
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by natificent View Post


    Getting Jasmine+Karma+Phantom up and running has a few gotchas. I'm working on putting together an example which I'll post here sometime next week. In the meantime here's a quick overview of how to get tests up and running with a vanilla Jasmine SpecRunner.html.
    Did you have an example put together? I'm trying to get a unit test framework up and running for our ExtJS 4.0 installation.

  5. #5
    Sencha User
    Join Date
    Jan 2016
    Posts
    3
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by natificent View Post


    Once that's green you can start creating specs for your other controllers, views, etc.

    The bits for Phantom and Karma are a little more involved.
    Thank you for the description. I will try your method and will let you know how it goes. Also, can't wait to see your final example with karma and phantomjs.

  6. #6
    Sencha User
    Join Date
    Jan 2016
    Posts
    3
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by jakehurst View Post
    Did you have an example put together? I'm trying to get a unit test framework up and running for our ExtJS 4.0 installation.
    So this questions is posted for ExtJS 6. ExtJS 4 actually has a lot of tutorials that people have posted before. Here are a few:

    I haven't tested any of them since I am working on extjs 6 but this should give you what you needed.

  7. #7
    Sencha Premium User
    Join Date
    Sep 2008
    Posts
    133
    Answers
    3
    Vote Rating
    46
      0  

    Default

    Any update on this one? I am also very interested in finding a good testing setup.
    Management means doing the things right,
    Leadership means doing the right things.
    www.interpid.eu

Similar Threads

  1. Replies: 3
    Last Post: 22 Jul 2014, 8:53 AM
  2. Ext JS 4.x view Testing - Jasmine
    By vipinsudhakar in forum Ext: Q&A
    Replies: 1
    Last Post: 20 Feb 2014, 8:06 AM
  3. Replies: 3
    Last Post: 10 Jan 2014, 6:03 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •