More changes to test IDs #340
Conversation
|
PR Storybook available here |
|
This seems odd, I checked out the links in the drop-down of the connection card and I see:
where's the |
|
@gashcrumb I put the dot in to separate the component name from the rest of the ID (just seemed more readable). I can take the dots out. |
|
Ah, okay, yeah use a |
|
PR Storybook available here |
|
PR Storybook available here |
|
I hate to say this but I think the component name's getting compiled out, for example:
So every ID has a sorta random letter as a prefix since the id is produced with the minified name I guess. I don't think that part will work unfortunately, as then the IDs aren't deterministic. Generally they don't need to be globally unique across the entire app, just to a given page. So on pages like the connection edit page you probably don't need to be too specific with the name. Just on things like the connection actions, or integration actions that get used in various pages could do with slightly more specific names, but even those include the object name in them. |
|
PR Storybook available here |
| if (prefix) { | ||
| return generateId(prefix); | ||
| } | ||
| for (let i = 0; i < values.length; i++) { |
There was a problem hiding this comment.
Couldn't you do values.map(generateId).join('-') instead of this for loop etc?
There was a problem hiding this comment.
I'll make that change. This changes the segment separator from two dashes to one dash but that is no big deal as we talked about @gashcrumb.
|
PR Storybook available here |
…he minified component name - Component names are now passed to function as a hardcoded string - Added a section to the readme
|
PR Storybook available here |
|
Pull request approved by @gashcrumb - applying approved label |
toTestIdfunction that generates a test ID based on the component name along with a unique name describing what the ID pertains totoTestIdfunction uses the converter code from the angular codebaseHere is an example:
connectioncard.student-details-link. The first part,connectioncard, is the component name. The second part,student, is the name of the connection. The last part,details-link, describes the element whose test ID is defined.@mmelko Let me know how this works and if you need any IDs changed or added.