Frontend Testing Example

qbay/templates/index.html

@@ -5,7 +5,7 @@ <h1>{% block title %}Profile{% endblock %}</h1>
 {% endblock %}
 
 {% block content %}
-<h2 id="welcome-header">Welcome {{ user.name }} !</h2>
+<h2 id="welcome-header">Welcome {{ user.username }} !</h2>
 
 
 <h2>Here are all available products</h2>

qbay_test/conftest.py

@@ -1,4 +1,9 @@
 import os
+import pytest
+import time
+import tempfile
+import threading
+from werkzeug.serving import make_server
 from qbay import app
 
 '''
@@ -25,3 +30,36 @@ def pytest_sessionfinish():
     Do nothing for now
     '''
     pass
+
+
+base_url = 'http://127.0.0.1:{}'.format(8081)
+
+
+class ServerThread(threading.Thread):
+
+    def __init__(self):
+        threading.Thread.__init__(self)
+        # import necessary routes
+        from qbay import controllers
+        self.srv = make_server('127.0.0.1', 8081, app)
+        self.ctx = app.app_context()
+        self.ctx.push()
+
+    def run(self):
+        print('running')
+        self.srv.serve_forever()
+
+    def shutdown(self):
+        self.srv.shutdown()
+
+
+@pytest.fixture(scope="session", autouse=True)
+def server():
+    # create a live server for testing
+    # with a temporary file as database
+    server = ServerThread()
+    server.start()
+    time.sleep(5)
+    yield
+    server.shutdown()
+    time.sleep(2)

qbay_test/frontend/test_registration.py

@@ -0,0 +1,41 @@
+from seleniumbase import BaseCase
+
+from qbay_test.conftest import base_url
+from unittest.mock import patch
+from qbay.models import User
+
+"""
+This file defines all integration tests for the frontend homepage.
+"""
+
+
+class FrontEndHomePageTest(BaseCase):
+
+    def test_login_success(self, *_):
+        """
+        This is a sample front end unit test to login to home page
+        and verify if the tickets are correctly listed.
+        """
+        # open login page
+        self.open(base_url + '/login')
+        # fill email and password
+        self.type("#email", "test0@test.com")
+        self.type("#password", "123456")
+        # click enter button
+        self.click('input[type="submit"]')
+
+        # after clicking on the browser (the line above)
+        # the front-end code is activated
+        # and tries to call get_user function.
+        # The get_user function is supposed to read data from database
+        # and return the value. However, here we only want to test the
+        # front-end, without running the backend logics.
+        # so we patch the backend to return a specific user instance,
+        # rather than running that program. (see @ annotations above)
+
+        # open home page
+        self.open(base_url)
+        # test if the page loads correctly
+        self.assert_element("#welcome-header")
+        self.assert_text("Welcome u0 !", "#welcome-header")
+        # other available APIs

requirements.txt

@@ -1,4 +1,5 @@
 Flask
 Flask-SQLAlchemy
 pytest
-flake8
+flake8
+seleniumbase