From 7a53342966f7003f45eddb3f7d4bd8637cd6f2b5 Mon Sep 17 00:00:00 2001
From: Drake Costa <drake@saeris.io>
Date: Thu, 10 Jul 2025 00:16:45 -0700
Subject: [PATCH] add smoke test for `NewAccessTokenButton`, fix vitest config

This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.

Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.

This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.
---
 .../interfaces/Account/NewAccessTokenButton.tsx  |  9 +++++++--
 .../__tests__/NewAccessTokenButton.test.tsx      | 16 ++++++++++++++++
 apps/studio/vitest.config.ts                     |  1 -
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Account/__tests__/NewAccessTokenButton.test.tsx

diff --git a/apps/studio/components/interfaces/Account/NewAccessTokenButton.tsx b/apps/studio/components/interfaces/Account/NewAccessTokenButton.tsx
index 92bc2ea585c..869df587ae5 100644
--- a/apps/studio/components/interfaces/Account/NewAccessTokenButton.tsx
+++ b/apps/studio/components/interfaces/Account/NewAccessTokenButton.tsx
@@ -83,6 +83,7 @@ const NewAccessTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) => {
             <DropdownMenuTrigger asChild>
               <Button
                 type="primary"
+                title="Choose token scope"
                 className="rounded-l-none px-[4px] py-[5px]"
                 icon={<ChevronDown />}
               />
@@ -147,9 +148,13 @@ const NewAccessTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) => {
                 name="tokenName"
                 control={form.control}
                 render={({ field }) => (
-                  <FormItemLayout label="Name">
+                  <FormItemLayout name="tokenName" label="Name">
                     <FormControl_Shadcn_>
-                      <Input_Shadcn_ {...field} placeholder="Provide a name for your token" />
+                      <Input_Shadcn_
+                        id="tokenName"
+                        {...field}
+                        placeholder="Provide a name for your token"
+                      />
                     </FormControl_Shadcn_>
                   </FormItemLayout>
                 )}
diff --git a/apps/studio/components/interfaces/Account/__tests__/NewAccessTokenButton.test.tsx b/apps/studio/components/interfaces/Account/__tests__/NewAccessTokenButton.test.tsx
new file mode 100644
index 00000000000..92cd8d50e3e
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/__tests__/NewAccessTokenButton.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, it, vi } from 'vitest'
+import { screen } from '@testing-library/dom'
+import userEvent from '@testing-library/user-event'
+import { render } from 'tests/helpers'
+import NewAccessTokenButton from '../NewAccessTokenButton'
+
+describe(`NewAccessTokenButton`, () => {
+  it(`works`, async () => {
+    const onCreateToken = vi.fn()
+    render(<NewAccessTokenButton onCreateToken={onCreateToken} />)
+    await userEvent.click(screen.getByRole(`button`, { name: `Generate new token` }))
+    await screen.findByLabelText(`Name`)
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Generate New Token')
+  })
+})
diff --git a/apps/studio/vitest.config.ts b/apps/studio/vitest.config.ts
index f2a848d5581..5bc87dabad6 100644
--- a/apps/studio/vitest.config.ts
+++ b/apps/studio/vitest.config.ts
@@ -25,7 +25,6 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom', // TODO(kamil): This should be set per test via header in .tsx files only
     include: [resolve(dirname, './**/*.test.{ts,tsx}')],
-    restoreMocks: true,
     setupFiles: [
       resolve(dirname, './tests/vitestSetup.ts'),
       resolve(dirname, './tests/setup/polyfills.js'),