Testing Jasmine with objects that contain optional properties

In the IData interface, there are optional properties available.

interface IData {
 prop1: string,
 prop2?: string
}
setObj(){
  prop1 = 'abc';
  prop2 = 'xyz';
  let obj1 : IData = {
                       prop1: this.prop1,
                       prop2: this.prop2
                     }
}

During unit testing, an error is thrown when expecting the value of obj1.

expect(obj1).toEqual({
                prop1: 'abc',
                prop2: 'xyz' })

The argument '{prop1: string; prop2: string;}' cannot be assigned to the expected parameter type.

Answer №1

Instead of comparing the entire object, it is better to check each individual property.

ensure(obj1.prop1).equals('abc')
ensure(obj1.prop2).equals('xyz')

Another approach is to use objectContaining to compare partial objects.

verify(obj1).objectContaining({
            prop1: 'abc',
            prop2: 'xyz' })

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

Tips for utilizing MUI Typography properties in version 5

I'm clear on what needs to be done: obtain the type definition for Typography.variant. However, I'm a bit uncertain on how to actually get these. interface TextProps { variant?: string component?: string onClick?: (event: React.MouseEvent&l ...

Utilizing .js file alongside declaration files .d.ts in Angular: A guide

I am facing an issue with my Angular 7 app where I need to include some typed JS constants from outside of the project. These constants are essential for the AngularJS app and need to be kept in a separate js file. I have defined a new path in the tsconfig ...

Is there a way to create Angular components sourced from an external library using JavaScript?

I'm currently developing an Angular project and leveraging an external component library called NGPrime. This library provides me with a variety of pre-built components, including <p-button> (which I am using in place of a standard <button> ...

To work on React with typescript, your Type must include a method '[Symbol.iterator]()' that will fetch an iterator

Here is a demonstration I have prepared for you: https://stackblitz.com/edit/react-ts-shopping-cart-ssofgc?file=Shop.tsx Apologies for the lack of clarity in my question, but... The demo I created showcases a basic shopping cart using React and Typescri ...

What's the best way to invoke this specific TypeScript function?

I have come across a library that includes the following function declaration: import { Auth0JwtStrategy } from './strategy/auth0-jwt.strategy'; import { Auth0Service } from './auth0.service'; import { Auth0Options } from './auth0. ...

Using Lerna with Docker for Next.js and GraphQL applications

Currently, I am working with lerna and everything runs smoothly locally. However, when I attempt to build the image and operate it through Docker, it does not function as expected. FROM node:16-alpine3.11 ENV NODE_ENV=production COPY . /app WORKDIR /app R ...

...additional properties in React function components using TypeScript

Here is a snippet of code that I am working with: <InputComponent id="email" name={formik.values.email} type="text" formik={formik} className="signInInput" disabled/> However, there seems to be an issue with the disable ...

Guide on building an npm package that seamlessly allows for installation both locally and globally (-g) using webpack and typescript

As I work on developing an npm package with options for both local and global (-g) installations, I find myself puzzled by the distinctions between the src and lib directories and the purpose of the bin directory. In my previous projects, I typically util ...

Angular 2 FormArray validation based on conditions

My goal is to apply validation rules based on changes in one field to another field within a formGroup that is nested inside a FormArray containing multiple instances of this group. Specifically, when the date field is modified, I need the Reason for Chang ...

Retrieving JSON Information in HTML using Angular 4

Is it possible to retrieve specific data from a JSON file in my HTML using Angular 4's MatCellDef? Specifically, I am interested in accessing the FROM, TO, PERCENT, and SUBTRACT values of the RateBands Array. JSON Data Sample: [ { "year ...

Issue with Angular currency code incompatibility on outdated Angular version

I am currently on Angular 7.3.x and unfortunately updating is not an option at the moment. I'm curious if this version limitation could be causing my issue. In essence: {{ value | currency:'USD' }} shows me $ {{ value | currency:'EUR ...

There is an issue with the Angular Delete request functionality, however, Postman appears to be

HttpService delete<T>(url: string): Observable<T> { return this.httpClient.delete<T>(`${url}`); } SettingsService deleteTeamMember(companyId: number, userId: number): Observable<void> { return this.httpService.delete< ...

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

The MaterialModule export could not be located

After installing the Angular Material Library, I encountered a Module not found error. Can anyone provide a solution for this issue? Thank you. material-module.ts import { NgModule } from '@angular/core'; import { A11yModule } from '@angula ...

What could be causing the error message (No overload matches this call) to pop up when attempting to subscribe to .valueChanges() in order to retrieve data from Firestore?

Currently, I am developing an Angular application that utilizes Firebase Firestore database through the angularfire2 library. However, I am encountering a challenge. I must admit that my background is more in Java than TypeScript, so there might be some g ...

Is there a way to apply a decorator to a function that has been returned?

Can the following be accomplished? bar () { @custom yield () => { } } ...

Typescript parameters provide specific data types for functions that can accept either a single argument or two arguments, such as Element.scrollBy

One question I have is how to access the options parameter in the scrollBy() method. Parameters<Element["scrollTo"]> When I use [x: number, y: number] as per the documentation, it does not include options?: ScrollToOptions. scrollTo(option ...

Safari is currently experiencing issues with running the Angular 11 application

Working on my Angular 11 application has been smooth sailing so far when I run (ng serve) in Google Chrome and Firefox. However, I've encountered a problem when trying to access it through Safari 5.1.7. The error message that pops up in Safari is: ...

Transforming ng-bootstrap carousel to utilize div elements instead of images

I am currently utilizing ng-bootstrap and Angular, along with chart.js. I have successfully created two charts that update in real-time with data. My goal is to display these charts within a carousel, allowing users to slide between them. I've been at ...

The output from Angular Validator.pattern() may differ from that generated by online regex engines

Currently, I am facing an issue with my form group and a regular expression used to validate names. The criteria for the name input field are: It must be required. It should be alphanumeric. It must start with alphabets. It cannot contain any special char ...