Ionic 3 : Uncaught (in promise): removeView was not found - ionic2

I am calling an alert on my Page.
addError(title,message){
const alert = this.alertCtrl.create({
'title': title,
'subTitle': message,
'buttons': ['OK']
});
alert.present();
}
Html Code with content including button and textbox.
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Name</ion-label>
<ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Secret</ion-label>
<ion-input type="text" [(ngModel)]="secret"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button color="primary" (click)="add();" block>Add New</button>
</div>
</ion-content>
The Entire .ts code is given below with class definition
class HomePage {
name:string;
secret:string;
constructor(public navCtrl: NavController,public alertCtrl: AlertController,public strorage:StorageServiceProvider) {
}
addError(title,message){
const alert = this.alertCtrl.create({
'title': title,
'subTitle': message,
'buttons': [{
text: "Cancel", handler: () => {
alert.dismiss();
return false;
}
}]
});
alert.present();
}
add(){
if(this.name && this.secret){
this.strorage.addNew({'name':this.name,'secret':this.secret});
}
else{
this.addError("Error","Please enter Secret name and Secret");
}
}
}
I am getting the following error while I am calling the addError again.
Uncaught (in promise): removeView was not found

The problem is not coming from addError function and alertController.
The problem may occurs because of local storage usage this.strorage.addNew({'name':this.name,'secret':this.secret});
This localStorage usage must be as like
this.storage.addNew( key, value )
this.storage.addNew( 'error', {'name':this.name,'secret':this.secret} )
In your code there is no key !..

Related

Unit Testing Login Vue Jest ValidationProvider

I am new to Jest and I am trying to mock the store, an action and to assert that the method was indeed called. Basically I want to check the login function.
I cannot query the button because I am retrieving only a part of the component and I don't know what I'm missing.
Where my Vue component looks like:
<ValidationObserver id="observer" v-slot="{ invalid }" :class="['w-full h-full']">
<form class="flex flex-col justify-around h-full" #submit.prevent="onSubmit">
<ValidationProvider v-slot="{ errors }" name="accessCode" :class="['w-full py-6']">
<sd-field :class="['sd-field_secondary', { ['sd-invalid ']: errors && errors.length > 0 }]">
<label for="email">{{ $t("form.access-code") }}</label>
<sd-input v-model="accessCode" type="accessCode" />
<span class="sd-error">{{ errors[0] }}</span>
</sd-field>
</ValidationProvider>
<div class="btn-group-y">
<button class="btn btn-fixed btn-blueDark" type="submit">
<span>{{ $t("account.login") }}</span>
</button>
<!-- <button class="btn btn-link" type=""> //TODO: temporary hide
<span>{{ $t("account.forgot_id") }}</span>
</button> -->
</div>
</form>
</ValidationObserver>
***MY TEST FILE***
import login from "../../pages/index/login";
import Vuex from "vuex";
import { mount, createLocalVue } from "#vue/test-utils";
const localVue = createLocalVue();
localVue.use(Vuex);
describe("Login form", () => {
it("calls the login action correctly", () => {
const loginMock = jest.fn(() => Promise.resolve());
const store = new Vuex.Store({
actions: {
onSubmit: loginMock,
},
});
const wrapper = mount(login, { localVue, store, stubs: { ValidationObserver: true } });
console.log(wrapper.html());
// wrapper.find("button").trigger("click");
// expect(loginMock).toHaveBeenCalled();
});
});
console.log(wrapper.html()) returns only a part of component
<div class="h-full w-full"><validationobserver id="observer"
class="w-full h-full"> </validationobserver>
</div>
With a warning also:
> console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
> [Vue warn]: Unknown custom element: <ValidationObserver> - did you register the
> component correctly? For recursive components, make sure to provide the "name" option.
> found in
> ---> <Anonymous>
> <Root>
I would like to understand how this works, I have tried to stub and other ways found but with no success.
I can get rid of the warning by adding the stubs: { ValidationObserver: true } to mount but I actually need to access the elements inside.
Thank you!

Ionic 3 Tabs on Modal

I have implemented tabs on a modal.
Here is the code:
Pagewithmodal.ts
getFoodInfo(food) {
let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
foodModal.onDidDismiss(option => {
console.log(option);
});
foodModal.present();
}
TabspagePage.html
<ion-tabs>
<ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>
TabspagePage.ts
this.tabIngre = 'IngreinfoPage';
this.tabNutri = 'FoodinfoPage';
this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };
IngreinfoPage.html
<ion-header>
<ion-navbar color="header">
<ion-title>Food Infopedia</ion-title>
<ion-buttons end>
<button ion-button color="light" clear icon-only (click)="dismiss()">
<ion-icon name='close' is-active="true"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
IngreinfoPage.ts
dismiss() {
this.viewCtrl.dismiss();
}
When I click the close button, dismiss() function is called, and i'm getting an error Runtime Error
Uncaught (in promise): navigation stack needs at least one root page
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
This will create a new nav stack with root page as your modal page: IngreinfoPage.
And when you dismiss from IngreinfoPage,it will remove only IngreinfoPage and the stack will have no root page.
If you want to dismiss the tabs modal, you will have to dismiss from the TabspagePage i.e. create a dismiss function in TabsPagePage and maybe use Events API to call the function on close.

