I'm trying Siesta for the first time and have attempted to configure it to test my ExtJS 4.1 MVC app.
I have autoCreateViewport set to false so the launch() function in my Ext.application creates the viewport (an extension of Ext.container.Viewport) for my app. When I load the siesta test page both the siesta UI and my app's UI are rendered in an ugly mess. If I comment out the creation of my viewport, then siesta renders properly but my app's initialization code fails because it has references to some components that have not been created. There are no error in the console with or without the viewport commented out.
I'm trying to follow the example in siesta-1.0.8-lite/examples/025-extjs-mvc although my app is much bigger and more complicated. That ex
How can I have only the siesta viewport rendered and have my app's viewport show up only in the window when I select 'Toggle DOM visible'? Or am I going about this all wrong?
Support Forum
OK. I've included index.js, siestaTestPage.jsp (which generates the html page), and StudySearchApp.js (the Ext.Application definition). The mixed viewport rendering happens before any tests are run so I didn't include the 010_sanity.t.js file.
Here's index.js:
My html is generated using a jsp template which I have abbreviated here a little bit:
And here is the application definition...
Here's index.js:
var Harness = Siesta.Harness.Browser.ExtJS;
Harness.configure({
title : 'Awesome Test Suite',
loaderPath : { 'StudySearch' : 'study-search' },
waitForAppReady: true,
preload : [
]
});
Harness.start(
'siesta-test/010_sanity.t.js'
);
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="https://www.springframework.org/tags" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<spring:message var="builddate" code="build.date" />
<!DOCTYPE HTML>
<html>
<head>
<meta name="appcontext" content="<c:url value='/' />">
<!-- vitaltheme.css includes ext-all.css -->
<link rel="stylesheet" type="text/css" href="<c:url value='/ext4/resources/vitaltheme/css/vitaltheme.css'></c:url>" />
<link rel="stylesheet" type="text/css" href="siesta-test/lib/siesta-1.0.8-lite/resources/css/siesta-all.css">
<script type="text/javascript" src="<c:url value="/ext4/ext-all-debug.js"/>"></script>
<script type="text/javascript" src="siesta-test/lib/siesta-1.0.8-lite/siesta-all.js"></script>
<script type="text/javascript" src="siesta-test/index.js"></script>
<script type="text/javascript" src="<c:url value="/study-search/StudySearchApp.js"/>"></script>
</head>
<body>
</body>
</html>
Ext.Loader.setConfig({
enabled: true,
disableCaching: true
});
Ext.ns('VI');
Ext.application({
name: 'StudySearch',
appFolder: '/vitrea-home/study-search', // note: absolute path rooted in JavaCommon/vitrea-home/target
autoCreateViewport: false,
enableQuickTips: true,
launch: function() { // This is fired as soon as the page is ready (as in onReady())
var me = this;
Ext.create('StudySearch.view.StudySearchViewport', {});
if ( ! Ext.util.Format.dateFormat) {
Ext.util.Format.dateFormat = 'Y@m@d'; // for Tartar ;)
}
// Fetch any search related config settings the user may have set in vitrea-admin
Ext.Ajax.request({
url: GetURL('studies/config/search'),
headers: {
accept: 'application/json'
},
success: function(response) {
StudySearch.searchConfig = Ext.JSON.decode(response.responseText);
VI.TIMEOUT.setSessionTimeout(StudySearch.searchConfig.sessionTimeout);
VI.TIMEOUT.setApp(me);
},
failure: function(response) {
VI.MSG.show(TR.ConfigurationLoadFailed,
Ext.String.format(TR.ConfigurationLoadFailedMessage, response.status, response.statusText));
}
});
},
models: ['Archive', 'DateRange', 'Modality', 'SearchResult'],
stores: ['Archives', 'DateRanges', 'Modalities', 'SearchResults', 'RetrievalStatuses'],
controllers: ['Filter', 'Header', 'SearchResult', 'DICOMQuery', 'DICOMRetrieveAndCancel']
});
I realize that this sets up the entire application which is overkill if I want to just test, say, a model class. But this is the way that the mvc example was set up so I got to this point by following the example. I'm going to try a more pared down approach today. Any advice would be much appreciated as I'm just trying to determine if our company should start to use siesta or jasmine/phantom.
Ah, you're including your application file in the Siesta Harness page. The harness HTML page, you typically never touch. You just add your tests to the Harness JS file, start method. If you want to load a full HTML page inside a test, use the hostPageURL option in that test descriptor. https://www.bryntum.com/products/siesta/ ... ostPageUrl
Open the browse-all-desktop.js, in the examples folder - you'll see:
Open the browse-all-desktop.js, in the examples folder - you'll see:
{
group : 'Basic drag drop',
items : [
{
// Specify your own HTML page if you want
hostPageUrl : '021-extjs-drag-drop/cats.html',
url : '021-extjs-drag-drop/010_drag-drop.t.js',
preload : []
},
'021-extjs-drag-drop/020_dd-tree.t.js'
]
},Thank you. That's an improvement. But now I seem to be missing some siesta resources. I don't see any load errors and both siesta_all.js and siesta_all.css are loaded. But the display is missing key elements.
Here is what it looks like in chrome:
[img]
https://d.pr/i/3O2a
[/img]
Any idea what might be missing?
Here is what it looks like in chrome:
[img]
https://d.pr/i/3O2a
[/img]
Any idea what might be missing?