Sencha Q&A サマリ – 2019年1月版

January 24, 2019 108 Views

この記事は Sandeep Adwankar, Daniel Gallo によるSencha Q&A Summary – January 2019 Editionの抄訳です

ロンドン、パリ、ミュンヘンで開催されたSencha RoadShows や最近のWebinar「Testing your Ext JS apps with Sencha Test – Benefits & How-to Tips,(オンデマンド視聴はこちら)」で頂いた様々な質問について回答します。

ロンドン、パリ、ミュンヘンで開催されたSencha RoadShowsでのQ&A

SenchaはExt JS向けのTypeScriptライブラリを提供していますか？

Ext JSではなく、ExtReactとExtAngular（近日公開予定）の両方はTypeScript型定義を含んでいます。各製品はそれぞれの製品内でExt JSコンポーネントを使用することを可能にします。しかしユーザーがExt JSでTypeScriptを使用できるようにするための特別のパッケージはまだありません。Ext JSの今後のバージョン向けにTypeScript型定義の追加を検討します。

Senchaは、Sencha Architectの metadata-free バージョンをいつリリースするのですか？

これは重要な機能と認識しており、今後、調査を進めます。この調査はSenchaが行うべきバックログとして存在しています。なお、Sencha Architectとその他のプロダクトに関する今後の計画については、Sencha Roadmapの最新の記事をご確認ください。

SenchaはClassic Toolkitのサポートを中止する予定ですか？

Senchaは今後もClassic Toolkitのサポートを継続します。Classic Toolkitを選択しつづけることでのリスクは特にありませんが、これから開発するアプリではModern Toolkitの採用を検討することもお勧めします。より優れたクロスプラットフォームデバイスサポートを必要とする新しいプロジェクトにはModern toolkitを、IE 8/9/10、ARIAサポート、またはRTL（Right-to-Left）言語のサポートなどのClassicブラウザのサポートを必要とするプロジェクトにはClassic toolkitが向いています。

Ext JS 3.4アプリケーションをアップグレードするためにExt JS Upgrade Adviserを使用することは可能ですか？

最初のステップとして、我々は、Ext JS 4.2 以降をターゲットとするアプリケーションの移行にフォーカスすることにしました。Ext JS Upgrade Adviserが4.x上で構築されたアプリに大きな利点を提供できることを確認した後、その範囲を拡張してExt JSのより以前のバージョンもカバーするオプションを検討します。

Sencha / Ideraは、FroalaをExt JSパッケージに含めることを計画していますか？

はい、Froala EditorはExt JSに統合した上で、今後の7.0リリースの一部として含まれる予定です。現時点でSenchaアプリケーションからFroalaを使用する方法を知りたい場合は、このブログ記事を読んでください。

Froalaは、Markdownフォーマットとページレイアウトをサポートする予定ですか？ Froala EditorにSencha Chartを挿入することは可能ですか？

Markdownのサポートは、こちらのFroalaのアイデアリストの中にあります。Froalaは、特定の新機能に対する要求の数に基づいて新しいものを実装する、よりアジャイルなアプローチを取っています。あなたはMarkdownのサポートについて vote することができます。
1ヵ月前にPDFファイルのエクスポートオプションがFroala Editorに追加されました。そして、ページレイアウトのサポートは、Froalaチームがこの機能のために次に行う改善です。

Sencha Chartは、SVG要素としてFroalaエディタに直接挿入できます。別の方法は、チャートコンポーネントに基づいて画像を生成してから、エディタに画像を挿入することです。

Senchaは、Modern ToolkitのGridコンポーネントを拡張する予定ですか？

はい、もちろんです。グリッドのフィルタリングとロックがExt JS 6.7のリリースプランに追加されました。ロードマップリストには、ドラッグ＆ドロップ、プロパティグリッドも含まれます。

Dockerコンテナ内でSencha Testのコマンドラインツール（STC）を実行できますか？

