Problem description
CypressError: Timed out retrying: Expected to find content: 'mm'
within the element: but
never did.
I have mounted the component on cypress with mock data. Then I tried to get an element using below source code and receive the above error:
cy.get('#edit-highlights-form1').contains('2m');
Current situation
I have a vue.js application which contains a component and it consumes data from an API. Please find the source code below that I tried to write unit test for that component using Cypress.
Code:
describe('Edit highlights component ', () => {
beforeEach(mountVue({
template,
components,
data
}))
it('Stub the mock data to the component edit highlights', () => {
cy.server();
cy.route({
method: 'GET',
url: '/drupal/api/v1/getHighlightData/*',
response: data().highlightModel
}).as('apiHighligihtData');
mountVue({
template,
components,
data
});
cy.get('#edit-highlights-form1').contains('2m');
});
});
I got the tutorial from https://github.com/bahmutov/cypress-vue-unit-test/blob/master/cypress/integration/ajax-list-spec.js
I was not able to get the element #edit-highlights-form1 using the cypress command cy.get(). I solved this issue by using the command cy.get("#edit-highlights-form1").should( "have.value", '2m' );
Related
I'm making a Crud using Vue and axios.
My "create component" is working fine, but I have a problem with my "edit component".
The two components are the same except that the edit one have a parameter on the URL ("myweb.com?id=3") and on mounted cycle I make an axios call to retrieve the register data.
mounted() {
this.$http.get("/api/getOrder?id=" + this.order).then((response) => {
this.complements = response.data
}); ...
I get this error "::: TypeError: this.$http is undefined" that break my code.
In my axios.js I have my prototype defined which is working fine on the rest of components:
Vue.prototype.$http = axiosIns
The weird thing is that this error only appear on production (not on local) and is intermittent (sometimes it works correctly, sometimes fails ... no pattern found)
EDIT ::
I realize that if I remove the axios call from mounted and put it on a button-method it works perfectly
Any help will be appreciate
I am writing a simple WDIO selector with following statement. I was able to uniquely idenitfy it in browser. Not sure why WDIO was not able to set the value.
Given(/^I am on the login page$/, function () {
browser.url('https://secure-sandbox.modulrfinance.com/')
browser.maximizeWindow()
});
When(/^I enter password as \"([^\"]*)\"$/, function (password:string) {
//const txt_username = $('#username-inp')
//const txt_password = $('#password-inp')
$('#username-inp').setValue('')
$('#password-inp').setValue(password)
});
Then(/^I should see a flash message under username saying \"([^\"]*)\"$/, async function () {
const banner = await $('#.ng-star-inserted')
expect(banner).toHaveText('This field is required1')
});```
**error**
**[0-0] error: 'no such element',
[0-0] message: 'no such element: Unable to locate element: {"method":"css selector","selector":"#password-inp"}\n'** +
Seems like you are testing Single Page Application written in angular. You have to deal with the asynchronous behavior of Angular, by adding appropriate waits(Implicit, Explicit or Fluent waits).
Check this example.
I am using for the first time the aurelia-testing package to test my HTML code.
I seem to have followed the docs to set up my test as follows:
describe('Contextual Menu HTML View test suite', function () {
let component: ComponentTester;
beforeEach(function () {
component = StageComponent
.withResources('../../src/components/modal/contextual-menu')
.inView('<contextual-menu is-active.two-way="activateMenu"></contextual-menu>')
.boundTo({ activateMenu: false });
});
it('should not add the is-active class to the root element', async function () {
await component.create(bootstrap);
const rootElement = await waitForDocumentElement('.qa-contextual-menu');
expect(rootElement.classList.contains('is-active')).toBe(false);
});
afterEach(function () {
component.dispose();
});
});
I tried using just bind instead of two-way but that fails too.
I tried both with a document.querySelector and with waitForDocumentElement, both cases fail, but anyways I assume the error comes from earlier.
I am getting an error and I am not sure why. Could you put on the tracks to identify the root cause of the following:
TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.
at Object.convert (/Users/lemoustachiste/work/lm-frontend/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Node.js:573:11)
at HTMLDivElement.replaceChild (/Users/lemoustachiste/work/lm-frontend/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Node.js:292:31)
at NodeJsDom.replaceNode (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-pal-nodejs/dist/nodejs-dom.js:95:29)
at makeElementIntoAnchor (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2432:19)
at applyInstructions (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2479:17)
at ViewFactory.create (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:2707:7)
at TemplatingEngine.enhance (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-templating/dist/commonjs/aurelia-templating.js:5290:24)
at /Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-framework/dist/commonjs/aurelia-framework.js:176:28
at new Promise (<anonymous>)
at Aurelia.enhance (/Users/lemoustachiste/work/lm-frontend/node_modules/aurelia-framework/dist/commonjs/aurelia-framework.js:174:12)
Thanks a lot
I am not a jest user. So I simply used the scaffolded TS jest skeleton app from aurelia-cli (au new jest-skeleton --unattended --select typescript,jest,vscode). And found that to be working.
It seems the you are missing the following configuration in your jest.config.js.
testEnvironment: "node",
After only adding that, the tests started working.
I'm trying to write an e2e test using Cypress on my Vue app. I want to test if request on form submit returns correct value.
I know i need to use cy.spy. I also know I neet to spy on fetch method but I have no idea which object to tie it to.
From documantation:
The object that has the method to be wrapped.
Which for me would be the component I'm trying to test? I'm not sure if I'm interpreting this argument correctly. Can anyone explain?
EDIT:
My guess is that I need to use methods? But if I try to import them into my test_spec.js I get Cannot find module...
To spy over a response, you can use the route command instead of spy.
https://docs.cypress.io/api/commands/route.html
it('Example Test', function () {
cy.visit('https://stackoverflow.com/');
cy.server(); // cy.server needs to be invoked first in order to use cy.route command
cy.route({
url: `**/your/request/path/**`,
method: 'POST',
onResponse: (xhr) => {
console.log(xhr);
// here you can assert on xhr.response.body values
}
});
});
I am using Vue (server side rendered) with mjml to generate emails.
So I have something (overly simplified) like:
<mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>
If the model doesn't define User then Vue throws an error and the whole output is lost.
What I want to the output to be along the lines:
<mjml><mj-body>Hello <error>'User' is undefined</error></mj-body></mjml>
I have implemented Vue.config.errorHandler but that just tells me about the error -- there is no rendered output.
Anyway to implement the equivalent of an error handler around each variable substitution?
If you are using Vue version >= 2.5, you can use errorCaptured to create an ErrorBoundary
const ErrorBoundary = {
name: 'ErrorBoundary',
data: () => ({
error: false,
msg: ''
}),
errorCaptured (err, vm, info) {
this.error = true
this.msg = `${err.stack}\n\nfound in ${info} of component`
},
render (h) {
return this.error
? h('pre', this.msg)
: this.$slots.default[0]
}
}
and use this in your component
<error-boundary>
<mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>
</error-boundary>
If the application has any javascript error, it will be displayed on UI
Example on codepen
If you want to have more user-friendly error, you can customize ErrorBoundary to have fallback to another component. You can find out in this tutorial
Another good example of using errorHandler