@lilaquadrat/design-core 0.2.1 → 0.3.0

package/tooling/cypress/support/commands.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-/* eslint-disable no-unused-vars */
+ 
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -18,419 +18,577 @@ declare global {
   }
 }
 
-/* eslint-enable no-unused-vars */
-
 Cypress.Commands.add('captureScreenSizes', (module: string, variant: string, ...args: string[]) => {
-  const viewports = [
-    { width: 375, height: 667, viewport: 'iphone-6' }, 
-    { width: 768, height: 1024, viewport: 'tablet' }, 
-    { width: 1366, height: 768, viewport: 'laptop' },
-    { width: 1920, height: 1080, viewport: 'desktop' }, 
-  ];
+
+    const viewports = [
+        { width: 375, height: 667, viewport: 'iphone-6' }, 
+        { width: 768, height: 1024, viewport: 'tablet' }, 
+        { width: 1366, height: 768, viewport: 'laptop' },
+        { width: 1920, height: 1080, viewport: 'desktop' }, 
+    ];
     
-  viewports.forEach(viewport => {
-    cy.viewport(viewport.width, viewport.height);
-    cy.wait(200);
-
-    cy.document().then((doc) => {
-      const fullHeight = Math.max(
-        doc.body.scrollHeight,
-        doc.body.offsetHeight,
-        doc.documentElement.scrollHeight,
-        doc.documentElement.offsetHeight
-      );
-
-      if (fullHeight > viewport.height) {
-        cy.viewport(viewport.width, fullHeight);
+    viewports.forEach(viewport => {
+
+        cy.viewport(viewport.width, viewport.height);
         cy.wait(200);
-      }
-    });
+
+        cy.document().then((doc) => {
+
+            const fullHeight = Math.max(
+                doc.body.scrollHeight,
+                doc.body.offsetHeight,
+                doc.documentElement.scrollHeight,
+                doc.documentElement.offsetHeight
+            );
+
+            if (fullHeight > viewport.height) {
+
+                cy.viewport(viewport.width, fullHeight);
+                cy.wait(200);
+            
+            }
+        
+        });
     
-    const variantLabel = `variant=${variant || 'default'}`;
-    const contentLabel = `content=${args.join('_')}`;
-    const screenLabel = `screen=${viewport.viewport}-${viewport.width}x${viewport.height}`;
+        const variantLabel = `variant=${variant || 'default'}`;
+        const contentLabel = `content=${args.join('_')}`;
+        const screenLabel = `screen=${viewport.viewport}-${viewport.width}x${viewport.height}`;
 
-    cy.screenshot(`${module}/${variantLabel}--${contentLabel}--${screenLabel}`, { capture: 'fullPage', overwrite: true });
+        cy.screenshot(`${module}/${variantLabel}--${contentLabel}--${screenLabel}`, { capture: 'fullPage', overwrite: true });
  
-  });
+    });
+
 });
 
 Cypress.Commands.add('getModuleVariantKeysFromString', (moduleName: string) => {
-  cy.readFile('src/modules.browser.ts').then((content) => {
 
-    const moduleRegex = new RegExp(
-      `{\\s*name\\s*:\\s*['"]${moduleName}['"][\\s\\S]*?variants\\s*:\\s*\\[([\\s\\S]*?)\\]`,
-      'm'
-    );   
-    const match = content.match(moduleRegex);
+    cy.readFile('src/modules.browser.ts').then((content) => {
 
-    if (!match) {
-      return cy.wrap([]);
-    }
+        const moduleRegex = new RegExp(
+            `{\\s*name\\s*:\\s*['"]${moduleName}['"][\\s\\S]*?variants\\s*:\\s*\\[([\\s\\S]*?)\\]`,
+            'm'
+        );   
+        const match = content.match(moduleRegex);
+
+        if (!match) {
 
-    const variantsBlock = match[1]; 
-    const variantRegex = /{[\s\S]*?key\s*:\s*['"]([^'"]+)['"][\s\S]*?}/g;
-    const keys: string[] = [];
-    let variantMatch;
+            return cy.wrap([]);
+        
+        }
 
-    while ((variantMatch = variantRegex.exec(variantsBlock)) !== null) {
-      const variantChunk = variantMatch[0];
-      const key = variantMatch[1];
-      const hasGroup = /group\s*:/.test(variantChunk);
+        const variantsBlock = match[1]; 
+        const variantRegex = /{[\s\S]*?key\s*:\s*['"]([^'"]+)['"][\s\S]*?}/g;
+        const keys: string[] = [];
+        let variantMatch;
 
-      if (hasGroup || key.startsWith('pdf-')) {
-        continue;
-      }
+        while ((variantMatch = variantRegex.exec(variantsBlock)) !== null) {
 
-      keys.push(key);
-    }
+            const variantChunk = variantMatch[0];
+            const key = variantMatch[1];
+            const hasGroup = /group\s*:/.test(variantChunk);
+
+            if (hasGroup || key.startsWith('pdf-')) {
+
+                continue;
+            
+            }
+
+            keys.push(key);
+        
+        }
+
+        return cy.wrap(keys);
+    
+    });
 
-    return cy.wrap(keys);
-  });
 });
 
 Cypress.Commands.add('updateVariant', (variant: string) => {
-  cy.get('.presentation')
-    .first()
-    .children()
-    .first()
-    .then(($module) => {
-      const prev = $module.data('activeVariant');
-
-      if (prev) $module.removeClass(prev);
-      if (variant) $module.addClass(variant);
-      $module.data('activeVariant', variant || '');
-
-      const $defaultEls = $module.find('.default');
-
-      $defaultEls.each((_, el) => {
-        const $el = Cypress.$(el);
-        const prevElVariant = $el.data('activeVariant');
-
-        if (prevElVariant) $el.removeClass(prevElVariant);
-        if (variant) $el.addClass(variant);
-        $el.data('activeVariant', variant || '');
-      });
-    });
+
+    cy.get('.presentation')
+        .first()
+        .children()
+        .first()
+        .then(($module) => {
+
+            const prev = $module.data('activeVariant');
+
+            if (prev) $module.removeClass(prev);
+            if (variant) $module.addClass(variant);
+            $module.data('activeVariant', variant || '');
+
+            const $defaultEls = $module.find('.default');
+
+            $defaultEls.each((_, el) => {
+
+                const $el = Cypress.$(el);
+                const prevElVariant = $el.data('activeVariant');
+
+                if (prevElVariant) $el.removeClass(prevElVariant);
+                if (variant) $el.addClass(variant);
+                $el.data('activeVariant', variant || '');
+            
+            });
+        
+        });
+
 });
 
 // todo:
 // - fix updating list items
 // parameter sample ('h1', 'short', 'intro-container') or ('h1', 'short')
 Cypress.Commands.add('updateTextEl', (selector: string, textSize: string, parentElement?: string) => {
-  cy.fixture('textblock-inputs').then((data) => {
-    const sizeOptions = ['short', 'medium', 'long'] as const;
-    let resolvedTextSize: string;
-    let pool: string[];
 
-    if (textSize === 'number') {
-      pool = data.number;
-    } else if (textSize === 'button') {
-      pool = data.button;
-    } else {
-      resolvedTextSize = textSize === 'random' 
-        ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
-        : textSize;
+    cy.fixture('textblock-inputs').then((data) => {
 
-      pool = data.list[resolvedTextSize];
-    }
+        const sizeOptions = ['short', 'medium', 'long'] as const;
+        let resolvedTextSize: string;
+        let pool: string[];
 
-    const randomText = pool ? pool[Math.floor(Math.random() * pool.length)] : '';
+        if (textSize === 'number') {
 
-    if (!parentElement) {
-      cy.get('body').then(($body) => {
-        if (!$body.find(selector).length) return;
+            pool = data.number;
+        
+        } else if (textSize === 'button') {
 
-        cy.get(selector).then($els => {
-          $els.each((_, el) => {
-            Cypress.$(el).text(randomText);
-          });
-        });
-      });
-    } else {
-      cy.get('body').then(($body) => {
-        if (!$body.find(`.${parentElement}`).length) return;
+            pool = data.button;
+        
+        } else {
 
-        cy.get(`.${parentElement}`)
-          .first().then($el => {
-            const $selected = $el.find(selector);
+            resolvedTextSize = textSize === 'random' 
+                ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+                : textSize;
 
-            if (!$selected.length) return;
+            pool = data.list[resolvedTextSize];
+        
+        }
+
+        const randomText = pool ? pool[Math.floor(Math.random() * pool.length)] : '';
+
+        if (!parentElement) {
+
+            cy.get('body').then(($body) => {
+
+                if (!$body.find(selector).length) return;
+
+                cy.get(selector).then($els => {
 
-            $selected.each((_, el) => {
-              Cypress.$(el).text(randomText);
+                    $els.each((_, el) => {
+
+                        Cypress.$(el).text(randomText);
+                    
+                    });
+                
+                });
+            
             });
-          });
-      });
-    }
-  });
+        
+        } else {
+
+            cy.get('body').then(($body) => {
+
+                if (!$body.find(`.${parentElement}`).length) return;
+
+                cy.get(`.${parentElement}`)
+                    .first().then($el => {
+
+                        const $selected = $el.find(selector);
+
+                        if (!$selected.length) return;
+
+                        $selected.each((_, el) => {
+
+                            Cypress.$(el).text(randomText);
+                        
+                        });
+                    
+                    });
+            
+            });
+        
+        }
+    
+    });
+
 });
 
 // parameter sample ('short', 'intro-container') or ('short')
 Cypress.Commands.add('updateTextblock', (textSize: string, parentClassname?: string | null) => {
-  const tags = ['h1', 'h2', 'h3', 'p'] as const;
-  const sizeOptions = ['short', 'medium', 'long'] as const;
-  const listTypes = ['list', 'links'] as const;
-  const tagToDataKey = {
-    h1: 'headline',
-    h2: 'subline',
-    h3: 'intro',
-    p : 'paragraph',
-  } as const;
-  const selector = parentClassname
-    ? `.lila-textblock.${parentClassname}`
-    : '.lila-textblock';
-
-  cy.fixture('textblock-inputs').then((data) => {
-    cy.get('body').then(($body) => {
-      if (!$body.find(selector).length) return;
 
-      cy.get(selector)
-        .first()
-        .then(($block) => {
-          tags.forEach((tag) => {
-            const dataKey = tagToDataKey[tag];
-            const $tag = $block.find(tag).first();
+    const tags = ['h1', 'h2', 'h3', 'p'] as const;
+    const sizeOptions = ['short', 'medium', 'long'] as const;
+    const listTypes = ['list', 'links'] as const;
+    const tagToDataKey = {
+        h1: 'headline',
+        h2: 'subline',
+        h3: 'intro',
+        p: 'paragraph',
+    } as const;
+    const selector = parentClassname
+        ? `.lila-textblock.${parentClassname}`
+        : '.lila-textblock';
+
+    cy.fixture('textblock-inputs').then((data) => {
+
+        cy.get('body').then(($body) => {
+
+            if (!$body.find(selector).length) return;
+
+            cy.get(selector)
+                .first()
+                .then(($block) => {
 
-            if (!$tag.length) return;
+                    tags.forEach((tag) => {
 
-            const currentSize =
+                        const dataKey = tagToDataKey[tag];
+                        const $tag = $block.find(tag).first();
+
+                        if (!$tag.length) return;
+
+                        const currentSize =
               textSize === 'random'
-                ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
-                : textSize;
-            const pool = data[dataKey]?.[currentSize];
+                  ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+                  : textSize;
+                        const pool = data[dataKey]?.[currentSize];
 
-            if (!pool?.length) return;
+                        if (!pool?.length) return;
 
-            const randomText = pool[Math.floor(Math.random() * pool.length)];
+                        const randomText = pool[Math.floor(Math.random() * pool.length)];
 
-            cy.wrap($tag).invoke('text', randomText);
-          });
-        });
+                        cy.wrap($tag).invoke('text', randomText);
+                    
+                    });
+                
+                });
 
-      listTypes.forEach((listType) => {
-        if (!$body.find(`.${listType}`).length) return;
+            listTypes.forEach((listType) => {
 
-        const currentSize = textSize === 'random'
-          ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
-          : textSize;
+                if (!$body.find(`.${listType}`).length) return;
 
-        cy.get(`.${listType}`).first().then(($block) => {
-          cy.get(`.${listType}`).first().then(($parent) => {
-            if (!$parent.find('h4').length) return;
+                const currentSize = textSize === 'random'
+                    ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+                    : textSize;
 
-            cy.wrap($parent.find('h4').first()).invoke(
-              'text',
-              data.list[currentSize][Math.floor(Math.random() * data.list[currentSize].length)]
-            );
-          });
+                cy.get(`.${listType}`).first().then(($block) => {
 
-          const items = $block.find('li');
+                    cy.get(`.${listType}`).first().then(($parent) => {
 
-          items.each((index, item) => {
-            const text = data.list[currentSize][index % data.list[currentSize].length];
+                        if (!$parent.find('h4').length) return;
 
-            cy.wrap(item).then(($li) => {
-              if (listType === 'links') {
-                const $link = $li.find('a:first');
+                        cy.wrap($parent.find('h4').first()).invoke(
+                            'text',
+                            data.list[currentSize][Math.floor(Math.random() * data.list[currentSize].length)]
+                        );
+                    
+                    });
 
-                if ($link.length) {
-                  $link.text(text);
-                }
-              } else {
-                const li = $li[0];
+                    const items = $block.find('li');
 
-                if (li.lastChild && li.lastChild.nodeType === Node.TEXT_NODE) {
-                  li.lastChild.nodeValue = text;
-                }
-              }
+                    items.each((index, item) => {
+
+                        const text = data.list[currentSize][index % data.list[currentSize].length];
+
+                        cy.wrap(item).then(($li) => {
+
+                            if (listType === 'links') {
+
+                                const $link = $li.find('a:first');
+
+                                if ($link.length) {
+
+                                    $link.text(text);
+                                
+                                }
+                            
+                            } else {
+
+                                const li = $li[0];
+
+                                if (li.lastChild && li.lastChild.nodeType === Node.TEXT_NODE) {
+
+                                    li.lastChild.nodeValue = text;
+                                
+                                }
+                            
+                            }
+                        
+                        });
+                    
+                    });
+                
+                });
+            
             });
-          });
+        
         });
-      });
+    
     });
-  });
+
 });
 
 Cypress.Commands.add('updateListLinks', (textSize: string, parentElement?: string) => {
-  const target = parentElement ? `.${parentElement} .lila-list-links` : '.lila-list-links';
 
-  cy.fixture('textblock-inputs').then((data) => {
-    const sizeOptions = ['short', 'medium', 'long'] as const;
-    const resolvedTextSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize;
-    const pool = data.list[resolvedTextSize];
+    const target = parentElement ? `.${parentElement} .lila-list-links` : '.lila-list-links';
 
-    if (!pool?.length) return;
+    cy.fixture('textblock-inputs').then((data) => {
 
-    cy.get('body').then(($body) => {
-      if (!$body.find(target).length) return;
+        const sizeOptions = ['short', 'medium', 'long'] as const;
+        const resolvedTextSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize;
+        const pool = data.list[resolvedTextSize];
 
-      cy.get(target).each(($list) => {
-        const $h4 = $list.find('h4');
+        if (!pool?.length) return;
 
-        if ($h4.length) {
-          $h4.text(pool[Math.floor(Math.random() * pool.length)]);
-        }
+        cy.get('body').then(($body) => {
+
+            if (!$body.find(target).length) return;
+
+            cy.get(target).each(($list) => {
+
+                const $h4 = $list.find('h4');
+
+                if ($h4.length) {
+
+                    $h4.text(pool[Math.floor(Math.random() * pool.length)]);
+                
+                }
 
-        $list.find('li').each((index, item) => {
-          const text = pool[index % pool.length];
-          const $a = Cypress.$(item).find('a:first');
+                $list.find('li').each((index, item) => {
 
-          if ($a.length) {
-            $a.text(text);
-          } else if (item.lastChild && item.lastChild.nodeType === Node.TEXT_NODE) {
-            item.lastChild.nodeValue = text;
-          }
+                    const text = pool[index % pool.length];
+                    const $a = Cypress.$(item).find('a:first');
+
+                    if ($a.length) {
+
+                        $a.text(text);
+                    
+                    } else if (item.lastChild && item.lastChild.nodeType === Node.TEXT_NODE) {
+
+                        item.lastChild.nodeValue = text;
+                    
+                    }
+                
+                });
+            
+            });
+        
         });
-      });
+    
     });
-  });
+
 });
 
 Cypress.Commands.add('updatePictureSrc', (data: { src: string; alt?: string; caption?: string } | string) => {
-  // Define tag selectors at the top
-  const selectors = {
-    img    : 'picture img',
-    caption: 'figcaption',
-  };
-  const applyImageData = (imageData: { src: string; alt?: string; caption?: string }) => {
-    cy.get('body').then(($body) => {
-      if ($body.find(selectors.img).length) {
-        cy.get(selectors.img).invoke('attr', 'src', imageData.src);
 
-        if (imageData.alt) {
-          cy.get(selectors.img).invoke('attr', 'alt', imageData.alt);
-        }
-      }
+    // Define tag selectors at the top
+    const selectors = {
+        img: 'picture img',
+        caption: 'figcaption',
+    };
+    const applyImageData = (imageData: { src: string; alt?: string; caption?: string }) => {
 
-      if (imageData.caption && $body.find(selectors.caption).length) {
-        cy.get(selectors.caption).invoke('text', imageData.caption);
-      }
-    });
-  };
+        cy.get('body').then(($body) => {
 
-  if (typeof data === 'string') {
-    // Resolve string like 'horizontal-0' or 'horizontal-0.jpg' to fixture object
-    const key = data.replace(/\.[^/.]+$/, ''); // strip extension
-    const match = key.match(/^(.+)-(\d+)$/);
+            if ($body.find(selectors.img).length) {
 
-    if (match) {
-      const [, category, indexStr] = match;
-      const index = parseInt(indexStr, 10);
+                cy.get(selectors.img).invoke('attr', 'src', imageData.src);
 
-      cy.fixture('image-inputs').then((fixtureData) => {
-        const resolved = fixtureData[category]?.[index];
+                if (imageData.alt) {
+
+                    cy.get(selectors.img).invoke('attr', 'alt', imageData.alt);
+                
+                }
+            
+            }
 
-        if (resolved) {
-          applyImageData(resolved);
+            if (imageData.caption && $body.find(selectors.caption).length) {
+
+                cy.get(selectors.caption).invoke('text', imageData.caption);
+            
+            }
+        
+        });
+    
+    };
+
+    if (typeof data === 'string') {
+
+        // Resolve string like 'horizontal-0' or 'horizontal-0.jpg' to fixture object
+        const key = data.replace(/\.[^/.]+$/, ''); // strip extension
+        const match = key.match(/^(.+)-(\d+)$/);
+
+        if (match) {
+
+            const [, category, indexStr] = match;
+            const index = parseInt(indexStr, 10);
+
+            cy.fixture('image-inputs').then((fixtureData) => {
+
+                const resolved = fixtureData[category]?.[index];
+
+                if (resolved) {
+
+                    applyImageData(resolved);
+                
+                } else {
+
+                    applyImageData({ src: data });
+                
+                }
+            
+            });
+        
         } else {
-          applyImageData({ src: data });
+
+            applyImageData({ src: data });
+        
         }
-      });
+    
     } else {
-      applyImageData({ src: data });
+
+        applyImageData(data);
+    
     }
-  } else {
-    applyImageData(data);
-  }
+
 });
 
 Cypress.Commands.add('updateGalleryImage', (index: number, data: { src: string; alt?: string; caption?: string } | string) => {
-  const imageData = typeof data === 'string' ? { src: data } : data;
 
-  cy.get('body').then(($body) => {
-    const $elements = $body.find('.gallery-module .element');
+    const imageData = typeof data === 'string' ? { src: data } : data;
 
-    if (!$elements.length || !$elements.eq(index).length) return;
+    cy.get('body').then(($body) => {
 
-    const $img = $elements.eq(index).find('picture img');
+        const $elements = $body.find('.gallery-module .element');
 
-    if ($img.length) {
-      cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'src', imageData.src);
+        if (!$elements.length || !$elements.eq(index).length) return;
 
-      if (imageData.alt) {
-        cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'alt', imageData.alt);
-      }
-    }
+        const $img = $elements.eq(index).find('picture img');
 
-    if (imageData.caption) {
-      const $caption = $elements.eq(index).find('figcaption');
+        if ($img.length) {
+
+            cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'src', imageData.src);
+
+            if (imageData.alt) {
+
+                cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'alt', imageData.alt);
+            
+            }
+        
+        }
+
+        if (imageData.caption) {
+
+            const $caption = $elements.eq(index).find('figcaption');
+
+            if ($caption.length) {
+
+                cy.get('.gallery-module .element').eq(index).find('figcaption').invoke('text', imageData.caption);
+            
+            }
+        
+        }
+    
+    });
 
-      if ($caption.length) {
-        cy.get('.gallery-module .element').eq(index).find('figcaption').invoke('text', imageData.caption);
-      }
-    }
-  });
 });
 
 Cypress.Commands.add('navigateGallery', (direction: 'next' | 'prev') => {
-  const selector = direction === 'next' ? '.gallery-controls button:last-child' : '.gallery-controls button:first-child';
 
-  cy.get('body').then(($body) => {
-    if ($body.find(selector).length) {
-      cy.get(selector).click();
-      cy.wait(500);
-    }
-  });
+    const selector = direction === 'next' ? '.gallery-controls button:last-child' : '.gallery-controls button:first-child';
+
+    cy.get('body').then(($body) => {
+
+        if ($body.find(selector).length) {
+
+            cy.get(selector).click();
+            cy.wait(500);
+        
+        }
+    
+    });
+
 });
 
 Cypress.Commands.add('updateButton', (text: string, className?: string) => {
-  cy.get('body').then(($body) => {
-    if (!$body.find('.lila-button, .button').length) return;
 
-    cy.get('.lila-button, .button').each(($btn) => {
-      if (text === 'random') {
-        cy.fixture('textblock-inputs').then((data) => {
-          const pool = data.button;
-          const randomText = pool[Math.floor(Math.random() * pool.length)];
+    cy.get('body').then(($body) => {
+
+        if (!$body.find('.lila-button, .button').length) return;
 
-          cy.wrap($btn).invoke('text', randomText);
-        });
-      } else {
-        cy.wrap($btn).invoke('text', text);
-      }
+        cy.get('.lila-button, .button').each(($btn) => {
+
+            if (text === 'random') {
+
+                cy.fixture('textblock-inputs').then((data) => {
+
+                    const pool = data.button;
+                    const randomText = pool[Math.floor(Math.random() * pool.length)];
+
+                    cy.wrap($btn).invoke('text', randomText);
+                
+                });
+            
+            } else {
 
-      if (className) {
-        cy.wrap($btn).invoke('addClass', className);
-      }
+                cy.wrap($btn).invoke('text', text);
+            
+            }
+
+            if (className) {
+
+                cy.wrap($btn).invoke('addClass', className);
+            
+            }
+        
+        });
+    
     });
-  });
+
 });
 
 Cypress.Commands.add('updateAllTextblocks', (textSize: string, parentElement?: string) => {
-  const tags = ['h1', 'h2', 'h3', 'p'] as const;
-  const sizeOptions = ['short', 'medium', 'long'] as const;
-  const tagToDataKey = {
-    h1: 'headline',
-    h2: 'subline',
-    h3: 'intro',
-    p : 'paragraph',
-  } as const;
-  const selector = parentElement ? `.${parentElement} .lila-textblock` : '.lila-textblock';
-
-  cy.fixture('textblock-inputs').then((data) => {
-    cy.get('body').then(($body) => {
-      if (!$body.find(selector).length) return;
 
-      cy.get(selector).each(($block) => {
-        tags.forEach((tag) => {
-          const dataKey = tagToDataKey[tag];
-          const $tag = $block.find(tag).first();
+    const tags = ['h1', 'h2', 'h3', 'p'] as const;
+    const sizeOptions = ['short', 'medium', 'long'] as const;
+    const tagToDataKey = {
+        h1: 'headline',
+        h2: 'subline',
+        h3: 'intro',
+        p: 'paragraph',
+    } as const;
+    const selector = parentElement ? `.${parentElement} .lila-textblock` : '.lila-textblock';
+
+    cy.fixture('textblock-inputs').then((data) => {
+
+        cy.get('body').then(($body) => {
+
+            if (!$body.find(selector).length) return;
+
+            cy.get(selector).each(($block) => {
 
-          if (!$tag.length) return;
+                tags.forEach((tag) => {
 
-          const currentSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize as typeof sizeOptions[number];
-          const pool = data[dataKey]?.[currentSize];
+                    const dataKey = tagToDataKey[tag];
+                    const $tag = $block.find(tag).first();
 
-          if (!pool?.length) return;
+                    if (!$tag.length) return;
 
-          const randomText = pool[Math.floor(Math.random() * pool.length)];
+                    const currentSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize as typeof sizeOptions[number];
+                    const pool = data[dataKey]?.[currentSize];
 
-          cy.wrap($tag).invoke('text', randomText);
+                    if (!pool?.length) return;
+
+                    const randomText = pool[Math.floor(Math.random() * pool.length)];
+
+                    cy.wrap($tag).invoke('text', randomText);
+                
+                });
+            
+            });
+        
         });
-      });
+    
     });
-  });
+
 });
 
 export {}