Skip to content

marcelbarner/ngx-feature-flags-testing

Repository files navigation


MIT commitizen PRs styled with prettier All Contributors ngneat spectator

Testing should be easy

ngx-feature-flags-testing is a package to simplify writting tests when you use ngx-feature-flags. It offers you the ability to define directly feature flags in the import section of your TestBed.

Features

  • ✅ Import all parts of ngx-feature-flags without additional configuration.
  • ✅ Configure single feature flag during import
  • ✅ Configure multiple feature flags during import
  • ✅ Edit state during runtime with set or toggle

Table of Contents

Installation

NPM

npm install ngx-feature-flags-testing --save-dev

Yarn

yarn add ngx-feature-flags-testing --dev

Usage

The NgxFeatureFlagsTestingModule class can provide all of the capabilities of the ngx-feature-flags NgxFeatureFlagsModule (directives, pipes,and services) and easily be configured with feature flags for your test cases.

The module can easily be imported into your test cases:

import { NgxFeatureFlagsTestingModule } from 'ngx-feature-flags-testing';

Using without feature flags

TestBed.configureTestingModule({
  imports: [NgxFeatureFlagsTestingModule],
});

Using with one feature flag

/// With feature disabled
TestBed.configureTestingModule({
  imports: [NgxFeatureFlagsTestingModule.withFeatureFlag('featureA')],
});
// With feature enabled
TestBed.configureTestingModule({
  imports: [NgxFeatureFlagsTestingModule.withFeatureFlag('featureA', true)],
});

Using with multiple feature flags

TestBed.configureTestingModule({
  imports: [
    NgxFeatureFlagsTestingModule.withFeatureFlags(
      new Map([
        ['featureA', true],
        ['featureB', false],
      ])
    ),
  ],
});

Using with Spectator

import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
import { NgxFeatureFlagsTestingModule } from '../../lib/ngx-feature-flags-testing.module';
import { DirectiveTestsComponent } from './directive-tests.component';

describe('Import without configuration', () => {
  let spectator: Spectator<DirectiveTestsComponent>;
  const createComponent = createComponentFactory({
    imports: [NgxFeatureFlagsTestingModule],
    component: DirectiveTestsComponent,
  });

  beforeEach(() => (spectator = createComponent()));
  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should display "FeatureB is disabled', () => {
    expect(spectator.query('p')).toHaveText('FeatureB is disabled');
  });
});

describe('Import with flag configuration enabled', () => {
  let spectator: Spectator<DirectiveTestsComponent>;
  const createComponent = createComponentFactory({
    imports: [NgxFeatureFlagsTestingModule.withFeatureFlag('featureB', true)],
    component: DirectiveTestsComponent,
  });

  beforeEach(() => (spectator = createComponent()));
  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should display "FeatureB is enabled', () => {
    expect(spectator.query('p')).toHaveText('FeatureB is enabled');
  });
});

describe('Import with flag configuration disabled', () => {
  let spectator: Spectator<DirectiveTestsComponent>;
  const createComponent = createComponentFactory({
    imports: [NgxFeatureFlagsTestingModule.withFeatureFlag('featureB', false)],
    component: DirectiveTestsComponent,
  });

  beforeEach(() => (spectator = createComponent()));
  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should display "FeatureB is disabled', () => {
    expect(spectator.query('p')).toHaveText('FeatureB is disabled');
  });
});

Set a specific feature flag

beforeEach(() => {
    TestBed.configureTestingModule({imports: [NgxFeatureFlagsTestingModule]});
    configure = TestBed.get(NgxFeatureFlagsConfigurationService);
    service = TestBed.get(NgxFeatureFlagsService);
  });

  it('should disable feature', () => {
    // Enable a specific feature
    configure.setFeatureFlag('feature', true);
    expect(service.featureOn('feature')).toBeTrue();
    //disable a specific feature
    configure.setFeatureFlag('feature', false);
    expect(service.featureOn('feature')).toBeFalse();
    // Toggle the state of a specific feature
    configure.toggleFeatureFlag('feature');
    expect(service.featureOn('feature')).toBeTrue());
  });

FAQ

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!