Discovering the power of Angular 2 with ngrx while putting my Reducer to the

Within my Reducer file:

 case PumpActionTypes.EnterLocalMode:
  return commandOne.upsertOne(
    {id: action.payload.id, changes: { local: false }},
    state
  );

When testing, I aim to verify that the local property is indeed modified to false. My current implementation is as follows:

  describe('EnterLocalMode action', () => {
    it('should handle Enter Local Mode from Remote Mode', () => {


    const {initialState} = MyReducer;

    const action = new MyActions.EnterLocalMode();

    const state = MyReducer.reducer(initialState, action);

    //Verifying that the changes in pump adaptor change to "local" = true
    expect(MyReducer.commandOne.upsertOne(changes:{local})).toEqual(true);

      });



});

Nevertheless, I'm uncertain about how to formulate my expect statement correctly. The current version is inaccurate:

expect(MyReducer.commandOne.upsertOne(changes:{local})).toEqual(true);

Answer №1

When it comes to Reducer, it is essential to remember that it is a pure function responsible for generating a new state based on the previousState and the action. This should be the focus of your testing efforts.

expect(PumpReducer.reducer({counter:1}, Increment).counter).toBe(2)

For example, if we take the scenario where state = {counter:0} and the Increment action results in {counter:1}, these are the type of scenarios you should test thoroughly along with any conditional statements within each action.

Edit

case PumpActionTypes.EnterLocalMode:
  return pumpAdapter.upsertOne(
    {id: action.payload.id, changes: { local: false }},
    state
  ); 

In this case, the state is being updated based on the function call. Following that,

expect(PumpReducer.pumpAdapter.upsertOne(changes:{local})).toEqual(true);

It appears that the test is checking if upsertOne() was indeed called with certain parameters. To handle such checks and test the arguments of a function call, utilizing the jasmine spyOn method can be beneficial.

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 resolving the error of encountering a forbidden and unexpected token in JSON at position 0 while using React hooks

const [forecastData, setForecastData] = useState({ forecast: []}); useEffect(() => { let ignore = false; const FETCHDATA = async () => { await fetch(forecast,{ headers : { ...

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

Detecting property changes in Angular 2: A step-by-step guide

I've created a basic class structure like so: export class MessagesPage { @ViewChild(Content) content: Content; public message = ''; public messages = []; public state = 'general'; } Can I implement a way wit ...

What is the best way to bring in a file or subfolder from a folder that has been

Currently, I am facing a situation where I need to specify to TSC in the tsconfig file that I want to include specific files or subfolders from a folder while ignoring others. How can I achieve this? For instance: /. |-folder 1 |->file2.ts |-& ...

Having trouble retrieving the date value from a datepicker in Angular ngForm

I am struggling to fetch a value from the mat-datepicker in my Angular project. Whenever I try, it returns as undefined. I have implemented ngForm and ngModel, but I seem to have made a mistake somewhere. <form #f="ngForm" (ngSubmit)="registerClient(f. ...

The form is not valid because the CustomValidator was triggered on a field that was not required

Here is the form setup: this.form = new FormGroup({ someField: new FormControl(''), someOtherField: new FormControl(''), cpf: new FormControl('', [ CustomFormValidators.isValidCPF ]), }); And t ...

Enhance your data presentation with Angular Material tables featuring multiple sources

I am currently facing an issue with my table that is being used to display multiple sets of data. The problem I'm encountering is that while the data is showing up correctly, the paginator and sort functions are not working as intended. The sorting ...

Why is Angularfire2 failing to save the data it fetches?

It seems that I am struggling to accomplish what I need because of a lack of knowledge on the proper method. My goal is to save a connection between a user and a school (which is also a user), and then retrieve some image URLs from the school user in a new ...

Is there a way to ensure that the content of my modal dialog only displays once when it is opened?

While working with Chakra UI, I encountered a unique issue that I hadn't faced before with Material UI. The problem arises when using the Chakra UI modal dialog - all components inside it get rendered twice upon opening. Despite attempting to disable ...

Unable to access property '_lastPathIndex' of an undefined value

In my component spec, I am simulating the Activated Route like this: class ActivatedRouteMock { public paramMap = of(convertToParamMap({ level: 'customer', id: '12345', })); } I have also added this class in the providers ...

Installing Angular Flex has been challenging for me

Encountering an error while running npm install @angular/flex-layout. Does anyone know what this means? I tried using --force, and the installation completed successfully. However, upon starting up the project, it seems to be broken. gonzalo@gonzalo-Inspir ...

Utilizing UseRef in Typescript for an Idle Timer

Feeling frustrated with Typescript, everything seems unnecessarily complicated. Trying to follow a tutorial on react-idle-timer and encountering TypeScript compilation issues within minutes. The guides online suggest using when calling useRef with TypeS ...

Error: Missing provider for MatBottomSheetRef

While experimenting in this StackBlitz, I encountered the following error message (even though the MatBottomSheetModule is imported): ERROR Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]: S ...

Data binding in Angular 2: Connecting components

Is it possible to establish a connection between two components that are working with related objects? One of the components is dedicated to filtering, while the other displays the data results. By applying filters such as checkboxes, the displayed data ...

Is Angular UI's data binding more of a push or pull mechanism? How can I optimize its speed?

Suppose I have a variable a that is displayed in HTML as {{a}}. If I then update its value in TypeScript using a = "new value";, how quickly will the new value be reflected in the user interface? Is there a mechanism that periodically checks all bound var ...

Sending data to back-end server using Multer, Node.js, and Express via a POST request

I have been facing an issue while trying to send a form from my local system to the backend server via a POST request. Every time, it seems to go with --binary-data instead of going with --form. Below is a sample curl command that I am looking to replicat ...

Angular 2: A guide to setting up `--module system --experimentalDecorators` flags in your project

I am encountering an issue while compiling my TypeScript file: app/app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>Messenger</h1>' }) export clas ...

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

What steps should I take to plan a collaborative code-sharing project?

As I develop various applications utilizing a core framework of my own creation, I am looking for a way to easily manage updates across all these applications. I have structured the code by creating a GitHub project where the main branch consists of the co ...

What is the best way to utilize imported classes, functions, and variables within an Angular 2 template?

I've come up with a solution for incorporating static content into a template, but I'm unsure if it's the best approach. I would like to know if there is an official or more efficient method of achieving this. Here's an example showcas ...