Extjs testing framework(jasmine + extjs?)

Question

Are there any good examples of ExtJs framework with Jasmine or any other testing framework? I am using ExtJs 6.7 and 7.1

I found this thread on Sencha forums, but I think the topic is outdated and the thread seems dead. https://www.sencha.com/forum/showthread.php?308318

I have some success with siesta-lite(https://www.npmjs.com/package/siesta-lite) but I am looking for a free alternative, to run it on a CI process.

Thanks!

Andy Tran Andy Tran · Accepted Answer · 2020-05-12T13:34:29

Here's my directory structure generated when running this command

sencha -sdk <path-to-ext-framework> generate app MyApp ./extjs-jasmine

extjs-jasmine/
    ...
    app/
        store/
            ...
            Personnel.js
            ...
    ...
    index.html
    ...
    test.html
    test/
        lib/
            jasmine-3.5.0/ (just download and extract latest jasmine here)
            app-test.js
        spec/
            store/
                TestPersonnelStore.js

Here's test.html

<!DOCTYPE HTML>
<html manifest="">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Jasmine Unit Tests</title>

  <link rel="stylesheet" href="test/lib/jasmine-3.5.0/jasmine.css">

  <script src="ext/ext-bootstrap.js"></script>
  <script src="test/lib/jasmine-3.5.0/jasmine.js"></script>
  <script src="test/lib/jasmine-3.5.0/jasmine-html.js"></script>
  <script src="test/lib/jasmine-3.5.0/boot.js"></script>
  <script src="test/lib/app-test.js"></script>

  <script src="test/spec/store/TestPersonnelStore.js"></script>

</head>
<body>

</body>
</html>

Here's test/lib/app-test.js

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false,
    paths: {
        //examples to map unconventional packages
        'Ext.ux': 'ext/packages/ux/src',
        'Ext.chart': 'ext/packages/charts/src/chart',
        'Ext.chart.legend.LegendBase': 'ext/packages/charts/classic/src/chart/legend/LegendBase.js',
        'Ext.chart.theme.BaseTheme': 'ext/packages/charts/classic/src/chart/theme/BaseTheme.js',
        'Ext.draw': 'ext/packages/charts/src/draw',
        'Ext.draw.ContainerBase': 'ext/packages/charts/classic/src/draw/ContainerBase.js',
        'Ext.draw.SurfaceBase': 'ext/packages/charts/classic/src/draw/SurfaceBase.js',
        //test spec namespace
        'MyApp.spec': 'test/spec',
    }
});

Ext.application({
    name: 'MyApp',
    autoCreateViewport: false
});

Here's app/store/Personnel.js

Ext.define('MyApp.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',

    fields: [
        'name', 'email', 'phone'
    ],

    data: { items: [
        { name: 'Jean Luc', email: "[email protected]", phone: "555-111-1111" },
        { name: 'Worf',     email: "[email protected]",  phone: "555-222-2222" },
        { name: 'Deanna',   email: "[email protected]",    phone: "555-333-3333" },
        { name: 'Data',     email: "[email protected]",        phone: "555-444-4444" }
    ]},

    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

Here's test/spec/store/TestPersonnelStore.js

describe('MyApp.spec.store.TestPersonnelStore', () => {
    beforeAll((done) => {
        Ext.require([
            'MyApp.store.Personnel'
        ], () => {
            done();
        });
    });

    it('should load data...', (done) => {
        const store = Ext.create('MyApp.store.Personnel', {
            autoLoad: true
        });

        expect(store.getCount()).toBe(4);

        done();
    });
});

Then point your browser to http://<host>:<port>/<context>/test.html

Extjs testing framework(jasmine + extjs?)

1 Answers