Store imageshots beside corresponding components with root directory configuration

[ReihaneB]

I created a function that allows you to use imageshots as close as possible to their respective components:

Imageshot Path Formatter Explanation

const nearestComponentImageshotPathFormatter = ({ story, parameters, configurationName }) => {
  // Obtain the path of the directory containing the file, rather than the path of the file itself
  const fileDir = parameters.fileName.substring(0, parameters.fileName.lastIndexOf('/'));

  // Build the path to the __imageshots directory
  const imageshotDir = `${fileDir}/__imageshots`;

  // Construct and return the full path of the imageshots file in lowercase
  return `${imageshotDir}/${`${configurationName}-${story}`}`;
};

module.exports = {
  fileNameFormatter: ({ story, parameters, configurationName }) => (
    nearestComponentImageshotPathFormatter({ story, parameters, configurationName })
  ),
};

This code snippet is designed to generate a formatted file path for storing imageshot files related to specific components in a development environment. Its primary purpose is to ensure that imageshot files are organized neatly in a directory named __imageshots, located in the same directory as the component it represents. Below is a detailed breakdown of the code:

Path Formatter Function (nearestComponentImageshotPathFormatter)

This function formats a path for storing an __imageshot file related to a specific component story, taking an object with three properties:

• Input Properties:
  • story: The name of the story or component (ex: playground)
  • parameters: Contains various parameters, with fileName indicating the path to the component file.
  • configurationName: Represents a specific configuration for which the imageshot is taken (ex: chrome.desktop)

Steps Performed

1. Extract the Component Directory:

   • Extracts the directory path of the component file from parameters.fileName by finding the last occurrence of a forward slash (/) and using substring to get everything before this slash. This ensures the path to the directory containing the component is obtained.

2. Construct the Imageshots Directory Path:

   • Constructs a path to the __imageshots directory by appending __imageshots to the directory path obtained in the previous step. This creates a dedicated place next to each component for storing its imageshots, making the structure organized and easily navigable.

3. Generate the Full Path for the Imageshot File:

   • Constructs the full path for the imageshot file by appending a formatted string combining configurationName and story to the imageshotDir path.

Output Format

Upon execution, the nearestComponentImageshotPathFormatter function returns a string that represents the full path of the imageshot file, formatted and organized according to the specified naming conventions and directory structure. The returned string follows this format:

This output example demonstrates how the function constructs the path:

• src/components/componentName/ is the directory of the component.
• __imageshots is the designated directory for storing imageshot files, placed directly next to the component's directory.
• chrome.desktop-playground.png is the filename of the imageshot, which combines the configuration name (chrome.desktop) and the story name (playground), and appended with the .png file extension.

Return:
src/components/componentName/__imageshots/chrome.desktop-playground.png

CLI Configuration for Project Root Reference

To utilize the project's root directory for storing and referencing imageshot files instead of the default ./loki/reference path, the Loki command-line interface (CLI) commands need to be configured with the --reference . option. This modification directs Loki to use the root of the project as the base reference directory for imageshot comparison, creation, and updates. Here are the modified CLI commands incorporating this option:

• UI Testing:

  "test:ui": "loki test --reference ."
  

• Updating UI Test Imageshots::

  "test:ui:update": "loki update --reference ."