# jasmine-angular-snapshot-testing

> Angular component snapshot testing for Jasmine

Latest version **1.0.1** (published 2017-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install jasmine-angular-snapshot-testing
pnpm add jasmine-angular-snapshot-testing
yarn add jasmine-angular-snapshot-testing
bun add jasmine-angular-snapshot-testing
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-02-28 |
| First published | 2016-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Mike Ryan |
| Maintainers | mikeryan52 |

## Links

- npm: https://www.npmjs.com/package/jasmine-angular-snapshot-testing
- Repository: https://github.com/synapse-wireless-labs/angular-snapshot-testing
- Homepage: https://github.com/synapse-wireless-labs/angular-snapshot-testing#readme
- Issues: https://github.com/synapse-wireless-labs/angular-snapshot-testing/issues
- npm.io page: https://npm.io/package/jasmine-angular-snapshot-testing

## Dependencies (7)

- [diff](https://npm.io/package/diff.md) ^3.1.0
- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.2
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [cheerio](https://npm.io/package/cheerio.md) ^0.22.0
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.7.0
- [@ngrx/core](https://npm.io/package/@ngrx/core.md) ^1.2.0

## Recent versions

- 1.0.1 (latest) — 2017-02-28
- 1.0.0 — 2017-02-28
- 1.0.0-alpha.1 — 2016-11-27

## README

# angular-snapshot-testing
Angular component snapshot testing for Jasmine

### How to Use

1. Install the extension:
  Via npm:
  ```
  npm install jasmine-angular-snapshot-testing --save-dev
  ```

  Via yarn:
  ```
  yarn add jasmine-angular-snapshot-testing --dev
  ```

2. Initialize the testing environment
  This extension requries you to run your unit tests on node instead of in a browser.
  This requires `@angular/platform-server`:

  ```ts
  import { getTestBed } from '@angular/core/testing';
  import { ServerTestingModule, platformServerTesting } from '@angular/platform-server/testing';

  getTestBed().initTestEnvironment(
    ServerTestingModule,
    platformServerTesting()
  );
  ```

3. Configure the extension:
  After initializing the test environment initialize the snapshot testing extension:

  ```ts
  import { initializeSnapshots } from 'jasmine-angular-snapshot-testing';


  initializeSnapshots({
    /**
     * This flag will cause tests to fail if a new snapshot shoudl be generated.
     * Generally, you want to set this value to true when running tests on CI
     * and false when writing new unit tests
     */
    failOnSnapshotDiscovery: false,
    /**
     * This is the file extension that will be appended to the end of test
     * files when generating a snapshot file.
     *
     * For example, if this is set to 'snap' and the spec file is called
     * 'table.component.spec.ts' then the generated file will be called
     * 'table.component.spec.ts.snap'
     */
     fileExtension: 'snap',
     /**
      * This flag will cause new snapshots to overwrite existing snapshots.
      * This is useful during development.
      *
      * Be aware that if this is set to 'true' snapshot tests will never fail.
      */
      discardOldSnapshots: false,
  });
  ```

4. Use beforeAll/afterAll hooks to load and save snapshots:
  This must be done in each spec file:
  
  ```ts
  import * as snapshots from 'jasmine-angular-snapshot-testing';

  describe('Table Component', () => {
    beforeAll(() => snapshots.load(module));
    afterAll(() => snapshots.save());
  });
  ```

5. Generate snapshots:
  Use the new `toMatchSnapshot()` matcher to generate snapshots for any
  object that implements `.toJSON()`. Note that this module adds a
  `.toJSON()` method to component fixtures:

  ```ts
  let fixture: ComponentFixture<TableComponent>;

  beforeEach(async(() => {
    TestBed.compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(TableComponent);
        fixture.detectChanges();
      });
  }));

  it('should compile successfully', () => {
    expect(fixture).toMatchSnapshot();
  });
  ```

### Caveats
This module has a number of caveats that restrict the type of components
that can be tested with snapshots:

* Unit tests must be run on node instead of a browser. This is a 
  requirement because this extension requires access to the filesystem

* Components cannot make use of external stylesheets or templates. 
  This is because `platform-server` does not implement a `ResourceLoader`, 
  though one may be able to be written.

---
_Source: https://npm.io/package/jasmine-angular-snapshot-testing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._