Unable to mock SQLite in Ionic app

I'm encountering an issue with my SQLiteMock provider not being recognized. I'm using "{ provide: SQLite, useClass: SQLiteMock }" in Ionic 3, but the SQLiteMock class is not being used instead of SQLite as expected. I have to manually specify the use of SQLiteMock in Techdao.ts. What could be missing or going wrong?

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { SQLite, SQLiteDatabaseConfig } from '@ionic-native/sqlite';
import { MyApp } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Page1 } from '../pages/page1/page1';

declare var SQL;
// Code for SQLiteMock and SQLiteObject classes...

@NgModule({
  declarations: [
    MyApp,
    Page1
  ],
  imports: [
      BrowserModule,
      HttpModule,
      IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1
  ],
  providers: [
      StatusBar,
      Splashscreen,
      { provide: SQLite, useClass: SQLiteMock },
      { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

app.component.ts

// Code for app.component.ts...

techdao.ts

// Code for techdao.ts...

Answer №1

You are close to achieving your goal.

Simply including the

{ provide: SQLite, useClass: SQLiteMock }
is not sufficient.

You must also import and utilize your custom SQLiteMock instead of the default library.

For example, if you have a mock for Camera like this:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Camera } from '@ionic-native/camera';

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: Camera, useClass: CameraMock }
  ]
})
export class AppModule {}

then in another .ts file where you would normally use Camera, be sure to include your custom CameraMock.

import { CameraMock } from "../mocks/camera-mock";

Once development is complete, remember to switch back to using the real Camera. You can even employ tricks with environment variables to switch between libraries for different builds.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to confirm if an element's predecessor includes a specific type?

I am working on an app where I need to determine if the element I click on, or its parent, grandparent, etc., is of a specific type (e.g. button). This is important because I want to trigger a side effect only if the clicked element does not have the desir ...

Tips on harnessing the power of CreateReducer within the ActionReducerMap<State> entity?

I'm trying to use the CreateReducer method to create a reducer, but I'm running into issues and not sure why it's not working. I attempted to modify the State class, but that doesn't seem to be the right approach. export const reducer ...

What could be causing the module version discrepancy with the package.json file I created?

Recently, I created a project using create-next-app and decided to downgrade my Next.js version to 12. After that, I proceeded to install some necessary modules using Yarn and specified the versions for TypeScript, React, and others. During this setup, I b ...

Traverse the depths of a nested JSON object and store its contents in an Android SQLite database

Here is a nested JSON Object I have: [ { "question_id":"1", "description":"What is your gender ?", "widget_id":"1", "answers":[ { "answer_text":"Male", "answer_id":"1" }, { "answer_text":"Female", ...

Vue: Defining typed props interface including optional properties

I created a method that I want to be accessible on all my Vue instances, so I can use it in case of an error and display a specific error component. Similar to the functionality provided by vue-error-page. Since I am working with typescript, I now want to ...

Angular2 encountered an error loading the resource: server reported status 404 (Not Found)

I am currently using Angular2 with Visual Studio 2015. I tried to follow the instructions from Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4, but encountered an error. Error Message Error: (SystemJS) XHR error (404 Not Found) loading ...

Encountering Thumbnail Type Error While Implementing Swiper in Next.js

When trying to integrate Swiper with Next.js, I ran into an issue concerning thumbnails. "onSwiper={setThumbsSwiper}" This line is causing a TypeScript error: swiper-react.d.ts(23, 3): The expected type comes from property 'onSwiper' w ...

How can I convert the date format from ngbDatepicker to a string in the onSubmit() function of a form

I'm facing an issue with converting the date format from ngbDatepicker to a string before sending the data to my backend API. The API only accepts dates in string format, so I attempted to convert it using submittedData.MaturityDate.toString(); and su ...

Enhance user experience by enabling clickable links in Angular comment sections

Currently, I'm developing an application that allows users to add comments to specific fields. These comments may contain links that need to be clickable. Instead of manually copying and pasting the links into a new tab, I want the ability to simply c ...

Develop a Nativescript Angular component dynamically

Is there a way for me to dynamically generate a Component and retrieve a View object to insert into a StackLayout? ...

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

Utilizing Angular 2 Observable for showcasing a seamless flow of real-time information

Currently, my Angular 2 Web application is utilizing a Couchbase Server as its database. The data communication occurs through WebAPIs that interact with the CouchBase server. As of now, I am uncertain if this method is optimal, but I am constantly polling ...

Tips for utilizing a function to assess ngClass conditional statement in Angular 2

So as I loop through my list using *ngFor, the code snippet is like this: [ngClass]="{'first':isStartDate(event,day)}" The function isStartDate is defined in my component. An error message appeared: "Unexpected token : " ...

The event is not being triggered by bsValueChange when the user manually alters the date

In my Angular component HTML, I have the following code: <div class='col-md-2 pr-1'> <input autocomplete="off" type="text" class="form-control date-input" placeholder="Leaving Date To (DD/MM/YYYY)&quo ...

When utilizing the useRef hook in Material-UI, an error may arise stating: "The property 'value' is not found on the type 'never'."

Currently, I am utilizing material UI to construct a login and registration page. In the process, I am leveraging the useRef hook to retrieve a reference instance for a TextFiled, and using xxxRef.current.value to access the input value. Despite being abl ...

The <g> tag fails to properly render within the <svg> element in Firefox

When running an Angular 6 application with ES6-style D3js modules, there are some issues on Firefox (Chromium, Chrome, Safari, and IE Edge work fine). Below is a sample of pseudo code (full production code is available below): <svg width="500" height=" ...

Issues with the ionViewDidLoad() function?

Having some trouble implementing Email Authentication in my project. The method ionViewDidLoad is not being recognized. I also tried using the method ionViewWillLoad() but that didn't work either. Any ideas on what might be causing this issue? Here&a ...

Generating Angular components dynamically in batch

I have a collection of diverse data objects: const arr = [ {type: 'CustomA', id: 1, label: 'foo'}, {type: 'CustomB', src: './images/some.jpg'} {type: 'CustomX', firstName: 'Bob', secondNa ...

Error encountered during Angular 12 package build process with limited information provided

My Angular 12 library project used to build successfully in the past, around a year or two ago. However, now it's encountering issues. The error message I'm receiving is as follows: Building Angular Package moduleName.startsWith is not a function ...

Can one create attribute-selector components in a seamless and concealed manner?

In my Angular project, I am utilizing a component library that offers a button component with the selector button[extButton]. However, I have a need for my own custom button components with the selector button[appButton]. Is there a way to apply both comp ...