Write tests for SelectedLicense component

[akmadian]

Describe the solution you'd like
e2e and unit tests need to be written for the SelectedLicense.vue component (./src/components/SelectedLicense.vue). Please write e2e tests in a new file named SelectedLicense.js in ./test/e2e/specs/, and unit tests in a new file named SelectedLicense.specs.js in ./test/unit/specs/.

The frameworks being used are (Jest)[https://jestjs.io/] for unit testing, and the (nightwatch.js)[https://nightwatchjs.org/] for e2e testing.

Additional context
Please comment on this issue to tell us that you're interested in working on it before getting started!

[killvung]

I am interested at the issue, but have some questions regarding to the libraries we used for testing. I looked at the example file HelloWorld.spec.js, and learn that the test will mount an actual Vue component then verify the content through querySelector. Thought it's just an example, instead of querying each part for content, can we use
the library vue-test-utils along with jest snapshot? Documentation? This will make the unit tests more efficient. For example this is an example where I shallow render the SelectedLicense component, then capture the snapshot.

import { shallowMount } from '@vue/test-utils'
import SelectedLicense from '@/components/SelectedLicense'

describe('SelectedLicense', () => {
    it('should render correct contents', () => {
        const wrapper = shallowMount(SelectedLicense, {
            propsData: {
                fullLicenseName: '',
                shortLicenseName: ''
            }
        })
        expect(wrapper.element).toMatchSnapshot()
    })
})

snapshot

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`HelloWorld.vue should render correct contents 1`] = `
<div
  id="SelectedLicense"
>
  <div
    class="card chooser-selected"
  >
    <header
      class="card-header"
    >
      <h2
        class="title is-2"
      >
        Selected License
      </h2>
    </header>
     
    <div
      class="card-content"
    >
      <div>
        <licenseiconography-stub
          iconlist=","
        />
         
        <div
          class="selected-license-names"
        >
          <b
            class="selected-license-name"
          >
            
          </b>
           
          <a
            class="help"
            href="chooser.selected_license_link"
          >
            
          </a>
        </div>
      </div>
       
      <licensedescription-stub
        selectedlicense=""
      />
    </div>
  </div>
</div>
`;

[akmadian]

You're all good to start working on this issue! I just pushed some changes, please pull them to your fork before getting started.

RE using vue-testing-utils, I think this should be alright. However, please make sure to not just test the template, also test that the content (license name(s), the link to the license info, etc.) is being tested as well.

Some things to keep in mind:

• For components that require interaction, i.e. the IconSelector component, this will not replace nightwatch e2e testing.
• The component will not work correctly if empty strings are passed as props. The props must be valid license names. I would like to see multiple license names being tested as well, not just cc by :)

[deboragaleano]

Hi @akmadian, I'm an Outreachy applicant and was wondering if this issue has been assigned already. If not, I'b interested in working on it. Thank you!

[killvung]

I only have the discussion about the tools we can use for testing, so I haven't start picking up the issue yet. Feel free to claim it if you wish.

[deboragaleano]

Thanks @killvung, I have just being assigned other issues so I give this back to you :)

[akmadian]

Hey @killvung, I'm going to free this issue up for others to take a shot at since It's been a while since you've posted in this thread, and there's no activity on your fork of the repo.

[obulat]

Hi, @akmadian, can I take up this issue as well?
I'm also an Outreachy applicant, by the way.

[akmadian]

@obulat, I’m going to say no for now to try and give someone else a shot at an issue in the repo since you’ve already done one

[DevchamploO]

Hey @akmadian, I am an Outreachy applicant. Has this issue been assigned, I would like to work on it if available?