Remove Auto Imports

.github/workflows/ci.yml

@@ -33,6 +33,8 @@ jobs:
         with:
           path: ./package.json
 
+      - uses: pnpm/action-setup@v4
+
       - name: Cache PNPM modules
         uses: actions/cache@v4
         id: cache-modules
@@ -43,13 +45,11 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: ${{ runner.os }}-node-
 
-      - uses: pnpm/action-setup@v4
-
       - uses: actions/setup-node@v4
         with:
           # use the version found in `.nvmrc`
           node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          # cache: 'pnpm'
 
       - name: Install `node_modules`
         if: steps.cache-modules.outputs.cache-hit != 'true'

components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
+import { useResendAccountConfirmation } from '~/composables/api'
+import { useCurrentUser, useI18n, useModalAlert } from '#imports'
 
 const currentUser = await useCurrentUser()
 const errorText = ref('')

components/blocks/SiteFooter/LanguageSelector/LanguageSelector.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from '#imports'
 import type { ComputedRef } from 'vue'
 // import { type LocaleObject } from '#imports'
 

components/blocks/cards/BasicAlert/BasicAlert.test.ts

@@ -1,6 +1,7 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { getByClass, getByTestId, getHTMLElement } from 'root/testUtils'
 import BasicAlert from './BasicAlert.vue'
