mainmatter/ember-test-selectors

Explore API for child selecting

kellyselden opened this issue · 7 comments

kellyselden commented

I have some code like so:

  click(
    testSelector('primitive-list-header') + ' '
      + testSelector('pointer')
  );

Thoughts about how this could get better?

Turbo87 commented

Just brainstorming, but what about something like this:

import { ts } from 'ember-test-selectors';

click(ts`@primitive-list-header .foo @pointer=3`);

Which would be transformed at runtime to:

click('[data-test-primitive-list-header] .foo [data-test-pointer="3"]');

I'm open to other suggestions about the prefix symbol (@), but in general this seems like a concise API that could work.

  • 👍2
chriskrycho commented

I like the use of a template string and 👍 to the API idea in general. My only concern with @ is that it maps to Glimmer binding syntax and might introduce some confusion there for people new to it. Most any symbol will overload something; my concern is just that that one seems extra likely to confuse.

Maybe even just bracketing it? Might be a nice overlap with the actually-generated selector.

click(ts`[primitive-list-header] .foo [pointer=3]`);

Edit: possible downside there is overlap with actual [...] selectors. 😬 I.e. this scenario:

click(ts`[primitive-list-header] .foo [data-breakfast="waffles"]`);
kellyselden commented

@Turbo87 I like the template string and the escaping.

Turbo87 commented

given that @ already has a meaning in CSS (and also in Glimmer) I'm leaning towards using % as a prefix:

click(ts`%primitive-list-header .foo %pointer=3`);
  • 👍1
marcoow commented

see #122 (comment) - the more I think about this the less I understand why we all seem to feel the best API for this case is not actually

click('[data-test-primitive-list-header] .foo [data-test-pointer=3]');

Yes, this is a few more characters but it's also much clearer as it simply uses the actual selector instead of going through a bunch of hoops only to save a few characters.

It seems like testSelector was a bad idea (my bad idea 😉) in the first place…

kellyselden commented

I think I agree with @marcoow

caseywatts commented

On my team, we started pulling test selectors up into a simple object at the top of test files:
https://gist.github.com/caseywatts/46643c9c0825c5e8b1e2542b0a150659

It's the sort of sugar that testSelector was going for, but more explicit. You can tell exactly what's going on from within this single file.

  • 👍2