From 121d968ad32e41b58c5f6cfe1862a37544aca7bd Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 20 May 2024 17:14:56 +1000
Subject: [PATCH] feat: add component name support to printing functions

use prettyDom function for formatting instead of prettier directly
---
 ts/test/test-utils/utils/components.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/ts/test/test-utils/utils/components.ts b/ts/test/test-utils/utils/components.ts
index c9edc5cae..cfdca9a99 100644
--- a/ts/test/test-utils/utils/components.ts
+++ b/ts/test/test-utils/utils/components.ts
@@ -1,23 +1,20 @@
-import { RenderResult } from '@testing-library/react';
-import * as prettier from 'prettier';
+import { RenderResult, prettyDOM } from '@testing-library/react';
 import { enableLogRedirect } from './stubbing';
 
-const printHTMLElement = async (element: HTMLElement) => {
+const printHTMLElement = async (element: HTMLElement, name?: string) => {
   if (!window.log || !enableLogRedirect) {
     throw Error('window.log is not defined. Have you turned on enableLogRedirect?');
   }
 
-  return window.log.debug(
-    `\nRender Result:\n${await prettier.format(element.outerHTML, { parser: 'html' })}\n`
-  );
+  return window.log.debug(`\nRender Result${name ? ` (${name})` : ''}:\n${prettyDOM(element)}\n`);
 };
-const printRenderResult = async (result: RenderResult) => {
+const printRenderResult = async (result: RenderResult, name?: string) => {
   if (!window.log || !enableLogRedirect) {
     throw Error('window.log is not defined. Have you turned on enableLogRedirect?');
   }
 
   return window.log.debug(
-    `\nHTML Element:\n${await prettier.format(result.baseElement.outerHTML, { parser: 'html' })}\n`
+    `\nHTML Element${name ? ` (${name})` : ''}:\n${prettyDOM(result.baseElement)}\n`
   );
 };