w2ui overlay is not rendered in cypress headless test - list

Test passes in headed mode, but always fails in headless mode
I am trying to perform a test on the w2ui field of type "list"
Ideally, when we click on this w2ui list element, a drop-down (overlay) is generated with the select options and then we select an option.
But while running the test in headless mode, this drop-down is not generated.
Code To reproduce the issue:-
Code for the webpage:
Link to HTML code
Save the code provided in the above link in the file "test_webpage.html". Place this HTML file in the directory where cypress.json is located.
Code of Cypress Test:
describe('W2UI List Test', function() {
it('Click List Field', function() {
cy.visit('test_webpage.html');
cy.get('.w2ui-select').siblings('.w2ui-field-helper').should('be.visible').click();
cy.wait(2000);
cy.get('#w2ui-overlay tr[index=0]').should('be.visible').click();
});
});
Test Fail ScreenShot

Yes, there is a bug in Cypress currently where certain mouse events are not properly simulated when the Test Runner window is not the active window. This is being worked on here: https://github.com/cypress-io/cypress/issues/1909#issuecomment-395995180 , This is being worked on
In the meantime, you can change your test code to this, for example:
cy.get('.w2ui-select').siblings('.w2ui-field-helper').click()
cy.contains('Barack Obama').click()
Cypressautomatically checks for actionability before clicking, so no need for should('be.visible')

Related

Ionic2 LoadingController spinner animation not working

I am trying to show Loading animation using Ionic2 for long service progress report:
this.loading = this.loadingCtrl.create({
content: 'Please wait...',
spinner: 'ripple' // <<------ Is that correct?
});
this.loading.present();
The result is a text box without any spinner.
This is 09/22/2016 Ionic2 using latest beta (11) and I cannot actually find any example like above anywhere. Could this be a future feature documented but not yet implemented?
I am talking about the Ionic2 LoadingController documentations here
Is ripple a custom spinner? Otherwise, you can check the by default available spinners here:
ios
ios-small
bubbles
circles
crescent
dots
The spinner name should be passed in the spinner property, and any
optional HTML can be passed in the content property. If you do not
pass a value to spinner the loading indicator will use the spinner
specified by the mode. To set the spinner name across the app, set the
value of loadingSpinner in your app's config. To hide the spinner, set
loadingSpinner: 'hide' in the app's config or pass spinner: 'hide' in
the loading options
So another option, would be to just use the specified spynner according to the mode like this:
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
Thing is it might be that the Ionic team just put a way of extending the Loading control using a custom spinner, meaning that you have to put a SVG file name to the property.
It just looks obvious that you can put there one of the built-in spinner names.
Then again, it is reasonable to keep the app's design straight with the same spinner in all loaders. Guess that could be more bolded in the docs...

Jasmine Karma . Test failing after a specific number of tests(page reload error)

I am testing an angular application using karma jasmine, I have about 10 spec files , with a total of 10 describes and 48 test cases. The problem is that ,I am getting an error whenever the test case exceeds 47, the error says , some of the tests did a full page reload. i tried by commenting out random test cases and limited to 47 , then it works fine. even a blank 48th test case is giving the error ,
"jasmine-core": "^2.4.1",
"jshint-stylish": "^1.0.0",
"karma": "^0.13.21",
"karma-chrome-launcher": "^0.2.2",
"karma-coverage": "^0.5.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.7",
"karma-ng-html2js-preprocessor": "^0.2.1",
"karma-phantomjs-launcher": "^1.0.0",
this is my version of karma and related dependencies .
It relates to one or more of your your tests doing reloads. Unfortunately Karma doesn't tell you which.
Here's a solution from this issue.
1) Run your app with the following code included before anything else and DevTools (Chrome, in this case) open.
console.profile('cause of reload');
window.addEventListener('beforeunload', function() {
console.profileEnd('cause of reload');
debugger;
});
If the reload you're looking for happens, you should be taken to the "Sources" view of Chrome Devtools with the app paused at the debugger line.
2) Navigate to "Profiles" tab and choose the "Charts" view.
3) Command+F and search for "location".
4) Use the up and down arrows in the search box to jump to the last occuring matches for that phrase.
5) Hit enter in the search field to jump to the match.
6) Look back through the call stack for code you recognise.
Credit to JamieMason
I am just using an anchor tag with href but because that reloads it would fail for me as well with "Some of your tests did a full page reload!". I wanted to test a function being called during the click so this was my solution in the test:
const link = fixture.debugElement.query(By.css('a'));
link.triggerEventHandler('click', null);
The issue was with this:
link.click();
This way you can trigger a click without having it navigate and refresh the page.

How to setup test cases for SAPUI5/OPENUI5 applications?

