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.

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>
                 )}

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')
+  })
+})

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'),