Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@reckseba
reckseba committed Jan 13, 2025
1 parent 0f7b60e commit eb899eb
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 115 deletions.
4 changes: 2 additions & 2 deletions .talismanrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ fileignoreconfig:
checksum: 6bad26404f5327349658f52897d21982129df33d553ab12b9bb69caf6c9d168f
- filename: frontend/src/components/NavbarSide.vue
checksum: 7d056209beebeed85032ab6dd4699103cd351cdb05f0d68418923779833f3324
- filename: frontend/src/components/NavbarSide.spec.ts
checksum: 43ab6c514a4174add09477b2764a3108f319c9698ed5c26eb6ef6b1d686d10fb
- filename: frontend/src/routes/DocumentUnit.vue
checksum: d4ed727abc9b4d2ad540874ac3c421dd1daba391eaade5257bed99ad35bd7720
- filename: frontend/src/components/input/TextInput.vue
Expand All @@ -26,8 +28,6 @@ fileignoreconfig:
checksum: d8805af87c95764b578fb54f8d343620ea90674977449f62652f77753f93494a
- filename: frontend/src/components/ComboboxInput.spec.ts
checksum: 96f7bb558ec0b3bf49ca1dff60e2f8231d830813f0fccbe62d485f74a0f687ef
- filename: frontend/src/components/NavbarSide.spec.ts
checksum: ae66ad2961f6ff4a7af55720e22966ee7dfda23f6a68a5a69ee66470283cb1ce

allowed_patterns:
# allow these specific patterns that include hex encoded text
Expand Down
211 changes: 98 additions & 113 deletions frontend/src/components/NavbarSide.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,137 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from "@testing-library/vue"
import { createRouter, createWebHistory } from "vue-router"
import type { Router, RouteRecordRaw, RouteLocationRaw } from "vue-router"
import NavbarSide from "@/components/NavbarSide.vue"
import type MenuItem from "@/domain/menuItem"
import type Route from "@/domain/route"
import { render, screen } from '@testing-library/vue'
import { createRouter, createWebHistory } from 'vue-router'
import type { Router, RouteRecordRaw, RouteLocationRaw } from 'vue-router'
import NavbarSide from '@/components/NavbarSide.vue'
import type MenuItem from '@/domain/menuItem'
import type Route from '@/domain/route'

const activeRoute: RouteLocationRaw = {
name: "index",
name: 'index',
}

