Individual tagpage: Add dropdown to distinct btw info and add test

[CleverFool77]

Fixes #5890 part
The position of dropdown button looks floated to rightmost.
The position will get fixed with the help of one #5902 where the grid system is being applied.

[plotsbot]

	1 Warning
⚠️	There was an error with Danger bot’s Junit parsing: No JUnit file was found at output.xml

	3 Messages
📖	@CleverFool77 Thank you for your pull request! I’m here to help with some tips and recommendations. Please take a look at the list provided and help us review and accept your contribution! And don’t be discouraged if you see errors – we’re here to help.
📖	This pull request doesn’t link to a issue number. Please refer to the issue it fixes (if any) in the body of your PR, in the format: Fixes #123.
📖	#

Screenshots 📸 (click to expand)

5925-test_viewing_question_post.png

5925-test_wiki.png

5925-test_tag_page.png

5925-test_login.png

5925-test_wiki_page_with_inline_grids.png

5925-test_questions.png

5925-test_viewing_the_dropdown_menu.png

5925-test_stats.png

5925-test_tags.png

5925-test_people.png

5925-test_front.png

5925-test_signup.png

5925-test_questions_shadow.png

5925-test_blog.png

5925-test_front_page_with_navbar_search_autocomplete.png

5925-test_viewing_the_dashboard.png

Learn about automated screenshots

Generated by 🚫 Danger

[gautamig54]

Looking great!
@CleverFool77 How do I generate related tags for a particular tag in my local system?

[CleverFool77]

Do you still need help gautami?

[CleverFool77]

Hi @jywarren just pushed one the parts of individual tagoage issue here.

[CleverFool77]

Hi @jywarren I wanted to ask that

  test 'should have active question tab for question' do
    tag = tags(:question)

    get :show, params: { id: tag.name }
    selector = css_select "a[href = '/questions/tag/question:spectrometer']"
    assert_equal selector.size, 1
    selector = css_select '#questions.active'
    assert_equal selector.size, 1
  end

Here We are doing testing by using question.active in tab. But in new design we have dropdown. And unless dropdown menu is being shown, despite of being at questions page, that class won't be active for dropdown-item leading to failure of test. So should I add condition where unless dropdown-menu is having show class, then only the test for question dropdown-item should have active class should be tested ?

[gautamig54]

@CleverFool77 Do you think it's really required? Like, initially(by default) some tab say, wiki will be active and it has nothing to do with the dropdown. In that case, it might fail tests. You then have to add wikis to the tests separately.
What do you think?

[CleverFool77]

But here it's not getting the drop down item as active at all. Because the drop down menu is closed. I provided toggle for drop down, so it closes as we chose one of the items. So i thought maybe we need to check whether dropdown menu is open, and then only check the active class for item.

Or should I remove the toggle for drop down menu . So the menu doesnt get closed itself. Then I can direct check the active class for drop down item

[gautamig54]

I am not sure if we need to do this. I am not good with writing tests so lets wait for @jywarren's view on this one.

[jywarren]

Here We are doing testing by using question.active in tab. But in new design we have dropdown. And unless dropdown menu is being shown, despite of being at questions page, that class won't be active for dropdown-item leading to failure of test. So should I add condition where unless dropdown-menu is having show class, then only the test for question dropdown-item should have active class should be tested ?

Hmm, so isn't the issue perhaps that there is no fixed URL for showing questions, and perhaps there should be? What if the dropdown loads the route https://publiclab.org/questions/tag/pi-camera and then we can ensure that what's being shown is questions? this also most minimally disrupts the current routing setup and tests, even if it does require a page refresh still.

Am I understanding your question correctly?

[CleverFool77]

Here We are doing testing by using question.active in tab. But in new design we have dropdown. And unless dropdown menu is being shown, despite of being at questions page, that class won't be active for dropdown-item leading to failure of test. So should I add condition where unless dropdown-menu is having show class, then only the test for question dropdown-item should have active class should be tested ?

Hmm, so isn't the issue perhaps that there is no fixed URL for showing questions, and perhaps there should be? What if the dropdown loads the route https://publiclab.org/questions/tag/pi-camera and then we can ensure that what's being shown is questions? this also most minimally disrupts the current routing setup and tests, even if it does require a page refresh still.

Am I understanding your question correctly?

Hi @jywarren I didn't understand the point clearly though.
But I thought of a method. I'll remove the test written for tab and write new tests for dropdown directly.

[jywarren]

That sounds great! Thank you!

…

On Mon, Jun 24, 2019 at 3:26 PM Lekhika Dugtal ***@***.***> wrote: Here We are doing testing by using question.active in tab. But in new design we have dropdown. And unless dropdown menu is being shown, despite of being at questions page, that class won't be active for dropdown-item leading to failure of test. So should I add condition where unless dropdown-menu is having show class, then only the test for question dropdown-item should have active class should be tested ? Hmm, so isn't the issue perhaps that there is no fixed URL for showing questions, and perhaps there should be? What if the dropdown loads the route https://publiclab.org/questions/tag/pi-camera and then we can ensure that what's being shown is questions? this also most minimally disrupts the current routing setup and tests, even if it does require a page refresh still. Am I understanding your question correctly? Hi @jywarren <https://github.com/jywarren> I didn't understand the point clearly though. But I thought of a method. I'll remove the test written for tab and write new tests for dropdown directly. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5925?email_source=notifications&email_token=AAAF6JZYO3WD7H5ZTJ5NW23P4ENTJA5CNFSM4HZQK4YKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYN6VFY#issuecomment-505146007>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6JZNRAJ7VQFQIDT7WT3P4ENTJANCNFSM4HZQK4YA> .

[CleverFool77]

HI Jeff,
I was going through the tests and I need some help.
I'm not unable to understand how to check something which is conditional.
As in this, the tab earlier were direct, and so was the test. But now in dropdown, The dropdown-menu dissappears and toggles to button after clicking on one of the items. So If I have to test the item, its necessary to have the dropdown-menu to be shown.
I tried some methods like checking dropdown menu has show class and etc. But they doesn't seem to work. 🤔

[jywarren]

Can u use the dev console elements inspector to see what the code looks like? I mean, here, it seems like we should be able to test against it with css_select. Maybe css_select docs say that the element has to be shown?

If you can't get it to work, you could write a system test for it, where you literally send a click event to open the dropdown. I've done that for some system tests, so it's a backup plan!

[CleverFool77]

But Doesn't css_select work only when the element is being shown not when it's hidden like dropdown menu here ?
I did system test though, to have a screenshot when menu is open and closed.

[CleverFool77]

 FAIL["test_viewing_the_dashboard", #<Minitest::Reporters::Suite:0x00005653ac855f38 @name="DashboardTest">, 129.53698157000002]
 test_viewing_the_dashboard#DashboardTest (129.54s)
        expected to find visible css ".row.header > h1" with text "Dashboard" but there were no matches. Also found "Community research", which matched the selector but not all filters. 
        test/system/dashboard_test.rb:19:in `block in <class:DashboardTest>'

Uhmm !! 🤔 This test seems to failing despite there being no change related to this. The reason for this is that there is no matches for text Dashboard text 🤔

[CleverFool77]

All checks passed 🎉 🎉

[jywarren]

This looks super. Can we wait a little bit so we can merge more of these changes at one time? Thanks!

[jywarren]

Very awesome!

[CleverFool77]

Sure Jeff !!!
Thanks !!

[jywarren]

OK, merged #5948 and this. Now to #5938 !!!

[CleverFool77]

Cool !!