Feat/improve assertion messages (#14)

* feat: improve assertion messages to display in the ui

* feat: remove all old icons

* feat: improve styles

Author: kevinccbsg

examples/my-twd-app/src/twd-tests/app.twd.test.ts

@@ -14,7 +14,7 @@ describe("App interactions", () => {
     throw new Error("Should not run");
   });
 
-  itOnly("only this one runs if present", async () => {
+  itOnly("only this one runs if present and long text to check the layout", async () => {
     const btn = await twd.get("button");
     btn.click();
     console.log("Ran only test");

package.json

@@ -7,9 +7,9 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/twd.es.js",
-      "require": "./dist/twd.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/twd.umd.js"
     }
   },
   "files": [

src/asserts/index.ts

@@ -13,62 +13,127 @@ function isVisible(el: HTMLElement): boolean {
   return true;
 }
 
+const assertionMessage = (valid: boolean, isNegated: boolean, correctMessage: string, errorMessage: string) => {
+  if (!valid && !isNegated) {
+    throw new Error(errorMessage);
+  } else if (valid && isNegated) {
+    throw new Error(
+      errorMessage
+        .replace("to be", "to not be")
+        .replace("to have", "to not have")
+        .replace("to contain", "to not contain")
+    );
+  }
+  return correctMessage;
+};
+
 export const runAssertion = (
   el: Element,
   name: AnyAssertion,
   ...args: any[]
-): void => {
+): string => {
   const isNegated = name.startsWith("not.");
   const baseName = (isNegated ? name.slice(4) : name) as AssertionName;
 
-  const runCheck = (): boolean => {
     const content = (el.textContent || "").trim();
 
-    switch (baseName) {
-      // Content
-      case "have.text":
-        return content === args[0];
-      case "contain.text":
-        return content.includes(args[0]);
-      case "be.empty":
-        return content.length === 0;
-
-      // Attributes
-      case "have.attr":
-        return (el as HTMLElement).getAttribute(args[0]) === args[1];
-      case "have.value":
-        return (el as HTMLInputElement).value === args[0];
+  switch (baseName) {
+    // Content
+    case "have.text":
+      return assertionMessage(
+        content === args[0],
+        isNegated,
+        `Assertion passed: Text is exactly "${args[0]}"`,
+        `Assertion failed: Expected text to be "${args[0]}", but got "${content}"`,
+      );
+    case "contain.text":
+      return assertionMessage(
+        content.includes(args[0]),
+        isNegated,
+        `Assertion passed: Text contains "${args[0]}"`,
+        `Assertion failed: Expected text to contain "${args[0]}", but got "${content}"`
+      );
+    case "be.empty":
+      return assertionMessage(
+        content.length === 0,
+        isNegated,
+        `Assertion passed: Text is empty`,
+        `Assertion failed: Expected text to be empty, but got "${content}"`,
+      );
 
-      // State
-      case "be.disabled":
-        return (el as HTMLInputElement).disabled === true;
-      case "be.enabled":
-        return (el as HTMLInputElement).disabled === false;
-      case "be.checked":
-        return (el as HTMLInputElement).checked === true;
-      case "be.selected":
-        return (el as HTMLOptionElement).selected === true;
-      case "be.focused":
-        return document.activeElement === el;
+    // Attributes
+    case "have.attr":
+      return assertionMessage(
+        (el as HTMLElement).getAttribute(args[0]) === args[1],
+        isNegated,
+        `Assertion passed: Attribute "${args[0]}" is "${args[1]}"`,
+        `Assertion failed: Expected attribute "${args[0]}" to be "${args[1]}", but got "${(el as HTMLElement).getAttribute(args[0])}"`
+      );
+    case "have.value":
+      return assertionMessage(
+        (el as HTMLInputElement).value === args[0],
+        isNegated,
+        `Assertion passed: Value is "${args[0]}"`,
+        `Assertion failed: Expected value to be "${args[0]}", but got "${(el as HTMLInputElement).value}"`,
+      );
 
-      // Visibility
-      case "be.visible": {
-        return isVisible(el as HTMLElement);
-      }
-
-      // Classes
-      case "have.class":
-        return (el as HTMLElement).classList.contains(args[0]);
-
-      default:
-        throw new Error(`Unknown assertion: ${baseName}`);
+    // State
+    case "be.disabled":
+      return assertionMessage(
+        (el as HTMLInputElement).disabled === true,
+        isNegated,
+        `Assertion passed: Element is disabled`,
+        `Assertion failed: Expected element to be disabled`,
+      );
+    case "be.enabled":
+      return assertionMessage(
+        (el as HTMLInputElement).disabled === false,
+        isNegated,
+        `Assertion passed: Element is enabled`,
+        `Assertion failed: Expected element to be enabled`
+      );
+    case "be.checked":
+      return assertionMessage(
+        (el as HTMLInputElement).checked === true,
+        isNegated,
+        `Assertion passed: Element is checked`,
+        `Assertion failed: Expected element to be checked`,
+      );
+    case "be.selected":
+      return assertionMessage(
+        (el as HTMLOptionElement).selected === true,
+        isNegated,
+        `Assertion passed: Element is selected`,
+        `Assertion failed: Expected element to be selected`,
+      );
+    case "be.focused":
+      return assertionMessage(
+        document.activeElement === el,
+        isNegated,
+        `Assertion passed: Element is focused`,
+        `Assertion failed: Expected element to be focused`,
+      );
+  
+    // Visibility
+    case "be.visible": {
+      return assertionMessage(
+        isVisible(el as HTMLElement),
+        isNegated,
+        `Assertion passed: Element is visible`,
+        `Assertion failed: Expected element to be visible`,
+      );
     }
-  };
 
-  const result = runCheck();
-  if (isNegated ? result : !result) {
-    throw new Error(
-      `Assertion failed: ${name} ${args.length ? JSON.stringify(args) : ""}`
-    );
+    // Classes
+    case "have.class":
+      return assertionMessage(
+        (el as HTMLElement).classList.contains(args[0]),
+        isNegated,
+        `Assertion passed: Element has class "${args[0]}"`,
+        `Assertion failed: Expected element to have class "${args[0]}"`,
+      );
+
+    default:
+      throw new Error(`Unknown assertion: ${baseName}`);
   }
 };

src/tests/asserts/runAssertion.spec.ts

@@ -16,40 +16,58 @@ describe('runAssertion', () => {
   it('should assert have.text', () => {
     div.textContent = 'Hello World';
     expect(() => runAssertion(div, 'have.text', 'Hello World')).not.toThrow();
-    expect(() => runAssertion(div, 'have.text', 'Wrong Text')).toThrow();
+    const message = runAssertion(div, 'have.text', 'Hello World');
+    expect(message).toBe('Assertion passed: Text is exactly "Hello World"');
+    expect(() => runAssertion(div, 'have.text', 'Wrong Text')).toThrow('Assertion failed: Expected text to be "Wrong Text", but got "Hello World"');
+  });
+
+  it('should assert not.have.text', () => {
+    div.textContent = 'Hello World';
+    expect(() => runAssertion(div, 'not.have.text', 'Hello World')).toThrow('Assertion failed: Expected text to not be "Hello World", but got "Hello World"');
+    expect(() => runAssertion(div, 'not.have.text', 'Wrong Text')).not.toThrow();
   });
 
   it('should assert contain.text', () => {
     div.textContent = 'Hello World';
     expect(() => runAssertion(div, 'contain.text', 'World')).not.toThrow();
-    expect(() => runAssertion(div, 'contain.text', 'Missing')).toThrow();
+    expect(() => runAssertion(div, 'contain.text', 'Missing')).toThrow('Assertion failed: Expected text to contain "Missing", but got "Hello World"');
+    const message = runAssertion(div, 'contain.text', 'World');
+    expect(message).toBe('Assertion passed: Text contains "World"');
   });
 
   it('should assert be.empty', () => {
     div.textContent = '';
     expect(() => runAssertion(div, 'be.empty')).not.toThrow();
+    const message = runAssertion(div, 'be.empty');
+    expect(message).toBe('Assertion passed: Text is empty');
     div.textContent = 'Not Empty';
-    expect(() => runAssertion(div, 'be.empty')).toThrow();
+    expect(() => runAssertion(div, 'be.empty')).toThrow('Assertion failed: Expected text to be empty, but got "Not Empty"');
   });
 
   // Attribute assertions
   it('should assert have.attr', () => {
     div.setAttribute('data-test', 'value');
     expect(() => runAssertion(div, 'have.attr', 'data-test', 'value')).not.toThrow();
-    expect(() => runAssertion(div, 'have.attr', 'data-test', 'wrong')).toThrow();
+    expect(() => runAssertion(div, 'have.attr', 'data-test', 'wrong')).toThrow('Assertion failed: Expected attribute "data-test" to be "wrong", but got "value"');
+    const message = runAssertion(div, 'have.attr', 'data-test', 'value');
+    expect(message).toBe('Assertion passed: Attribute "data-test" is "value"');
   });
 
   it('should assert have.value', () => {
     input.value = 'input value';
     expect(() => runAssertion(input, 'have.value', 'input value')).not.toThrow();
-    expect(() => runAssertion(input, 'have.value', 'wrong value')).toThrow();
+    expect(() => runAssertion(input, 'have.value', 'wrong value')).toThrow('Assertion failed: Expected value to be "wrong value", but got "input value"');
+    const message = runAssertion(input, 'have.value', 'input value');
+    expect(message).toBe('Assertion passed: Value is "input value"');
   });
 
   // State assertions
   it('should assert be.disabled and be.enabled', () => {
     input.disabled = true;
     expect(() => runAssertion(input, 'be.disabled')).not.toThrow();
-    expect(() => runAssertion(input, 'be.enabled')).toThrow();
+    expect(() => runAssertion(input, 'be.enabled')).toThrow('Assertion failed: Expected element to be enabled');
+    const message = runAssertion(input, 'be.disabled');
+    expect(message).toBe('Assertion passed: Element is disabled');
     input.disabled = false;
     expect(() => runAssertion(input, 'be.enabled')).not.toThrow();
     expect(() => runAssertion(input, 'be.disabled')).toThrow();
@@ -59,44 +77,54 @@ describe('runAssertion', () => {
     input.type = 'checkbox';
     input.checked = true;
     expect(() => runAssertion(input, 'be.checked')).not.toThrow();
+    const message = runAssertion(input, 'be.checked');
+    expect(message).toBe('Assertion passed: Element is checked');
     input.checked = false;
-    expect(() => runAssertion(input, 'be.checked')).toThrow();
+    expect(() => runAssertion(input, 'be.checked')).toThrow('Assertion failed: Expected element to be checked');
   });
 
   it('should assert be.selected', () => {
     option.selected = true;
     expect(() => runAssertion(option, 'be.selected')).not.toThrow();
+    const message = runAssertion(option, 'be.selected');
+    expect(message).toBe('Assertion passed: Element is selected');
     option.selected = false;
-    expect(() => runAssertion(option, 'be.selected')).toThrow();
+    expect(() => runAssertion(option, 'be.selected')).toThrow('Assertion failed: Expected element to be selected');
   });
 
   it('should assert be.focused', () => {
     document.body.appendChild(input);
     input.focus();
     expect(() => runAssertion(input, 'be.focused')).not.toThrow();
+    const message = runAssertion(input, 'be.focused');
+    expect(message).toBe('Assertion passed: Element is focused');
     const anotherInput = document.createElement('input');
     document.body.appendChild(anotherInput);
     anotherInput.focus();
-    expect(() => runAssertion(input, 'be.focused')).toThrow();
+    expect(() => runAssertion(input, 'be.focused')).toThrow('Assertion failed: Expected element to be focused');
   });
 
   // Visibility assertions
   it('should assert be.visible and not.be.visible', () => {
     div.style.display = 'block';
     document.body.appendChild(div);
     expect(() => runAssertion(div, 'be.visible')).not.toThrow();
+    const message = runAssertion(div, 'be.visible');
+    expect(message).toBe('Assertion passed: Element is visible');
     div.style.display = 'none';
-    expect(() => runAssertion(div, 'be.visible')).toThrow();
+    expect(() => runAssertion(div, 'be.visible')).toThrow('Assertion failed: Expected element to be visible');
     expect(() => runAssertion(div, 'not.be.visible')).not.toThrow();
   });
 
   // Class assertions
   it('should assert have.class and not.have.class', () => {
     div.className = 'active';
     expect(() => runAssertion(div, 'have.class', 'active')).not.toThrow();
-    expect(() => runAssertion(div, 'have.class', 'inactive')).toThrow();
+    const message = runAssertion(div, 'have.class', 'active');
+    expect(message).toBe('Assertion passed: Element has class "active"');
+    expect(() => runAssertion(div, 'have.class', 'inactive')).toThrow('Assertion failed: Expected element to have class "inactive"');
     expect(() => runAssertion(div, 'not.have.class', 'inactive')).not.toThrow();
-    expect(() => runAssertion(div, 'not.have.class', 'active')).toThrow();
+    expect(() => runAssertion(div, 'not.have.class', 'active')).toThrow('Assertion failed: Expected element to not have class "active"');
   });
 
   // default case

src/twd.ts

@@ -133,33 +133,34 @@ interface TWDAPI {
  */
 export const twd: TWDAPI = {
   get: async (selector: string): Promise<TWDElemAPI> => {
-    log(`🔎 get("${selector}")`);
+    log(`Searching get("${selector}")`);
     const el = await waitForElement(() => document.querySelector(selector));
 
     const api: TWDElemAPI = {
       el,
       click: () => {
-        log(`🖱️ click(${selector})`);
+        log(`click(${selector})`);
         el.click();
       },
       type: (text: string) => {
-        log(`⌨️ type("${text}") into ${selector}`);
+        log(`type("${text}") into ${selector}`);
         return simulateType(el as HTMLInputElement, text);
       },
       should: (name: AnyAssertion, ...args: ArgsFor<AnyAssertion>) => {
-        runAssertion(el, name, ...args);
+        const message = runAssertion(el, name, ...args);
+        log(message);
         return api;
       },
       text: () => {
         const content = el.textContent || "";
-        log(`📄 text(${selector}) → "${content}"`);
+        log(`text(${selector}) → "${content}"`);
         return content;
       },
     };
     return api;
   },
   visit: (url: string) => {
-    log(`🌍 visit("${url}")`);
+    log(`visit("${url}")`);
     window.history.pushState({}, "", url);
     window.dispatchEvent(new PopStateEvent("popstate"));
   },

src/ui/Icons/ChevronDown.tsx

@@ -0,0 +1,18 @@
+const ChevronDown = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    className="lucide lucide-chevron-down-icon lucide-chevron-down"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export default ChevronDown;

src/ui/Icons/ChevronRight.tsx

@@ -0,0 +1,18 @@
+const ChevronRight = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-chevron-right-icon lucide-chevron-right"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+export default ChevronRight;