npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

query-bin

v0.6.0

Published

A list with queries like in the 'testing-library'

Downloads

15

Readme

query-bin

logo

This README is generated via ./scripts/build-readme.js

Introduction

I like the testing-library, and one reason for that is its queries, you have different queries like byText and byRole, each of which comes in variations like

  • query and queryAll when finding a result is optional
  • get, getAll when finding a result is mandatory
  • find and findAll when you want to wait for the result to be there

You can add custom queries but just providing a queryAll function and some error messages, but sadly everything is set around the DOM and querying HTML elements. I always wanted to have those queries for other use-cases, such as querying requests captured by mock-service-worker.

This project builds an abstraction, so that you get those queries on lists of arbitrary objects. You provide the implementation for queryAll and the rest will be built for you.

This project is not a finished test-utility for a given use case, but a basis so that you can build queries, for example around mock-service-worker.

Installation

npm install query-bin

Example

The tests give a broad overview over the functionality, but here is also more real-life example.

import { Queries, QueryBin } from "query-bin";
import { describe, expect, it } from "vitest";

type Method = "GET" | "PUT" | "POST" | "PATCH" | "DELETE";

interface Request {
  method: Method;
  url: string;
  body?: Record<string, unknown>;
}

const queries = {
  byMethodAndUrl: function (method: Method, url: string) {
    return {
      test: (item) => item.method === method && item.url.includes(url),
      noneFoundMessage: `Could not find requests with method ${method} and URL containing ${url}.`,
      multipleFoundMessage: `Multiple requests found method ${method} and URL containing ${url}.`,
      // optional
      serializeForErrorMessage: (item) => JSON.stringify(item, null, 2),
    };
  },
  // This typing should be improved. Consider this interface unstable...
} as const satisfies Queries<Request>;

const requests = new QueryBin<Request, typeof queries>(queries);

// Let's assume we have a component under test here.
describe("The Login component", () => {
  it("logs in with the correct credentials", async () => {
    // Simulate some requests. Those would normally originate from your component
    requests.add({ method: "GET", url: "http://localhost:8080" });

    setTimeout(() => {
      requests.add({
        method: "POST",
        body: { user: "tom", password: "tom" },
        url: "http://localhost:8080/login",
      });
    }, 500);

    // "find" waits for a single request to appear, but fails if there have been multiple requests
    const loginRequest = await requests.find.byMethodAndUrl("POST", "/login");

    expect(loginRequest.body).toEqual({ user: "tom", password: "tom" });
  });
});

License

This project is licensed under the MIT License

Maintainance-free

I want to be honest. I am not good at maintaining OS projects these days. I have my turn with Handlebars.js, but now there is just to much going on in my life. That is why I tried to make this project as "maintenance-free" as possible.

That said: If you find this package in 2026 or so and you tell yourself: "This is a dead project". Think about how much maintenance is really required for it:

  • There are no dependendies except for development, and I tried to keep them at a minimum.
  • The library is small and has a clear scope. There might be some features missing, but I think of it as almost complete.
  • I don't see any way this library may impact security.

If you like to help me maintain and update dependencies, please contact me. At the moment, I tend not to be very active though.

Funding :coffee:

You can support me at