I try to atomize my tests for a given UI5 application. Therefore I created a folder under WebContent called test-resources. In that folder I placed two files for first tests.
First file: experimental.qunit.html that contains some first working unit test code.
Second file: experimental.opa.html which contains an example code from the documentation.
The testing part looks like this:
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("index.html");
When.waitFor({
viewName : "view.master.Master",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({
name : "icon",
value : "sap-icon://show"
}),
success : function (aButtons) {
debugger;
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "No button with property icon equal to sap-icon://show"
});
Then.waitFor({
// not implemented
});
Then.iTeardownMyAppFrame();
});
First of all I assume that I can search a button also with icon property.
Second assumption is, that viewName is the name and folder of the view file? In the app, the view is the master view of a split app.
I start the test like this:
* In Eclipse mark the project and choose run as "Web App Preview"
* Than of course I see my normal app
* I replace the index.html part with test-resoruces/experimental.opa.html
* Now I can see the test and my app is shown in an iframe
But:
1. The button selection is not working, anyone an idea what's wrong?
2. If I change the html code I have to restart the "Web App Preview" all the time, a reload seems not working. Is there a "better" way to run the tests after updating test code?
The app itself is defined as a component, and the main view is a SplitApp xml file that contains nothing than:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitApp id="idAppControl" />
</mvc:View>
Meanwhile I detect the problem and fixed it. My syntax of PropertyStrictEquals was wrong.
The restart problem (of Web App Preview) still exists.
I also detected a helpful example:
https://openui5beta.hana.ondemand.com/test-resources/sap/m/demokit/cart/test/BuyProductJourney.qunit.html
It is mentioned here:
http://scn.sap.com/community/developer-center/front-end/blog/2014/10/16/javascript-based-integration-tests-for-sapui5-apps-with-opa
(Have a look at the testing Tutorial in the developper guide)
First of all, in your example you are mixing the levels of abstraction. Directly in your jurney (the order of steps for your tests) there should not be any code like waitFor(), because that is page specific code. So you should create pages, on where your actual arrangements, actions and assertions take place. In the jurney you only call them. like this (source):
opaTest("Should see the post page when a user clicks on an entry of the list", function (Given, When, Then) {
// Arrangements
Given.iStartMyApp();
//Actions
When.onTheWorklistPage.iPressOnTheItemWithTheID("PostID_15");
// Assertions
Then.onThePostPage.theTitleShouldDisplayTheName("Jeans");
});
Those objects onTheWorklistPage and onThePostPage are your actual test steps, wher you search for objects and trigger a click or check the displayed text you create them like that:
Opa5.createPageObjects({
onTheWorklistPage: {
baseClass: Common,
actions: {...},
assertions: {...}
}
})
Now in those actions and assertions you put your waitFor() to get elements and do something with them. This function is described in the API
PS: Your question is very unstructured and I am not shure if I answered your question, if not, please comment.

TFS Build servers and critical Unit Tests

When you build on a TFS build server, failed unit tests cause the build to show an orange alert state but they still "succeed". Is there any way to tag a unit test as critical such that if it fails, the whole build will fail?
I've Googled for it and didn't find anything, and I don't see any attribute in the framework, so I'm guessing the answer is no. But maybe I'm just looking in the wrong place.
There is a way to do this, but you need to create multiple test runs and then filter your tests. On your tests, set a TestCategory attribute:
[TestCategory("Critical")]
[TestMethod]
public void MyCriticalTest {}
For NUnit you should be able to use [Category("Critical")]. There are multiple attributes of a test you can filter on, including the name.
Name = TestMethodDisplayNameName
FullyQualifiedName = FullyQualifiedTestMethodName
Priority = PriorityAttributeValue
TestCategory = TestCategoryAttributeValue
ClassName = ClassName
And these operators:
= (equals)
!= (not equals)
~ (contains or substring only for string values)
& (and)
| (or)
( ) (paranthesis for grouping)
XUnit .NET currently does not support TestCaseFilters.
Then in your build definition you can create two test runs, one that runs Critical tests, one that runs everything else. You can use the Filter option of the Test Run.
Open the Test Runs window using this hard to find button:
Create 2 test runs:
On your first run set the options as follows:
On your second run set the options as follows:
This way Team Build will run any test with the "Ciritical" category in the first run and will fail. If the first run succeeds it will kick off the non-critical tests and will Partially Succeed, even when a test fails.
Update
The same process explained for Azure DevOps Pipelines.
Yes.
Using the TFS2013 Default Template:
Under the "Process" tab, go to section 2, "Basic".
Expand the Automated Tests section.
For "Test Source", click the ellipsis ("...").
This will open a new window that has a "Fail build when tests fail" check box.

Why does this Ember.js app work locally but not on jsFiddle.net?

Here's the fiddle. Here's the gist with the contents of my local file.
As you can see, the HTML and JavaScript are identical, and I'm loading identical versions of the jQuery, Handlebars.js, and Ember.js libraries. It works as expected locally, but does not render the application template on jsFiddle.net.
I see the following error in the Web Console:
[19:44:18.202] Error: assertion failed: You must pass at least an object and event name to Ember.addListener # https://github.com/downloads/emberjs/ember.js/ember-latest.js:51
BTW-To test the gist as a local HTML file, make sure to run it behind a web server or your browser won't download the JavaScript libs. If you have thin installed (ruby webserver), go to the directory it's in and run thin -A file start, then navigate to localhost:3000/jsfiddle-problem.html in your browser.
If you set the "Code Wrap" configuration on your fiddle to one of the options other than "onLoad" your application will work. Here is an example.
The reason for this is Ember initializes an application when the jQuery ready event fires (assuming you have not set Ember.Application.autoinit to false). With the jsFiddle "Code Wrap" configuration set to "onLoad" your application is introduced to the document after the jQuery ready event has fired, and consequently after Ember auto-initializes.
See the snippet below from ember-latest, taken on the day of this writing, which documents Ember auto-initialization being performed in a handler function passed to $().ready.
if (this.autoinit) {
var self = this;
this.$().ready(function() {
if (self.isDestroyed || self.isInitialized) return;
self.initialize();
});
}
This was strange - I couldn't get your fiddle working, specifically your {{controller.foo}} call until I disabled autoinit. I am guessing when using jsfiddle the application initialize kicks off before seeing your router. I also noticed with your fiddle the router was not logging any output even when you had enableLogging set to true.
I updated your fiddle to not use autoinit, http://jsfiddle.net/zS5uu/4/. I know a new version of ember-latest was released today, I wonder if anything about initialization changed.