CI: use circleci (#76)

- Replace travis with circleci
- Update the drivers to its latest versions
- Update selenium pytest
- Test with more versions of sphinx and python
- Inject the extra js data before the head tag, as latest versions of sphinx don't inject jquery with the tag that the test was using.
- Fix tests for firefox (this test has always been failing for me locally before moving to circle)

The problem with the test was that it was assuming that the inner real width/height was the same the given by the test, but this doesn't count with extra space generated for window borders, navigation bar, etc (`set_viewport_size` uses this too).
This was failing only for firefox. Also, the current test was just assuming the margins were the same size (dividing by 2), instead I'm just checking that the margins are almost the same size (since we want to check that the modal is in the middle).

Author: stsewd

.circleci/config.yml

@@ -0,0 +1,59 @@
+version: 2.1
+
+orbs:
+  browser-tools: circleci/[email protected]
+
+commands:
+  run-tox:
+    description: "Run tox"
+    parameters:
+      version:
+        type: string
+      sphinx-version:
+        type: string
+        default: "1,2,3,latest"
+    steps:
+      - browser-tools/install-browser-tools
+      - checkout
+      - run: pip install --user tox
+      - run:
+          name: Test with Chrome driver
+          command: tox -e "<<parameters.version>>-sphinx{<<parameters.sphinx-version>>}" -- --driver Chrome
+      - run:
+          name: Test with Firefox driver
+          command: tox -e "<<parameters.version>>-sphinx{<<parameters.sphinx-version>>}" -- --driver Firefox
+
+jobs:
+  py36:
+    docker:
+      - image: 'cimg/python:3.6-browsers'
+    steps:
+      - run-tox:
+          version: py36
+  py37:
+    docker:
+      - image: 'cimg/python:3.7-browsers'
+    steps:
+      - run-tox:
+          version: py37
+  py38:
+    docker:
+      - image: 'cimg/python:3.8-browsers'
+    steps:
+      - run-tox:
+          version: py38
+  py39:
+    docker:
+      - image: 'cimg/python:3.9-browsers'
+    steps:
+      - run-tox:
+          version: py39
+
+workflows:
+  version: 2
+  tests:
+    jobs:
+      - py39
+      - py38
+      - py37
+      - py36

.travis.yml

@@ -1,5 +1,5 @@
 # Get the latest version from https://sites.google.com/a/chromium.org/chromedriver/
-wget -N https://chromedriver.storage.googleapis.com/85.0.4183.83/chromedriver_linux64.zip -P ~/
+wget -N https://chromedriver.storage.googleapis.com/87.0.4280.88/chromedriver_linux64.zip -P ~/
 unzip ~/chromedriver_linux64.zip -d ~/
 rm ~/chromedriver_linux64.zip
 sudo mv -f ~/chromedriver /usr/local/bin/

scripts/setup_chromedriver.sh

@@ -1,5 +1,6 @@
-wget -N https://github.com/mozilla/geckodriver/releases/download/v0.24.0/geckodriver-v0.24.0-linux64.tar.gz -P ~/
-tar xvzf ~/geckodriver-v0.24.0-linux64.tar.gz -C ~/
-rm ~/geckodriver-v0.24.0-linux64.tar.gz
+VERSION=v0.28.0
+wget -N https://github.com/mozilla/geckodriver/releases/download/${VERSION}/geckodriver-${VERSION}-linux64.tar.gz -P ~/
+tar xvzf ~/geckodriver-${VERSION}-linux64.tar.gz -C ~/
+rm ~/geckodriver-${VERSION}-linux64.tar.gz
 sudo mv -f ~/geckodriver /usr/local/bin/
 sudo chmod +x /usr/local/bin/geckodriver

scripts/setup_geckodriver.sh

@@ -1,21 +1,21 @@
 """UI tests."""
 
-import os
 import json
+import os
 import time
 from urllib import parse
 
-import pytest
 import sphinx
+
+import pytest
 from selenium import webdriver
 from selenium.webdriver.common.by import By
 from selenium.webdriver.common.keys import Keys
 from selenium.webdriver.support import expected_conditions as EC
 from selenium.webdriver.support.ui import WebDriverWait
-
-from tests.utils import InjectJsManager, set_viewport_size, get_ajax_overwrite_func
 from tests import TEST_DOCS_SRC
-
+from tests.utils import (InjectJsManager, get_ajax_overwrite_func,
+                         set_viewport_size)
 
 READTHEDOCS_DATA = {
     'project': 'docs',
@@ -556,24 +556,28 @@ def test_position_search_modal(selenium, app, status, warning):
             (1920, 1080),
         ]
 
-        for window_size in window_sizes:
-            set_viewport_size(selenium, *window_size)
+        for width, height in window_sizes:
+            set_viewport_size(driver=selenium, width=width, height=height)
             modal_location = search_outer.location
             modal_size = search_outer.size
 
+            inner_width, inner_height = selenium.execute_script(
+                "return [window.innerWidth, window.innerHeight];"
+            )
+
             # checking for horizontal position
-            calculated_x = (window_size[0] - modal_size['width'])/2
-            actual_x = modal_location['x']
+            right = inner_width - (modal_size['width'] + modal_location['x'])
+            left =  inner_width - (modal_size['width'] + right)
             assert (
-                abs(actual_x - calculated_x) < 10
-            ), f'difference between calculated and actual x coordinate should not be greater than 10 pixels for {"x".join(map(str, window_size))}'
+                right == pytest.approx(left, 1)
+            ), f'Vertical margins should be the same size for {width}x{height} ({left} / {right}).'
 
             # checking for vertical position