describe("NavbarSide", () => {
it("renders sidenav with multiple items and correct routes", async () => {
describe('NavbarSide', () => {
it('renders sidenav with multiple items and correct routes', async () => {
const menuItems: MenuItem[] = [
{ label: "first item", route: { name: "first-route" } },
{ label: "second item", route: { name: "second-route" } },
{ label: 'first item', route: { name: 'first-route' } },
{ label: 'second item', route: { name: 'second-route' } },
]

await renderComponent({ menuItems, activeRoute })
expect(screen.getByText("first item")).toBeVisible()
expect(screen.getByText("second item")).toBeVisible()

expect(screen.getByTestId("first-route")).toHaveAttribute(
"href",
"/first-route",
)

expect(screen.getByTestId("second-route")).toHaveAttribute(
"href",
"/second-route",
)
expect(screen.getByText('first item')).toBeVisible()
expect(screen.getByText('second item')).toBeVisible()

expect(screen.getByTestId('first-route')).toHaveAttribute('href', '/first-route')

expect(screen.getByTestId('second-route')).toHaveAttribute('href', '/second-route')
})

it("allows to render parent item with its children", async () => {
it('allows to render parent item with its children', async () => {
const menuItems: MenuItem[] = [
{
label: "first parent item",
label: 'first parent item',
route: {
name: "parent-route",
name: 'parent-route',
},
children: [
{
label: "first child item",
label: 'first child item',
route: {
name: "parent-route",
hash: "#coreData",
name: 'parent-route',
hash: '#coreData',
},
},
{
label: "second child item",
label: 'second child item',
route: {
name: "parent-route",
hash: "#proceedingDecisions",
name: 'parent-route',
hash: '#proceedingDecisions',
},
},
],
},
]

await renderComponent({ menuItems, activeRoute: { name: "parent-route" } })
await renderComponent({ menuItems, activeRoute: { name: 'parent-route' } })

expect(screen.getByText("first parent item")).toBeVisible()
expect(screen.getByText("first child item")).toBeVisible()
expect(screen.getByText("second child item")).toBeVisible()
expect(screen.getByText('first parent item')).toBeVisible()
expect(screen.getByText('first child item')).toBeVisible()
expect(screen.getByText('second child item')).toBeVisible()
})

it("allows to disable a menu item", async () => {
it('allows to disable a menu item', async () => {
const menuItems: MenuItem[] = [
{
label: "disabled item",
label: 'disabled item',
route: {
name: "test-route",
name: 'test-route',
},
isDisabled: true,
},
]

await renderComponent({ menuItems })
const disabledItem = screen.queryByText("disabled item")
const disabledItem = screen.queryByText('disabled item')

expect(disabledItem).not.toBeInTheDocument()
})

describe("highlighting of the currently active menu item", () => {
it("applies styling for parent active menu item", async () => {
describe('highlighting of the currently active menu item', () => {
it('applies styling for parent active menu item', async () => {
const menuItems: MenuItem[] = [
{ label: "active item", route: { name: "matching" } },
{ label: "passive item", route: { name: "not-matching" } },
{ label: 'active item', route: { name: 'matching' } },
{ label: 'passive item', route: { name: 'not-matching' } },
]
await renderComponent({
menuItems,
activeRoute: { path: "/matching" },
activeRoute: { path: '/matching' },
})

expect(screen.getByText("active item")).toBeVisible()
expect(screen.getByText("passive item")).toBeVisible()
expect(screen.getByText('active item')).toBeVisible()
expect(screen.getByText('passive item')).toBeVisible()

expect(screen.getByTestId("active item")).toHaveClass("bg-blue-200")
expect(screen.getByTestId("passive item")).not.toHaveClass("bg-blue-200")
expect(screen.getByTestId('active item')).toHaveClass('bg-blue-200')
expect(screen.getByTestId('passive item')).not.toHaveClass('bg-blue-200')

expect(screen.getByText("active item")).toHaveClass("underline")
expect(screen.getByText("passive item")).not.toHaveClass("underline")
expect(screen.getByText('active item')).toHaveClass('underline')
expect(screen.getByText('passive item')).not.toHaveClass('underline')
})

it("ignores queries of any to match route", async () => {
it('ignores queries of any to match route', async () => {
const menuItems = [
{
label: "active item",
route: { name: "foo", query: { key: "value" } },
label: 'active item',
route: { name: 'foo', query: { key: 'value' } },
},
]
await renderComponent({
menuItems,
activeRoute: { name: "foo", query: { key: "other-value" } },
activeRoute: { name: 'foo', query: { key: 'other-value' } },
})

expect(screen.getByText("active item")).toHaveClass("underline")
expect(screen.getByTestId("active item")).toHaveClass("bg-blue-200")
expect(screen.getByText('active item')).toHaveClass('underline')
expect(screen.getByTestId('active item')).toHaveClass('bg-blue-200')
})
it("show child siblings if selected", async () => {
it('show child siblings if selected', async () => {
const menuItems: MenuItem[] = [
{
label: "parent node",
label: 'parent node',
route: {
name: "parent",
name: 'parent',
},
children: [
{
label: "first child node",
label: 'first child node',
route: {
name: "parent",
hash: "#active",
name: 'parent',
hash: '#active',
},
},
{
label: "second child node",
label: 'second child node',
route: {
name: "parent",
hash: "#not-active",
name: 'parent',
hash: '#not-active',
},
},
],
Expand All @@ -146,33 +140,33 @@ describe("NavbarSide", () => {

await renderComponent({
menuItems,
activeRoute: "/parent#active",
activeRoute: '/parent#active',
})

expect(screen.getByText("first child node")).toBeInTheDocument()
expect(screen.getByText("second child node")).toBeInTheDocument()
expect(screen.getByText('first child node')).toBeInTheDocument()
expect(screen.getByText('second child node')).toBeInTheDocument()
})

it("activated child styling: highlight child and underlines both parent and child", async () => {
it('activated child styling: highlight child and underlines both parent and child', async () => {
const menuItems: MenuItem[] = [
{
label: "parent node",
label: 'parent node',
route: {
name: "parent",
name: 'parent',
},
children: [
{
label: "first child node",
label: 'first child node',
route: {
name: "parent",
hash: "#active",
name: 'parent',
hash: '#active',
},
},
{
label: "second child node",
label: 'second child node',
route: {
name: "parent",
hash: "#not-active",
name: 'parent',
hash: '#not-active',
},
},
],
Expand All @@ -181,47 +175,45 @@ describe("NavbarSide", () => {

await renderComponent({
menuItems,
activeRoute: "/parent#active",
activeRoute: '/parent#active',
})

expect(screen.getByText("parent node")).toHaveClass("underline")
expect(screen.getByText("first child node")).toHaveClass("underline")
expect(screen.getByText('parent node')).toHaveClass('underline')
expect(screen.getByText('first child node')).toHaveClass('underline')

expect(screen.getByTestId("parent node")).not.toHaveClass("bg-blue-200")
expect(screen.getByTestId("first child node")).toHaveClass("bg-blue-200")
expect(screen.getByTestId("second child node")).not.toHaveClass(
"bg-blue-200",
)
expect(screen.getByTestId('parent node')).not.toHaveClass('bg-blue-200')
expect(screen.getByTestId('first child node')).toHaveClass('bg-blue-200')
expect(screen.getByTestId('second child node')).not.toHaveClass('bg-blue-200')
})
})

describe("expansion of level one items", () => {
it("hides all children menu items if not selected", async () => {
describe('expansion of level one items', () => {
it('hides all children menu items if not selected', async () => {
const menuItems: MenuItem[] = [
{
label: "first parent node",
label: 'first parent node',
route: {
name: "parent",
name: 'parent',
},
},
{
label: "second parent node",
label: 'second parent node',
route: {
name: "parent",
name: 'parent',
},
children: [
{
label: "exclude first child node",
label: 'exclude first child node',
route: {
name: "parent",
hash: "#not-include-first",
name: 'parent',
hash: '#not-include-first',
},
},
{
label: "exclude second child node",
label: 'exclude second child node',
route: {
name: "parent",
hash: "#not-include-second",
name: 'parent',
hash: '#not-include-second',
},
},
],
Expand All @@ -230,29 +222,22 @@ describe("NavbarSide", () => {

await renderComponent({ menuItems })

expect(screen.getByText("first parent node")).toBeVisible()
expect(screen.getByText("second parent node")).toBeVisible()
expect(screen.getByText('first parent node')).toBeVisible()
expect(screen.getByText('second parent node')).toBeVisible()

expect(
screen.queryByText("exclude first child node"),
).not.toBeInTheDocument()
expect(screen.queryByText('exclude first child node')).not.toBeInTheDocument()

expect(
screen.queryByText("exclude second child node"),
).not.toBeInTheDocument()
expect(screen.queryByText('exclude second child node')).not.toBeInTheDocument()
})
})
})

async function renderComponent(options: {
menuItems: MenuItem[]
activeRoute?: RouteLocationRaw
}) {
async function renderComponent(options: { menuItems: MenuItem[]; activeRoute?: RouteLocationRaw }) {
const routes = []
routes.push(options.activeRoute)
routes.push(buildMenuItems(options.menuItems))

const activeRoute = options?.activeRoute ?? "/index"
const activeRoute = options?.activeRoute ?? '/index'

const router = buildMenuItems(options.menuItems)
await router.replace(activeRoute)
Expand All @@ -267,7 +252,7 @@ async function renderComponent(options: {

function buildMenuItems(menuItems: MenuItem[]): Router {
const routes = []
routes.push(generateRouterRoute({ name: "index" }))
routes.push(generateRouterRoute({ name: 'index' }))

for (const item of menuItems) {
routes.push(generateRouterRoute(item.route))
Expand All @@ -281,6 +266,6 @@ function buildMenuItems(menuItems: MenuItem[]): Router {
}

function generateRouterRoute(route?: Route): RouteRecordRaw {
const path = "/" + route?.name
const path = '/' + route?.name
return { ...route, path, component: {} }
}

0 comments on commit eb899eb

Please sign in to comment.