Gathering detailed insights and metrics for karma-snapshot
Gathering detailed insights and metrics for karma-snapshot
Gathering detailed insights and metrics for karma-snapshot
Gathering detailed insights and metrics for karma-snapshot
npm install karma-snapshot
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
31 Stars
40 Commits
4 Forks
2 Watching
1 Branches
3 Contributors
Updated on 07 Feb 2024
JavaScript (100%)
Cumulative downloads
Total Downloads
Last day
-24.7%
601
Compared to previous day
Last week
2.9%
3,478
Compared to previous week
Last month
1.2%
15,496
Compared to previous month
Last year
-51.3%
208,837
Compared to previous year
3
karma-snapshot
provides a communication layer between browser and Karma to store and
retrieve snapshots.
Snapshot can be stored in different formats. Right now there are two formats supported: md
and indented-md
.
This format is preferred when you specify language for code blocks in an assertion plugin. With this format, code editors will automatically highlight syntax of code blocks.
1# `src/html.js` 2 3## `Sub Suite` 4 5#### `HTML Snapshot` 6 7```html 8<div> 9 <span /> 10</div> 11```
1# `src/html.js` 2 3## `Sub Suite` 4 5#### `HTML Snapshot` 6 7 <div> 8 <span /> 9 </div>
Snapshot file path is extracted from the name of the root suit cases and stored alongside with a tested files in a
__snapshots__
directory.
Snapshot file path can be changed by providing a custom pathResolver
in snapshot config.
1$ npm install karma karma-webpack karma-sourcemap-loader karma-snapshot karma-mocha \ 2 karma-mocha-snapshot karma-mocha-reporter karma-chrome-launcher mocha \ 3 chai chai-karma-snapshot webpack --save-dev
Karma configuration:
1// karma.conf.js 2const webpack = require("webpack"); 3 4module.exports = function (config) { 5 config.set({ 6 browsers: ["ChromeHeadless"], 7 frameworks: ["mocha", "snapshot", "mocha-snapshot"], 8 reporters: ["mocha"], 9 preprocessors: { 10 "**/__snapshots__/**/*.md": ["snapshot"], 11 "__tests__/index.js": ["webpack", "sourcemap"] 12 }, 13 files: [ 14 "**/__snapshots__/**/*.md", 15 "__tests__/index.js" 16 ], 17 18 colors: true, 19 autoWatch: true, 20 21 webpack: { 22 devtool: "inline-source-map", 23 performance: { 24 hints: false 25 }, 26 }, 27 28 webpackMiddleware: { 29 stats: "errors-only", 30 noInfo: true 31 }, 32 33 snapshot: { 34 update: !!process.env.UPDATE, 35 prune: !!process.env.PRUNE, 36 }, 37 38 mochaReporter: { 39 showDiff: true, 40 }, 41 42 client: { 43 mocha: { 44 reporter: "html", 45 ui: "bdd", 46 } 47 }, 48 }); 49};
Source file:
1// src/index.js 2 3export function test() { 4 return "Snapshot Test"; 5}
Test file:
1// __tests__/index.js 2import { use, expect, assert } from "chai"; 3import { matchSnapshot } from "chai-karma-snapshot"; 4import { test } from "../src/index.js"; 5use(matchSnapshot); 6 7describe("src/index.js", () => { 8 it("check snapshot", () => { 9 // 'expect' syntax 10 expect(test()).to.matchSnapshot(); 11 // 'assert' syntax 12 assert.matchSnapshot(test()); 13 }); 14});
Run tests:
1$ karma start
Update snapshots:
1$ UPDATE=1 karma start --single-run
Prune snapshots:
1$ PRUNE=1 karma start --single-run
1function resolve(basePath, suiteName) { 2 return path.join(basePath, "__snapshots__", suiteName + ".md"); 3} 4 5config.set({ 6 ... 7 snapshot: { 8 update: true, // Run snapshot tests in UPDATE mode (default: false) 9 prune: false, // Prune unused snapshots (default: false) 10 format: "indented-md", // Snapshot format (default: md) 11 checkSourceFile: true, // Checks existince of the source file associated with tests (default: false) 12 pathResolver: resolve, // Custom path resolver, 13 limitUnusedSnapshotsInWarning: -1 // Limit number of unused snapshots reported in the warning 14 // -1 means no limit 15 16 } 17});
Snapshot config option format
also works with custom serialization formats. Custom snapshot serializer should have
interface:
1interface SnapshotSerializer { 2 serialize: (name: string, suite: SnapshotSuite) => string, 3 deserialize: (content: string) => { name: string, suite: SnapshotSuite }, 4}
karma-snapshot
plugin is communicating with a browser by assigning a global variable __snapshot__
on a window
object.
Snapshot data has a simple data structure:
1declare global { 2 interface Window { 3 __snapshot__: SnapshotState; 4 } 5} 6 7interface SnapshotState { 8 update?: boolean; 9 suite: SnapshotSuite; 10} 11 12interface SnapshotSuite { 13 children: { [key: string]: SnapshotSuite }; 14 snapshots: { [key: string]: Snapshot[] }; 15 visited?: boolean; 16 dirty?: boolean; 17} 18 19interface Snapshot { 20 lang?: string; 21 code: string; 22 visited?: boolean; 23 dirty?: boolean; 24}
When SnapshotState.update
variable is true
, it indicates that assertion plugin should run in update mode, and
instead of checking snapshots, it should update all values.
SnapshotState.suite
is a reference to the root suite.
SnapshotSuite
is a tree with snapshots that has a similar structure to test suites. children
property is used to
store references to children suites, and snapshots
is used to store snapshot lists for tests in the current snapshot.
Snapshots are stored as a list because each test can have multiple snapshot checks, and they should be automatically
indexed by their position.
Snapshot
is an object that stores details about snapshot. lang
property indicates which language should be used
in a markdown format to improve readability. code
property stores snapshot value that will be checked by an assertion
plugin.
visited
is a flag that should be marked by an assertion plugin when it visits suites and snapshots. Visited flags are
used to automatically prune removed snapshots.
dirty
is a flag that should be marked by an assertion plugin when it updates or adds a new snapshot.
To make it easier to add support for assertion libraries, SnapshotState
has two methods that should be used when
creating an API for an assertion library.
1interface SnapshotSuite { 2 get(path: string[], index: number): Snapshot | undefined; 3 set(path: string[], index: number, code: string, lang?: string): void; 4 match(received: string, expected: string): boolean; 5}
get()
method tries to find a Snapshot
in a current snapshot state. It also automatically marks all nodes on the
path
as visited.
set()
method adds or updates an existing Snapshot
.
match()
method checks if two snapshots are matching in normalized form.
Here is an example how it should be used:
1function matchSnapshot(path: string[], index: number, received: string) { 2 if (snapshotState.update) { 3 snapshotState.set(path, index, received); 4 } else { 5 const snapshot = snapshotState.get(path, index); 6 if (!snapshot) { 7 snapshotState.set(path, index, received); 8 } else { 9 const pass = snapshotState.match(received, snapshot.code); 10 if (!pass) { 11 throw new AssertionError(`Received value does not match stored snapshot ${index}`); 12 } 13 } 14 } 15}
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
3 existing vulnerabilities detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/28 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More