Skip to content

[bug] Example mess! Missing browser tests, some examples are confusing #492

@nemesifier

Description

@nemesifier

There are several issues with the examples that are slowing down progress on this project.

Rather than fixing everything in a single pull request, contributors are encouraged to submit focused PRs that address specific examples. Please avoid using closes or fixes keywords in commit messages and pull request descriptions.

1. Missing browser tests

Many examples lack browser based tests that emulate basic user interactions and verify the primary purpose of each example. At a minimum, these tests should:

  • open the example page
  • verify that no JavaScript console errors are present
  • interact with the UI by clicking elements
  • move or manipulate visual elements when applicable
  • send keyboard input when required to validate functionality

Practical example of a browser test:

  • open the switch graph mode example
  • verify that it renders correctly, as done in other examples
  • click the icon that switches the graph mode
  • verify that the graph renders correctly after the mode change

The following examples can be skipped, as they are planned for removal in #425:

  • GraphGL
  • Animated links

2. Unclear purpose or broken functionality

The following examples are problematic and should be reviewed and fixed or removed.

  • Multiple interfaces
    Links are not visualized and the example appears broken. The intended purpose seems to be demonstrating that links can reference addresses listed in local_addresses, but currently nothing is shown.

  • Search elements
    It is unclear whether the search functionality works at all. Performing a search results in JavaScript console errors, both locally and in the online example. The search input UI is also very narrow, and submitting the search using the Enter key does not work, forcing users to click the search button.

  • Node expand or fold
    This functionality can be removed entirely, including the example and all related logic in the library. It is not used in OpenWISP and no longer provides clear value. The online example also produces a JavaScript error, and the offline version fails to load in the development environment with Uncaught ReferenceError: module is not defined.

  • Multiple links render
    This example should clearly demonstrate that two links exist between the same nodes. Ideally, both links should be rendered visually. Alternatively, if only a single link is shown, clicking it should clearly indicate in the sidebar that multiple links exist by displaying the details of both links.

  • JSONDataUpdate using override option
    The example file name does not match the button label. When opening the example, it is unclear what behavior is being demonstrated. The example should guide the user with a clear UI message explaining its purpose.

  • JSONDataUpdate using append option
    The example does not explain what it is demonstrating. It should guide the user with a UI message describing the expected behavior.

  • Append data using arrays
    As with the other data update examples, this example should guide the user with a UI message explaining what it is intended to demonstrate.

3. Consistent UI guidance for data update examples

All examples that demonstrate data updates should use a consistent approach for guiding users. Whether this is done via alerts, inline text, or another UI element, the mechanism and tone should be consistent across all related examples.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    Status

    Backlog

    Status

    To do (general)

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions