search

alexkramer / force-vue

Simple VueJs application which integrates with the Star Wars API (SWAPI)
http://alexckramer.com/force-vue
2 stars 21 forks source link

Natalie Pavlova test task #69

Open Yupanka opened 7 years ago

Yupanka commented 7 years ago

Hi there! This is Nataliia Pavlova's test task for QA position (I write it just because my email and GitHub name are different from what stays in resume). What's inside Most of this PR is about Contact page. I've added basic form validation (using Vee Validate) and Clear button. Submit button just does the validation and displays alert if the input is valid. And I've added tests (e2e) to verify how it works. All my e2e tests are for the Contact page - some for the existing functionality, some for the new part (navigation, input validation for different sets of values, clear the form, submit validation). For this purpose, I've added contact-data.js and moved there all test data I use to test the form and input validation. For the e2e tests, in the About and Contact templates I've added data-qa attribute to the h2 tags - for locating these headings and for consistency with Help and Privacy pages which do have those. At the end of this PR there are a couple unit tests for Person page rendering I've added to the ViewPerson.spec.js.

jsnwu commented 7 years ago

The contacttest fail at my local machine. The page render differently on different screen size. Test fail because the contact doesn't show up in a smaller windows. Try to find a way to expand the window size or maximize it.

Yupanka commented 7 years ago

Ok, will take a look tomorrow. Thank you!

On May 11, 2017 17:58, "Jason Wu" notifications@github.com wrote:

The contacttest fail at my local machine. The page render differently on different screen size. Test fail because the contact doesn't show up in a smaller windows. Try to find a way to expand the window size or maximize it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/alexkramer/force-vue/pull/69#issuecomment-300928552, or mute the thread https://github.com/notifications/unsubscribe-auth/ARjADqTVOi8ZDMtvi6pl59KP6IZ-zhnMks5r44R3gaJpZM4NWwIz .

Yupanka commented 7 years ago

@jsnwu thank you for the update, I obviously missed the small screen size case last time. The easiest way to fix the issue with the failing tests is to use resizeWindow(), but I think it's not a good option for the testing unless we have definite requirements about the minimal supported screen size. I think it's much better approach if we make the tests working on any screen size, and the actual screen size we want to run them with would be set in the configurations of test runner. So, my approach is first to verify if the sandwich button is displayed, and if it is, click it and access the Contact page from the side menu for the small screen size. If the button is not displayed, we click the visible menu item. With this approach I experienced another problem: that in small screen the menu is not hiding when the item is selected. It's just displaying both the menu and faded page until you click outside the menu. It's an issue of MDL used with Vue and Angular. I've fixed this issue adding method toggleMenu() to the app component. So, now we can run the tests for the Contact page on any screen size. On my machine the tests pass. But in the GitHub test app they still fail - and the other e2e tests, too. I've played with different options (as you can see in the amount of commits), and finally I've added the test that verifies that the basic element <.mdl-layout> is actually present. But this test is also failing in CircleCi. I've attached the screenshot showing that the tests pass on my machine. trace

Yupanka commented 7 years ago

I'm trying to make e2e tests pass on CircleCi, and added file atesttest.js which contains two basic tests to verify that the page is actually loading. One of the tests verifies title, another one verifies that <.mdl-layout> element is present. Both pass on my machine title ... and fail in CircleCi: no title Seems like the 5 seconds timeout is not enough to load the page. On my machine it takes about 30 seconds to load the page first time.

jsnwu commented 7 years ago

The problem is related to the chromedriver package version and the chrome version on the CircleCI. A quick fix for this problem is to lock the chromdriver version to 2.27.4.

Update the package.json file to use: "chromedriver": "2.27.4",

jsnwu commented 7 years ago

The remain issue is the clearValue function doesn't remove the text in the input field. It seems it's required to click on the item before the clearValue.

Yupanka commented 7 years ago

@jsnwu I'm working on it right now. Thank you very much!

Yupanka commented 7 years ago

Ok, I've read that clearValue() doesn't open properly in some browsers, so I've used setValue to delete input and then to enter the new. Not very elegant solution, but it works. For future I'd create a custom command, to make this clear - send keys operation more elegant. I've also got the warning that two elements with attribute href="#contact" were visible. So, I've changed the locators using parent element, to avoid the warning.