A Problem Found With FCC's Project User Stories

Contributors
1

Hello everyone! I was developing my Personal Portfolio project. It is not complete yet, but just to be curious, I ran the challenge tests. And then, I noticed a mistake in one of the user stories:

image
image1470Ă—376 20.2 KB

It says that I should have a link with the id of profile-link. Now, what if I have multiple social profile links? I cannot use the id attribute because id attributes should be unique. Instead, I need to use the class attribute.

I know I can add that id attribute for one link only and pass the tests, but I think this should be changed to class.

Sorry if this is a stupid topic.

2

If you read the test description it states

My portfolio should have […] opens my Github or FCC profile

Meaning that, the author of the test has intended the ID to be quite specific: to be used in one and one case only.

This doesn’t limit you in the usage of multiple ids, just “locks” profile-link one to a specific case.
You can have as many as you want:

fb-link
twitter-link
so-link

Just remember to reserve profile-link for the required use case.
Unfortunately this is a trade-off when designing tests (and API in general), so I believe is a compromise between enforcing a user to use a specific ID, but still give the freedom of choice on any other design implementation.

And that’s what is expected when following Test Driven Development principles:

[…] a differentiating feature of test-driven development versus writing unit tests after the code is written: it makes the developer focus on the requirements before writing the code

1 Like
3

Thanks @Marmiz for your reply. After all, I didn’t report this as a bug, but just for convenience. That’s all.

Is that why they wrote id instead of class?

4

No worries @paulsonstech, you actually raised a valid argument.

You can take a look at the test source code if you like (being OS) here, by the look of it seems that it’s not really testing the final url:

it(`My portfolio should have a link with an id of
      "profile-link", which opens my GitHub or FCC profile in a new tab.`, function () {
        const profileLink = document.getElementById('profile-link');

        assert.isNotNull(profileLink);

        assert.equal(profileLink.nodeName, 'A');

        assert.strictEqual(
          profileLink.hasAttribute('target'),
          true,
          '#profile-link should have a target attribute '
        );

        assert.equal(
          profileLink.target,
          '_blank',
          'Clicking #profile-link should cause a link to open in a new tab '
        );
      });

But looking at the whole test suite looks like the final goal is to have the user practice different concept, than to have the best possible design for it.
Hope it makes more sense now :slight_smile:

1 Like
5

Ok @Marmiz. Thanks for your clear explanation.