Sencha Q&A Summary – January 2019 Edition

You had questions and we’ve got answers! Please find a summary of questions and answers collected from our community of Sencha users at recent Sencha events, including the London, Paris and Munich Roadshows as well as our most recent webinar, “Testing your Ext JS apps with Sencha Test – Benefits & How-to Tips,” which you can watch on-demand here.

Sencha Roadshows in London, Paris and Munich: Q&A Summary

Can Sencha provide a TypeScript library for Ext JS?

Both ExtReact and ExtAngular (coming soon) include TypeScript definitions. Each product allows you to use Ext JS components within their respective products. However, we don’t have anything specifically packaged to allow users to use TypeScript in Ext JS. We are going to consider adding that in our next version of Ext JS.

When will Sencha release a metadata-free version of Sencha Architect?

We recognize this is an important feature, and will take a look at this. It is in our backlog of work to be done. In the meantime, take a look at our last Sencha Roadmap update blog post to see our plans for Architect and other products.

Does Sencha plan to stop supporting Classic Toolkit?

We are going to continue supporting Classic Toolkit. There is no risk to using Classic Toolkit, although we also encourage Developers to take a look at the Modern Toolkit as well. Modern toolkit is recommended for new projects that require better cross-platform device support and Classic toolkit is recommended for projects that require support for classic browsers like IE8/9/10, ARIA support, or support for RTL (Right-to-left) languages.

Is it possible to use Ext JS Upgrade Adviser to upgrade an Ext JS 3.4 application?

As a first step, we have decided to focus on the migration of Ext JS 4.2+ applications. After being sure that the Ext JS Upgrade Adviser can provide significant advantages for apps built on 4.x, we will explore options to extend its scope to cover earlier versions of Ext JS as well.

Does Sencha/Idera plan to include Froala with Ext JS packages?

Yes, the Froala editor will be integrated into Ext JS and included as part of our upcoming 7.0 release. If you’d like to learn how to use the Froala in your Sencha applications today, please read this blog post.

Does Froala plan to support Markdown format and page layouts? Is it possible to insert Sencha Chart into Froala Editor?

Markdown support is on Froala’s idea list here. Froala is taking a more Agile approach where they implement new things based on how many requests they get for a particular new feature. You can vote for Markdown support.

The PDF file export option was added to Froala Editor one month ago, and supporting page layouts is the next improvement the Froala team is going to make for this feature.

You can insert Sencha charts into the Froala editor as an SVG element directly. Another way would be to generate an image based on the chart component and then just insert an image into the editor.

Does Sencha plan to enhance the Grid component in the Modern Toolkit?

Yes, definitely. Grid Filtering and Locking are added to our Ext JS 6.7 release plan. We also have Drag & Drop support as well as Property Grid on our Roadmap list.

Can I run Sencha Test command line tool (STC) inside of a Docker container?

Although this specific setup isn’t officially supported, Sencha Test Command Line Interface (STC) tools can be installed inside of a Docker container. The following Dockerfile is provided here as an example:

Dockerfile#
# Build:
# docker build -t “stcdemo” .
#
# Run:
# docker run stcdemo
#

FROM openjdk:latest

ENV DISPLAY :10
ENV WORKSPACE src/SenchaTestDemo
ENV PATH /root/bin/Sencha/Cmd:$PATH
ENV PATH /usr/local/Sencha/Test/2_2_1_83/stc:$PATH

RUN wget -qO- https://deb.nodesource.com/setup_6.x | bash –

