A general purpose draggable menu.

• web-components

  1 1 2.7 TypeScript

  Library of React components for plotting data (by VEuPathDB)

  

I was given these requirements: https://github.com/VEuPathDB/web-components/issues/420

• CoreUI

  2 1 4.6 TypeScript

  Core UI for VeuPathDB applications. Provides components, style definitions, and utilities to enable developers to rapidly assemble complex applications with consistent UI and UX across our portfolio of sites. (by VEuPathDB)

  

I added some testing tools in: https://github.com/VEuPathDB/CoreUI/pull/138. We'll see what I forgot!

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• jsdom

  55 20,002 7.5 JavaScript

  A JavaScript implementation of various web standards, for use with Node.js

  

import { fireEvent, render, screen } from "@testing-library/react"; import { useState } from "react"; import { DraggablePanel, DraggablePanelCoordinatePair } from "./DraggablePanel"; describe("Draggable Panels", () => { test("dragging a panel changes where it lives.", () => { const defaultPosition: DraggablePanelCoordinatePair = { x: 0, y: 0 }; const panelTitleForAccessibilityOnly = "Study Filters Panel"; const handleOnDragComplete = jest.fn(); render( {}} panelTitle={panelTitleForAccessibilityOnly} showPanelTitle >

Panel contents

); const panelDragHandle = screen.getByText( `Close ${panelTitleForAccessibilityOnly}` ); const destinationCoordinates = { clientX: 73, clientY: 22 }; drag(panelDragHandle, destinationCoordinates); /** * I really don't like assert on implementation details. If we change React dragging librbaries, * this assertion could break and raise a false positive. That said, jsdom doesn't render layouts * like a legit browser so we're left with this and data-testids. The data-testid is nice because * at least we're in control of that so we can make sure that doesn't change if we swap dragging * providers. See conversations like: https://softwareengineering.stackexchange.com/questions/234024/unit-testing-behaviours-without-coupling-to-implementation-details */ const panelFromDataTestId = screen.getByTestId( `${panelTitleForAccessibilityOnly} dragged` ); expect(panelFromDataTestId.style.transform).toEqual( `translate(${destinationCoordinates.clientX}px,${destinationCoordinates.clientY}px)` ); expect(panelFromDataTestId).toBeTruthy(); expect(handleOnDragComplete).toHaveBeenCalled(); }); test("you can open and close panels", async () => { const defaultPosition = { x: 50, y: 50 }; function ToggleButtonAndDraggablePanel() { const [panelIsOpen, setPanelIsOpen] = useState(true); return ( <> setPanelIsOpen((isOpen) => !isOpen)}> Toggle Filters Panel {}} onPanelDismiss={() => setPanelIsOpen(false)} showPanelTitle >

I might be here or I might be gone

); } render( <> {}} onPanelDismiss={() => {}} showPanelTitle >

I will be with you forever.

); expect( screen.getByText("I might be here or I might be gone") ).toBeVisible(); const closePanel = screen.getByText("Close My Filters"); fireEvent.click(closePanel); expect( screen.queryByText("I might be here or I might be gone") ).not.toBeVisible(); expect(screen.queryByText("I will be with you forever.")).toBeVisible(); fireEvent.click(screen.getByText("Toggle Filters Panel")); expect( screen.getByText("I might be here or I might be gone") ).toBeVisible(); }); }); /** * So we're pretty limited as regards js-dom and dragging. Here's what I would like to do: * 1. Simulate dragging events on the draggable element. * 2. Find the element, getBoundingClientRect for the element * 3. Assert that the coordinates moved predictably. * * Here's the reality: jsdom doesn't do any rendering, so getBoundingClientRect() always * returns 0,0,0,0. That won't change (even foreseeable long-term). * You can try to mock the function to emulate the results you'd expect. * https://github.com/jsdom/jsdom/issues/1590#issuecomment-243228840 * * @param element * @param destinationCoordinates */ function drag( element: HTMLElement, destinationCoordinates: { clientX: number; clientY: number } ): void { fireEvent.mouseDown(element); fireEvent.mouseMove(element, destinationCoordinates); fireEvent.mouseUp(element); }

Suggest a related project