+import { useModalAlert } from '#imports'
 
 beforeEach(() => {
   const { state: modalAlertState } = useModalAlert()

components/blocks/cards/BasicAlert/BasicAlert.vue

@@ -4,6 +4,7 @@ import CloseButton from 'elements/buttons/CloseButton/CloseButton.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import CardBody from 'elements/cards/CardBody/CardBody.vue'
+import { useModalAlert } from '#imports'
 
 const { closeAlert, state } = useModalAlert()
 </script>

components/blocks/cards/ForgotPasswordCard/ForgotPasswordCard.test.ts

@@ -1,21 +1,12 @@
-import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { getByTestId } from 'root/testUtils'
 import ForgotPasswordCard from './ForgotPasswordCard.vue'
-import type { RecoverAccountRequest } from 'lib/api/data-contracts'
-
-mockNuxtImport('useRecoverAccount', () => {
-  return async (
-    _requestData: RecoverAccountRequest,
-    opts: optionalParameters<void> = {},
-  ) => {
-    const { onOkay } = opts
-    if (onOkay) {
-      await onOkay()
-    }
-  }
-})
 
-afterAll(() => {
+const mockSuccessAccountRecoverCreate = vi.fn(() =>
+  Promise.resolve({ ok: true }),
+)
+
+afterEach(() => {
   vi.restoreAllMocks()
 })
 
@@ -52,6 +43,14 @@ describe('<ForgotPasswordCard />', () => {
       const username = 'strongbad'
       const emailAddress = `strongbad@homestarrunner.com`
 
+      beforeEach(() => {
+        vi.mock('lib/api/Account', () => ({
+          Account: function Account() {
+            this.recoverCreate = mockSuccessAccountRecoverCreate
+          },
+        }))
+      })
+
       it('should emit the close event', async () => {
         const wrapper = await mountSuspended(ForgotPasswordCard)
 
@@ -63,6 +62,7 @@ describe('<ForgotPasswordCard />', () => {
 
         await getByTestId(wrapper, 'reset-password-button').trigger('click')
 
+        expect(mockSuccessAccountRecoverCreate).toHaveBeenCalled()
         expect(wrapper.emitted().close).toBeTruthy()
       })
     })

components/blocks/cards/ForgotPasswordCard/ForgotPasswordCard.vue

@@ -7,6 +7,8 @@ import CardBody from 'elements/cards/CardBody/CardBody.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import BaseInput from 'elements/inputs/BaseInput/BaseInput.vue'
 import { isEmailValid, isUsernameValid } from 'lib/form_helpers'
+import { useModalAlert } from '#imports'
+import { useRecoverAccount } from '~/composables/api'
 
 interface ForgotPasswordCardPops {
   modal?: boolean
@@ -21,7 +23,7 @@ const emit = defineEmits<{
   (event: 'close' | 'cancelClick'): void
 }>()
 
-const props = withDefaults(defineProps<ForgotPasswordCardPops>(), {
+withDefaults(defineProps<ForgotPasswordCardPops>(), {
   modal: false,
 })
 
@@ -76,7 +78,7 @@ function resetPassword() {
     <CardHeader class="forgot-password-card__header">
       <div class="forgot-password-card__title">Forgot Password</div>
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/cards/LogInCard/LogInCard.test.ts

@@ -1,10 +1,10 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId, getHTMLElement } from 'root/testUtils'
+import { getById, getByTestId, getHTMLElement } from 'root/testUtils'
 import LogInCard from './LogInCard.vue'
 import * as apiComposables from 'composables/api'
 
 const token = 'jwt-token'
-const mockSuccessUsersLoginCreate = vi.fn(() =>
+const mockSuccessAccountLoginCreate = vi.fn(() =>
   Promise.resolve({ data: { token }, ok: true }),
 )
 const mockSuccessUsersMeList = vi.fn(() =>
@@ -20,9 +20,13 @@ afterEach(() => {
 
 describe('<LogInCard />', () => {
   beforeEach(() => {
+    vi.mock('lib/api/Account', () => ({
+      Account: function Account() {
+        this.loginCreate = mockSuccessAccountLoginCreate
+      },
+    }))
     vi.mock('lib/api/Users', () => ({
       Users: function Users() {
-        this.usersLoginCreate = mockSuccessUsersLoginCreate
         this.usersMeList = mockSuccessUsersMeList
       },
     }))
@@ -46,8 +50,7 @@ describe('<LogInCard />', () => {
     })
   })
 
-  // TODO: skip this for now
-  describe.skip('when enter key is released on the password input field', () => {
+  describe('when enter key is released on the password input field', () => {
     it('emits the close event', async () => {
       const wrapper = await mountSuspended(LogInCard)
 
@@ -57,16 +60,15 @@ describe('<LogInCard />', () => {
     })
   })
 
-  // TODO: skip this for now
-  describe.skip('when the login button is clicked', () => {
+  describe('when the login button is clicked', () => {
     const emailAddress = 'strongbad@homestarrunner.com'
     const password = 'homestarsux'
 
     it('emits the close event', async () => {
       const wrapper = await mountSuspended(LogInCard)
 
       const emailInput = getByTestId(wrapper, 'email-input')
-      const passwordInput = getByTestId(wrapper, 'password-input')
+      const passwordInput = getById(wrapper, 'password')
 
       await emailInput.setValue(emailAddress)
       await passwordInput.setValue(password)
@@ -80,7 +82,7 @@ describe('<LogInCard />', () => {
       const wrapper = await mountSuspended(LogInCard)
 
       const emailInput = getByTestId(wrapper, 'email-input')
-      const passwordInput = getByTestId(wrapper, 'password-input')
+      const passwordInput = getById(wrapper, 'password')
 
       await emailInput.setValue(emailAddress)
       await passwordInput.setValue(password)
@@ -99,21 +101,21 @@ describe('<LogInCard />', () => {
       expect(passwordInputElement.value).toBe('')
     })
 
-    // this test is still failing
     it('calls the api', async () => {
       const useLoginUserSpy = vi.spyOn(apiComposables, 'useLoginUser')
 
       const wrapper = await mountSuspended(LogInCard)
 
       const emailInput = getByTestId(wrapper, 'email-input')
-      const passwordInput = getByTestId(wrapper, 'password-input')
+      const passwordInput = getById(wrapper, 'password')
 
       await emailInput.setValue(emailAddress)
       await passwordInput.setValue(password)
 
       await getByTestId(wrapper, 'login-button').trigger('click')
 
       expect(useLoginUserSpy).toBeCalledTimes(1)
+      expect(mockSuccessAccountLoginCreate).toBeCalledTimes(1)
     })
   })
 

components/blocks/cards/LogInCard/LogInCard.vue

@@ -8,6 +8,7 @@ import CardBody from 'elements/cards/CardBody/CardBody.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import HideShowPassword from 'elements/buttons/HideShowPassword/HideShowPassword.vue'
+import { useLoginUser } from '~/composables/api'
 
 interface LogInCardProps {
   modal?: boolean
@@ -23,7 +24,7 @@ const emit = defineEmits<{
   (event: 'close' | 'forgotPasswordClick' | 'signUpClick'): void
 }>()
 
-const props = withDefaults(defineProps<LogInCardProps>(), {
+withDefaults(defineProps<LogInCardProps>(), {
   modal: false,
 })
 
@@ -51,6 +52,7 @@ async function login() {
         state.email.value = ''
         state.password.value = ''
         state.showPassword.value = false
+        emit('close')
       },
     },
   )
@@ -72,7 +74,7 @@ async function login() {
       </BaseButton>
 
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/cards/SignUpCard/SignUpCard.test.ts

@@ -1,6 +1,7 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId, getHTMLElement } from 'root/testUtils'
+import { getByQuery, getByTestId, getHTMLElement } from 'root/testUtils'
 import SignUpCard from './SignUpCard.vue'
+import { useRuntimeConfig } from '#imports'
 
 afterEach(() => {
   fetchMock.resetMocks()
@@ -24,16 +25,15 @@ describe('<SignUpCard />', () => {
     })
   })
 
-  // TODO: Update this test once the inputs can be controlled together
-  describe.skip('when the hide/show button is clicked', () => {
+  describe('when the hide/show button is clicked', () => {
     it('changes the password input type to be text', async () => {
       const wrapper = await mountSuspended(SignUpCard)
 
       const passwordInputElement = getHTMLElement(
-        getByTestId(wrapper, 'password-input'),
+        getByQuery(wrapper, '[data-testid="password-input"] #password'),
       ) as HTMLInputElement
       const passwordConfirmInputElement = getHTMLElement(
-        getByTestId(wrapper, 'password-confirm-input'),
+        getByQuery(wrapper, '[data-testid="password-confirm-input"] #password'),
       ) as HTMLInputElement
 
       expect(passwordInputElement.type).toBe('password')

components/blocks/cards/SignUpCard/SignUpCard.vue

@@ -15,6 +15,7 @@ import CloseButton from 'elements/buttons/CloseButton/CloseButton.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import CardBody from 'elements/cards/CardBody/CardBody.vue'
+import { useLoginUser, useRegisterUser } from '~/composables/api'
 
 interface SignUpCardProps {
   modal?: boolean
@@ -31,7 +32,7 @@ const emit = defineEmits<{
   (event: 'close' | 'logInClick' | 'signUpClick'): void
 }>()
 
-const props = withDefaults(defineProps<SignUpCardProps>(), {
+withDefaults(defineProps<SignUpCardProps>(), {
   modal: false,
 })
 
@@ -124,7 +125,7 @@ function validatePasswordInputs() {
       <div class="signup-card__title">Sign Up</div>
 
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/nav/SiteNavbar/SiteNavbar.test.ts

@@ -2,6 +2,7 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import * as apiComposables from 'composables/api'
 import { getByTestId } from 'root/testUtils'
 import SiteNavbar from './SiteNavbar.vue'
+import { useSessionToken } from '#imports'
 
 afterEach(() => {
   vi.restoreAllMocks()

components/blocks/nav/SiteNavbar/SiteNavbar.vue

@@ -9,6 +9,8 @@ import LogInCard from 'blocks/cards/LogInCard/LogInCard.vue'
 import SignUpCard from 'blocks/cards/SignUpCard/SignUpCard.vue'
 import BaseModal from 'elements/modals/BaseModal/BaseModal.vue'
 import SearchBar from 'blocks/SearchBar/SearchBar.vue'
+import { useSessionToken } from '#imports'
+import { useLogoutUser } from '~/composables/api'
 
 interface NavbarState {
   mobileNavIsActive: boolean

components/elements/buttons/Dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, type Ref } from 'vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
 
 export interface SharedState {

components/elements/buttons/Dropdown/DropdownItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import type { SharedState } from './Dropdown.vue'
 
 const emit = defineEmits<{

composables/api/useChangePassword/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useChangePassword/useChangePassword.test.ts

@@ -1,3 +1,5 @@
+import useChangePassword from '.'
+
 const mockSuccessRecoverCreate2 = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useChangePassword', () => {

composables/api/useConfirmAccount/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useConfirmAccount/useConfirmAccount.test.ts

@@ -1,3 +1,5 @@
+import useConfirmAccount from '.'
+
 const mockSuccessAccountConfirmation = vi.fn(() =>
   Promise.resolve({ ok: true }),
 )

composables/api/useGetLeaderboardDetail/index.ts

@@ -6,6 +6,7 @@ import {
 } from 'composables/useApi'
 import { Leaderboards } from 'lib/api/Leaderboards'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
+import { useRuntimeConfig } from '#imports'
 
 export async function useGetLeaderboardDetail(
   leaderboardSlug: string,

composables/api/useGetLeaderboardDetail/useGetLeaderboardDetail.test.ts

@@ -1,3 +1,5 @@
+import useGetLeaderboardDetail from '.'
+
 const mockSuccessLeaderboardsDetail = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useGetLeaderboardDetail', () => {

composables/api/useGetUserDetail/index.ts

@@ -1,4 +1,9 @@
-import type { ApiResponse, optionalParameters } from 'composables/useApi'
+import { useRuntimeConfig } from '#imports'
+import {
+  useApi,
+  type ApiResponse,
+  type optionalParameters,
+} from 'composables/useApi'
 import { Users } from 'lib/api/Users'
 import type { UserViewModel } from 'lib/api/data-contracts'
 

composables/api/useGetUserDetail/useGetUserDetail.test.ts

@@ -1,3 +1,5 @@
+import useGetUserDetail from '.'
+
 const mockSuccessUsersDetail = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useGetUserDetail', () => {