cy.confirmMetamaskSignatureRequest() fails - synpress plugin - automated-tests

I am testing a staking dapp. Using cypress with the synpress plugin, that makes Metamask interactions easy. https://github.com/Synthetixio/synpress
Now the dapp works. When it goes to confirmMetamaskSignatureRequest, metamask just stays open. I tried cy.switchToMetamaskWindow();, cy.rejectMetamaskSignatureRequest(). The picture shows where the test is idling and eventually failing. Any ideas?
halting at this picture
it('test', () => {
// imports a custom address
cy.importMetamaskAccount(Cypress.env('PRIVATE_KEY'))
// open the staking tab
cy.visit('/staking', {
auth: {
username: Cypress.env('URL_USERNAME'),
password: Cypress.env('URL_PASSWORD')
},
});
// connect wallet to dapp
cy.contains('Connect Wallet').click();
cy.contains('MetaMask').click();
cy.switchToMetamaskWindow();
cy.acceptMetamaskAccess().should("be.true");
// check if address is recognised by dapp
cy.getMetamaskWalletAddress().then(address => {
cy.switchToCypressWindow();
cy.get('p').contains('WALLET:').should('exist');
console.log(address);
cy.get('p').contains(address).should('exist');
cy.get('p').contains('DISCONNECT').should('exist');
});
// input the amount to stake
cy.get('input[name="Token[enter image description here][1]Value"]').type('1');
// choose the time to stake
cy.contains('10 days').click();
// confirm staking
cy.contains('confirm Staking').click();
// should sign metamask tx but its only metamask window is open
cy.confirmMetamaskSignatureRequest().should("be.true");
});

Solved:
Instead of...
cy.confirmMetamaskSignatureRequest().should("be.true");
...you should use this:
cy.confirmMetamaskTransaction().should("be.true");

Related

Firebase Persisting Auth with Stack Navigator

Attempting to let Firebase persist authentication within the app.js of React Native by doing the following:
There is a sign in page that envokes auth() sign in via Firebase, which works fine, and redirects to the home page via navigation.replace("Home"); however, once the app is closed and relaunched on the emulator, it redirects back to sign in.
This is seemingly what the App.js looks like, I assume that the AuthStateChanged would be prevalent as depicted below, however, user is not accessed in App.js as it is established in SignIn.js, when the Firebase credentials are sent, but I assume it would be similar to this layout?
const App = () => {
var initialRoute = null
React.useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if(user) {
initialRoute = "Home"
}
else {
initialRoute = "SignIn"
}
})
return unsubscribe
}, []);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={initialRoute}
>
The reason it needs to affect the initial route, and not just redirect anyone who reopens to the home page, is because after registration, there are extra steps included that adjust the database, such as location mapping and etc., therefore, the redirection has to occur within the initial route.
Thanks for your assistance.
This is not how you build a navigation flow with react-navigation. But that's no problem since theres a guide here on the official react-navigation side on how to do that: https://reactnavigation.org/docs/auth-flow/
Fixed by setting two different returns within App.js, one for if the user is authenticated with Firebase that sets the initialRoute to "Home", and one for else that sets it to "SignUp", seems to work fine.

Deep Link doesn't open the app instead does a google search

