#Ember.js

The Get Snappy client is for collection of DOM snapshots with Get Snappy in Ember.js applications. It captures the state of your components and pages as HTML snapshots that are then used to render out images to compare to know good images.

#Installation

pnpm add -D @get-snappy/snappy-ember-client

#Usage

#Basic Usage

Import the snap function to take DOM snapshots in your tests:

import { snap } from '@get-snappy/snappy-ember-client';

// In a QUnit test
test('my component renders correctly', async function(assert) {
  await render(hbs`<MyComponent />`);
  
  // Take a snapshot
  await snap(assert);
});

#Custom Snapshot Names

You can provide a custom name for your snapshot:

// With a custom name
await snap('my-custom-snapshot-name');

#Configuration Options

The snap function accepts an options object as the second parameter:

await snap(assert, {
  // Limit the snapshot to a specific DOM element
  scope: '.my-component-selector',
  
  // Take snapshots at different screen dimensions
  dimensions: [
    { width: 1280, height: 800 },
    { width: 768, height: 1024 },
    { width: 375, height: 667 }
  ]
});

#Parallel testing

Snappy supports parallel testing via ember-exam. In order to run your snapshots in parallel, you need to add a little extra configuration.

First we need to ensure there's two environment variables set:

GET_SNAPPY_UNIQUE_IDENTIFIER needs to be a value that can be used in all parallel partitions to identify this specific build. Using the commit SHA isn't good enough because there may be multiple builds associated with a single SHA.

GET_SNAPPY_PARALLEL=true
GET_SNAPPY_UNIQUE_IDENTIFIER="some-identifier-specific-to-this-build" # example $BUILDKITE_BUILD_ID$BUILDKITE_RETRY_COUNT

Finally, as a separate step that runs after your parallel test run you need to execute get-snappy finalize-build (ensuring the same environment variables above are set)

#API Reference

#snap(incomingTest, options?)

Takes a snapshot of the current DOM state.

Parameters:

• incomingTest: Assert | string - Either a QUnit Assert object (for auto-generated names) or a string (for custom snapshot name)
• options: Options (optional) - Configuration options

Options Interface:

interface Options {
  /**
   * The DOM scope for the snapshot (CSS selector)
   */
  scope?: string;

  /**
   * Array of dimensions to take snapshots at.
   */
  dimensions?: { width: number; height: number }[];
}