added support for adding a customSeparator (meinaart#82)

* added support for adding a customSeparator * fix tests * updated readme
principiamentis · Feb 20, 2020 · 7379455 · 7379455
1 parent 93f7e61
commit 7379455
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -74,10 +74,11 @@ it('toMatchImageSnapshot - whole page', () => {
 You can pass the following options to `toMatchImageSnapshot` to override default behavior.
 ```javascript
 {
-  "createDiffImage": true,       // Should a "diff image" be created, can be disabled for performance
-  "threshold": 0.01,             // Amount in pixels or percentage before snapshot image is invalid
-  "name": "custom image name",   // Naming resulting image file with a custom name rather than concatenating test titles
-  "thresholdType": "percent",    // Can be either "pixel" or "percent"
+  "createDiffImage": true,                // Should a "diff image" be created, can be disabled for performance
+  "threshold": 0.01,                      // Amount in pixels or percentage before snapshot image is invalid
+  "name": "custom image name",            // Naming resulting image file with a custom name rather than concatenating test titles
+  "separator": "custom image separator",  // Naming resulting image file with a custom separator rather than using the default ` #`
+  "thresholdType": "percent",             // Can be either "pixel" or "percent"
 }
 ```
 

diff --git a/src/commands/toMatchImageSnapshot.js b/src/commands/toMatchImageSnapshot.js
@@ -6,7 +6,7 @@ const logMessage = require('../utils/commands/logMessage');
 const { NO_LOG } = require('../constants');
 const { COMMAND_MATCH_IMAGE_SNAPSHOT: commandName } = require('./commandNames');
 const getImageData = require('../utils/image/getImageData');
-const { getImageConfig, getScreenshotConfig, getCustomName } = require('../config');
+const { getImageConfig, getScreenshotConfig, getCustomName, getCustomSeparator } = require('../config');
 
 function afterScreenshot(taskData) {
   return ($el, props) => {
@@ -22,11 +22,13 @@ function afterScreenshot(taskData) {
 async function toMatchImageSnapshot(subject, commandOptions) {
   const options = getImageConfig(commandOptions);
   const customName = getCustomName(commandOptions);
+  const customSeparator = getCustomSeparator(commandOptions);
 
   const taskData = await getTaskData({
     commandName,
     options,
     customName,
+    customSeparator,
     subject,
   });
 

diff --git a/src/config.js b/src/config.js
@@ -100,6 +100,11 @@ function getCustomName(suppliedConfig) {
   return cfg.name;
 }
 
+function getCustomSeparator(suppliedConfig) {
+  const cfg = suppliedConfig || getConfig();
+  return cfg.separator;
+}
+
 function getServerUrl(suppliedConfig) {
   const cfg = suppliedConfig || getConfig();
   return `http://${cfg.serverHost}:${cfg.serverPort}/?token=${cfg.token}`;
@@ -126,6 +131,7 @@ module.exports = {
   getPrettierConfig,
   getScreenshotConfig,
   getCustomName,
+  getCustomSeparator,
   getServerUrl,
   initConfig,
   shouldNormalize,

diff --git a/src/utils/commands/getTaskData.js b/src/utils/commands/getTaskData.js
@@ -25,14 +25,15 @@ async function getTaskData({
     commandName,
     options,
     customName,
+    customSeparator,
     subject: testSubject
   } = {}) {
   const subjectIsImage = isImage(commandName);
   const test = getTestForTask();
   const testTitle = getTestTitle(test);
   const spec = await getSpec();
   const testFile = spec.absolute;
-  const snapshotTitle = getSnapshotTitle(test, customName, subjectIsImage);
+  const snapshotTitle = getSnapshotTitle(test, customName, customSeparator, subjectIsImage);
   const subject = subjectIsImage ? testSubject : getSubject(testSubject);
   const dataType = getDataType({commandName, subject: testSubject});
 

diff --git a/src/utils/snapshotTitles.js b/src/utils/snapshotTitles.js
@@ -10,8 +10,9 @@ function snapshotTitleIsUsed(snapshotTitle, isImage = false) {
   return (isImage ? SNAPSHOT_TITLES_IMAGE : SNAPSHOT_TITLES_TEXT).indexOf(snapshotTitle) !== -1;
 }
 
-function getSnapshotTitle(test, customName, isImage = false) {
+function getSnapshotTitle(test, customName, customSeparator, isImage = false) {
   const name = customName || getTestTitle(test);
+  const separator = customSeparator || ' #';
   const snapshots = isImage ? SNAPSHOTS_IMAGE : SNAPSHOTS_TEXT;
 
   if (snapshots[name] !== undefined) {
@@ -20,7 +21,7 @@ function getSnapshotTitle(test, customName, isImage = false) {
     snapshots[name] = 0;
   }
 
-  const snapshotTitle = `${name} #${snapshots[name]}`;
+  const snapshotTitle = `${name}${separator}${snapshots[name]}`;
   (isImage ? SNAPSHOT_TITLES_IMAGE : SNAPSHOT_TITLES_TEXT).push(snapshotTitle);
   return snapshotTitle;
 }