@object-ui/plugin-calendar 3.1.5 → 3.3.1

package/src/__tests__/accessibility.test.tsx

@@ -1,290 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Screen reader experience tests for CalendarView.
- *
- * Tests ARIA attributes, roles, landmarks, keyboard navigation,
- * and screen reader announcements for the calendar plugin.
- * Part of P2.3 Accessibility & Inclusive Design roadmap.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { CalendarView, type CalendarEvent } from '../CalendarView';
-
-// Mock ResizeObserver
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-global.ResizeObserver = ResizeObserver;
-
-// Mock PointerEvents for Radix
-if (!global.PointerEvent) {
-  class PointerEvent extends Event {
-    button: number;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-    constructor(type: string, props: any = {}) {
-      super(type, props);
-      this.button = props.button || 0;
-      this.ctrlKey = props.ctrlKey || false;
-      this.metaKey = props.metaKey || false;
-      this.shiftKey = props.shiftKey || false;
-    }
-  }
-  // @ts-expect-error Mocking global PointerEvent
-  global.PointerEvent = PointerEvent as any;
-}
-
-// Mock HTMLElement.offsetParent for Radix Popper
-Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
-  get() {
-    return this.parentElement;
-  },
-});
-
-const defaultDate = new Date(2024, 0, 15); // Jan 15, 2024
-
-const mockEvents: CalendarEvent[] = [
-  {
-    id: '1',
-    title: 'Team Standup',
-    start: new Date(2024, 0, 15, 9, 0),
-    end: new Date(2024, 0, 15, 9, 30),
-  },
-  {
-    id: '2',
-    title: 'Sprint Review',
-    start: new Date(2024, 0, 15, 14, 0),
-    end: new Date(2024, 0, 15, 15, 0),
-  },
-  {
-    id: '3',
-    title: 'All Day Workshop',
-    start: new Date(2024, 0, 16, 0, 0),
-    end: new Date(2024, 0, 16, 23, 59),
-    allDay: true,
-  },
-];
-
-describe('CalendarView: Screen Reader & Accessibility', () => {
-  describe('header navigation controls', () => {
-    it('renders navigation buttons with accessible labels', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      const buttons = screen.getAllByRole('button');
-      // Should have: Today, Prev, Next, Date Picker Trigger, and View Switcher
-      expect(buttons.length).toBeGreaterThanOrEqual(4);
-    });
-
-    it('Today button is clearly labeled', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      const todayButton = screen.getByText('Today');
-      expect(todayButton).toBeInTheDocument();
-      expect(todayButton.closest('button')).toBeInTheDocument();
-    });
-
-    it('date label is inside an interactive element', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      const dateLabel = screen.getByText('January 2024');
-      expect(dateLabel).toBeInTheDocument();
-
-      const triggerButton = dateLabel.closest('button');
-      expect(triggerButton).toBeInTheDocument();
-    });
-
-    it('previous and next navigation buttons exist', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      const buttons = screen.getAllByRole('button');
-      // At least Today, Prev, Next buttons
-      expect(buttons.length).toBeGreaterThanOrEqual(3);
-    });
-  });
-
-  describe('view switcher accessibility', () => {
-    it('view switcher displays current view', () => {
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      const monthText = screen.getByText('Month');
-      expect(monthText).toBeInTheDocument();
-    });
-
-    it('view switcher is inside a button trigger', () => {
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      const monthText = screen.getByText('Month');
-      const trigger = monthText.closest('button');
-      expect(trigger).toBeInTheDocument();
-    });
-
-    it('week view renders without error when locale is available', () => {
-      // Note: WeekView has a known locale scoping issue in CalendarView.tsx.
-      // This test verifies the month view switcher text is present before switching.
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      const monthText = screen.getByText('Month');
-      expect(monthText).toBeInTheDocument();
-    });
-
-    it('day view renders accessible buttons', () => {
-      // Note: DayView has a known locale scoping issue in CalendarView.tsx.
-      // Testing button accessibility with the default month view instead.
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThanOrEqual(3);
-    });
-  });
-
-  describe('calendar grid structure', () => {
-    it('month view renders day-of-week headers', () => {
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      // Day headers (Sun, Mon, Tue, etc.)
-      expect(screen.getByText('Sun')).toBeInTheDocument();
-      expect(screen.getByText('Mon')).toBeInTheDocument();
-      expect(screen.getByText('Tue')).toBeInTheDocument();
-      expect(screen.getByText('Wed')).toBeInTheDocument();
-      expect(screen.getByText('Thu')).toBeInTheDocument();
-      expect(screen.getByText('Fri')).toBeInTheDocument();
-      expect(screen.getByText('Sat')).toBeInTheDocument();
-    });
-
-    it('month view renders day numbers', () => {
-      render(<CalendarView currentDate={defaultDate} view="month" locale="en-US" />);
-
-      // Should have day 15 (current date)
-      const day15 = screen.getAllByText('15');
-      expect(day15.length).toBeGreaterThanOrEqual(1);
-    });
-
-    it('events are rendered within the calendar', () => {
-      render(
-        <CalendarView
-          currentDate={defaultDate}
-          events={mockEvents}
-          view="month"
-          locale="en-US"
-        />
-      );
-
-      expect(screen.getByText('Team Standup')).toBeInTheDocument();
-      expect(screen.getByText('Sprint Review')).toBeInTheDocument();
-    });
-  });
-
-  describe('interactive behaviors', () => {
-    it('navigation buttons are clickable and functional', () => {
-      const onNavigate = vi.fn();
-      render(
-        <CalendarView
-          currentDate={defaultDate}
-          onNavigate={onNavigate}
-          locale="en-US"
-        />
-      );
-
-      const todayButton = screen.getByText('Today');
-      fireEvent.click(todayButton);
-
-      expect(onNavigate).toHaveBeenCalled();
-    });
-
-    it('event click handler is supported', () => {
-      const onEventClick = vi.fn();
-      render(
-        <CalendarView
-          currentDate={defaultDate}
-          events={mockEvents}
-          onEventClick={onEventClick}
-          view="month"
-          locale="en-US"
-        />
-      );
-
-      const event = screen.getByText('Team Standup');
-      fireEvent.click(event);
-
-      expect(onEventClick).toHaveBeenCalled();
-    });
-
-    it('date picker trigger is accessible', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      const dateLabel = screen.getByText('January 2024');
-      const trigger = dateLabel.closest('button');
-      expect(trigger).toBeEnabled();
-    });
-  });
-
-  describe('semantic calendar markup', () => {
-    it('calendar root has proper CSS structure', () => {
-      const { container } = render(
-        <CalendarView currentDate={defaultDate} locale="en-US" />
-      );
-
-      // Root element should have flex layout
-      const root = container.firstElementChild as HTMLElement;
-      expect(root).toHaveClass('flex', 'flex-col');
-    });
-
-    it('header section is separated by border', () => {
-      const { container } = render(
-        <CalendarView currentDate={defaultDate} locale="en-US" />
-      );
-
-      const header = container.querySelector('.border-b');
-      expect(header).toBeInTheDocument();
-    });
-
-    it('custom className is applied to root', () => {
-      const { container } = render(
-        <CalendarView
-          currentDate={defaultDate}
-          className="custom-calendar"
-          locale="en-US"
-        />
-      );
-
-      const root = container.firstElementChild as HTMLElement;
-      expect(root.className).toContain('custom-calendar');
-    });
-  });
-
-  describe('add event action', () => {
-    it('add button renders when onAddClick is provided', () => {
-      const onAddClick = vi.fn();
-      render(
-        <CalendarView
-          currentDate={defaultDate}
-          onAddClick={onAddClick}
-          locale="en-US"
-        />
-      );
-
-      const newButton = screen.getByText('New event');
-      expect(newButton).toBeInTheDocument();
-      expect(newButton.closest('button')).toBeInTheDocument();
-    });
-
-    it('add button is not shown when onAddClick is absent', () => {
-      render(<CalendarView currentDate={defaultDate} locale="en-US" />);
-
-      expect(screen.queryByText('New event')).not.toBeInTheDocument();
-    });
-  });
-});

