Is there a way to access the [class.editable] value during an Angular unit test?

For my unit test, I am trying to retrieve the value of [class.editable].

<div class="coolcomponent layout horizontal center" [class.editable]=editable> 
..... 
</div>

When using 

fixture.nativeElement.querySelector('editable');
, my editableEl variable is always null. The same goes for 
fixture.nativeElement.querySelector('class.editable')
.

This is part of my unit test script:

hostComponent.editable = true;
 fixture.detectChanges();
 expect(hostComponent.testComponent.ngOnChanges).toHaveBeenCalled();
 const editableEl = fixture.nativeElement.querySelector('class.editable');
 expect(editableEl).toBe(true);

Is my selector incorrect, or do I need to further debug in my unit test? Thank you for any assistance!

angulartypescriptunit-testingjestjs

Answer №1

As mentioned by jonrsharpe, there is no requirement for using class.

Consider testing with:

const editableElement = fixture.nativeElement.querySelector('div.editable');
expect(editableElement).toBeTruthy();

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

What are the steps for creating a standalone build in nextJS?

Currently, I am undertaking a project in which nextJS was chosen as the client-side tool. However, I am interested in deploying the client as static code on another platform. Upon generating a build, a folder with all the proprietary server elements of ne ...

javascripttypescriptnext.jsfrontendvercel

Setting up TypeScript in Node.js

A snippet of the error encountered in the node.js command prompt is as follows: C:\Windows\System32>npm i -g typescript npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to https:/ ...

node.jsangulartypescript

Saving a JSON object to multiple JSON objects in TypeScript - The ultimate guide

Currently, I am receiving a JSON object named formDoc containing data from the backend. { "components": [ { "label": "Textfield1", "type": "textfield", "key": "textfield1", ...

jsonangulartypescript

Exploring the realm of unit testing in the NestJS CQRS architecture journey

We're currently working on writing unit tests using Jest for our application and are facing difficulties in testing sagas. Specifically, we're having trouble testing the saga itself. During our unit testing process, we've encountered an iss ...

javascriptunit-testingjestjsnestjssaga

What is the method for launching Chrome synchronously in Selenium WebDriver using createSession()?

After executing the code below using Selenium WebDriver to launch a Chrome browser: import { Driver } from 'selenium-webdriver/chrome'; Driver.createSession(); console.log("I've launched!"); I'm encountering an issue where "I've ...

typescriptseleniumgoogle-chromeselenium-webdriver

Mastering Angular 2 Reactive Forms: Efficiently Binding Entire Objects in a Single Stroke

Exploring reactive forms in Angular 2 has led me to ponder the possibility of binding all object properties simultaneously. Most tutorials show the following approach: this.form = this.fb.group({ name: ['', Validators.required], event: t ...

angulartypescript

Solutions for Utilizing Generic Mixins in Typescript

As a newcomer to Typescript, I have encountered an issue with mixins and generics. The problem became apparent when working on the following example: (Edit: I have incorporated Titian's answer into approach 2 and included setValue() to better showcas ...

typescriptgenericsmixins

Using setAttribute will convert the attribute name to lowercase

When creating elements, I use the following code: var l = document.createElement("label");. I then assign attributes with l.setAttribute("formControlName","e");. However, a problem arises where the setAttribute method converts formControlName to lowercase ...

javascripthtmlangularformsdom

How can we automate the process of assigning the hash(#) in Angular?

Is it possible to automatically assign a unique hash(#) to elements inside an ngFor loop? <div *ngFor="let item of itemsArray; index as i"> <h3 #[item][i]> {{ item }} </h3> </div> I would like the outp ...

javascripthtmlangularangularjstypescript

Error Handler: Unable to retrieve the error object when utilized with a promise

I'm currently working on an angular application with a custom error handler implementation. One interesting point to note is that when you have a custom error handler and use an observable with http without catching errors using a catch block, like i ...

angularangular5

Getting the hang of using and translating typescript .tsx files with jsx in React-native

Recently, I have ventured into the world of React-native after having experience with reactjs+typescript. Wanting to test its capabilities, I decided to set up a simple project. My tool of choice for development is VS Code. After following a basic tutoria ...

typescriptreact-nativevisual-studio-codejsxtsx

I am facing a problem with React Hooks useRef where I am unable to retrieve the updated state value

Trying to use useRef with React hooks, I encountered an issue where the state of the child component changes when calling the setAccountVal method, but upon alerting the value it remains as "Ege". Any ideas on how to resolve this? import React, { useS ...

reactjstypescriptecmascript-6react-hooksreact-ref

What is the best way to populate an Angular variable in Ionic following a subscription?

Currently, I am in the process of retrieving data from a server and displaying it on an Ionic page. I have successfully fetched the data without any issues and verified it in the console. However, how do I proceed once the server returns the data to me? T ...

angularweb-servicestypescriptionic-frameworksubscribe

Styles are not applied by Tailwind to components in the pages folder

NextJS project was already created with tailwind support, so I didn't have to set it up myself. However, when I add className to an HTML element in a component within the pages/ folder, it simply doesn't work, even though the Elements panel in D ...

reactjstypescriptnext.jstailwind-css

The 'id' property is not found within the 'Order[]' type

Encountering a perplexing issue in my HTML where it keeps showing an error claiming that the 'id' property does not exist on type Order[] despite its clear existence The error message displayed: Property 'id' does not exist on type &ap ...

angularrxjs

I am facing an issue with my interface - the variable designed to store boolean values

Something unusual happened with Typescript - I assigned a string value to a boolean variable, but no error was generated. I purposely triggered an error in order to observe how Typescript would react, only to find that it did not produce the expected erro ...

angulartypescript

What is the best way to retrieve entire (selected) objects from a multiselect feature in Angular?

I'm facing an issue with extracting entire objects from a multiselect dropdown that I have included in my angular template. Although I am able to successfully retrieve IDs, I am struggling to fetch the complete object. Instead, in the console, it dis ...

angulartypescriptangular7angular-ngmodelngfor

Angular: Eliminating code duplication through service transfer

One code snippet that I frequently use when booting the app is (ngOnInit): this.route.queryParamMap.subscribe( params => { const id = params.get('id'); if (id) { this.contactsService.GetContactByUserId(id) .subscribe( ...

angular

Angulating Service Testing

I am encountering an issue that I'm not sure how to resolve because I am inexperienced when it comes to testing. Currently, I am testing a service that includes the following code: import { Injectable } from '@angular/core'; import { Endpo ...

javascriptangulartestingjasminekarma-runner

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered: Below is my code snippet: import { combineReducers, createStore } from 'redux'; import produce from ' ...

javascripttypescriptreduxreact-reduximmer.js