forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: remove unused components
-101
-18
app/components/AuthButton.client.vue
-18
app/components/AuthButton.client.vue
···
1
-
<script setup lang="ts">
2
-
const showModal = shallowRef(false)
3
-
const { user } = useAtproto()
4
-
</script>
5
-
6
-
<template>
7
-
<div class="relative">
8
-
<button
9
-
type="button"
10
-
class="relative font-mono text-sm flex items-center justify-center w-fit rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
11
-
@click="showModal = true"
12
-
>
13
-
{{ user?.handle || 'login' }}
14
-
</button>
15
-
16
-
<AuthModal v-model:open="showModal" />
17
-
</div>
18
-
</template>
-10
app/components/AuthButton.server.vue
-10
app/components/AuthButton.server.vue
···
1
-
<template>
2
-
<div class="relative">
3
-
<button
4
-
type="button"
5
-
class="relative font-mono text-sm flex items-center justify-center w-fit rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
6
-
>
7
-
login
8
-
</button>
9
-
</div>
10
-
</template>
-25
app/components/JsrBadge.vue
-25
app/components/JsrBadge.vue
···
1
-
<script setup lang="ts">
2
-
defineProps<{
3
-
/** JSR package URL (e.g., "https://jsr.io/@std/fs") */
4
-
url: string
5
-
/** Whether to show as compact (icon only) or full (with text) */
6
-
compact?: boolean
7
-
}>()
8
-
</script>
9
-
10
-
<template>
11
-
<a
12
-
:href="url"
13
-
target="_blank"
14
-
rel="noopener noreferrer"
15
-
class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200"
16
-
:title="$t('badges.jsr.title')"
17
-
>
18
-
<span
19
-
class="i-simple-icons-jsr shrink-0"
20
-
:class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
21
-
aria-hidden="true"
22
-
/>
23
-
<span v-if="!compact" class="sr-only sm:not-sr-only">{{ $t('badges.jsr.label') }}</span>
24
-
</a>
25
-
</template>
-46
test/nuxt/a11y.spec.ts
-46
test/nuxt/a11y.spec.ts
···
83
83
FilterPanel,
84
84
HeaderAccountMenu,
85
85
InstallCommandTerminal,
86
-
JsrBadge,
87
86
LicenseDisplay,
88
87
LoadingSpinner,
89
88
MarkdownText,
···
116
115
SearchBox,
117
116
SearchSuggestionCard,
118
117
Toggle,
119
-
UserCombobox,
120
118
VersionSelector,
121
119
ViewModeToggle,
122
120
} from '#components'
123
121
124
122
// Server variant components must be imported directly to test the server-side render
125
123
// The #components import automatically provides the client variant
126
-
import AuthButtonServer from '~/components/AuthButton.server.vue'
127
124
import HeaderAccountMenuServer from '~/components/HeaderAccountMenu.server.vue'
128
125
import ToggleServer from '~/components/Toggle.server.vue'
129
126
···
245
242
it('should have no accessibility violations with custom text', async () => {
246
243
const component = await mountSuspended(LoadingSpinner, {
247
244
props: { text: 'Fetching data...' },
248
-
})
249
-
const results = await runAxe(component)
250
-
expect(results.violations).toEqual([])
251
-
})
252
-
})
253
-
254
-
describe('JsrBadge', () => {
255
-
it('should have no accessibility violations', async () => {
256
-
const component = await mountSuspended(JsrBadge, {
257
-
props: { url: 'https://jsr.io/@std/fs' },
258
-
})
259
-
const results = await runAxe(component)
260
-
expect(results.violations).toEqual([])
261
-
})
262
-
263
-
it('should have no accessibility violations in compact mode', async () => {
264
-
const component = await mountSuspended(JsrBadge, {
265
-
props: { url: 'https://jsr.io/@std/fs', compact: true },
266
245
})
267
246
const results = await runAxe(component)
268
247
expect(results.violations).toEqual([])
···
715
694
tree: mockTree,
716
695
currentPath: 'src/index.ts',
717
696
baseUrl: '/code/vue',
718
-
},
719
-
})
720
-
const results = await runAxe(component)
721
-
expect(results.violations).toEqual([])
722
-
})
723
-
})
724
-
725
-
describe('UserCombobox', () => {
726
-
it('should have no accessibility violations', async () => {
727
-
const component = await mountSuspended(UserCombobox, {
728
-
props: {
729
-
suggestions: ['user1', 'user2', 'user3'],
730
-
label: 'Select a user',
731
-
},
732
-
})
733
-
const results = await runAxe(component)
734
-
expect(results.violations).toEqual([])
735
-
})
736
-
737
-
it('should have no accessibility violations when disabled', async () => {
738
-
const component = await mountSuspended(UserCombobox, {
739
-
props: {
740
-
suggestions: ['user1', 'user2'],
741
-
disabled: true,
742
-
label: 'Select a user',
743
697
},
744
698
})
745
699
const results = await runAxe(component)
-2
test/unit/a11y-component-coverage.spec.ts
-2
test/unit/a11y-component-coverage.spec.ts
···
27
27
'OgImage/Package.vue': 'OG Image component - server-rendered image, not interactive UI',
28
28
29
29
// Client-only components with complex dependencies
30
-
'AuthButton.client.vue':
31
-
'Client component with AuthModal dependency - AuthButton.server.vue tested',
32
30
'AuthModal.client.vue': 'Complex auth modal with navigation - requires full app context',
33
31
34
32
// Complex components requiring full app context or specific runtime conditions