Skip to content

Commit

Permalink
Add more testing
Browse files Browse the repository at this point in the history
  • Loading branch information
lcharette committed Sep 5, 2024
1 parent ea195d4 commit af18319
Show file tree
Hide file tree
Showing 14 changed files with 654 additions and 62 deletions.
21 changes: 11 additions & 10 deletions src/components/NavBar/NavBarItem.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup>
/**
* Allow external + internal links in same component, plus add active class to
* li instead of a element
Expand All @@ -7,18 +7,19 @@
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
const props = withDefaults(
defineProps<{
to: string
label: string
}>(),
{
label: ''
const props = defineProps({
to: {
type: String,
default: ''
},
label: {
type: String,
default: ''
}
)
})
const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http')
return props.to === '' || (typeof props.to === 'string' && props.to.startsWith('http'))
})
</script>

Expand Down
8 changes: 4 additions & 4 deletions src/components/NavBar/NavBarUserCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
<template>
<NavBarDropdown class="uf-nav-user uk-text-center">
<template #label>
{{ username }}
<span data-test="username" v-if="username">{{ username }}</span>
<img v-if="avatar" :src="avatar" alt="avatar" class="uk-border-circle" />
</template>
<div class="uk-margin">
Expand All @@ -27,9 +27,9 @@ withDefaults(defineProps<Props>(), {
alt="avatar"
class="uk-border-circle"
uk-height-match />
<p class="uk-margin-remove" v-if="username">{{ username }}</p>
<p class="uk-margin-remove uk-text-meta" v-if="meta">({{ meta }})</p>
<p class="uk-margin-remove" v-if="username" data-test="username">{{ username }}</p>
<p class="uk-margin-remove uk-text-meta" v-if="meta" data-test="meta">({{ meta }})</p>
</div>
<slot></slot>
<slot data-test="slot"></slot>
</NavBarDropdown>
</template>
22 changes: 11 additions & 11 deletions src/components/NavBar/NavBarUserCardButton.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<script setup lang="ts">
<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
const props = withDefaults(
defineProps<{
to: string
label: string
}>(),
{
to: '',
label: ''
const props = defineProps({
to: {
type: String,
default: ''
},
label: {
type: String,
default: ''
}
)
})
const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http')
return props.to === '' || (typeof props.to === 'string' && props.to.startsWith('http'))
})
</script>

Expand Down
53 changes: 34 additions & 19 deletions src/components/SideBar/SideBarDropdown.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,48 @@
<script setup lang="ts">
<script setup>
import { RouterLink } from 'vue-router'
withDefaults(
defineProps<{
to: string
label: string
faIcon: string
icon: string
hideCaret: boolean
}>(),
{
label: '',
faIcon: '',
icon: '',
hideCaret: false
defineProps({
to: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
faIcon: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
hideCaret: {
type: Boolean,
default: false
}
)
})
</script>

<template>
<RouterLink v-bind="$props" custom v-slot="{ isActive }">
<li class="uk-parent" :class="{ 'uk-open': isActive }">
<a v-bind="$attrs">
<span v-if="icon" :data-uk-icon="icon" class="uk-margin-small-right"></span>
<font-awesome-icon v-if="faIcon" class="uk-margin-small-right" :icon="faIcon" />
<span
v-if="icon"
:data-uk-icon="icon"
class="uk-margin-small-right"
data-test="icon"></span>
<font-awesome-icon
v-if="faIcon"
class="uk-margin-small-right"
:icon="faIcon"
data-test="faIcon" />
<slot name="label">{{ label }}</slot>
<span uk-nav-parent-icon v-if="!hideCaret"></span>
<span uk-nav-parent-icon v-if="!hideCaret" data-test="caret"></span>
</a>
<ul class="uk-nav-sub">
<ul class="uk-nav-sub" data-test="slot">
<slot></slot>
</ul>
</li>
Expand Down
57 changes: 39 additions & 18 deletions src/components/SideBar/SideBarItem.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup>
/**
* Allow external + internal links in same component, plus add active class to
* li instead of a element
Expand All @@ -7,38 +7,59 @@
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
const props = withDefaults(
defineProps<{
to: string
label: string
faIcon: string
icon: string
}>(),
{
label: '',
faIcon: '',
icon: ''
const props = defineProps({
to: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
faIcon: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
)
})
const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http')
return props.to === '' || (typeof props.to === 'string' && props.to.startsWith('http'))
})
</script>

<template>
<li v-if="isExternalLink">
<a :href="to" target="_blank">
<span v-if="icon" :data-uk-icon="icon" class="uk-margin-small-right"></span>
<font-awesome-icon v-if="faIcon" class="uk-margin-small-right" :icon="faIcon" />
<span
v-if="icon"
:data-uk-icon="icon"
class="uk-margin-small-right"
data-test="icon"></span>
<font-awesome-icon
v-if="faIcon"
class="uk-margin-small-right"
:icon="faIcon"
data-test="faIcon" />
<slot>{{ label }}</slot>
</a>
</li>
<RouterLink v-else v-bind="$props" custom v-slot="{ isExactActive, href, navigate }">
<li :class="{ 'uk-active': isExactActive }">
<a v-bind="$attrs" :href="href" @click="navigate">
<span v-if="icon" :data-uk-icon="icon" class="uk-margin-small-right"></span>
<font-awesome-icon v-if="faIcon" class="uk-margin-small-right" :icon="faIcon" />
<span
v-if="icon"
:data-uk-icon="icon"
class="uk-margin-small-right"
data-test="icon"></span>
<font-awesome-icon
v-if="faIcon"
class="uk-margin-small-right"
:icon="faIcon"
data-test="faIcon" />
<slot>{{ label }}</slot>
</a>
</li>
Expand Down
10 changes: 10 additions & 0 deletions src/tests/components/NavBar/NavBarDropdownSeparator.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { expect, test, describe } from 'vitest'
import { mount } from '@vue/test-utils'
import NavBarDropdownSeparator from '../../../components/NavBar/NavBarDropdownSeparator.vue'

describe('NavBarDropdownSeparator.vue', () => {
test('Render correctly', () => {
const wrapper = mount(NavBarDropdownSeparator)
expect(wrapper.exists()).toBe(true)
})
})
101 changes: 101 additions & 0 deletions src/tests/components/NavBar/NavBarItem.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { expect, test, describe } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import NavBarItem from '../../../components/NavBar/NavBarItem.vue'

// Mock router
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: NavBarItem
}
]
})

describe('NavBarItem.vue', () => {
test('No props or slots', () => {
// Arrange
const wrapper = mount(NavBarItem, {
global: {
plugins: [router]
}
})

// Assert
expect(wrapper.exists()).toBe(true)
expect(wrapper.text()).toMatch('')
})

test('External link, using both props', () => {
// Arrange
const wrapper = mount(NavBarItem, {
props: {
to: 'http://userfrosting.com',
label: 'UserFrosting'
},
global: {
plugins: [router]
}
})

// Assert
expect(wrapper.text()).toMatch('UserFrosting')
})

test('External link, using slot', () => {
// Arrange
const wrapper = mount(NavBarItem, {
props: {
to: 'http://userfrosting.com',
label: 'This is the Label as prop'
},
slots: {
default: 'This is the slot content'
},
global: {
plugins: [router]
}
})

// Assert
expect(wrapper.text()).toMatch('This is the slot content')
})

test('Internal, using both props', () => {
// Arrange
const wrapper = mount(NavBarItem, {
props: {
to: '/',
label: 'UserFrosting'
},
global: {
plugins: [router]
}
})

// Assert
expect(wrapper.text()).toMatch('UserFrosting')
})

test('Internal, using both slot', () => {
// Arrange
const wrapper = mount(NavBarItem, {
props: {
to: '/',
label: 'This is the Label as prop'
},
slots: {
default: 'This is the slot content'
},
global: {
plugins: [router]
}
})

// Assert
expect(wrapper.text()).toMatch('This is the slot content')
})
})
12 changes: 12 additions & 0 deletions src/tests/components/NavBar/NavBarLogin.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { expect, test, describe } from 'vitest'
import { mount, config } from '@vue/test-utils'
import NavBarLogin from '../../../components/NavBar/NavBarLogin.vue'

config.global.stubs['FormLogin'] = { template: '<span></span>' }

describe('NavBarLogin.vue', () => {
test('Render correctly', () => {
const wrapper = mount(NavBarLogin)
expect(wrapper.exists()).toBe(true)
})
})
Loading

0 comments on commit af18319

Please sign in to comment.