How can I test extjs application when there are pregerated ids for components or compoent parts like in a grid.
I can add ids to each component but what if I miss one or more, and the application is big and complex?
Is there a function or some module in ExtJS/Siesta which allows you to locate components/elements in the application without beign dependent on predefined ids for each component
First of all be very careful using IDs on the components. I have seen my fair share of problems with them.
Second, ExtJS provides several ways of targeting Components and Elements. Don't mix the two.
For Components:
Ext.getCmp(id)
Ext.ComponentQuery.query()
up()
down()
nextSibling()
previousSibling()
child()
previousNode()
plus various find.. methods
For Elements:
Ext.get()
Ext.dom.Query()
more on DOM Query http://docs.sencha.com/core/manual/content/domquery.html
With Siesta you have loads of options when targeting a place to click etc:
Dom node id (same as Ext Component id)
Any component query
Any CSS query
A coordinate
Real Ext Component JS instance
Real DOM node instance
Composite Query (combination of Component Query and CSS query, '.x-grid => .x-grid-cell'
A function, returning any of the above.
More info in my slides here: https://speakerdeck.com/mats/testing-sencha-touch
You may want to look at the automated functional GUI testing tool RIATest.
RIATest knows how to ignore ids dynamically generated by ExtJS, yet if you manually assign ids to the components the tool will use them for identification (see e.g. #tree2 in the sample below).
The tests in RIATest operate in terms of ExtJS UI widgets.
Examples of RIATest scripts that work with ExtJS widgets:
The following clicks on an ExtJS button with label "Next Page":
ExtButton("Next Page")=>click();
And the following does drag-n-drop of a row from one ExtJS tree to another:
ExtRow("Controller.js")=>dragAndDropTo(
ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));
And this collapses the header of an ExtJS box:
ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();
(All sample code above is from real test scripts that run on ExtJS sample applications).
(Disclaimer: I am a RIATest team member).
Related
I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.
Is it possible to create dynamic templates/pages with TVML without relying on Apple's standard templates?
Say I'd like to create a template that has 2 images next to each other and on top of these images a couple of textfields that I want to position based on some parameters.
Could I create a template/view i UIKit and populate it from JS as an alternative?
How would I go about this?
I think you're talking about a mix of "divTemplate", which exists precisely to let you use whatever layout you want with no predefined structure or placement, and using native code to define your own custom TVML elements.
From Apple's documentation, "There is no built-in layout for the contained elements. Use the style properties listed in TVML Styles to personalize the elements placed inside of the div template." It's for completely free-form by-hand element layout.
As for the other path: the way to add a UIKit view to TVML is by defining a custom element. That's how the TVML system knows where your custom view is supposed to go within the TVML "page". If you go down that path, you'll want to read up on TVMLKit, not just TVML and TVJS. You make a class that conforms to the TVInterfaceCreating protocol, potentially create a subclass of TVViewElement (if one of the existing classes isn't enough for your needs), register the element with [TVElementFactory registerViewElementClass: [MyTVViewElement class] forElementName:#"mycustomelement" ], and register your TVInterfaceCreating class with [[TVInterfaceFactory sharedInterfaceFactory] setExtendedInterfaceCreator: myInterfaceCreator].
So the way I see it, you could use a divTemplate and a ton of carefully crafted style info to do it entirely without any custom code or UIView objects, or you could make one or a small number of custom elements for the part you're talking about. I do not know if you can make a new "template" that is itself a custom element, however -- that's something I haven't tried yet.
If you decide to go down the native code path and you find that the TVViewElement-related APIs aren't rich enough for the coordination you want between JavaScript and your custom view, you may also need to read up on the JavaScriptCore APIs. Those let you expose arbitrary native-backed functionality via JavaScript, via the APIs on JSContext. In a TVML app, a good place to hook into all this is by implementing the - appController:(TVAppController *) evaluateAppJavaScriptInContext:(JSContext *) method from the TVApplicationControllerDelegate protocol.
I'm experimenting with Polymer. I love how the web components work. Now I want to build a web app. My question is: Should I have a main element (called app-element for example) that hosts all other elements and works as an orchestrator? One big element in the main html document that contains the JS code to handle all other elements? If yes do these elements exist in iron-elements or something? If not then how do I manage the JS code that handles the elements? pure js?
For people that used Angular 1, I remember the "app" controller? that was set to the body tag? This was a global controller to control all directives inside that html document. My question is do I follow a similar pattern with Polymer?
Taylor Savage (Polymer Product Manager) addresses this in the Polymer Summit 2015 opening keynote (the video is timed to kick off exactly where Taylor discusses the topic).
Up to now the Polymer team has viewed Polymer as "legos". You can put them together however you want. E.g. if you want routing, you can wrap your favorite routing library in an element. Polymer is a "swiss army knife" of tools that you use as you need. It's not a framework. It doesn't enforce app-level architecture. It's up to you decide. Which makes it hard on developers to know where to start.
So, here's three options off the top of my head:
Design your own architecture however you see fit
Wait for the "Carbon" elements that are designed to address application architecture (mentioned in the keynote)
Check out the Polymer Starter Kit. You'll see a lot of "container" or "parent" elements (e.g. elements that contain and unite children or "leaf node" elements). The main document is essentially just a declaration of all of these top-level container elements.
The 'parameterized' builds in Jenkins are a bit limited. What if I want to have options that are related to one another?
For example 2 drop down lists. The selection from the first one controls the options in the second...
I don't really see any prescribed way to implement this, but a thought (and it feels super-hacky) would be to use javascript.
I've noticed you can enter <script> tags in the description attribute of parameters. Maybe a place to drop in some js? Also looks like prototype.js ships with the system.
So just how bad an idea is that, or is there a 'correct' way to do such a thing?
Check out the Active Choices Plugin it does exactly what you're looking for:
jenkins-ci.org - Active Choices Plugin
github.com - Active Choices Plugin
A Jenkins UI plugin for generating and rendering multiple value
options for a job parameter. The parameter options can be dynamically
generated from a Groovy script and can respond to changes in other job
parameters. The value options can be rendered as combo-boxes,
check-boxes, radio-buttons or rich HTML. Active Choices strives to
provide in a single plugin functionality found scattered among several
pre-existing plugins and some unique capabilities that are not
available yet.
The Active Choices plug-in provides additional Jenkins
parameter types that can be rendered as user interface (UI) controls
in job forms.
Once the plugin is installed three new parameter types become
available:
Active Choices Parameter
Active Choices Reactive Parameter
Active Choices Reactive Reference Parameter
Active Choices parameters allow users to select value(s) for a job parameter. Parameter values can be:
dynamically generated (using Groovy or a Scriptler script)
dynamically updated based on other UI parameters
multi-valued (can have more than one value)
rendered with a variety of UI controls, including dynamic HTML
I think you would be able to accomplish your listed example with the following dynamic parameters plugin without using javascript: https://github.com/tekante/Dynamic-Jenkins-Parameter/wiki. I have not personally used the plugin as a disclaimer. It looks like it will probably need to be built first based on what I have seen in the GitHub repo and the fact that I cannot find it on the official Jenkins plugin page.
We are using ExtJs 3.4. I would like to build a trimmed version of ext-all.js so that the file size will be reduced. Is there any automated way to build this custom file or should I manually dig into the file and search for dependencies.
We have a page that use the following components.
Tab Panel
Panel
XTemplate
Radio Group
Button
And we use 'view port' to render the components. Can any one suggest how can we achieve this?
Even before that, given our case where we use these components, is it advisable to go for this customization ?
See http://www.sencha.com/learn/legacy/Tutorial:Building_Ext_From_Source