npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mk-magic-alerts

v19.0.1

Published

Flying in alerts for Angular applications

Downloads

228

Readme

Mk-Magic-Alerts

npm version build status codecov

Display animated success-, info-, warning- and error-alerts in your Angular application.

The latest library version is compatible with Angular 19.

Breaking change: As of version 17.2.0, the import of MkMagicAlertsModule is no longer needed for standalone components.


Demo

https://mkeller1992.github.io/mk-magic-messages-library


Install

npm

npm i mk-magic-alerts

@angular/animations package is a required dependency for this library

npm install @angular/animations

Setup

For apps based on Standalone Components

Make sure provideAnimations() is included in your main.ts:

import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
	providers: [
		importProvidersFrom(),
		provideRouter(APP_ROUTES),
		provideAnimations() // this is required!
	]
}).catch(err => console.error(err));

For apps based on ngModule

Make sure BrowserAnimationsModule is included in your @NgModule:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule // this is required!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

  1. Inject AlertsService into your component to invoke different kind of alerts as shown below:
import { AlertsService } from 'mk-magic-alerts';

constructor(private alertsSvc: AlertsService){}

ngOnInit(): void {
  const displayDurationInMillis = 3000;		
  this.alertsSvc.showError('Show me for 3 sec', displayDurationInMillis);

  this.alertsSvc.showError('Show me till user clicks exit');

  this.alertsSvc.showInfo('Info Alert');
  this.alertsSvc.showSuccess('Success Alert');
  this.alertsSvc.showWarning('Warn Alert');
}
  1. To remove all active alerts, invoke the clear()-method:
this.alertsSvc.clear();

Mocking AlertsService for Unit Testing

To facilitate unit testing of components and services that depend on AlertsService, our library provides a MockAlertsService. This mock implementation offers empty methods corresponding to those of the actual AlertsService, allowing you to easily spy on them and control their behavior in your tests without having to worry about their real implementations.

Usage

  1. Import the Mock Service: First, ensure that the MockAlertsService is imported into your test file.

    import { MockAlertsService } from 'mk-magic-alerts';
  2. Configure TestBed: Use MockAlertsService to replace AlertsService in your TestBed configuration. This is done by providing it in the providers array of your test module setup.

    TestBed.configureTestingModule({
      // Other configuration...
      providers: [
        { provide: AlertsService, useClass: MockAlertsService }
      ]
    });

    Alternatively, if you prefer to directly instantiate and provide the mock without Angular's dependency injection, you can create an instance of the mock and use useValue:

    const mockAlertsService = new MockAlertsService();
    TestBed.configureTestingModule({
      // Other configuration...
      providers: [
        { provide: AlertsService, useValue: mockAlertsService }
      ]
    });
  3. Spying on Methods: In your tests, you can now spy on the MockAlertsService methods using Jest's spyOn method. This allows you to mock return values, verify that the methods were called, and inspect the arguments passed to them.

    it('should call showInfo method', () => {
      // Assuming you're inside a describe block for a component or service
      const alertsService = TestBed.inject(AlertsService);
      const showInfoSpy = jest.spyOn(alertsService, 'showInfo');
      // Trigger the action that results in showInfo being called
      expect(showInfoSpy).toHaveBeenCalledWith('Expected text', 10000);
    });