RUN apt-get install -y \
nodejs \
apt-utils \
libgtk2.0-0 \
libgtkextra-dev \
libgconf2-dev \
libnss3 \
libasound2 \
libxtst-dev \
libxss1 \
xvfb \
&& rm -rf /var/lib/apt/lists/*

ADD xvfb.init /etc/init.d/xvfb
RUN chmod +x /etc/init.d/xvfb
RUN update-rc.d xvfb defaults

# Download and install Sencha Cmd
RUN wget https://cdn.sencha.com/cmd/6.6.0.13/no-jre/SenchaCmd-6.6.0.13-linux-amd64.sh.zip \
&& unzip SenchaCmd-6.6.0.13-linux-amd64.sh.zip \
&& ./SenchaCmd-6.6.0.13-linux-amd64.sh -q

# Install Sencha Test
COPY /SenchaTest-2.2.1-linux-x64-no-jre.sh /tmp/
WORKDIR /tmp
RUN ./SenchaTest-2.2.1-linux-x64-no-jre.sh -q
RUN rm SenchaTest-2.2.1-linux-x64-no-jre.sh

# For demo purposes just copy project folder
COPY /DemoProject $WORKSPACE

WORKDIR $WORKSPACE

CMD (service xvfb start; export DISPLAY=:10; stc run -s test/EndToEnd/ -p “Sauce Labs”)

xvfb.init#!/bin/bash
#
# /etc/rc.d/init.d/xvfbd
#
# chkconfig: 345 95 28
# description: Starts/Stops X Virtual Framebuffer server
# processname: Xvfb
#

PROG=”/usr/bin/Xvfb”
PROG_OPTIONS=”:10 -ac”
PROG_OUTPUT=”/tmp/Xvfb.out”

case “$1” in
start)
echo -n “Starting : X Virtual Frame Buffer “
$PROG $PROG_OPTIONS>>$PROG_OUTPUT 2>&1 &
disown -ar
;;
stop)
echo -n “Shutting down : X Virtual Frame Buffer”
killproc $PROG
RETVAL=$?
[ $RETVAL -eq 0 ] && /bin/rm -f /var/lock/subsys/Xvfb/var/run/Xvfb.pid
echo
;;
restart|reload)
$0 stop
$0 start
RETVAL=$?
;;
status)
status Xvfb
RETVAL=$?
;;
*)
echo $”Usage: $0 (start|stop|restart|reload|status)”
exit 1
esac

exit $RETVAL

Testing your Ext JS apps with Sencha Test – Benefits & How-to Tips: Q&A Summary

Can I test on other browsers like Edge and IE 11?

For In-Browser tests, Edge and/or Internet Explorer will be detected by Sencha Studio if installed locally. For WebDriver tests, or if you need to run tests against a remote browser, then you can create a browser farm configuration in Sencha Studio, and leverage a custom Selenium Server, or a third party browser farm provider such as Sauce Labs or BrowserStack.
Configuration of browser farms is discussed in further detail in our documentation.

Is there a way to extend the default timeout of tests?

The default timeout for a Future API call is 5 seconds. This can be customized at the test level, or globally.

At the test level, APIs can take a timeout parameter. Take this example, which ensures Sencha Test waits up to 10 seconds for the text field to exist, and 8 seconds for it to have the specified value:ST.textField(‘textfield[reference=”firstname”]’, 10000)
.value(‘Daniel’, 8000);

If you want to set this globally, for all API calls, you can set the timeout as follows:ST.options.timeout = 10000;

You could include this in a beforeAll, which gets executed before any of your tests commence:beforeAll(function() {
ST.options.timeout = 10000;
});

Is there support for multi-screen (multi-tab) applications?

WebDriver scenarios allow you to interact with multiple tabs in the same browser window. The example below, which leverages a SharedWorker between two tabs, demonstrates how to switch context between the two browser tabs:/*
Run this test suite against the following URL:
http://coolaj86.github.io/html5-shared-web-worker-examples/index.html

Then, in the test suite below, another tab is opened up at this page:
http://coolaj86.github.io/html5-shared-web-worker-examples/inner.html

The two tabs will be part of the same session.

Both of these pages utilize the same SharedWorker, and when a message
is sent within the first page, it should show up in the second page.
*/describe(‘SharedWorker example’, function() {
var tabIds, driver;

beforeAll(function(done) {
driver = ST.defaultContext.driver;

// Open a new browser tab at the other URL, and get the tab ids
driver.newWindow(‘http://coolaj86.github.io/html5-shared-web-worker-examples/inner.html’)
.waitForExist(‘#log’)
.getTabIds()
.then(function(tabs) {
// Get the browser tab ids, so we can switch between them below
tabIds = tabs;
done();
});
});

it(‘should send a message in the first tab’, function(done) {
driver.switchTab(tabIds[0]).then(function() {
// Check definitely referencing correct page
ST.getUrl(function(url) {
expect(url).toContain(‘/index.html’);
});

ST.element(‘input[class=”js-message”]’)
.type(‘sample message’);

// Submit message from first page
ST.element(‘input[type=”submit”]’)
.click();

// Message shows up on first page
ST.element(‘@log’)
.expect(‘innerText’).toContain(‘sample message’)
.and(done);
});
});

it(‘should show the message in the second tab’, function(done) {
driver.switchTab(tabIds[1]).then(function() {
// Check definitely referencing correct page
ST.getUrl(function(url) {
expect(url).toContain(‘/inner.html’);
});

// Check message has shown up on second page.
// Can also use ST.element(‘@log’).textLike(‘sample message’);
ST.element(‘@log’)
.expect(‘innerText’).toContain(‘Inner log’)
.expect(‘innerText’).toContain(‘sample message’)
.and(done);
});
});
});

Does the push to Jira feature also work with AzureDevOps?

For the moment, Sencha Test only supports Jira for bug reporting.

Is there any support for bug reporting with Visual Studio Team Services (VSTS) or only JIRA?

For the moment, Sencha Test only supports Jira for bug reporting.

Can I use multiple selectors in a single Component Query?

Any valid Component Query in Ext JS can be used with the Sencha Test Futures API. So multiple selectors can be combined together to make a locator more unique, for example, parent-child component queries can be combined between a form and its text field to only query within that parent form:

ST.component('edit-form textfield[reference="firstname"]')

Also, Sencha Test supports Composite Locators, where you can combine a Component Query and DOM query to be even more specific to an element within a component. Composite Locators are covered in more detail in the documentation.

Concerning Ext JS dynamically generated label names: It looked like the references were generated to identify the elements using text field labels. Is there a configuration option in Ext JS to never alter a ‘dynamically generated’ element once generated, or must you always have an additional label (like in the TextField example) beyond the assigned to reference it properly?

Any config of a component can be used in a locator. In the examples shown in the recent webinar, “fieldLabel” was used to help narrow down the locator to a particular instance of a field. If there’s a potential for the field labels to change in the future, then you may want to use alternative properties, such as “reference”, if one has been defined by the developer, as that’s less likely to change between versions of the app, for example:

ST.textField('textfield[reference="loginname"]')