Feat/improve design (#59)

* feat: add hook to add margin to the sidebar

* test: add sidebar tests

* feat: add better selector handling and update tests

Author: kevinccbsg

src/initializers/initSidebar.tsx

@@ -20,6 +20,7 @@ interface Options {
 export const initSidebar = (options: Options) => {
   const { Component, createRoot } = options;
   const el = document.createElement('div');
+  el.setAttribute('id', 'twd-sidebar-root');
   document.body.appendChild(el);
   const root = createRoot(el);
   root.render(Component);

src/tests/e2e/api/get.spec.ts

@@ -6,8 +6,15 @@ describe('twd get command', () => {
 
   beforeEach(() => {
     document.body.innerHTML = '';
+    // Create a wrapper div that would be the app container (not the sidebar)
+    const appContainer = document.createElement('div');
+    appContainer.id = 'app';
+    document.body.appendChild(appContainer);
+    
+    // append a div inside the app container
     div = document.createElement('div');
-    document.body.appendChild(div);
+    div.className = 'inner';
+    appContainer.appendChild(div);
   });
 
   it('should get element', async () => {

src/tests/e2e/api/getAll.spec.ts

@@ -8,20 +8,25 @@ describe('twd getAll command', () => {
 
   beforeEach(() => {
     document.body.innerHTML = '';
+    // Create a wrapper div that would be the app container (not the sidebar)
+    const container = document.createElement('div');
+    container.id = 'app';
+    document.body.appendChild(container);
+
     item1 = document.createElement('div');
     item1.className = 'item';
     item1.textContent = 'Hello';
-    document.body.appendChild(item1);
+    container.appendChild(item1);
 
     item2 = document.createElement('div');
     item2.className = 'item';
     item2.textContent = 'World';
-    document.body.appendChild(item2);
+    container.appendChild(item2);
 
     item3 = document.createElement('div');
     item3.className = 'item';
     item3.textContent = '!';
-    document.body.appendChild(item3);
+    container.appendChild(item3);
   });
 
   it('should get all elements', async () => {

src/tests/e2e/api/should.spec.ts

@@ -6,8 +6,13 @@ describe('twd should', () => {
 
   beforeEach(() => {
     document.body.innerHTML = '';
+    // Create a wrapper div that would be the app container (not the sidebar)
+    const appContainer = document.createElement('div');
+    appContainer.id = 'app';
+    document.body.appendChild(appContainer);
+    
     div = document.createElement('div');
-    document.body.appendChild(div);
+    appContainer.appendChild(div);
   });
 
   it('should assert have.text', async () => {

src/tests/ui/twdSidebar.spec.tsx

@@ -19,6 +19,9 @@ describe("TWDSidebar", () => {
       // position fixed but right not left
       expect(sidebarElement).toHaveStyle({ position: 'fixed', right: '0' });
       expect(sidebarElement).not.toHaveStyle({ position: 'fixed', left: '0' });
+      // html margin right 280px
+      expect(document.documentElement).toHaveStyle({ marginRight: '280px' });
+      expect(document.documentElement).not.toHaveStyle({ marginLeft: '280px' });
     });
 
     it("should render TWDSidebar component closed", async () => {

src/twd.ts

@@ -210,8 +210,10 @@ interface TWDAPI {
  */
 export const twd: TWDAPI = {
   get: async (selector: string): Promise<TWDElemAPI> => {
+    // Prepend selector to exclude TWD sidebar elements
+    const enhancedSelector = `body > div:not(#twd-sidebar-root) ${selector}`;
     log(`Searching get("${selector}")`);
-    const el = await waitForElement(() => document.querySelector(selector));
+    const el = await waitForElement(() => document.querySelector(enhancedSelector));
 
     const api: TWDElemAPI = {
       el,
@@ -224,14 +226,16 @@ export const twd: TWDAPI = {
     return api;
   },
   getAll: async (selector: string): Promise<TWDElemAPI[]> => {
+    // Prepend selector to exclude TWD sidebar elements
+    const enhancedSelector = `body > div:not(#twd-sidebar-root) ${selector}`;
     log(`Searching getAll("${selector}")`);
-    const els = await waitForElements(() => document.querySelectorAll(selector));
+    const els = await waitForElements(() => document.querySelectorAll(enhancedSelector));
 
     return els.map((el) => {
       const api: TWDElemAPI = {
-        el,
+        el: el as HTMLElement,
         should: (name: AnyAssertion, ...args: ArgsFor<AnyAssertion>) => {
-          const message = runAssertion(el, name, ...args);
+          const message = runAssertion(el as HTMLElement, name, ...args);
           log(message);
           return api;
         },

src/ui/TWDSidebar.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { tests } from "../twdRegistry";
 import { TestList } from "./TestList";
 import { ClosedSidebar } from "./ClosedSidebar";
+import { useLayout } from "./hooks/useLayout";
 
 interface TWDSidebarProps {
   /**
@@ -29,6 +30,7 @@ export const TWDSidebar = ({ open, position = "left" }: TWDSidebarProps) => {
   const [_, setRefresh] = useState(0);
   const [isOpen, setIsOpen] = useState(open);
   const [filter, setFilter] = useState("");
+  useLayout({ isOpen, position });
 
   const runTest = async (i: number) => {
     const test = tests[i];

src/ui/hooks/useLayout.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+interface UseLayoutProps {
+  isOpen: boolean;
+  position: "left" | "right";
+}
+
+export const useLayout = ({ isOpen, position }: UseLayoutProps) => {
+  useEffect(() => {
+    // based on isOpen add html tag margin and based on position
+    const html = document.documentElement;
+    if (isOpen) {
+      if (position === "left") {
+        html.style.marginLeft = "280px";
+      } else {
+        html.style.marginRight = "280px";
+      }
+    } else {
+      html.style.marginRight = "0";
+      html.style.marginLeft = "0";
+    }
+    return () => {
+      html.style.marginRight = "0";
+      html.style.marginLeft = "0";
+    };
+  }, [isOpen, position]);
+};