Extjs 测试框架（jasmine + extjs？）

Question

是否有使用 Jasmine 或任何其他测试框架的 ExtJs 框架的好例子？ 我正在使用 ExtJs 6.7 和 7.1

我在 Sencha 论坛上找到了这个帖子，但我认为这个话题已经过时了，而且这个帖子似乎已经死了。 https://www.sencha.com/forum/showthread.php?308318

我在 siesta-lite( https://www.npmjs.com/package/siesta-lite ) 上取得了一些成功，但我正在寻找一个免费的替代方案，在 CI 过程中运行它。

谢谢！

Answer 1

这是我运行此命令时生成的目录结构

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

这是 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>

这是 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
});

这是 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: "jeanluc.picard@enterprise.com", phone: "555-111-1111" },
        { name: 'Worf',     email: "worf.moghsson@enterprise.com",  phone: "555-222-2222" },
        { name: 'Deanna',   email: "deanna.troi@enterprise.com",    phone: "555-333-3333" },
        { name: 'Data',     email: "mr.data@enterprise.com",        phone: "555-444-4444" }
    ]},

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

这是 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();
    });
});

然后将浏览器指向http://<host>:<port>/<context>/test.html

Extjs 测试框架（jasmine + extjs？）

问题描述

1 个解决方案

解决方案1
1 2020-05-12 13:34:29

Extjs 测试框架（jasmine + extjs？）

问题描述

1 个解决方案

解决方案1 1 2020-05-12 13:34:29

解决方案1
1 2020-05-12 13:34:29