@priscilla-ai/vue 1.0.6 → 1.0.7

package/src/__tests__/Navbar.spec.ts

@@ -0,0 +1,284 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+
+/**
+ * Navbar Component Tests (17 tests)
+ *
+ * These tests verify that a Navbar component correctly integrates with
+ * the PriscillaAI component, passing props correctly and maintaining
+ * proper layout and styling.
+ *
+ * Note: This test suite uses a mock Navbar component to demonstrate
+ * expected behavior with PriscillaAI integration.
+ */
+
+// Mock Navbar component for testing
+const Navbar = defineComponent({
+  name: 'Navbar',
+  components: {
+    // Note: In real app, this would be the actual PriscillaAI component
+    PriscillaAI: defineComponent({
+      name: 'PriscillaAI',
+      props: ['xpath', 'chapterId', 'programId'],
+      template: '<div class="priscilla-ai-mock" />',
+    }),
+  },
+  template: `
+    <nav class="navbar" style="background-color: #16a34a; border-bottom: 1px solid #15803d;">
+      <div class="navbar-container" style="margin: 0 auto; max-width: 1280px; padding: 0 8px;">
+        <div class="navbar-content" style="display: flex; height: 80px; align-items: center; justify-content: space-between;">
+          <div class="navbar-start" style="display: flex; flex: 1; align-items: center;">
+            <a class="navbar-logo" href="/" style="display: flex; align-items: center; margin-right: 16px; flex-shrink: 0;">
+              <img class="logo-image" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text>VJ</text></svg>" alt="Vue Jobs" style="height: 40px; width: auto;" />
+              <span class="brand-text" style="color: white; font-size: 24px; font-weight: bold; margin-left: 8px; display: none;">
+                Vue Jobs
+              </span>
+            </a>
+            <div class="navbar-end" style="margin-left: auto;">
+              <div class="navbar-actions" style="display: flex; gap: 8px;">
+                <PriscillaAI
+                  :xpath="xpathSelector"
+                  :chapterId="currentChapterId"
+                  :programId="currentProgramId"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  `,
+  data() {
+    return {
+      xpathSelector: "//textarea[@id='code-block']",
+      currentChapterId: 12,
+      currentProgramId: 589,
+    }
+  },
+})
+
+describe('Navbar Component Integration', () => {
+  let wrapper: ReturnType<typeof mount>
+
+  beforeEach(() => {
+    wrapper = mount(Navbar, {
+      global: {
+        stubs: {
+          img: true,
+        },
+      },
+    })
+  })
+
+  /**
+   * Test 1: Navbar component rendering
+   *
+   * Verifies that the Navbar component mounts and renders without errors.
+   * This is a basic smoke test ensuring the component structure is valid.
+   */
+  it('should render Navbar component', () => {
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('nav').exists()).toBe(true)
+  })
+
+  /**
+   * Test 2: Green styling application (background-color, border)
+   *
+   * Validates that the Navbar applies the correct CSS styling
+   * for green background and border.
+   */
+  it('should apply green styling to navBar', () => {
+    const nav = wrapper.find('nav')
+    expect(nav.exists()).toBe(true)
+    // Check style attribute or class
+    const style = nav.attributes('style') || ''
+    expect(style).toContain('background-color')
+  })
+
+  /**
+   * Test 3: Logo image rendering with proper alt text
+   *
+   * Ensures the logo image is properly displayed with descriptive alt text.
+   * This is important for accessibility and SEO.
+   */
+  it('should render logo image with alt text', () => {
+    const logo = wrapper.find('img')
+    expect(logo.exists()).toBe(true)
+    expect(logo.attributes('alt')).toBe('Vue Jobs')
+  })
+
+  /**
+   * Test 4: Brand text "Vue Jobs" display
+   *
+   * Verifies that the brand name "Vue Jobs" is displayed in the Navbar.
+   * On mobile screens, this text is hidden and shown only on medium screens.
+   */
+  it('should display brand text "Vue Jobs"', () => {
+    expect(wrapper.text()).toContain('Vue Jobs')
+  })
+
+  /**
+   * Test 5: PriscillaAI component mounting
+   *
+   * Checks that the PriscillaAI component is properly mounted as a child
+   * of the Navbar component.
+   */
+  it('should mount PriscillaAI component inside Navbar', () => {
+    const priscilla = wrapper.findComponent({ name: 'PriscillaAI' })
+    expect(priscilla.exists()).toBe(true)
+  })
+
+  /**
+   * Test 6: XPath prop passing
+   *
+   * Validates that the correct XPath selector is passed to the PriscillaAI component.
+   * This XPath targets a textarea element with id="code-block".
+   */
+  it('should pass correct xpath prop to PriscillaAI', () => {
+    const priscilla = wrapper.findComponent({ name: 'PriscillaAI' })
+    expect(priscilla.props('xpath')).toBe("//textarea[@id='code-block']")
+  })
+
+  /**
+   * Test 7: ChapterId prop passing
+   *
+   * Ensures the chapterId prop (12) is correctly passed to PriscillaAI.
+   * This ID is used to fetch chapter-specific hints from the API.
+   */
+  it('should pass correct chapterId prop to PriscillaAI', () => {
+    const priscilla = wrapper.findComponent({ name: 'PriscillaAI' })
+    expect(priscilla.props('chapterId')).toBe(12)
+  })
+
+  /**
+   * Test 8: ProgramId prop passing
+   *
+   * Verifies the programId prop (589) is correctly passed to PriscillaAI.
+   * This ID identifies which program/module the student is working on.
+   */
+  it('should pass correct programId prop to PriscillaAI', () => {
+    const priscilla = wrapper.findComponent({ name: 'PriscillaAI' })
+    expect(priscilla.props('programId')).toBe(589)
+  })
+
+  /**
+   * Test 9: All required props present
+   *
+   * Comprehensive check that all three required props are passed to PriscillaAI:
+   * xpath, chapterId, and programId.
+   */
+  it('should pass all required props to PriscillaAI', () => {
+    const priscilla = wrapper.findComponent({ name: 'PriscillaAI' })
+    expect(priscilla.props()).toHaveProperty('xpath')
+    expect(priscilla.props()).toHaveProperty('chapterId')
+    expect(priscilla.props()).toHaveProperty('programId')
+  })
+
+  /**
+   * Test 10: Max-width container structure
+   *
+   * Ensures the Navbar uses a max-width container for responsive design.
+   * The container limits content width on large screens.
+   */
+  it('should use max-width container structure', () => {
+    const container = wrapper.find('.navbar-container')
+    expect(container.exists()).toBe(true)
+    const style = container.attributes('style') || ''
+    expect(style).toContain('max-width')
+  })
+
+  /**
+   * Test 11: Flexbox layout implementation
+   *
+   * Validates that the Navbar uses Flexbox for proper layout:
+   * - Main container uses flex layout
+   * - Items are properly aligned (justify-between, items-center)
+   */
+  it('should use flexbox layout', () => {
+    const mainDiv = wrapper.find('.navbar-content')
+    expect(mainDiv.exists()).toBe(true)
+    const style = mainDiv.attributes('style') || ''
+    expect(style).toContain('display: flex')
+    expect(style).toContain('align-items')
+    expect(style).toContain('justify-content')
+  })
+
+  /**
+   * Test 12: Logo alignment and centering
+   *
+   * Ensures the logo and brand text are properly aligned on the left side
+   * of the Navbar using flex display and proper spacing.
+   */
+  it('should align logo and brand text properly', () => {
+    const logoContainer = wrapper.find('.navbar-logo')
+    expect(logoContainer.exists()).toBe(true)
+    const style = logoContainer.attributes('style') || ''
+    expect(style).toContain('display: flex')
+    expect(style).toContain('flex-shrink: 0')
+  })
+
+  /**
+   * Test 13: Right-side positioning of PriscillaAI
+   *
+   * Validates that PriscillaAI is positioned on the right side of the Navbar
+   * using margin-left: auto for right alignment.
+   */
+  it('should position PriscillaAI on the right side', () => {
+    const rightContainer = wrapper.find('.navbar-end')
+    expect(rightContainer.exists()).toBe(true)
+    const style = rightContainer.attributes('style') || ''
+    expect(style).toContain('margin-left: auto')
+  })
+
+  /**
+   * Test 14: Mobile text hiding on small screens
+   *
+   * Ensures the brand text "Vue Jobs" is hidden on small mobile screens
+   * using display: none, improving mobile UX.
+   */
+  it('should hide brand text on small screens', () => {
+    const brandText = wrapper.find('.brand-text')
+    expect(brandText.exists()).toBe(true)
+    expect(brandText.text()).toContain('Vue Jobs')
+    const style = brandText.attributes('style') || ''
+    expect(style).toContain('display: none')
+  })
+
+  /**
+   * Test 15: Responsive padding
+   *
+   * Validates that the Navbar uses responsive padding
+   * to ensure good spacing across all device sizes.
+   */
+  it('should apply responsive padding', () => {
+    const container = wrapper.find('.navbar-container')
+    expect(container.exists()).toBe(true)
+    const style = container.attributes('style') || ''
+    expect(style).toContain('padding')
+  })
+
+  /**
+   * Test 16: Logo alt text presence and validity
+   *
+   * Double-checks that the logo image has alt text for accessibility.
+   * Screen readers and search engines rely on this for understanding content.
+   */
+  it('should have valid alt text for logo', () => {
+    const logo = wrapper.find('img')
+    const altText = logo.attributes('alt')
+    expect(altText).toBeTruthy()
+    expect(altText?.length).toBeGreaterThan(0)
+  })
+
+  /**
+   * Test 17: Semantic nav element usage
+   *
+   * Ensures the Navbar uses the semantic HTML <nav> element instead of
+   * a generic <div>. This is important for accessibility and SEO.
+   */
+  it('should use semantic nav element', () => {
+    expect(wrapper.find('nav').exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('NAV')
+  })
+})