I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on platforms such as fb messenger/whatapp or even normal texts and when they click this link it will launch my app to a specific page using the parameters.
After extensive research online - I’ve come to a blocker, following expo’s documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I’m able to share content but only as string.
I am using react-natives Share library to share to an app and I’m using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Linking.makeUrl( ' ' , { postkey : "7a5d6w2x9d6s3a28d8d});
url: Linking.makeUrl( ' ' , { pkey : gkey });
title: 'This post is amazing',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
_handleRedirect=(event)=> {
let {path,queryParams} = Linking.parse(event);
Alert.alert(`queryparams : ${event} path : ${path} `)
this.props.navigation.navigate("Post_Detail",{key:queryParams.postkey})
}
}
componentDidMount() {
let scheme = 'nxet'
Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', ({url}) => this._handleRedirect(url));;
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting to have this working on Android Device and facing this issue
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
You can not open external links, means other than http, https on Android. But you can on iOS. In order to be able to open your expo links, you need proper anchor tags on android. You can create html mails and give it a try, you will see it is gonna work on Android as well.

How to know if firebase.messaging().requestPermission has been previously called using react-native-firebase

I have a React Native app that uses Firebase Cloud Messaging with the react-native-firebase package.
I am doing this on the first screen of a React Native app, so after 5 seconds, the user will be sent to a new screen which explains why push notifications are useful, and gives them a button to launch the dialog where they can accept or decline the permission.
setTimeout(() => {
firebase.messaging().hasPermission()
.then(enabled => {
if (enabled) {
// user has permissions
} else {
// user doesn't have permission
this.props.navigation.navigate('EnableNotificationPermissionScreen')
}
});
},
5000);
In the EnableNotificationPermissionScreen screen, there is a button like this:
<Button onPress={this.onSetNotificationPref.bind(this)} title="Set Notification Preference" color="#4ab2fc"/>
Which is handled by an event like this:
onSetNotificationPref() {
firebase.messaging().requestPermission()
.then(() => {
// User has authorized
firebase.analytics().logEvent('messaging_permission_accepted');
this.props.navigation.navigate('App');
})
.catch(error => {
// User has rejected permissions
firebase.analytics().logEvent('messaging_permission_rejected');
this.props.navigation.navigate('App');
});
}
If the user accepts, everything works as I would hope, and the user will have the permission, and will not navigate to that screen again.
However, if the user rejects the permission, I do not want to navigate them to that screen again. As-is, they will be navigated there again because hasPermission will be false. Also, clicking the button to execute requestPermission on that screen will do nothing, as the OS will block requestPermission().
In the examples I have seen, requestPermission is called whenever the permission is not enabled (with no custom screen like this); and so either the dialog pops up, or it doesn't. However, in the flow that I am trying to achieve, I want to navigate to this custom screen only if the user does not have permission because they have not been asked. If they have been asked and declined, they should not be navigated to that screen.
Is there any way to achieve that using the functions in firebase.messaging(), or do I have to use persistent storage like async-storage to track on my own whether the dialog has been shown?

How to customize styles for browser push notification

I am creating an app using Angular 4, that should receive push notifications from time to time. I have managed to make the notification appear, but I wasn't able to customize its styles and its content.
What I am looking for is a way to change the background color of my notifications so that I can make them blink to call the user's attention.
Here is my code:
public showNotification(title: string, text: string): Notification {
// Check if notifications are supported
const notificationOptions = {
body: `<div style="color:red"><p>${text}</p></div>`,
icon: 'assets/img/logo_onyo-simples.png',
badge: 'assets/img/logo_onyo-simples.png',
vibrate: [200, 100, 200]
};
try {
// Throws an exception if the browser doesn't support a notification.
const notification = new Notification(title, notificationOptions);
notification.onclick = (e: any) => {
window.focus();
notification.close();
};
return notification;
}
catch (e) {
if (e.name === 'TypeError') {
this.raven.captureBreadcrum({
message: 'This browser does not support notifications',
level: 'warning',
category: 'notification'
});
}
else {
this.raven.captureException(e);
throw e;
}
}
}
I've tried to add a test HTML tag to the notification body, but that didn't work. Is there a way to do this?
Note: the reason because I am not using Toastr notifications is because I want the user to receive my notifications even if the browser is minimized or behind another application.
Note 2: here is an example of the type of notification that I am using: https://tests.peter.sh/notification-generator/.
I believe that what you're trying to do is not possible, at least according to the spec. There are no properties nor methods for passing / setting of visual presentation.
I'm speculating here, but it could be because browser vendors want to prevent exactly the type of behavior you're trying to create. Maybe you can style a notification with good taste and design. However, this would also open the door to people creating bad, annoying and straight up predatory notifications. It would open the door to dark patterns.
Although, it's possible that this kind of stylistic flexibility will be added in the future. I just don't think so.

Branch Deep Linking not working in Google Analytics hitCallback

I'm using both Google Analytics and branch.io in this website.
The website is designed for mobile.
The problem is that when clicking the banner with text "OPEN", the app cannot be opened.
Here is the code for the click:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
ga('send', 'event', 'homepage', 'download', {
hitCallback() {
open();
}
});
};
If I get rid of the GA code, it works fine:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
open();
};
The reason I put open() in hitCallback is to make sure GA sends out the hit because open() will redirect to another page.
Can you help me?
Alex from Branch.io here:
The Branch deepviewCta() function works on iOS 9+ by triggering an automatic redirect to a Universal Link URL (which opens the app) and then going to a fallback URL if that fails. But Apple is very specific about the situations in which a Universal Link is allowed to launch the app (including things like how long of a pause is allowed before redirection). Of course these restrictions are not public, so all we can do is guess. My suspicion is that putting the deepviewCta() function inside a GA callback is falling outside of Apple’s rules, so the app never opens and you are instead being sent to the fallback URL.
I can think of two options here:
You can build some way to trigger the GA and Branch functions separately so that they don’t conflict with Apple’s requirements.
We actually have a brand new, one-click integration with Google Analytics, which you can read about here and here. If you set that up, you’ll get all Branch-related events automatically instead of needing to manually collect link click data.
Hopefully that helps!

Resources