2899

Author: dakshitcodes

models/Notification.responsive-breakpoints.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+describe('Notification.ts - Responsive Multi-device Columns & Mobile Viewport Layouts', () => {
+  beforeEach(() => {
+    // Reset DOM
+    document.body.innerHTML = '';
+
+    // Reset window width mock
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+  });
+
+  it('Mock standard mobile-width media coordinates (e.g. 375px wide viewports)', () => {
+    // 1. Emulate an exact 375px viewport (mobile standards)
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 375,
+    });
+
+    // Wire up matchMedia to respect the simulated mock size
+    const matchMediaMock = vi.fn().mockImplementation((query) => ({
+      matches: query === '(max-width: 768px)' ? window.innerWidth <= 768 : false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+    window.matchMedia = matchMediaMock;
+
+    expect(window.innerWidth).toBe(375);
+    expect(window.matchMedia('(max-width: 768px)').matches).toBe(true);
+  });
+
+  it('Assert that columns reflow into standard vertical flex lists', () => {
+    // 2. Reflowing list structure
+    const container = document.createElement('div');
+
+    // Expected utility classes defining a mobile flex-col flow
+    // that expands to flex-row natively on larger screens
+    container.className = 'flex flex-col md:flex-row';
+    document.body.appendChild(container);
+
+    expect(container.classList.contains('flex')).toBe(true);
+    expect(container.classList.contains('flex-col')).toBe(true);
+    // Explicitly contains md: breakpoint fallback
+    expect(container.classList.contains('md:flex-row')).toBe(true);
+  });
+
+  it('Verify styling values are not absolute widths that cause horizontal scrollbars on smaller viewports', () => {
+    // 3. Validate fluid bounds logic (avoiding horizontal clipping on 375px views)
+    const notificationCard = document.createElement('div');
+
+    // Using percentages or max bounds rather than absolute (e.g. w-[500px])
+    notificationCard.className = 'w-full max-w-sm rounded-lg';
+    document.body.appendChild(notificationCard);
+
+    // Negative assertion pattern: No illegal fixed width pixel intervals
+    expect(notificationCard.className).not.toMatch(/w-\[\d+px\]/);
+
+    // Positive assertions
+    expect(notificationCard.classList.contains('w-full')).toBe(true);
+    expect(notificationCard.classList.contains('max-w-sm')).toBe(true);
+  });
+
+  it('Check that navigation components scale down gracefully', () => {
+    // 4. Assert navigation elements implement collapsing states mapping to scale priorities
+    const navItem = document.createElement('span');
+    navItem.className = 'hidden sm:inline-block text-xs md:text-sm';
+    document.body.appendChild(navItem);
+
+    // By default, strictly 'hidden' on un-prefixed viewport declarations (meaning mobile fallback)
+    expect(navItem.classList.contains('hidden')).toBe(true);
+    // Preserves scaling directives for larger text bounds when unlocked
+    expect(navItem.classList.contains('md:text-sm')).toBe(true);
+    expect(navItem.classList.contains('text-xs')).toBe(true);
+  });
+
+  it('Assert mobile-specific toggle states respond cleanly', () => {
+    // 5. Check that touch toggles handle open/close states safely within view constraints
+    const toggleBtn = document.createElement('button');
+    let mobileMenuOpen = false;
+
+    toggleBtn.addEventListener('click', () => {
+      mobileMenuOpen = !mobileMenuOpen;
+    });
+
+    document.body.appendChild(toggleBtn);
+
+    // Test open execution flow
+    toggleBtn.dispatchEvent(new MouseEvent('click'));
+    expect(mobileMenuOpen).toBe(true);
+
+    // Test distinct closure cleanup flow
+    toggleBtn.dispatchEvent(new MouseEvent('click'));
+    expect(mobileMenuOpen).toBe(false);
+  });
+});