package/src/__tests__/calendar-bugfixes.test.tsx

@@ -1,230 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Tests for calendar bug fixes:
- * - Event click always dispatches action (no schema.onEventClick guard)
- * - i18n integration with useObjectTranslation
- * - Tooltip (title attribute) on truncated event titles
- * - Cross-month date visual distinction (opacity)
- * - Today highlight spacing improvement
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { CalendarView, type CalendarEvent } from '../CalendarView';
-import { I18nProvider } from '@object-ui/i18n';
-
-// Mock ResizeObserver
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-global.ResizeObserver = ResizeObserver;
-
-// Mock PointerEvents for Radix
-if (!global.PointerEvent) {
-  class PointerEvent extends Event {
-    button: number;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-    constructor(type: string, props: any = {}) {
-      super(type, props);
-      this.button = props.button || 0;
-      this.ctrlKey = props.ctrlKey || false;
-      this.metaKey = props.metaKey || false;
-      this.shiftKey = props.shiftKey || false;
-    }
-  }
-  // @ts-expect-error Mocking global PointerEvent
-  global.PointerEvent = PointerEvent as any;
-}
-
-// Mock HTMLElement.offsetParent for Radix Popper
-Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
-  get() {
-    return this.parentElement;
-  },
-});
-
-const defaultDate = new Date(2024, 0, 15); // Jan 15, 2024
-
-const sampleEvents: CalendarEvent[] = [
-  {
-    id: '1',
-    title: 'Design dashboard widget layout and structure',
-    start: new Date(2024, 0, 15, 10, 0),
-    end: new Date(2024, 0, 15, 11, 0),
-    color: '#3b82f6',
-  },
-  {
-    id: '2',
-    title: 'Short Event',
-    start: new Date(2024, 0, 15, 14, 0),
-  },
-];
-
-function renderWithI18n(ui: React.ReactElement, lang = 'en') {
-  return render(
-    <I18nProvider config={{ defaultLanguage: lang, detectBrowserLanguage: false }}>
-      {ui}
-    </I18nProvider>
-  );
-}
-
-describe('Calendar Bug Fixes', () => {
-  describe('event click dispatches action', () => {
-    it('fires onEventClick when event is clicked in month view', () => {
-      const onClick = vi.fn();
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={sampleEvents}
-          view="month"
-          onEventClick={onClick}
-        />
-      );
-      fireEvent.click(screen.getByText('Short Event'));
-      expect(onClick).toHaveBeenCalledTimes(1);
-      expect(onClick).toHaveBeenCalledWith(sampleEvents[1]);
-    });
-  });
-
-  describe('tooltip on truncated event titles', () => {
-    it('renders title attribute on event cards in month view', () => {
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={sampleEvents}
-          view="month"
-        />
-      );
-      const eventEl = screen.getByText('Short Event');
-      expect(eventEl.closest('[title]')).toHaveAttribute('title', 'Short Event');
-    });
-
-    it('renders title attribute with long title in month view', () => {
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={sampleEvents}
-          view="month"
-        />
-      );
-      const eventEl = screen.getByText('Design dashboard widget layout and structure');
-      expect(eventEl.closest('[title]')).toHaveAttribute(
-        'title',
-        'Design dashboard widget layout and structure'
-      );
-    });
-
-    it('renders title attribute on event cards in day view', () => {
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={sampleEvents}
-          view="day"
-        />
-      );
-      const eventEl = screen.getByText('Short Event');
-      expect(eventEl.closest('[title]')).toHaveAttribute('title', 'Short Event');
-    });
-  });
-
-  describe('i18n integration', () => {
-    it('renders labels from i18n when language is en', () => {
-      const onAdd = vi.fn();
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={[]}
-          onAddClick={onAdd}
-        />,
-        'en'
-      );
-      expect(screen.getByText('Today')).toBeInTheDocument();
-      expect(screen.getByText('New event')).toBeInTheDocument();
-    });
-
-    it('renders labels from i18n when language is zh', () => {
-      const onAdd = vi.fn();
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={[]}
-          onAddClick={onAdd}
-        />,
-        'zh'
-      );
-      expect(screen.getByText('今天')).toBeInTheDocument();
-      expect(screen.getByText('新建事件')).toBeInTheDocument();
-    });
-
-    it('renders locale-aware weekday headers for zh', () => {
-      renderWithI18n(
-        <CalendarView
-          currentDate={defaultDate}
-          events={[]}
-          view="month"
-        />,
-        'zh'
-      );
-      expect(screen.getByText('周日')).toBeInTheDocument();
-      expect(screen.getByText('周一')).toBeInTheDocument();
-    });
-  });
-
-  describe('cross-month date styling', () => {
-    it('applies opacity to non-current-month dates', () => {
-      const { container } = renderWithI18n(
-        <CalendarView
-          currentDate={new Date(2024, 1, 15)} // Feb 15, 2024
-          events={[]}
-          view="month"
-        />
-      );
-      const gridCells = container.querySelectorAll('[role="gridcell"]');
-      const firstCell = gridCells[0];
-      expect(firstCell.className).toContain('opacity-50');
-    });
-
-    it('does not apply opacity to current-month dates', () => {
-      const { container } = renderWithI18n(
-        <CalendarView
-          currentDate={new Date(2024, 1, 15)} // Feb 15, 2024
-          events={[]}
-          view="month"
-        />
-      );
-      const gridCells = container.querySelectorAll('[role="gridcell"]');
-      // Feb 2024 starts on Thursday, so index 4 (0-based) is Feb 1
-      const feb1Cell = gridCells[4];
-      expect(feb1Cell.className).not.toContain('opacity-50');
-    });
-  });
-
-  describe('today highlight spacing', () => {
-    it('renders today date with mb-2 spacing for better separation', () => {
-      const today = new Date();
-      const { container } = renderWithI18n(
-        <CalendarView
-          currentDate={today}
-          events={[]}
-          view="month"
-        />
-      );
-      const todayEl = container.querySelector('[aria-current="date"]');
-      expect(todayEl).toBeInTheDocument();
-      expect(todayEl?.className).toContain('mb-2');
-    });
-  });
-});

