New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore API for child selecting #121

Closed
kellyselden opened this Issue Jun 20, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@kellyselden
Copy link
Contributor

kellyselden commented Jun 20, 2017

I have some code like so:

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

Thoughts about how this could get better?

@Turbo87

This comment has been minimized.

Copy link
Member

Turbo87 commented Jun 21, 2017

Just brainstorming, but what about something like this:

import { tsfrom '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.

@chriskrycho

This comment has been minimized.

Copy link
Contributor

chriskrycho commented Jun 21, 2017

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

This comment has been minimized.

Copy link
Contributor

kellyselden commented Jun 21, 2017

@Turbo87 I like the template string and the escaping.

@Turbo87

This comment has been minimized.

Copy link
Member

Turbo87 commented Jun 23, 2017

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`);
@marcoow

This comment has been minimized.

Copy link
Member

marcoow commented Jul 13, 2017

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

This comment has been minimized.

Copy link
Contributor

kellyselden commented Jul 14, 2017

I think I agree with @marcoow

@caseywatts

This comment has been minimized.

Copy link

caseywatts commented Nov 17, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment