Add `attributes` on `StepOptionsButton`

Open
#623 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Start by locating the StepOptionsButton entry point and tracing how tour buttons are generated. Verify how the requested attributes option should be represented, then confirm that a data-testid supplied in a step appears on the generated button and that existing button behavior remains unchanged.

Written by the indexing model from the issue text.

Description

Hello !
I would like to be able to add a data-testid attribute on the generated buttons for the tour, in order to ease the E2E tests of my application.
My code would look like

        const steps: Step.StepOptions[] = [
            {
                id: TourService.STEP_0_WELCOME,
                text: `<h1>Welcome !</h1>
                        <div>Let us take you on a quick tour.</div>`,
                buttons: [
                    {
                        classes: 'tour-button-secondary',
                        text: 'Skip tutorial',
                        attributes: {'data-testid', 'tutorial-button-skip'},
                        action: skip,
                    },
                    {
                        classes: 'tour-button-primary',
                        text: 'Next',
                        attributes: {'data-testid', 'tutorial-button-next'},
                        action: next,
                    },
                ],
            },
         }

Do you think this is a feature you could add ?

Dominant language
TypeScript
Stars
238
Forks
50
Avg merge
1m
Merged PRs (30d)
9

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from shipshapecode/angular-shepherd

All issues in shipshapecode/angular-shepherd

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.