package/src/__tests__/calendar-optimizations.test.tsx

@@ -1,178 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * Tests for CalendarView optimizations:
- * - Event index (Map-based lookup instead of O(N) per cell)
- * - Stable default date reference
- * - HEX color text-white fix
- * - onEventDrop / locale passthrough from ObjectCalendar
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { CalendarView, type CalendarEvent } from '../CalendarView';
-
-// Mock @object-ui/components
-vi.mock('@object-ui/components', () => ({
-  cn: (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(' '),
-  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-  Select: ({ children, value, onValueChange }: any) => <div data-testid="select">{children}</div>,
-  SelectContent: ({ children }: any) => <div>{children}</div>,
-  SelectItem: ({ children, value }: any) => <div data-value={value}>{children}</div>,
-  SelectTrigger: ({ children }: any) => <div>{children}</div>,
-  SelectValue: () => <span>Month</span>,
-  Calendar: (props: any) => <div data-testid="calendar-picker">Calendar Picker</div>,
-  Popover: ({ children }: any) => <div>{children}</div>,
-  PopoverContent: ({ children }: any) => <div>{children}</div>,
-  PopoverTrigger: ({ children }: any) => <div>{children}</div>,
-}));
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  ChevronLeftIcon: (props: any) => <svg data-testid="chevron-left" {...props} />,
-  ChevronRightIcon: (props: any) => <svg data-testid="chevron-right" {...props} />,
-  CalendarIcon: (props: any) => <svg data-testid="calendar-icon" {...props} />,
-  PlusIcon: (props: any) => <svg data-testid="plus-icon" {...props} />,
-}));
-
-// Mock ResizeObserver
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-global.ResizeObserver = ResizeObserver;
-
-const baseDate = new Date(2024, 0, 15); // Jan 15, 2024
-
-describe('CalendarView optimizations', () => {
-  describe('event index (Map-based lookup)', () => {
-    it('renders single-day events correctly with the new index', () => {
-      const events: CalendarEvent[] = [
-        { id: '1', title: 'Morning Meeting', start: new Date(2024, 0, 15, 9, 0), end: new Date(2024, 0, 15, 10, 0) },
-        { id: '2', title: 'Lunch', start: new Date(2024, 0, 15, 12, 0), end: new Date(2024, 0, 15, 13, 0) },
-      ];
-      render(<CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />);
-      expect(screen.getByText('Morning Meeting')).toBeInTheDocument();
-      expect(screen.getByText('Lunch')).toBeInTheDocument();
-    });
-
-    it('renders multi-day events on all spanned days', () => {
-      const events: CalendarEvent[] = [
-        {
-          id: 'multi-1',
-          title: 'Conference',
-          start: new Date(2024, 0, 15, 9, 0),
-          end: new Date(2024, 0, 17, 17, 0),
-          allDay: true,
-        },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      // The multi-day event should appear on Jan 15, 16, and 17 — 3 cells
-      const eventElements = container.querySelectorAll('[role="button"][aria-label="Conference"]');
-      expect(eventElements.length).toBe(3);
-    });
-
-    it('renders events with no end date on their start day only', () => {
-      const events: CalendarEvent[] = [
-        { id: 'no-end', title: 'No End Event', start: new Date(2024, 0, 20, 14, 0) },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      const eventElements = container.querySelectorAll('[role="button"][aria-label="No End Event"]');
-      expect(eventElements.length).toBe(1);
-    });
-  });
-
-  describe('HEX color text-white fix', () => {
-    it('applies text-white class when event color is a HEX value in month view', () => {
-      const events: CalendarEvent[] = [
-        { id: 'hex-1', title: 'HEX Event', start: new Date(2024, 0, 15), color: '#3b82f6' },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      const eventEl = container.querySelector('[aria-label="HEX Event"]');
-      expect(eventEl).toBeInTheDocument();
-      expect(eventEl!.className).toContain('text-white');
-      expect((eventEl as HTMLElement).style.backgroundColor).toBe('#3b82f6');
-    });
-
-    it('uses default color class when event color is a Tailwind class', () => {
-      const events: CalendarEvent[] = [
-        { id: 'tw-1', title: 'Tailwind Event', start: new Date(2024, 0, 15), color: 'bg-red-500 text-white' },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      const eventEl = container.querySelector('[aria-label="Tailwind Event"]');
-      expect(eventEl).toBeInTheDocument();
-      expect(eventEl!.className).toContain('bg-red-500');
-      expect(eventEl!.className).toContain('text-white');
-    });
-
-    it('falls back to DEFAULT_EVENT_COLOR when no color is specified', () => {
-      const events: CalendarEvent[] = [
-        { id: 'no-color', title: 'No Color', start: new Date(2024, 0, 15) },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      const eventEl = container.querySelector('[aria-label="No Color"]');
-      expect(eventEl).toBeInTheDocument();
-      expect(eventEl!.className).toContain('bg-blue-500');
-      expect(eventEl!.className).toContain('text-white');
-    });
-  });
-
-  describe('stable default date', () => {
-    it('renders without currentDate prop without errors', () => {
-      const { container } = render(<CalendarView events={[]} locale="en-US" />);
-      expect(container).toBeTruthy();
-    });
-
-    it('does not trigger re-render loop when currentDate is not provided', () => {
-      const onNavigate = vi.fn();
-      const { rerender } = render(<CalendarView events={[]} locale="en-US" onNavigate={onNavigate} />);
-      // Re-render the same component — should NOT trigger onNavigate from the effect
-      rerender(<CalendarView events={[]} locale="en-US" onNavigate={onNavigate} />);
-      expect(onNavigate).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('drag-and-drop enablement', () => {
-    it('events are draggable when onEventDrop is provided', () => {
-      const events: CalendarEvent[] = [
-        { id: 'd-1', title: 'Drag Event', start: new Date(2024, 0, 15) },
-      ];
-      const onEventDrop = vi.fn();
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" onEventDrop={onEventDrop} locale="en-US" />
-      );
-      const eventEl = container.querySelector('[aria-label="Drag Event"]');
-      expect(eventEl).toBeInTheDocument();
-      expect(eventEl!.getAttribute('draggable')).toBe('true');
-    });
-
-    it('events are not draggable when onEventDrop is not provided', () => {
-      const events: CalendarEvent[] = [
-        { id: 'nd-1', title: 'No Drag Event', start: new Date(2024, 0, 15) },
-      ];
-      const { container } = render(
-        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
-      );
-      const eventEl = container.querySelector('[aria-label="No Drag Event"]');
-      expect(eventEl).toBeInTheDocument();
-      expect(eventEl!.getAttribute('draggable')).toBe('false');
-    });
-  });
-});