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

Windows Environment Setup #67

Closed YuriyVoloshin closed 7 years ago

YuriyVoloshin commented 7 years ago

Hello Gaurav and Alex,

On the GitHub page a lot of information is missing. I didn’t find any info about:

  1. Environment (OS, Browser type and version)
  2. Testing tool(s) installation/configuration instructions
  3. Application functional spec.

My comments:

  1. After doing a manual test, I can say this application is not ready for automation development
    a. Combo box functionality is not finished yet, but even right now I can see a bug there (when selecting from Person to any other data such as Starship or Planet and return to Person, text grid disappears. The only way to see the grid is you have to refresh the home page). b. Submit button on Contact page is not working when I used Firefox browser (52.0.2 “32-bit version”). With IE browser, submit button is clickable, but question is what the expectations for it are. I expected a message on the same page like: “Your request is submitted” or something similar. Right now when you click on this button, the current page closes and the Home page appears. c. When you navigate from page to page, the application menu such as “Home”, “About” and “Contact” is not highlighted.

If you don’t have a testing tool installation/configuration instruction, please open link, listed below and let me know if this installation/configuration steps match what you use in your environment. https://github.com/dwyl/learn-nightwatch

alexkramer commented 7 years ago

Since you mentioned IE I am going to go ahead and assume you are working on a Windows machine. In order to make this project work you will need to install Nodejs (npm comes bundled with Nodejs). There is a windows installer here: https://nodejs.org/en/download/

After that, the instructions to run the application as well as to run the end to end tests are in the project readme. (I am trying to resurrect my windows laptop to see if I can try this project out from there but I think the latest Windows 10 update may have KO'd it)

I would recommend writing your tests to run against the Chrome browser although on my machine I was able to verify that the functionality works across Chrome, Safari, and Firefox. If you find issues with how the application works in a specific browser/OS configuration feel free to log an issue ticket.

And here is my attempt to address your three comments: a) That is interesting. I can see funny styling with the combo box but that bug doesn't appear for me. Perhaps its an IE issue? Feel free to log that! b) The contact page button is not hooked up to anything so clicking the button is not going to do anything. c) Good catch. I also see no highlighting on the active link. Feel free to log that!

alexkramer commented 7 years ago

Update: I was able to resurrect my windows machine by doing a fresh windows install. I then installed the latest version of nodejs and I was able to run the application but it resulted in a blank screen across all browsers. Diffing the webpack settings with this application with a clean one created using vue-cli did not raise any clear issues. However I was able to see the issues with the live application in IE Edge. That is not surprising to me, the MDL library we are using is the most likely culprit. I have wanted to rip that out and replace it with Bootstrap but haven't had the time to do that. At the moment I am trying to force my computer to update the Windows 10 Creator's Update so I can get the Ubuntu bash shell. I know that feature is buggy but curious to see how the application behaves using the latest OS version and a linux shell.

alexkramer commented 7 years ago

After another marathon of installing I got it so I am running the latest Windows 10 which includes Ubuntu Bash -- I can't tell you how many years I have been waiting for a supported linux shell. 🎆 Cygwin only worked so-so. Anyway all that did was provide me with some command line tools I am more comfortable with. I have traced the issue to setting the Http options. Switching the way I included vue resource fixed the blank page issue and now the application runs correctly on Chrome on Windows 10.

alexkramer commented 7 years ago

I am closing this as I am able to run the application using npm run dev on Windows. As I mentioned feel free to log issues for the browser incompatibilities as well as the active link highlighting.