ngn-data-testid v14.0.0

NgnDataTestId

Lightweight library (service + directive) for easy data-testid implementation for Angular Apps

data-testid is an attribute used to identify a DOM node for testing purposes. It should be used as a handler to the test code. We need to make sure its value is unique.

Supported Angular Version

Angular 10: 10.0.1 (LTS)\ Angular 15: 15.0.1 (LTS)

Installation

Use the node package manager to install ngn-data-testid.

npm i ngn-data-testid@version_for_your_app

Usage

Firstly, you need import this package in your app.module.ts (default config)

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NgnDataTestIdModule.forRoot()],
  bootstrap: [AppComponent],
})

You can also specify your selector for the entire project (instead default data-testid). For example

NgnDataTestIdModule.forRoot({ testIdSelector: "test-id" });

For all subsequent modules import will look like this

@NgModule({
  declarations: [SomeComponent],
  imports: [NgnDataTestIdModule],
  exports: [SomeComponent],
})
export class OtherModule {}

After that you can use directive for implement data-testid selector in your html elements. For example

<input type="text" ngnDataTestId="your_data_testid" />

License

MIT