"after all" hook error while running test - testing

This is my test body:
/// <reference types = "cypress" />
it('Testing story book button primary', function(){
cy.visit('https://storybook.prod.ublox-website.ch4.amazee.io/iframe.html?id=components-button--primary&viewMode=story')
cy.wait(1000)
cy.eyesOpen({
appName: 'Story book',
testName: 'check button primary',
});
cy.eyesCheckWindow();
cy.eyesClose();
});
I have attached a screenshot of my error at the end it displays this error( I have attached).
Can someone please let me know why I am getting this error? I am stuck.
Thanks in advance.

It would be difficult for someone to help debug this with the limited code provided I think. Mainly because I'm not sure what your after() block looks like, the error that is being throw isn't occurring in this test, it's occurring in the teardown code when body.success doesn't exist (what results in body.success existing?). Additionally eyesOpen and eyesCheckWindow and eyesClose seem to be custom commands specific to Applitools, I'd at least recommend adding that as a tag or edit your post to include that information because that isn't part of the general testers' Cypress workflow/plugin stack.
Other than that, I'd try adding cy.log(body.error) or console.log(body.error) or adding the after() block, and add the results to your question.

On a separate note, you can try using the Applitools example test structure
it('works', () => {
cy.visit('https://applitools.com/helloworld');
cy.eyesOpen({
appName: 'Hello World!',
testName: 'My first JavaScript test!',
browser: { width: 800, height: 600 },
});
cy.eyesCheckWindow('Main Page');
cy.get('button').click();
cy.eyesCheckWindow('Click!');
cy.eyesClose();
});
});
or their "best practice" example structure
describe('Hello world', () => {
beforeEach(() => {
cy.eyesOpen({
appName: 'Hello World!',
browser: { width: 800, height: 600 },
});
});
afterEach(() => {
cy.eyesClose();
});
it('My first JavaScript test!', () => {
cy.visit('https://applitools.com/helloworld');
cy.eyesCheckWindow('Main Page');
cy.get('button').click();
cy.eyesCheckWindow('Click!');
});
});
Both look like they're passing text into eyesCheckWindow but I also am not familiar with applitools so this could be useless information.

Related

cypress-wait-until keeps retrying even though the value is true

I have a Cypress test that is flaky due to the serial and heavily asynchronous nature of the thing being tested.
In the app, we have a workout card that contains a list of exercises. Each exercise has a list of sets. If all the sets are logged, the workout should display as logged as well.
So, the test has to serially expand each workout, log each set (which has to update the workout, fetch the updated fitness plan, and render the new style for the log icon) and then test that the new style was applied. This was flaky as there were often detached elements, and in some cases the log style would take too long to apply (or the response was slow), so I began implementing the cypress-wait-until package. The problem is, no matter how I try to structure the waitUntil, it retries a bunch of times even if the value evaluated is true, and then times out with a 'Timed out retrying' error.
Here is the code in question:
cy.getBySel('exerciseRow')
.each(row => {
cy.wrap(row)
.findBySel('exerciseRow-trigger')
.isAttached()
.click({ force: true });
cy.wrap(row)
.isAttached()
.findBySel('exerciseRow-trigger')
.parent()
.should('have.class', 'is-open')
.then($el => {
cy.wrap(row)
.isAttached()
.findBySel('setRow-log')
.each(setLog => {
cy.wrap(setLog)
.isAttached()
.click({ force: true })
.then(log => {
cy.waitUntil(() => {
cy.wrap(log)
.find('circle')
.then(circle => circle.css("stroke") === 'rgb(189, 249, 234)')
}, {interval: 1000, timeout: 15000})
});
});
});
})
.then(result => {
cy.getBySel('workout-card-log')
.find('circle')
.should('have.css', 'stroke', 'rgb(189, 249, 234)');
});
});
A plain .should() should be just as effective
.then(log => {
cy.wrap(log)
.find('circle', {timeout: 15000})
.should(circle => {
expect(circle.css("stroke")).to.eq('rgb(189, 249, 234)')
// or
expect(circle).to.have.css('stroke', 'rgb(189, 249, 234)')
})
// or
.should('have.css', 'stroke', 'rgb(189, 249, 234)')
})

Stripe redirectToCheckout method redirects to successful url before showing any response in the .then section

