Siesta Tests Tips in Ringtail

Summary

This post contains notes on things that I find useful when writing Siesta tests for the ExtJs code in Ringtail.

Using an ExtJs store

The following example shows how to load a store with results and then confirm there are items in the store and the value in a column for the first row.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var loadResponse = { success: true, results: [{ "Rank": 1, "Extension": "doc" }, { "Rank": 2, "Extension": "docx" }, { "Rank": 3, "Extension": "rtf" }, { "Rank": 4, "Extension": "ppt" }, { "Rank": 5, "Extension": "pptx" }, { "Rank": 6, "Extension": "xls" }, { "Rank": 7, "Extension": "xlsx" }, { "Rank": 8, "Extension": "msg" }, { "Rank": 9, "Extension": "pdf" }, { "Rank": 10, "Extension": "mht" }, { "Rank": 11, "Extension": "htm" }, { "Rank": 12, "Extension": "html" }, { "Rank": 13, "Extension": "vsd" }, { "Rank": 14, "Extension": "txt" }], "total": 14 },
                        fileTypeRanksStore = t.createRegisteredStore('Ringtail.Web.store.portal.management.settings.portaloptions.filetyperank.FileTypeRanks'),
                        testTarget;

                    fileTypeRanksStore.loadData(loadResponse.results);

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List', { store: fileTypeRanksStore });

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should load the store and confirm it has 14 rows and the value for the Extension column in the first row is doc', function (t) {
                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' },
                            function (next) {
                                var store = testTarget.getStore();

                                t.expect(store.getAt(0).get('Extension')).toBe('doc');
                                t.expect(store.data.items.length).toBe(14);
                            }
                        );
                    });
                });
        });
});

Mocking a resource string

Line 17 in the following example shows how to mock a resource string

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var testTarget;

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List');

                    t.mockResourceString('PortalManagement_Settings', 'FileTypeRankReorderingFailure', 'Reordering files failed');

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should confirm the view loads', function (t) {
                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' }
                        );
                    });
                });
        });
});


Handle Requests to the Server

Line 31 in the following example shows how to handle a request to a server in unit tests. Note, I also have a click handler, which was needed in this specific test to trigger the request to the server.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var loadResponse = { success: true, results: [{ "Rank": 1, "Extension": "doc" }, { "Rank": 2, "Extension": "docx" }, { "Rank": 3, "Extension": "rtf" }, { "Rank": 4, "Extension": "ppt" }, { "Rank": 5, "Extension": "pptx" }, { "Rank": 6, "Extension": "xls" }, { "Rank": 7, "Extension": "xlsx" }, { "Rank": 8, "Extension": "msg" }, { "Rank": 9, "Extension": "pdf" }, { "Rank": 10, "Extension": "mht" }, { "Rank": 11, "Extension": "htm" }, { "Rank": 12, "Extension": "html" }, { "Rank": 13, "Extension": "vsd" }, { "Rank": 14, "Extension": "txt" }], "total": 14 },
                        fileTypeRanksStore = t.createRegisteredStore('Ringtail.Web.store.portal.management.settings.portaloptions.filetyperank.FileTypeRanks'),
                        testTarget;

                    fileTypeRanksStore.loadData(loadResponse.results);

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List', { store: fileTypeRanksStore });

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should handle the request to AddFileTypeRank on the server', function (t) {
                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' },
                            { click : "web-portal-management-settings-filetyperank-list => table.x-grid-item:nth-child(1) .c-action-col-cell", offset : [52, 15] },
                            t.respondToXhr({ url: 'PortalManagement/PortalSettings/AddFileTypeRank', response: { "success": true } }),
                            function (next) {
                                // Add assertions here
                            }
                        );
                    });
                });
        });
});

Another useful tip regarding respondToXhr requests is that I can perform the same action in the actual application and grab the response in Chrome Dev Tools, which can then be used to in my test.

Get a cell in a grid

Line 28 in the following example shows how to get a cell in a grid.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var loadResponse = { success: true, results: [{ "Rank": 1, "Extension": "doc" }, { "Rank": 2, "Extension": "docx" }, { "Rank": 3, "Extension": "rtf" }, { "Rank": 4, "Extension": "ppt" }, { "Rank": 5, "Extension": "pptx" }, { "Rank": 6, "Extension": "xls" }, { "Rank": 7, "Extension": "xlsx" }, { "Rank": 8, "Extension": "msg" }, { "Rank": 9, "Extension": "pdf" }, { "Rank": 10, "Extension": "mht" }, { "Rank": 11, "Extension": "htm" }, { "Rank": 12, "Extension": "html" }, { "Rank": 13, "Extension": "vsd" }, { "Rank": 14, "Extension": "txt" }], "total": 14 },
                        fileTypeRanksStore = t.createRegisteredStore('Ringtail.Web.store.portal.management.settings.portaloptions.filetyperank.FileTypeRanks'),
                        testTarget;

                    fileTypeRanksStore.loadData(loadResponse.results);

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List', { store: fileTypeRanksStore });

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should get the cell in the first row, second column', function (t) {
                        var cell = t.getCell(testTarget, 0, 2);

                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' },
                            { click: editableCell, desc: 'Click to edit the first extension cell' },
                            function (next) {
                                // Add assertions here
                            }
                        );
                    });
                });
        });
});



