chore: #140 - fix color flaky tests (#148)

* fix: add DS_STORE to gitignore

* fix: colors and ids

* fix: force lightmode on e2e

* fix: pin colors for light mode on e2e

.gitignore

@@ -134,4 +134,5 @@ dev.db
 
 schema.graphql
 *.cookie
-dev.db-journal
+dev.db-journal
+.DS_Store

apps/ui/src/components/trace/span.tsx

@@ -69,6 +69,7 @@ export function Span({
         {displyInfo}
         <div className="relative h-4 rounded-md bg-gray-400">
           <div
+            data-line="span-line"
             className={cn("absolute rounded-md h-4 bg-light-green", {
               "bg-indigo-600": data.isForeign,
               "bg-red": isSpanError(data),

apps/ui/src/components/trace/viewer.tsx

@@ -99,7 +99,10 @@ export function TraceViewer({ trace }: { trace?: Trace }) {
         }
       >
         <div className="px-4 pb-10">
-          <TraceView spans={modalSpans ?? []} id={IDS.trace_viewer.expand} />
+          <TraceView
+            spans={modalSpans ?? []}
+            id={IDS.trace_viewer.full_screen}
+          />
         </div>
       </Modal>
       {trace?.rootSpan ? (

e2e/tests/trace-viewer.test.ts

@@ -47,7 +47,7 @@ describe("trace-viewer", () => {
   ];
 
   for (const variant of variants) {
-    test.skip(variant.name, async () => {
+    test(variant.name, async () => {
       const { dbSchema, schema, query } = await createTestSchema(variant);
       const page = await getPage({ browser });
       const dashboardPage = new Dashboard({

e2e/tests/trace.test.ts

@@ -53,7 +53,7 @@ describe("trace", () => {
   ];
 
   for (const variant of variants) {
-    test.skip(variant.name, async () => {
+    test(variant.name, async () => {
       const page = await getPage({ browser });
       const { dbSchema, schema, query } = await createTestSchema(variant);
 

e2e/tests/traces.test.ts

@@ -50,7 +50,7 @@ describe("traces", () => {
   ];
 
   for (const variant of variants) {
-    test.skip(variant.name, async () => {
+    test(variant.name, async () => {
       const page = await getPage({ browser });
       const { dbSchema, schema, query } = await createTestSchema(variant);
 

e2e/tests/utils/colors.ts

@@ -1,10 +1,10 @@
 export const colors = {
-  green_text: "rgb(47, 133, 37)",
-  green_background: "rgba(47, 133, 37, 0.3)",
+  green_text: "rgb(43, 171, 124)",
+  green_background: "rgba(43, 166, 119, 0.3)",
 
   red_text: "rgb(239, 67, 67)",
   red_background: "rgba(239, 68, 68, 0.3)",
 
   netural_text: "rgb(59, 76, 104)",
-  netural_background: "rgba(59, 75, 104, 0.3)",
+  netural_background: "rgba(183, 194, 215, 0.3)",
 };

e2e/tests/utils/puppeteer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { BACKEND_PORT } from "@graphql-debugger/backend";
 
 import puppeteer, { Browser, Page } from "puppeteer";
@@ -7,14 +8,24 @@ export { Browser } from "puppeteer";
 export async function getPage(options: { browser: Browser }): Promise<Page> {
   const page = await options.browser.newPage();
 
-  await page.goto(`http://localhost:${BACKEND_PORT}`);
+  await page.evaluateOnNewDocument(
+    (theme) => {
+      // @ts-ignore
+      localStorage.setItem("theme", theme);
+    },
+    // TODO - test dark mode https://github.com/rocket-connect/graphql-debugger/issues/151
+    JSON.stringify({ state: { theme: "light" }, version: 0 }),
+  );
+
+  await page.goto(`http://localhost:${BACKEND_PORT}`, {
+    waitUntil: "load",
+  });
 
   return page;
 }
 
 export async function getBrowser() {
   const browser = await puppeteer.launch({
-    // headless: false,
     headless: process.env.HEADLESS ? false : "new",
     defaultViewport: null,
     args: ["--disable-web-security"],