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

In Production mode, Angular automatically reloads the page every time my data request service is executed to fetch data from the API

The Issue at Hand I have developed an angular application that functions flawlessly on the development server. This application utilizes localStorage to store the user's JWT token, although I am aware that this may not be the most secure method. How ...

angulartypescriptapachedeploymentangular-local-storage

Angular 5 facing issue with loading external scripts dynamically

I have configured the external scripts in the .angular-cli.json file under the scripts property: ` "scripts": [ "../src/assets/plugins/jquery/jquery.min.js", "../src/assets/plugins/popper/popper.min.js", "../src/assets/plugins/jquer ...

angulardynamicangular-cliangular5external-script

Error: JavaScript object array failing to import properly

In my code, I have an array of objects named trace which is defined as follows: export const trace: IStackTrace[] = [ { ordered_globals: ["c"], stdout: "", func_name: "<module>", stack_to_render: [], globals: { c: ["REF" ...

javascriptreactjstypescript

Error message encountered when trying to associate "can" with an ability instance within Types

Just copying example code from documentation import { createCanBoundTo } from '@casl/react'; import ability from './abilities'; export const Can = createCanBoundTo(ability); An error occurs on the last line: The exported variable & ...

typescriptcasl

The "npx prisma db seed" command encountered an issue: Exit code 1 error occurred during the execution of the command: ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts

this is a sample package.json file when I try to execute the command "npx prisma db seed", I encounter the following error: An error occurred while running the seed command: Error: Command failed with exit code 1: ts-node --compiler-options {&qu ...

typescriptnext.jsprisma

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 : { ...

javascriptreactjstypescriptnext.js

Tips for Resolving TypeScript Error 7053 when using the handleChange function in a React Form

Seeking assistance with creating a versatile handleChange function for a React form. The goal is for the handleChange function to update the state value whenever a form field is modified, while also accommodating nested values. Below is my attempt: const ...

reactjstypescript

How should one properly format an array of objects with elements that are different types of variations?

I am currently developing a versatile sorting module using TypeScript. This module will take in an array of data objects, along with a list of keys to sort by. Once the sorting process is complete, the array will be sorted based on the specified keys. To ...

typescript

Attempting to install angular-in-memory-web-api using npm, but encountering various errors in the process

When trying to install angular-in-memory-web-api using npm, an error with code ERESOLVE occurred. The dependency tree could not be resolved, causing a conflict. While resolving dependencies for the project, it was found that @angular/common version ~13. ...

angularnpmangular-in-memory-web-api

Tips for validating an Angular form with material form fields:

I am currently working on a form that utilizes Angular material form fields. My goal is to have the submit button disabled until all the form controls have been filled with the appropriate values. You can find the code provided in the links below. When I ...

angularangular-materialangular-material-6

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

Multiple values are found in the 'Access-Control-Allow-Origin' header in Angular 7

After serving my Angular app on port 4202, I attempted to connect to a remote Spring MVC app using the code snippet below. this.http.post<Hero[]>('http://localhost:8080/api/hero/list', {"id":1}, httpOptions) However, I encountered the fol ...

angularspring-mvcangular7

Removing special characters when pasting into text box in Angular 2 or higher versions

To ensure that special characters are trimmed or removed when pasting into a textbox inside the TypeScript component file (with extension .ts), utilize a function within the TypeScript component itself. The modified text should be displayed in the textbox ...

angulartypescript

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

javascriptnode.jsreactjstypescriptnode-modules

The process of retrieving input field values from a table within an Angular reactive form

I am seeking a way to collect all input values found within the table rows inside a reactive form. Below is an explanation of my code. <form [formGroup]="productForm" (ngSubmit)="saveProduct($event)" novalidate> <mat-form-field appearance="outlin ...

arraysangularhtml-tableangular-reactive-forms

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

javascripthtmlcssangular

What type of value does a `use` directive return?

Upon reviewing the svelte tutorial, I observed that the clickOutside function provides an object with a destroy method. What should be the precise return type of a custom use directive? export function clickOutside(node: HTMLElement): ??? { // Initia ...

typescriptsvelte

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template

I'm currently experimenting with using Angular CLI alongside the latest JavaScriptServices AspNetCore Angular Spa template. In the past, I would simply copy and paste a .angular-cli.json file into my project's root directory, change "root" to "C ...

javascriptangularasp.net-coresingle-page-applicationangular-cli

Whenever I try to log in on Angular 11, I encounter the HttpErrorResponse error with a status code of

I have encountered an error and cannot seem to find a solution. Here is the code snippet: login(signInRequestPayload: SignInRequestPayload): Observable<boolean> { return this.httpClient.post<SignInResponse>( '/api/v1/registration/login&apo ...

angularangular-httpclient

Solving CORS policy error in a MEAN stack application deployed on Heroku

I've been grappling with a CORS policy error in my MEAN stack app for quite some time now. The specific error message I keep encountering is: "Access to XMLHTTPRequest at <my heroku app url.com/login> from origin has been blocked by CORS ...

node.jsangulartypescriptexpresscors