Editing a cell in a grid

The following example shows how to trigger and perform an edit to a cell in a grid. I was able to get the click, action, and click steps on lines 32-34 from the recorder feature in Siesta.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var loadResponse = { success: true, results: [{ "Rank": 1, "Extension": "doc" }, { "Rank": 2, "Extension": "docx" }, { "Rank": 3, "Extension": "rtf" }, { "Rank": 4, "Extension": "ppt" }, { "Rank": 5, "Extension": "pptx" }, { "Rank": 6, "Extension": "xls" }, { "Rank": 7, "Extension": "xlsx" }, { "Rank": 8, "Extension": "msg" }, { "Rank": 9, "Extension": "pdf" }, { "Rank": 10, "Extension": "mht" }, { "Rank": 11, "Extension": "htm" }, { "Rank": 12, "Extension": "html" }, { "Rank": 13, "Extension": "vsd" }, { "Rank": 14, "Extension": "txt" }], "total": 14 },
                        fileTypeRanksStore = t.createRegisteredStore('Ringtail.Web.store.portal.management.settings.portaloptions.filetyperank.FileTypeRanks'),
                        testTarget;

                    fileTypeRanksStore.loadData(loadResponse.results);

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List', { store: fileTypeRanksStore });

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should edit the value in the cell located in the first row, second column', function (t) {
                        var editableCell = t.getCell(testTarget, 0, 2);

                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' },
                            { click: editableCell, desc: 'Click to edit the first extension cell' },
                            { action: "type", text: "changed" },
                            { click: "web-portal-management-settings-filetyperank-list => .x-panel-body" },
                            function (next) {
                                var store = testTarget.getStore();

                                t.expect(store.getAt(0).get('Extension')).toBe('docchanged');
                            }
                        );
                    });
                });
        });
});


Handling Ringtail.Notification in tests

To handle calls to Ringtail.Notifications, we have to 
  • Set a spy (Line 30)
  • Assert that it was called (Line 42)
  • Reset the notification (Line 43)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
* This tests Ringtail.Web.view.portal.management.settings.filetyperank.List
**/
startTest(function (t) {
    'use strict';

    t.requireOk([
        'Ringtail.Web.view.portal.management.settings.filetyperank.List'
    ],
        function () {
            t.describe('Ringtail.Web.view.portal.management.settings.filetyperank.List',
                function (t) {
                    var loadResponse = { success: true, results: [{ "Rank": 1, "Extension": "doc" }, { "Rank": 2, "Extension": "docx" }, { "Rank": 3, "Extension": "rtf" }, { "Rank": 4, "Extension": "ppt" }, { "Rank": 5, "Extension": "pptx" }, { "Rank": 6, "Extension": "xls" }, { "Rank": 7, "Extension": "xlsx" }, { "Rank": 8, "Extension": "msg" }, { "Rank": 9, "Extension": "pdf" }, { "Rank": 10, "Extension": "mht" }, { "Rank": 11, "Extension": "htm" }, { "Rank": 12, "Extension": "html" }, { "Rank": 13, "Extension": "vsd" }, { "Rank": 14, "Extension": "txt" }], "total": 14 },
                        fileTypeRanksStore = t.createRegisteredStore('Ringtail.Web.store.portal.management.settings.portaloptions.filetyperank.FileTypeRanks'),
                        testTarget;

                    fileTypeRanksStore.loadData(loadResponse.results);

                    testTarget = Ext.create('Ringtail.Web.view.portal.management.settings.filetyperank.List', { store: fileTypeRanksStore });

                    Ext.create('Ext.container.Viewport', {
                        items: [testTarget],
                        renderTo: document.body,
                        layout: 'fit'
                    });

                    t.it('Should edit file type name', function (t) {
                        var editableCell = t.getCell(testTarget, 0, 2);

                        Ringtail.Notification = { show: t.createSpy('show') };

                        t.chain(
                            { waitForComponentQuery: 'web-portal-management-settings-filetyperank-list' },
                            { click: editableCell, desc: 'Click to edit the first extension cell' },
                            { action: "type", text: "changed" },
                            { click: "web-portal-management-settings-filetyperank-list => .x-panel-body" },
                            t.respondToXhr({ url: 'PortalManagement/PortalSettings/UpdateFileTypeRank', response: { "success": true } }),
                            function (next) {
                                var store = testTarget.getStore();

                                t.expect(store.getAt(0).get('Extension')).toBe('docchanged');
                                t.ok(Ringtail.Notification.show.calls.count() === 1, 'should have called Ringtail.Notification.show that edit succeeded');
                                Ringtail.Notification.show.and.reset();
                            }
                        );
                    });
                });
        });
});

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
} else { }