How to set icon in the side navigation panel menu in ionic 2 application

i am trying to set icons on the side navigation panel of an ionic2 application, Please suggest how would i get this done?
Here is my code :
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = MysplashPage;
private dashboardpage;
private gradesubjectpage;
private myhomepage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
this.pages = [
{ title: 'Explore', component: HomePage },
{ title: 'Dashboard', component: DashboardPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
// this.splashScreen.hide();
});
}
openPage(pages) {
if(pages.component == HomePage){
this.nav.setRoot(HomePage);
} else {
this.nav.push(pages.component);
}
}
}
Here on the html page i am going to display it with the help of loop, where should i use the different icons for the menu items in the side navigation panel.
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b>
</button>
</ion-list>
You'll add an icon like in every list, in this case since the list content is coming from a variable and used in ng-for you'll declare the icon in your object.
app.component.ts:
this.pages = [
{ title: 'Explore', component: HomePage, icon: 'home' }, //OR THE ICON YOU WANT
{ title: 'Dashboard', component: DashboardPage, icon: 'clipboard' }
];
}
And in your HTML:
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b> <ion-icon item-right name="{{p.icon}}"></ion-icon>
<!-- item-right attribute on ion-icon will push the icon to the for right -->
</button>
</ion-list>
Check here for all the available icons.
Hope this helps

How to display multiple menu based on conditions

I am Beginner to ionic 2
Below are my HTML code which am using to enable side menu using ionic framework
<ion-content>
<ion-list *ngIf="!isUserLoggedIn()">
<button menuClose ion-item *ngFor="let p of loginPages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<ion-list *ngIf="isUserLoggedIn()">
<button menuClose ion-item *ngFor="let p of logoutpages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
This is my app component
currentuser;
#ViewChild(Nav) nav: Nav;
auth:any;
rootPage: any = LoginPage;
loginPages:PageInterface[]=[
{ title: 'Login', component: LoginPage }
];
logoutpages :PageInterface[] = [
{ title: 'My Complaints', component: MycomplaintsPage },
{ title:'My Neighbours',component:NeighboursPage},
{ title:'Notifications',component:NotificationsPage},
{ title:'Directory',component:TabsPage},
{ title:'chat',component:ChatlistPage},
{ title:'Events',component:EventPage},
{ title:'settings',component:SettingsPage},
{ title: 'LogOut',component:LoginPage,logsOut:true }
];
isUserLoggedIn(): boolean {
let user = this.authservice.getcurrentuser();
return user !== null;
}
already i display logoutpages based on isUserLoggedIn.
I need display another menu based on userrole with conditions
Kindly advice me,
Thanks & Regards
You can give ID to the menu and enable or disable the menu based on your condition.
https://github.com/driftyco/ionic/tree/master/demos/src/menu
menu.enable(true/false, #menu);

How do I add add device timestamp when ion-checkbox is set to true

I am presently using check boxes to track when tasks have been completed in my ionic 2 App. Is there a way save the date/time from the mobile device when this checkbox is selected.
<ion-list>
<ion-item>
<ion-label>Task 1</ion-label>
<ion-checkbox [(ngModel)]="data.task1"></ion-checkbox>
</ion-item>
</ion-list>
You could use the Date object from Javascript to do so, like you can see in this plunker.
Your Component:
import { Component } from "#angular/core";
#Component({
templateUrl:"home.html"
})
export class HomePage {
public data: any;
public dateTime : string = '';
constructor() {
this.data = {
task1 : false
}
}
public changeCheckBox() {
if(this.data.task1) {
this.dateTime = new Date();
}
}
}
Your view:
<ion-content>
<ion-list>
<ion-item>
<ion-label>Task 1</ion-label>
<ion-checkbox [(ngModel)]="data.task1" (ionChange)="changeCheckBox()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Timestamp: {{ dateTime }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
Of course you can obtain detailed information by using some of the get methods:
Date.prototype.getDate()
Date.prototype.getDay()
Date.prototype.getFullYear()
Date.prototype.getHours()
Date.prototype.getMilliseconds()
Date.prototype.getMinutes()
Date.prototype.getMonth()
Date.prototype.getSeconds()
Date.prototype.getTime()
Date.prototype.getTimezoneOffset()
Date.prototype.getUTCDate()
Date.prototype.getUTCDay()
Date.prototype.getUTCFullYear()
Date.prototype.getUTCHours()
Date.prototype.getUTCMilliseconds()
Date.prototype.getUTCMinutes()
Date.prototype.getUTCMonth()
Date.prototype.getUTCSeconds()
Date.prototype.getYear()