この特定の設定は正式にサポートされていませんが、Senchaテストコマンドラインインターフェース（STC）ツールはDockerコンテナ内にインストールできます。STCを含むDockerイメージを作成するためのDockerfileのサンプルとxvfb.initは以下のとおりです。

Dockerfile

#
# Build:
# docker build -t “stcdemo” .
#
# Run:
# docker run stcdemo
#FROM openjdk:latestENV 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
#

[ “${NETWORKING}” = “no” ] && exit 0

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

Sencha TestでExt JSアプリをテストする – 利点と使い方のヒント：Q&Aまとめ

EdgeやIE 11などの他のブラウザでテストすることはできますか？

In-Browserテストでは、Sencha StudioによりEdgeまたはInternet Explorer、あるいはその両方がローカルにインストールされていることを検知します。
WebDriverテストや、またはリモートマシン上のブラウザに対してテストを実行することが必要な場合は、Sencha Studioでブラウザファーム設定を作成し、カスタムSelenium Server、またはSauce LabsやBrowserStackなどのサードパーティブラウザファームプロバイダを利用できます。ブラウザファームの設定については当社のドキュメントでさらに詳しく説明しています。

テストのデフォルトのタイムアウトを延長する方法はありますか？

Future API呼び出しのデフォルトのタイムアウトは5秒です。これはテストレベルで、またはグローバルにカスタマイズできます。

テストレベルでは、APIはタイムアウトパラメータを受け取ることができます。この例では、Sencha Testは、テキストフィールドが存在するまで最大10秒間、指定された値になるまで8秒間待機します。

ST.textField(‘textfield[reference=”firstname”]’, 10000)
.value(‘Daniel’, 8000);

すべてのAPI呼び出しに対してこれをグローバルに設定したい場合は、次のようにタイムアウトを設定できます。

ST.options.timeout = 10000;

これをbeforeAllに含めることができ、テストが始まる前に実行されます。

beforeAll(function() {
ST.options.timeout = 10000;
});

マルチスクリーン（マルチタブ）アプリケーションのサポートはありますか？

WebDriverのシナリオでは、同じブラウザウィンドウ内の複数のタブを操作できます。以下の例は2つのタブ間でSharedWorkerを利用するもので、2つのブラウザタブ間でコンテキストを切り替える方法を示しています。

/*
   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);
});
});
})

JIRAへのプッシュ機能はAzureDevOpsでも機能しますか？

現時点では、Sencha Testはバグ報告に関してJiraのみをサポートしています。

Visual Studio Team Services（VSTS）またはJIRAのみによるバグ報告のサポートはありますか？

現時点では、Sencha Testはバグ報告に関してJiraのみをサポートしています。

単一のComponent Queryで複数のセレクターを使用できますか？

Ext JSの有効なComponent QueryはSencha Test Futures APIと一緒に使用できます。そのため、ロケータをより一意にするために複数のセレクタを組み合わせることができます。たとえば、親子コンポーネントのクエリをフォームとそのテキストフィールドの間で組み合わせて、その親フォーム内でのみクエリを実行できます。

ST.component(‘edit-form textfield[reference=”firstname”]’)

また、Sencha Testはコンポジットロケーターをサポートしています。そこでは、コンポーネントクエリとDOMクエリを組み合わせて、コンポーネント内の要素にさらに固有のものを指定できます。コンポジットロケーターについては、ドキュメントで詳しく説明されています。

Ext JSが動的に生成したラベル名について：テキストフィールドのラベルを使って要素を識別するための参照が生成されたように見えました。Ext JSには、一度生成された「動的に生成された」要素を決して変更しない設定オプションがありますか。それとも、それを正しく参照するために割り当てられた以外に追加のラベルが必要ですか。

コンポーネントのどの設定もロケータで使用できます。最近のウェビナーに示されている例では、「fieldLabel」はロケーターをフィールドの特定のインスタンスに絞り込むのに役立ちます。将来フィールドラベルが変更される可能性がある場合、開発者によって定義されている場合は、下記の例のように「reference」などの代替プロパティを使用することをお勧めします。

ST.textField(‘textfield[reference=”loginname”]’)