Update tests

MetaMask · Jan 29, 2025 · 908278a · 908278a
1 parent 55eee3b
commit 908278a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 53 deletions.
diff --git a/src/components/ColorModeToggle.test.tsx b/src/components/ColorModeToggle.test.tsx
@@ -5,22 +5,20 @@ import { render } from '../utils/test-utils';
 
 describe('ColorModeToggle', () => {
   it('renders', () => {
-    const { queryByLabelText } = render(<ColorModeToggle />);
+    const { queryAllByLabelText } = render(<ColorModeToggle />);
 
-    expect(queryByLabelText('Toggle color mode')).toBeInTheDocument();
-    expect(queryByLabelText('Enable dark mode')).toBeInTheDocument();
+    expect(queryAllByLabelText('Toggle color mode')).toHaveLength(2);
   });
 
   it('toggles the color mode when clicking', () => {
-    const { getByLabelText, queryByLabelText } = render(<ColorModeToggle />);
+    const { queryAllByLabelText, baseElement } = render(<ColorModeToggle />);
 
-    expect(queryByLabelText('Enable light mode')).not.toBeInTheDocument();
-    expect(queryByLabelText('Enable dark mode')).toBeInTheDocument();
+    expect(baseElement).toHaveClass('chakra-ui-light');
+    expect(queryAllByLabelText('Toggle color mode')).toHaveLength(2);
 
-    const toggle = getByLabelText('Toggle color mode');
-    act(() => toggle.click());
+    const toggle = queryAllByLabelText('Toggle color mode');
+    act(() => toggle[0]?.click());
 
-    expect(queryByLabelText('Enable light mode')).toBeInTheDocument();
-    expect(queryByLabelText('Enable dark mode')).not.toBeInTheDocument();
+    expect(baseElement).toHaveClass('chakra-ui-dark');
   });
 });
diff --git a/src/components/Logo.test.tsx b/src/components/Logo.test.tsx
@@ -3,19 +3,11 @@ import { createStore } from '../store';
 import { render } from '../utils/test-utils';
 
 describe('Logo', () => {
-  it('renders the logo with the correct fill color', async () => {
-    const { queryAllByLabelText } = render(<Logo />, createStore(), {
-      colorMode: 'dark',
-    });
-
-    expect(queryAllByLabelText('MetaMask Snaps Directory')).toHaveLength(2);
-  });
-
   it('renders the logo', () => {
     const { queryAllByLabelText } = render(<Logo />, createStore(), {
       colorMode: 'light',
     });
 
-    expect(queryAllByLabelText('MetaMask Snaps Directory')).toHaveLength(2);
+    expect(queryAllByLabelText('MetaMask Snaps Directory')).toHaveLength(1);
   });
 });
diff --git a/src/theme/index.test.ts b/src/theme/index.test.ts
@@ -22,6 +22,10 @@ describe('theme', () => {
               "_hover": Object {
                 "opacity": "0.75",
               },
+              "borderRadius": "full",
+              "color": "text.default",
+              "lineHeight": "1",
+              "textTransform": "uppercase",
             },
             "variants": Object {
               "filter": Object {
@@ -32,32 +36,29 @@ describe('theme', () => {
                 "background": "background.alternative",
               },
               "outline": Object {
-                "background": "transparent",
+                "_active": Object {
+                  "background": "text.alternative",
+                  "color": "background.default",
+                },
+                "_hover": Object {
+                  "background": "text.default",
+                  "color": "background.default",
+                  "opacity": "1",
+                },
                 "border": "1.5px solid",
-                "borderColor": "info.default",
-                "borderRadius": "30px",
-                "color": "info.default",
-                "fontSize": "md",
+                "borderColor": "text.default",
+                "fontSize": "sm",
                 "fontWeight": "500",
-                "height": "48px",
-                "lineHeight": "157%",
-                "padding": "4",
+                "paddingX": "6",
+                "paddingY": "4",
               },
               "primary": Object {
-                "_hover": Object {
-                  "_disabled": Object {
-                    "background": "info.default",
-                  },
-                },
-                "background": "info.default",
-                "borderColor": "info.default",
-                "borderRadius": "30px",
-                "color": "white",
-                "fontSize": "md",
+                "background": "primary.default",
+                "color": "text.dark",
+                "fontSize": "sm",
                 "fontWeight": "500",
-                "height": "48px",
-                "lineHeight": "157%",
-                "padding": "4",
+                "paddingX": "6",
+                "paddingY": "4",
               },
               "small": Object {
                 ".chakra-button__icon": Object {
@@ -82,16 +83,6 @@ describe('theme', () => {
                 "height": "26px",
                 "transitionDuration": "normal",
               },
-              "solid": Object {
-                "_active": Object {
-                  "bg": "#0376C9",
-                },
-                "_hover": Object {
-                  "bg": "#0376C9",
-                },
-                "bg": "#24272A",
-                "textColor": "white",
-              },
             },
           },
           "Container": Object {
@@ -117,6 +108,40 @@ describe('theme', () => {
               "lineHeight": "1.5",
             },
           },
+          "Input": Object {
+            "baseStyle": Object {
+              "field": Object {
+                "_placeholder": Object {
+                  "color": "text.default",
+                  "fontWeight": "500",
+                  "textTransform": "uppercase",
+                },
+                "borderRadius": "full",
+                "color": "text.default",
+                "fontSize": "sm",
+                "paddingX": "6",
+                "paddingY": "4",
+              },
+            },
+            "parts": Array [
+              "addon",
+              "field",
+              "element",
+              "group",
+            ],
+            "variants": Object {
+              "outline": Object {
+                "field": Object {
+                  "_hover": Object {
+                    "background": "background.alternative",
+                    "borderColor": "text.default",
+                  },
+                  "borderColor": "text.default",
+                  "borderWidth": "0.094rem",
+                },
+              },
+            },
+          },
           "Link": Object {
             "baseStyle": Object {
               "color": "info.default",
@@ -416,6 +441,14 @@ describe('theme', () => {
               },
             },
             "primary": Object {
+              "alternative": Object {
+                "_dark": "#BAF24A",
+                "default": "#0A0A0A",
+              },
+              "default": Object {
+                "_dark": "#FFFFFF",
+                "default": "#FF5C16",
+              },
               "inverse": Object {
                 "default": "#FCFCFC",
               },
@@ -432,12 +465,15 @@ describe('theme', () => {
             },
             "text": Object {
               "alternative": Object {
-                "_dark": "#D6D9DC",
-                "default": "#535A61",
+                "_dark": "#C8CEDA",
+                "default": "#393D46",
+              },
+              "dark": Object {
+                "default": "#0A0A0A",
               },
               "default": Object {
                 "_dark": "#FFFFFF",
-                "default": "#24272A",
+                "default": "#0A0A0A",
               },
               "muted": Object {
                 "default": "#24272A1A",