ionic-native angular example code to vuejs - vue.js

With the Ionic Native there is the possibility to use iBeacons via a native-plugin: https://ionicframework.com/docs/native/ibeacon
The example code is written for people that use Ionic with AngularJS, but I'm using VueJS and I cannot figure out how to get this to work:
The Angular version of the Example code:
import { IBeacon } from '#ionic-native/ibeacon/ngx';
constructor(private ibeacon: IBeacon) { }
...
// Request permission to use location on iOS
this.ibeacon.requestAlwaysAuthorization();
// create a new delegate and register it with the native layer
let delegate = this.ibeacon.Delegate();
// Subscribe to some of the delegate's event handlers
delegate.didRangeBeaconsInRegion()
.subscribe(
data => console.log('didRangeBeaconsInRegion: ', data),
error => console.error()
);
delegate.didStartMonitoringForRegion()
.subscribe(
data => console.log('didStartMonitoringForRegion: ', data),
error => console.error()
);
delegate.didEnterRegion()
.subscribe(
data => {
console.log('didEnterRegion: ', data);
}
);
let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');
this.ibeacon.startMonitoringForRegion(beaconRegion)
.then(
() => console.log('Native layer received the request to monitoring'),
error => console.error('Native layer failed to begin monitoring: ', error)
);
But.. what I expected to work was the following in VueJS:
On top of my component importing it: import { IBeacon } from '#ionic-native/ibeacon/ngx';
And use it like this:
foobar() {
let _ibeacon = IBeacon.Delegate()
alert('Hi iBeacon');
_ibeacon.didStartMonitoringForRegion()
.subscribe(
data => console.log('didStartMonitoringForRegion: ', data),
error => console.error()
);
}
But even the alert isn't shown.
What IS the correct way to use the iBeacon plugin with Vue and ionic?

Quick of of this repo worked. Just had to replace two files.

Related

OneSignal notification does not appear on iOS, but it does on Android (In App message works perfectly on both)

So I added onesignal-expo-plugin and react-native-onesignal to my project, I made everything what was wrote on the website
After this i made a developmen-simulator build for my app
I tested the app on IOS and on Android too, on android i get the notification instantly but on IOS i'm not.
So i checked the notification report on OneSignal dashboard and the ios fall into failed. I checked everything, I added everything what i had to, the p12 file is correct, I did everything multiple times before i write here,
I haven't ejected my ios app because I want to keep expo managing my ios/android application well.
What should I try to fix this issue?
Android works correctly but ios don't and I really need your help!
The in-app message works correctly just the push notification don't
Versions:
"react-native-onesignal": "^4.5.0",
"onesignal-expo-plugin": "^1.3.0",
I don't want to eject my ios code and I saw too many articles and videos how others use it and works. Please help me whats wrong.
My code example what I tried just now:
const initialOnesignal = async () => {
OneSignal.setAppId('HIDEN FOR STACKOVERFLOW');
OneSignal.promptForPushNotificationsWithUserResponse();
OneSignal.setNotificationWillShowInForegroundHandler(
notificationReceivedEvent => {
console.log(
'OneSignal: notification will show in foreground:',
notificationReceivedEvent,
);
let notification = notificationReceivedEvent.getNotification();
console.log('notification: ', notification);
const data = notification.additionalData;
console.log('additionalData: ', data);
notificationReceivedEvent.complete(notification);
},
);
OneSignal.setNotificationOpenedHandler(notification => {
console.log('OneSignal: notification opened:', notification);
});
};
And I also tried this way:
useEffect(() => {
OneSignal.setAppId('HIDEN FOR STACKOVERFLOW');
OneSignal.promptForPushNotificationsWithUserResponse(response => {
console.log('Prompt response:', response);
});
OneSignal.setNotificationWillShowInForegroundHandler(
notificationReceivedEvent => {
console.log(
'OneSignal: notification will show in foreground:',
notificationReceivedEvent,
);
let notification = notificationReceivedEvent.getNotification();
console.log('notification: ', notification);
const data = notification.additionalData;
console.log('additionalData: ', data);
// Complete with null means don't show a notification.
notificationReceivedEvent.complete(notification);
},
);
OneSignal.setNotificationOpenedHandler(notification => {
console.log('OneSignal: notification opened:', notification);
});
}, []);
Tried to only add my AppId as well. I guess i tried everyting.
I have tried to regenerate p12 file, try multiple code examples, run on simultaor and on device too.
Tried to use useEffect and simple function as well.

Testcafe data driven testing - how to drive tests with data fetched from API

