I want to show a simple message when a user is logged in I am trying to use this method:
this.$router.push('/dashboard', () => {
console.log('hiiiii')
this.$bvToast.toast('Welcome!', {
title: 'Message',
solid: true,
variant: 'success'
})
})
I can see console.log('hiiiii') is executed but I dont see the toast showing in the screen, I thought that onComplete shall execute after the url is changed or I am missing something ?
I am using nuxtjs v.2.15.7 with vue-router v.3.5.1
Related
I'm working on a Cypress test for the Polish Wikipedia plugin, and I have this code in my cypress test:
Cypress.Commands.overwrite('visit', (orig, path, options) => {
return orig(`https://pl.wikipedia.org/${path}`);
});
Cypress.Commands.add('login', (pass) => {
cy.visit('/w/index.php?title=Specjalna:Zaloguj');
cy.get('#wpName1').type('<username>');
cy.get('#wpPassword1').type(pass);
cy.get('#userloginForm form').submit();
});
Cypress.Commands.add('dark_vector_wait', (pass) => {
cy.get('.vector-menu-content-list > li:nth-child(7)', { timeout: 10000 }).should('be.visible');
});
And in my spec:
describe('dark vector test', () => {
beforeEach('login', () => {
cy.login(Cypress.env('WIKI_PASSWORD'));
});
it('test discussion', () => {
cy.visit('/wiki/Dyskusja_wikipedysty:<username>');
cy.dark_vector_wait();
cy.matchImageSnapshot('discussion');
});
it('testing-page page', () => {
cy.visit('/wiki/Wikipedysta:<username>/testing-page');
cy.dark_vector_wait();
cy.matchImageSnapshot('testing-page');
});
});
And the second test is failing because as soon as Cypress type the password it automatically submits a form so cy.get('#userloginForm form').submit(); is executing after Cypress visits the home page (default redirect) and fail to find a form.
What's wrong? Why does Cypress auto-submit a form after a second time? This is not what Wikipedia is doing since the login form doesn't have any JavaScript code and you need to click login to be able to login to Wikipedia.
EDIT:
I've tried to
Use BaseURL and remove overwrite of visit.
Add type('{enter}'), but this only shows an error: cy.type() failed because this element is detached from the DOM.
EDIT 2
This is the screenshot of the action taken by cypress, second test has a page load without {enter} action and without form submit.
The problem is in Cypress.Commands.overwrite('visit').
You pass the parameter with a leading slash '/wiki/Dyskusja_wikipedysty:<username>' but concatinate to base which also has a trailing slash https://pl.wikipedia.org/${path}, so now the full path is
https://pl.wikipedia.org//wiki/Dyskusja_wikipedysty:<username>
If you set baseUrl in configuration, Cypress sorts it out for you
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
baseUrl: 'https://pl.wikipedia.org'
}
})
Then remove the Cypress.Commands.overwrite('visit').
With these changes, I was able to pass both tests.
Using cy.session()
The problem might be one specific to locality, I do not have any steps missing in the Cypress log.
You can try adding a session cache so that the first login is re-used.
Cypress.Commands.add('login', (pass) => {
cy.session('login', () => { // login occurs only once
// credentials are cached
cy.visit('/w/index.php?title=Specjalna:Zaloguj');
cy.get('#wpName1').type('Jack Bosko');
cy.get('#wpPassword1').type(pass);
cy.get('#userloginForm form').submit();
// for good measure, confirm login was successful
// by checking for your name on the page
cy.contains('span', 'Jack Bosko')
})
})
So the problem was the weird IME keyboard that is part of MediaWiki. I somehow got it enabled on my system even when I was not logged in. Maybe added globally with cookies or something.
I noticed that keyboard when I was asking questions on the MediaWiki support page.
This is not related to Cypress. I'm investigating why the keyboard is there, and why clean environment it.
In my Vue project I'm using vue-router. When I navigate away from a certain page I get a vague error and the router stops working. Clicking links updates the URL in the browser, but the app won't navigate to the respective pages.
The error is
TypeError: Cannot read properties of null (reading 'parentNode')
The page in question uses a watcher to update the route query parameters when the user changes filtering and sorting options. This way, when the page is refreshed/copied/bookmarked, the same options will be selected on their return.
watch(
() => route.query,
() => {
selectedAddresses.value = selectedAddressesQuery.value
selectedStatuses.value = selectedStatusesQuery.value
selectedSortOrder.value = selectedSortOrderQuery.value
},
{ deep: true }
)
watch(
() => [
selectedAddresses.value,
selectedStatuses.value,
selectedSortOrder.value,
],
async () => {
router.replace({
query: {
...route.query,
address: selectedAddresses.value,
sort: selectedSortORder.value,
status: selectedStatuses.value,
},
})
}
)
Why am I getting this error when I navigate away from the page?
The problem was the watcher was being triggered when navigating away from the page because the query gets cleared, technically changing it.
The solution was to add a guard statement to the watch handler to check if we're still on the current page.
watch(
() => route.query,
() => {
// prevent triggering on page leave, which clears the query
if (route.name !== 'invoices') return
selectedAddresses.value = selectedAddressesQuery.value
selectedStatuses.value = selectedStatusesQuery.value
selectedSortOrder.value = selectedSortOrderQuery.value
},
{ deep: true }
)
This prevents the second watcher (that watches those values being set) from being triggered, which was trying to update the route that is no longer there.
I am calling forgotPassword api in the app and once its response comes from and state changes in reducer i get callback as i have useEffect in my component. I want to show user an alert that his password is reset successfully, but it shows only for 1 sec and goes away, i think whole view renders again. How can i make alert to staty until use taps on the button in alert.
useEffect(() => {
if (forgotPasswordData != null) {
Alert.alert('Success',forgotPasswordData.message, [{
text: 'OKAY',
onPress: () => {
dispatch({
type: authActions.RESET_FORGOT_PASSWORD_DATA,
});
console.log("Hello")
setEmail('');
setselectedAssociation(null);
setAssociationName('');
}
}]
);
}
}, [forgotPasswordData]);
When forgotPasswordData reset, useEffect will rerender again so the best option to alert the user is where you're getting a response.
You can create a callback function and define Alert in it and pass this callback to action and in Saga where you get a result, you can trigger this callback so It will Alert on view.
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
I'm using the last version of vue-js and element-ui
This question addresses the upload component whose documentation can be found here
Situation
A hook function before-upload allows us to check some stuff before allowing the upload to be accomplished.
Problem
When using a confirmation dialog, the upload does not wait the user to be accomplished
Question
Am I doing something wrong? Is this a bug?
https://jsfiddle.net/buoy2m4o/1/
You need to return the promise.
beforeAvatarUpload(file) {
return this.$confirm('Are you sure to upload this?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
// do stuff
})
}
Updated fiddle.