Add unit and e2e tests for AttributionDetailsStep component

[akmadian]

Unit and e2e tests need to be written for the AttributionDetailsStep component. Unit tests are done with Jest, and e2e tests are done with nightwatch.

Please remember to test the following things:

• That individual parts of the component are present when appropriate. (unit and e2e)
• That any computed props and methods work properly, if there are any. (unit)
• Any common interactions between the user and component, if there are any. (e2e)
• Any other functionality unique to the component being tested!

Additional Context

• ./src/components/AttributionDetailsStep.vue
• This repo's testing README
• Vue's guide on unit testing
• Vue's guide on unit testing with VueX

[JackieBinya]

Hello @akmadian
May I please work on this issue.

[akmadian]

Hey @JackieBinya, go ahead!

[JackieBinya]

Hello @akmadian,

The problem

After finishing my project set-up as well as successfully running the project on the development server. I ran the command npm run test:unit on the terminal so as to run the unit tests, please find attached a screenshot for the message I got on the terminal which, in essence, says there are no tests found in the project as expected.

My questions are:

• From the project setup I am assuming all unit tests I write are supposed to be written in the ~/tests/unit directory, is that the case?
• If not please advise where I should write the tests.

[obulat]

That's right, currently there are no tests in the project. The tests you write should be in ~/tests/unit/specs/components/ directory. So, your specific test should be in ~/tests/unit/specs/components/AttributionDetailsStep.spec.js file.

[JackieBinya]

Hello
I have encountered a blocker whilst trying to write e2e tests for the AttributionDetailsStep Component.
Most of the components that precede the AttributionDetailStep component do not have unique identifiers/selectors hence its making it impossible to mimic user behavior.
I will attach a screenshot using the FirstStep Component to further explain what I am trying to achieve.

I want mimic a user clicking Yes. I know which license I need radio button using Nightwatchjs. But there is no unique identifier/selector that currently will enable me to do that.
The .b-radio class selects both No(Line 30) and Yes(Line 17) radio buttons. This is as seen on the Chrome Dev Tools. The selector is not unique.
Is there possible a work-around I can use to access the radio button.
My suggestion was to use data attributes i.e data-e2e='yes-First-Step'

[JackieBinya]

Hello
I have finished writing both unit (commit 4075fd8)and e2e (commit 3db1c5e) tests for the AttributionDetailsStep Component.

I hereby request a code review.

The coverage for the unit tests is 100%
As for the e2e tests:

• I mainly focused on checking that different elements of the form where visible when the form is loaded. My reason was that there isn't much to test when user submits input as the data is automatically loaded i.e. there isn't any page redirection or message pop up after say a successful submission.
• To run the e2e tests exclusive to the component, on the terminal run the command:
  npm run test:e2e -- --tag att