I'm having trouble figuring out how to drive tests with data fetched from a request. I've read the documentation here: https://testcafe.io/documentation/402804/recipes/best-practices/create-data-driven-tests, and all examples use static json file data available at compile time.
I can't fetch the data in fixture.before hook, because it will only be available inside of the test context, but I need to access the data outside of the test context for iteration, such that the test is inside of a for loop.
I've tried this solution: https://github.com/DevExpress/testcafe/issues/1948, however this fails with testcafe ERROR No tests found in the specified source files. Ensure the sources contain the 'fixture' and 'test' directives., even when I use the flag disable-test-syntax-validation and .run({ disableTestSyntaxValidation: true }); option.
I am looking for suggestions and workarounds so that I can await some data, then run my tests. Even if Testcafe doesn't explicitly support something like this, I figure there must be some workaround... Thanks in advance.
Edit:
file-a.ts
export function tSteps(...args) {
// some setup
const testcase = args[args.length - 1];
const testCtx = test(name, async t => {
...
});
return testCtx;
}
----
file-b.ts
export const parameterizedTest = <T>(..., testcase: (scenario: T) => TestFn) => {
// some setup...
// I have also tried awaiting rows data here, which does not work
// because tests are not discoverable at compile time
...
const scenarios: T[] = rows.map(row => {
...
});
scenarios.forEach((scenario, idx) => {
return testcase(scenario).meta({
some metadata
});
});
};
----
tests.ts
fixture(...).before(async () => {
// can't get the data i need here because it needs to be available outside of the fixture context
})
parameterizedTest<MyInterface>(some params, (scenario: MyInterface) => {
return tSteps('my test',
async f => {
// some setup
// test code goes here which uses scenario.attributex, scenario.attributey, etc.
}
).meta(...);
}
);
In v1.0.0 and later, TestCafe does not validate test syntax. Please specify the TestCafe version that you use when you see the validation error.
Unfortunately, we cannot use pseudo-code to reproduce the issue you encountered. Please share some code that we could run to see the problematic behavior.
Generally speaking, TestCafe allows you to fetch data asynchronously and then spawn tests based on the received values. For instance, the following code works fine for me with TestCafe 1.18.3:
import { fixture, test } from 'testcafe';
import fetch from './node-fetch-mock';
(async () => {
const testData = await fetch();
testData
.map(n => () => {
fixture `Fixture ${n}`
.page `https://google.com`;
test(`Test ${n}`, async t => {
await t.expect(true).ok();
});
})
.map(async test => { await test(); });
})();
node-fetch-mock.js
export default async function fetch() {
return [1, 2, 3, 4, 5];
}
The only caveat is that I have to import fixture and test explicitly because I call them from callbacks.
Could you please provide us with any test code snippet that demonstrates the problem? We need to correctly understand the cause of the problem and reproduce it on our side.

How to properly test if a Toast has been shown in react native using native base?

I am trying to write a test that checks if the screen is showing a Toast with an error message. The test passes, but there is a warning:
console.error
Warning: You called act(async () => ...) without await.
This could lead to unexpected testing behaviour, interleaving multiple act calls
and mixing their scopes. You should - await act(async () => ...);
The screen is working fine, I am just learning how to write tests. This is my test:
it('shows error correctly', async () => {
mockAxios.get.mockRejectedValueOnce(new Error('Async error'))
const { queryByText } = renderWithRedux(<DiscoverScreen />)
await waitFor(() => {
expect(queryByText(ErrorMessages.GeneralErrorToast)).not.toBeNull()
})
await waitForElementToBeRemoved(() => queryByText(ErrorMessages.GeneralErrorToast), { timeout: 5000 })
})
What am I not doing right? Definitely there is an issue with react native testing, because there are problems for certain async querying, especially when you have several of them. I found that here: https://github.com/callstack/react-native-testing-library/issues/379#issuecomment-720734366
I am using native base for showing the Toast, which is using Animated I think. Should I use jest.useFakeTimers() and how?
After researching how the Toast in native base works (this could be done when you open the source code in github - https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/ToastContainer.js), I found that it uses Animated.timing.
So I had to find out how to deal with react native animations in tests. That article had a solution that worked for me: https://medium.com/#joncardasis/react-native-how-to-test-components-implementing-animated-with-jest-8cabb5fc2730
After I added the code in my jest setup file, this is how my test looks:
global.withAnimatedTimeTravelEnabled(async () => {
const { queryByText } = renderedComponent
await waitFor(() => {
expect(queryByText(ErrorMessages.GeneralErrorToast)).not.toBeNull()
})
global.timeTravel(Constants.ErrorToastDelay)
expect(queryByText(ErrorMessages.GeneralErrorToast)).toBeNull()
})
It works and now the test passes with no warnings!
One little adjustment in my jest configuration was also missing. I had to add this:
"testEnvironment": "jsdom"
I hope this could help someone else, too!

