Website and database test and release

Test environments

• PC
  • 360 browser
  • Baidu browser
  • Chrome
  • Edge
  • Firefox
  • IE 11, IE 10, IE 9
  • Opera
  • QQ browser
  • Sogou browser
  • UC browser
• macOS (Follow these steps to install macOS VM on Windows PC: https://techsviewer.com/install-macos-sierra-vmware-windows)
  • Chrome
  • Firefox
  • Safari
• Ubuntu (Install Ubuntu VM on Windows PC)
  • Chrome
  • Firefox
• Android
  • Chrome
  • Edge
  • Firefox
  • Opera
• iOS
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

All the above browsers should be tested because

• They are different. Event one browser, like Chrome, works differently on different platforms.
• I have very carefully designed, very strict security policies in both database and website code, to prevent data and image theft/crawling, when the browsers are upgraded, they may stop working. For example, 360 browser recently has a new way to handle cookies, which is different from most of the other browsers. This problem was identified in tests, and the code is updated to adapt to the new behavior of 360 browser.

Test cases

1. Verify the web page visibility and adaptability.

   1. It should be rendered correctly.
   2. All elements in all sections (intro, search, articles, news, videos, wechat, about, contact, donation, contributors) should be displayed, organized, and aligned.
   3. When resizing the browser, all elements in all sections should adapt to all screen sizes.

2. Verify all texts.

   1. All text should be correct with no typo, and specific.

3. Verify all images.

   1. All images should be correct and up to date, especially the QR codes.

4. Verify the navigation.

   1. The navigation bar, logo, navigation menu, navigation items, and search should be displayed correctly.
   2. when resizing the browser, the navigation bar, logo, navigation menu, navigation items, and search should be adaptive to all screen sizes.
   3. The navigation menu and items should be expanded and collapsed correctly.
   4. When clicking each navigation item, the web page should navigate to the correct target with a smooth animation, and the hash in URI should be updated to the correct value (#home, #research, #news, #videos, #wechat, #about, #contact, #donation, #contributors), and the clicked navigation item should be highlighted.
   5. When scroll up and down the web page, the hash in URI should be automatically updated to the correct value (#home, #research, #news, #videos, #wechat, #about, #contact, #donation, #contributors), and the corresponding navigation item should be highlighted.

5. Verify the main search.

   1. Initially, the search text box should have the default character 车. The the web page should display the result for 车.
   2. The search text box should validate the input. The input must be a single character and must be Chinese character. If not, a proper error message should be displayed.
   3. If the the search text box has valid value, when pressing enter or clicking the search button, it should start the search. The search button should be disabled and not clickable, and display a loading indicator.
   4. When the search is done, the search button should be enabled. If there is any error, a proper error message should be displayed. If not, the search result should be displayed.
   5. when the search is done, the page should scroll down to error message or search result automatically with smooth animation. The hash in URI should be updated to the searched Chinese character, like \#车 or '#%E8%BD%A6'.
   6. Change the hash in URI to Chinese character, like \#人 or \#%E4%BA%BA, and press enter, the specified Chinese character should be searched.

6. Verify the search result.

   Use test characters in https://github.com/Dixin/Etymology/issues/83
   1. The etymology result should be correct.
   2. The Unicode hyperlinks should work correctly.
   3. The oracle, bronze, seal, liushutong characters should be displayed correctly with picture and id label.
   4. when resizing the browser, the layout of etymology and all characters should be adaptive to all screen sizes.

7. Verify the high quality image dialog.

   1. Clicking the image or id label, a modal dialog should pop up. A large smooth character should be displayed correctly in the dialog.
   2. When resizing the browser, the dialog layout should be adaptive in the page. The large character image should be adaptive in the dialog.
   3. The dialog should be closed When clicking the space outside the dialog, or clicking the close button at the top of the dialog, or clicking the close button at the bottom of the dialog.
   4. When clicking a different character, the dialog should pop up and show the different character.

8. Verify the search in the navigation bar.

   1. The text box should have the same search behavior as the main search.
   2. The search button should have the same search behavior as the main search.
   3. The search button should have synchronized status as the main search. when clicking either search button, both search buttons should be disabled and show the loading indicator. When the search is done, both search buttons should be enabled.
   4. The text box should be synchronized with the main search. When clicking either search button, the searched Chinese character should be displayed in both text boxes.

9. Verify the random character button.

   1. When clicking this button, it should pop a character in the main search text box as well as the text box in navigation bar, and display the result.
   2. The character should be commonly used character.
   3. The search result should have at least one oracle, at least one bronze, at least one seal, at least one liushutong.

10. Verify the hyperlinks.

    1. All hyperlinks (articles, wechat posts, news, videos, emails) should all work and point to the right target.

11. Verify the articles.

    1. Each article's layout and style should be correct.
    2. Each article should display header and footer correctly.
    3. Clicking the header should navigate back to home page correctly.
    4. When resizing the browser, the article should be adaptive to all screen sizes.
    5. The article URI should be consistent with the the article title texts, e.g. why-study-chinese-etymology.

Release steps

1. Review GitHub issues, make sure all issues relevant to the release are closed properly.
2. Take a snapshot of development database, deploy as staging.
3. Deploy code to staging website, connected with staging database.
4. Test staging website with Chrome, using the above test cases.
5. Repeat the tests in 360 browser, Baidu browser, Edge, Firefox, IE 11, IE 10, IE 9, Opera, QQ browser, Safari, Sogou browser, UC browser.
6. If there is any issue, fix the issue, and repeat from step 1. If everything is good, swap (staging website + staging database) with (production website + production database).
7. Delete previous production website, delete previous production database. They will keep generating charges if not deleted.