I am trying to run a piece of code in the .then section of stripe.redirectTocheckout function. But it redirects me to the successfulUrl part before showing any response/result in the .then({}) and hence the code in the .then section does not run. Kindly help me. I am stuck here from a long time. Thank you.
stripe.redirectToCheckout({
items: [{ sku: 'abcssdd', quantity: 1 }],
successUrl:'https://your-website.com/congratulation',
cancelUrl: 'https://your-website.com/canceled',
})
.then(function (result) {
if (result.error) {
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
console.log("Inside Then");
})
The then option is there in case it fails. If it's not failing, there is no reason to show error.
It's a little confusing, IMHO, because then() is usually associated with success and catch() with the error., but note the comments form their docs below:
const stripe = Stripe('pk_test_TYauvdEDq54NiTpjx');
stripe.redirectToCheckout({
items: [
// Replace with the ID of your SKU
{sku: 'sku_123', quantity: 1}
],
successUrl: 'https://your-website.com/success',
cancelUrl: 'https://your-website.com/canceled',
}).then(({error}) => {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `error.message`.
});
src: https://stripe.com/docs/stripe-js/reference#stripe-redirect-to-checkout

Code executes in componentDidMount but not in Other functions

So I've run into an weird issue, maybe I'm doing something wrong here but I haven't had this problem before and my app is full of similar code.
Basically I'm trying to do a simple Firestore get() in a function attached to a button onPress. For some reason the code is not run, or if it is I'm not getting any feedback. If I put the same code in componentDidMount it runs and gives me the database snapshot.
Here are the two bits of code in question.
updated for the current binding I am using
this.usersRef = firebase.firestore().collection('users');
componentDidMount() {
this.usersRef
.get()
.then((snapshot) => {
console.log('TEST didMount snapshot', snapshot);
}).catch((error) => {
console.log(error)
});
}
submitSearch() {
console.log('submitSearch')
this.usersRef
.get()
.then((snapshot) => {
console.log('TEST submitSearch snapshot', snapshot);
}).catch((error) => {
console.log(error)
});
}
The submitSearch is called from here
<Button style={{marginTop: 3, marginBottom: 8}} primary onPress={() => this.submitSearch()}>
{strings.search}
</Button>
So I've tried a lot of things here and I can't seem to figure out why the code won't work in the submitSearch function. The only thing I see from that function is the console log saying submit search.
Any ideas would be appreciated! Thanks.
The issue was the way the function was bound.
I originally had the following in the constructor:
this.submitSearch = this.submitSearch.bind(this)
and was calling it in the button component with
onPress={this.submitSearch}
I removed the constructor binding and used just the following in the button component:
onPress={() => this.submitSearch()}
I thought I had done that already! But I can confirm this fixes the issue. It's strange that there are no warnings or errors though, seems like a scenario where they would be helpful instead of just not running the code.

Need advice about testing using Chimp.js/Mocha in Meteor.js

I'm trying to teach myself testing with Meteor but there is so much conflicting and outdated info online it's really difficult to work out what I need to do.
My current situation it that I have an application using the latest Meteor version (and the imports folder structure).
I've installed chimp globally and have created a /tests directory.
My first test is using chimp/mocha to fill in a form and try to insert something to the database. I'm also using the xolvio/backdoor package and running chimp like so
chimp --ddp=http://localhost:3000 --mocha --path=tests
Here's my test code:
describe('Chimp Mocha', function() {
describe( 'Create a Client', function() {
it( 'should fill in add client form', function() {
browser.setValue('#clientName', 'Test')
.setValue('#clientEmail', 'test#test.com')
.selectByValue('#numberTeamMembers', '25')
.submitForm('#createClient')
});
it( 'should check the collections for new client data', function() {
let getClient = server.execute( function() {
return Clients.findOne({ name: 'Test' });
});
expect( getClient.name ).to.equal( 'Test' );
});
after( function() {
server.execute( function() {
let client = Clients.findOne( { name: 'Test' } );
if ( client ) {
Clients.remove( client._id );
}
});
});
});
});
This is throwing an error that Clients is undefined
However, if I add
import { Clients } from '/imports/api/clients/clients.js';
I get this error Error: Cannot find module '/imports/api/clients/clients.js'
What am I doing wrong? Should I be using chimp? Any help would really be appreciated because I don't find the Meteor guide very clear about this!
Thanks
You need to use require like this:
require('/imports/api/clients/clients').Clients
See here for an example.

Testing ember nested routes fails

I'm using karma with qUnit (after following this tutorial) to test my Ember application. It's mostly going well, however I've run into a problem that doesn't make sense.
Given the 2 following tests:
test('can get to products', function() {
visit('/products/')
.then(function() {
ok(find('*'));
});
});
test('can get to catalogues', function() {
visit('/products/catalogues')
.then(function() {
ok(find('*'));
});
});
The first will run fine. The test runner gets to /products and finds something.
However, the second test returns an error in the console:
Error: Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in an Ember.run
I turned on transition logs, and the test runner is visiting products.catalogues.index before throwing the error.
Any ideas with this? Or is it simply a bug inside ember's testing tools?
Both are valid routes defined inside the router...
The last part of the error holds the key to how to fix this problem. You have to make sure that any code that make async calls is wrapped in Ember.run. This includes things as simple as the create and set methods.
If you have something like
App.ProductsRoute = Ember.Route.extend({
model: function() {
return [
Ember.Object.create({title: "product1"}),
Ember.Object.create({title: "product2"})
]
}
});
refactor it to
App.ProductsRoute = Ember.Route.extend({
model: function() {
return [
Ember.run( Ember.Object, "create", {title: "product1"} ),
Ember.run( Ember.Object, "create", {title: "product2"} )
]
}
});
or
App.ProductsRoute = Ember.Route.extend({
model: function() {
return Ember.run(function() {
return [
Ember.Object.create({title: "product1"}),
Ember.Object.create({title: "product2"})
]
});
}
});
If you posted your /products code it would be easier to give a more specific answer.