-            calculated_y = (window_size[1] - modal_size['height'])/2
-            actual_y = modal_location['y']
+            bottom = inner_height - (modal_size['height'] + modal_location['y'])
+            top = inner_height - (modal_size['height'] + bottom)
             assert (
-                abs(actual_y - calculated_y) < 10
-            ), f'difference between calculated and actual y coordinate should not be greater than 10 pixels for {"x".join(map(str, window_size))}'
+                top == pytest.approx(bottom, 1)
+            ), f'Horizontal margins should be the same size for {width}x{height} ({top} / {bottom}).'
 
 
 @pytest.mark.sphinx(srcdir=TEST_DOCS_SRC)

tests/test_ui.py

@@ -12,9 +12,9 @@ class InjectJsManager:
     """
     Context manager for injected script tag.
 
-    This will insert ``html_tag`` after the script tag which inserts
-    jquery.js to the file which is passed when entered.
-    And it will remove that line when exiting from it.
+    This will insert ``html_tag`` at the bottom of the <head> tag
+    in the file which is passed when entered.
+    And it will restore its original content when exiting.
     """
     def __init__(self, file, html_tag):
         self._file = file
@@ -25,8 +25,9 @@ def __enter__(self):
             with open(self._file, 'r+') as f:
                 self.old_content = f.read()
                 new_content = self.old_content.replace(
-                    '<script type="text/javascript" src="_static/jquery.js"></script>',
-                    '<script type="text/javascript" src="_static/jquery.js"></script>' + self._script
+                    '</head>',
+                    self._script + '</head>',
+                    1,
                 )
                 f.seek(0)
                 f.write(new_content)
@@ -43,8 +44,10 @@ def set_viewport_size(driver, width, height):
     """Sets the viewport size to the given width and height."""
     window_size = driver.execute_script(
         """
-        return [window.outerWidth - window.innerWidth + arguments[0],
-            window.outerHeight - window.innerHeight + arguments[1]];
+        return [
+            window.outerWidth - window.innerWidth + arguments[0],
+            window.outerHeight - window.innerHeight + arguments[1]
+        ];
         """,
         width,
         height

tests/utils.py

@@ -1,19 +1,19 @@
 [tox]
 minversion = 3.10
 envlist =
-  py{36,37}-sphinx{18}
-  py{36,37}-sphinx{20,21}
+  py{36,37,38,39}-sphinx{1,2,3,latest}
   docs
 skipsdist = True
 
 [testenv]
 description = run the whole test suite
 deps =
   .
-  pytest-selenium==1.17.0
-  sphinx18: Sphinx<1.9
-  sphinx20: Sphinx<2.1
-  sphinx21: Sphinx<2.2
+  pytest-selenium==2.0.1
+  sphinx1: Sphinx<2.0
+  sphinx2: Sphinx<3.0
+  sphinx3: Sphinx<4.0
+  sphinxlatest: Sphinx
 commands = pytest {posargs}
 
 [testenv:docs]