Cypress Tips/Tricks - Write Selector Generator

write_selector_generator.ts

interface WriteHook {
  'data-hook': string;
}

const writeHook = (hook: string): WriteHook => ({ 'data-hook': hook });

type WriteSelectors<T> = { [P in keyof T]: WriteHook };

/* 
  This takes in a general object like 
  
  {
    addButton: null,
    someElement: "someNewName"
  }
  
  and turns it into this typed read selector object
  
  {
    addButton: { "data-hook": "addButton" },
    someElement: { "data-hook": "someNewName" }
  }
*/
export const writeSelectorGenerator = <T extends Record<string, string | null>>(
  selectors: T
) =>
  // Adds objects with data-hook attributes intended to be passed/spread into React component props
  // i.e. { buttonSelector: { "data-hook": "buttonSelector" }, ... }
  // Usage:
  // <ReactComponent {...WriteSelectors.buttonSelector} /> spreads the buttonSelector's 'data-hook' object selector onto your component
  Object.keys(selectors)
    .map((key) => {
      return {
        [key]:
          selectors[key] === null
            ? // When null, we assume the selector key and data-hook will have the same name
              // i.e. { someSelector: null } => { someSelector: { 'data-hook': 'someSelector' } }
              writeHook(key)
            : // When selectors[key] has some string value, we assume the intent is to override the name of the data-hook attribute value
              // i.e. { someSelector: 'otherName' } => { someSelector: { 'data-hook': 'otherName' } }
              writeHook(selectors[key] as string),
      };
    })
    .reduce((accumulator, nextValue) => ({
      ...accumulator,
      ...nextValue,
    })) as WriteSelectors<T>; 
  // Typing this as WriteSelectors<T> allows us to get errors for WriteSelectors.unknown and auto-completion for properties that exist