Create onLongPress.ts

[vdegenne]

No description provided.

[43081j]

sorry it took a while to get to this, i was away recently.

i've left a bunch of feedback. there's probably more once those changes are made, but its not far off

we also need some tests, but can do those after the other feedback

good idea for sure, thanks for the contribution 🥳

[43081j]

can this be a PointerEvent too so we can drop the cast on line 98 below?

[vdegenne]

If I use PointerEvent there are incompatible type errors with the addEventListener and removeEventListener in above respective functions, not sure how to deal with those.

[vdegenne]

I came up with this solution, not sure if it's good though, I'll revert if you find it inappropriate.

[43081j]

last couple of comments are very minor but looks good other than those

the last thing we need is a new test suite for the directive

you can do similar to how the bindInput tests work, but you can use test-element directly without needing a specific subclass i think.

e.g. something along the lines of this:

import '../util.js'; // so the test-element element is registered as a side effect

import {TestElement} from '../util.js';

suite('onLongPress directive', () => {
  let element: TestElement;

  setup(async () => {
    element = document.createElement('test-element');
    document.body.appendChild(element);
  });

  teardown(() => {
    element.remove();
  });

  test('something', () => {
    const spy = hanbi.spy();

    element.template = () => html`
      <div ${onLongPress(spy.handler)}></div>
    `;

    // simulate a long press by dispatchEvent() of individual pointer events in the right
    // way to cause a long press

    // assert that spy.called is true
  });
});

[43081j]

you can probably drop this by just choosing smaller timers

you can go slightly less realistic with the values, you're still testing it correctly. e.g. the happy path test can just use 10ms or something, small enough that the default timeout of tests will be fine

[43081j]

for the test cases, i can see roughly by eye we need these:

• throws when non-element part is bound
• calls callback when specified time passes during click
  • in this, assert that the pointer event is passed to the callback, and check that the currentTarget is the element we bound to
• does not call callback when pointer leaves during specified time
• removing the element and doing a long press doesn't call the callback
• if no timer is specified, the default is used
• reconnecting a removed element, then doing the long press calls the callback
• if you change the callback between renders, then do a long press, the old one isn't called and the new one is
• if you change the time between renders, then do a long press, the new time applies

you already have a couple of these. if you can fill the gaps in i think we're pretty much done

[mc2]

Docs please.

[43081j]

Closing as i finished it off in #31