Identify the sender after the app installation with branch referrals with react-native

In my React-Native application I use branch.io to handle referrals. Deep links are generated successfully through the app and can be shared it to the others.
Issue is, if the receiver hasn't installed the app yet, once the dynamic link is received, after clicking on that, he will go to the appstore/playstore and install the app.
After the installation, I want to identify the sender of the deeplink. My subscribe to branch is like this.
BranchIO.subscribe(async ({ error, params }) => {
if (error) {
console.log('Error from Branch: ', error);
return;
}
if (params['+non_branch_link']) return;
if (!params['+clicked_branch_link']) return;
if (params.$canonical_identifier === DeepLinkTypes.referral) {
store.dispatch(setReferralKey(params.referralKey));
}
const lastParams = await BranchIO.getLatestReferringParams();
const installParams = await BranchIO.getFirstReferringParams();
console.log(lastParams);
console.log(installParams);
navigatePath(params.$deeplink_path);
});
How should I access these params after a new install of the app? I mean, once the receiver clicks on the link and goes to playstore/appstore, does branch track this? Once the inatalled app is loaded, shall we access the relevant data through params?
Yes deferred deep linking is supported with Branch. For React Native you can read the parameters like this - \
branch.subscribe(({error, params, uri}) => {
if (error) {
console.error('Error from Branch: ' + error)
return
}
// params will never be null if error is null
})
let lastParams = await branch.getLatestReferringParams() // params from last open
let installParams = await branch.getFirstReferringParams() // params from original install
Make sure you get the params after calling branch.subsribe().Here is the documentation for the same - https://help.branch.io/developers-hub/docs/react-native#section-read-deep-link

Cycle.js HTTP sending multiple requests after adding loading indicator

I have been attempting to create some cycle.js examples as nested dialogues, and switching between them using a select box.
One of the dialogues is a clone of the official Github HTTP Search example.
The other dialogue a more basic one which does not have HTTP, only DOM.
I feel like I wrapped my head around switching between the 2, but I'm fairly new to Rx so that may be done incorrectly or naively.
It all seemed to work well until I added a loading indicator to the search page.
To do that, I turned this:
const vTree$ = responses.HTTP
.filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
.flatMapLatest(x => x)
.map(res => res.body.items)
.startWith([])
.map(results =>
h('div.wrapper', {}, [
h('label.label', {}, 'Search:'),
h('input.field', {type: 'text'}),
h('hr'),
h('section.search-results', {}, results.map(resultView)),
])
)
Into this:
const searchResponse$ = responses.HTTP
.filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
.flatMapLatest(x => x)
.map(res => res.body.items)
.startWith([])
const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))
// Convert the stream of HTTP responses to virtual DOM elements.
const vtree$ = loading$.withLatestFrom(searchResponse$, (loading, results) =>
h('div.wrapper', {}, [
h('label.label', {}, 'Search:'),
h('input.field', {type: 'text'}),
h('span', {}, loading ? 'Loading...' : 'Done'),
h('hr'),
h('section.search-results', {}, results.map(resultView)),
])
)
I now have 2 issues
The 'checkbox value set to' and 'route changed' messages are logged
twice for every change of the checkbox.
The HTTP request log only
fires once, but if you watch the network activity in Dev Tools
you'll see two GET requests simultaneously.
Thanks for any help!
EDIT: Solved my own problem. See answer below.
I ended up solving this problem by rebuilding my entire application from scratch until I found the breaking point.
What I learned is that you need to add .share() to any observable stream which will be subscribed/mapped/etc by more than one downstream observable.
const searchRequest$ = DOM.select('.field').events('input')
.debounce(500)
.map(ev => ev.target.value.trim())
.filter(query => query.length > 0)
.map(q => GITHUB_SEARCH_API + encodeURI(q))
.share() //needed because multiple observables will subscribe
// Get search results from HTTP response.
const searchResponse$ = HTTP
.filter(res$ => res$ && res$.request.url.indexOf(GITHUB_SEARCH_API) === 0)
.flatMapLatest(x => x) //Needed because HTTP gives an Observable when you map it
.map(res => res.body.items)
.startWith([])
.share() //needed because multiple observables will subscribe
//loading indication. true if request is newer than response
const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))
.startWith(false)
.share()
//Combined state observable which triggers view updates
const state$ = Rx.Observable.combineLatest(searchResponse$, loading$,
(res, loading) => {
return {results: res, loading: loading}
})
//Generate HTML from the current state
const vtree$ = state$
.map(({results, loading}) =>
.........