Run screenshots action on Github

mullvad · Dec 7, 2023 · 03492b4 · 03492b4
1 parent 72928cd
commit 03492b4
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 10 deletions.
diff --git a/.github/workflows/ios-screenshots b/.github/workflows/ios-screenshots
@@ -0,0 +1,105 @@
+---
+name: iOS screenshots
+on:
+  pull_request:
+    paths:
+      - .github/workflows/ios.yml
+      - ios/.swiftformat
+      - ios/**/*.swift
+      - ios/**/*.xctestplan
+  workflow_dispatch:
+jobs:
+  check-formatting:
+    name: Check formatting
+    runs-on: macos-13-xlarge
+    steps:
+      - name: Install SwiftFormat
+        run: |
+          brew update
+          brew upgrade swiftformat
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check formatting
+        run: |
+          swiftformat --version
+          swiftformat --lint .
+        working-directory: ios
+
+  swiftlint:
+    name: Run swiftlint
+    runs-on: macos-13-xlarge
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Run swiftlint
+        run: |
+          brew install swiftlint
+          swiftlint --version
+          swiftlint --reporter github-actions-logging
+        working-directory: ios
+
+  test:
+    name: Unit tests
+    runs-on: macos-13-xlarge
+    env:
+      SOURCE_PACKAGES_PATH: .spm
+      TEST_ACCOUNT: ${{ secrets.IOS_TEST_ACCOUNT_NUMBER }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Configure cache
+        uses: actions/cache@v3
+        with:
+          path: ios/${{ env.SOURCE_PACKAGES_PATH }}
+          key: ${{ runner.os }}-spm-${{ hashFiles('ios/**/Package.resolved') }}
+          restore-keys: |
+            ${{ runner.os }}-spm-
+
+      - name: Setup go-lang
+        uses: actions/setup-go@v3
+        with:
+          go-version: 1.19.5
+
+      - name: Set up yeetd to workaround XCode being slow in CI
+        run: |
+          wget https://github.com/biscuitehh/yeetd/releases/download/1.0/yeetd-normal.pkg
+          sudo installer -pkg yeetd-normal.pkg -target /
+          yeetd &
+      - name: Configure Xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: '15.0.1'
+      - name: Configure Rust
+        run: rustup target add aarch64-apple-ios-sim x86_64-apple-ios
+
+      - name: Configure Xcode project
+        run: |
+          cp Base.xcconfig.template Base.xcconfig
+          cp App.xcconfig.template App.xcconfig
+          cp PacketTunnel.xcconfig.template PacketTunnel.xcconfig
+          cp Screenshots.xcconfig.template Screenshots.xcconfig
+          sed -i "" "s/MULLVAD_ACCOUNT_TOKEN = /MULLVAD_ACCOUNT_TOKEN = $TEST_ACCOUNT/g" Screenshots.xcconfig
+        working-directory: ios/Configurations
+
+      - name: Bundle
+        run: bundle install
+        working-directory: ios
+
+      - name: Install xcbeautify
+        run: |
+          brew update
+          brew install xcbeautify
+
+      - name: Run screenshot tests
+        run: bundle exec fastlane snapshot
+        working-directory: ios/
+
+      - name: Upload screenshot artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: ios-screenshots
+          path: ios/Screenshots
diff --git a/.github/workflows/ios.yml b/.github/workflows/ios.yml
@@ -83,11 +83,6 @@ jobs:
           cp Screenshots.xcconfig.template Screenshots.xcconfig
         working-directory: ios/Configurations
 
-      - name: Install xcbeautify
-        run: |
-          brew update
-          brew install xcbeautify
-
       - name: Run tests
         run: |
           set -o pipefail && env NSUnbufferedIO=YES xcodebuild \

diff --git a/ios/MullvadVPN.xcodeproj/xcshareddata/xcschemes/MullvadVPNScreenshots.xcscheme b/ios/MullvadVPN.xcodeproj/xcshareddata/xcschemes/MullvadVPNScreenshots.xcscheme
@@ -23,7 +23,7 @@
       </BuildActionEntries>
    </BuildAction>
    <TestAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES"

diff --git a/ios/Screenshots/en-US/iPhone 15-Account.png b/ios/Screenshots/en-US/iPhone 15-Account.png
diff --git a/ios/Screenshots/en-US/iPhone 15-MainSecured.png b/ios/Screenshots/en-US/iPhone 15-MainSecured.png
diff --git a/ios/Screenshots/en-US/iPhone 15-Preferences.png b/ios/Screenshots/en-US/iPhone 15-Preferences.png
diff --git a/ios/Screenshots/en-US/iPhone 15-RelayFilter.png b/ios/Screenshots/en-US/iPhone 15-RelayFilter.png
diff --git a/ios/Screenshots/en-US/iPhone 15-SelectLocation.png b/ios/Screenshots/en-US/iPhone 15-SelectLocation.png
diff --git a/ios/Screenshots/screenshots.html b/ios/Screenshots/screenshots.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>fastlane/snapshot</title>
+    <meta charset="UTF-8">
+    <style type="text/css">
+      * {
+        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+        font-weight: 300;
+      }
+      #sortMenu {
+        overflow: hidden;
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+        display: none;
+      }
+      #sortMenu button {
+        background-color: inherit;
+        float: left;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        padding: 14px 16px;
+        font-size: 17px;
+      }
+      #sortMenu button:hover {
+        background-color: #ddd;
+      }
+      #sortMenu button.active {
+        background-color: #ccc;
+      }
+      .deviceName {
+        display: block;
+        font-size: 30px;
+        padding-bottom: 24px;
+        padding-top: 45px;
+      }
+      .screenshot {
+        cursor: pointer;
+        border: 1px #EEE solid;
+        z-index: 0;
+      }
+      .caption {
+        font-size: 24px;
+        padding-bottom: 24px;
+        padding-top: 30px;
+      }
+      h1, h2 {
+        font-weight: bold;
+      }
+      th {
+        text-align: left;
+      }
+      td {
+        text-align: center;
+        min-width: 200px;
+      }
+      #overlay {
+        position:fixed;
+        top:0;
+        left:0;
+        background:rgba(0,0,0,0.8);
+        z-index:5;
+        width:100%;
+        height:100%;
+        display:none;
+        cursor: zoom-out;
+        text-align: center;
+      }
+      #imageDisplay {
+        height: auto;
+        width: auto;
+        z-index: 10;
+        cursor: pointer;
+      }
+      #imageInfo {
+        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+        color: white;
+        margin: 20px;
+        padding: 10px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 250px;
+        z-index: -1;
+      }
+      #imageInfo:hover {
+        z-index: 20;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="sortMenu">
+      <button id="defaultTab" class="tabLink" onclick="openTab(event, 'byLanguage')">By Language</button>
+      <button class="tabLink" onclick="openTab(event, 'byScreen')">By Screen</button>
+    </div>
+    <div id="byLanguage" class="tabContent"><h1 class="tabTitle">By Language:</h1>
+    </div>
+    <div id="byScreen" class="tabContent"><h1 class="tabTitle">By Screen:</h1>
+    </div>
+    <div id="overlay">
+      <img id="imageDisplay" src="" alt="" />
+      <div id="imageInfo"></div>
+    </div>
+    <script type="text/javascript">
+      var overlay        = document.getElementById('overlay');
+      var imageDisplay   = document.getElementById('imageDisplay');
+      var imageInfo      = document.getElementById('imageInfo');
+      var screenshotLink = document.getElementsByClassName('screenshotLink');
+
+      window.onload = setup();
+
+      function setup() {
+        var i, menu, tabTitles;
+
+        // Since JS is enabled, show sort menu and hide tab titles
+        menu = document.getElementById("sortMenu");
+        menu.style.display = "block";
+
+        tabTitles = document.getElementsByClassName("tabTitle");
+        for (i = 0; i < tabTitles.length; i++) {
+          tabTitles[i].style.display = "none";
+        }
+
+        doClick(document.getElementById("defaultTab"));
+      }
+
+      function getCurrentTab() {
+        var i, tabs;
+        tabs = document.getElementsByClassName("tabContent");
+        for (i = 0; i < tabs.length; i++) {
+          if (tabs[i].style.display != "none") {
+            return i + 1;
+          }
+        }
+        return 1; // fallback
+      }
+
+      function openTab(evt, tabName) {
+        var i, tabContent, tabLinks;
+        tabs = document.getElementsByClassName("tabContent");
+        for (i = 0; i < tabs.length; i++) {
+          tabs[i].style.display = "none";
+        }
+        tabLinks = document.getElementsByClassName("tabLink");
+        for (i = 0; i < tabLinks.length; i++) {
+          tabLinks[i].className = tabLinks[i].className.replace(" active", "");
+        }
+        document.getElementById(tabName).style.display = "block";
+        evt.currentTarget.className += " active";
+      }
+
+      function doClick(el) {
+        if (document.createEvent) {
+          var evObj = document.createEvent('MouseEvents', true);
+          evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+          el.dispatchEvent(evObj);
+        } else if (document.createEventObject) { //IE
+          var evObj = document.createEventObject();
+          el.fireEvent('onclick', evObj);
+        }
+      }
+
+      for (index = 0; index < screenshotLink.length; ++index) {
+        screenshotLink[index].addEventListener('click', function(e) {
+          e.preventDefault();
+
+          var img = e.target;
+          if (e.target.tagName == 'A') {
+            img = e.target.children[0];
+          }
+
+          // beautify
+          var tmpImg = new Image();
+          tmpImg.src = img.src;
+          imageDisplay.style.height     = 'auto';
+          imageDisplay.style.width     = 'auto';
+          imageDisplay.style.paddingTop = 0;
+          if (window.innerHeight < tmpImg.height) {
+            imageDisplay.style.height = document.documentElement.clientHeight+'px';
+          } else if (window.innerWidth < tmpImg.width) {
+            imageDisplay.style.width = document.documentElement.clientWidth;+'px';
+          } else {
+            imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px';
+          }
+
+          imageDisplay.src             = img.src;
+          imageDisplay.alt             = img.alt;
+          imageDisplay.dataset.counter = img.dataset.counter;
+
+          imageInfo.innerHTML          = '<h3>'+img.alt+'</h3>';
+          imageInfo.innerHTML         += decodeURI(img.src.split("/").pop());
+          imageInfo.innerHTML         += '<br />'+tmpImg.height+'&times;'+tmpImg.width+'px';
+
+          overlay.style.display        = "block";
+        });
+      }
+
+      imageDisplay.addEventListener('click', function(e) {
+        e.stopPropagation(); // !
+
+        overlay.style.display = "none";
+
+        img_tab = parseInt(getCurrentTab());
+        img_counter = parseInt(e.target.dataset.counter) + 1;
+        try {
+          link = document.body.querySelector('img[data-tab="'+img_tab+'"][data-counter="'+img_counter+'"]').parentNode;
+        } catch (e) {
+          try {
+            link = document.body.querySelector('img[data-tab="'+img_tab+'"][data-counter="0"]').parentNode;
+          } catch (e) {
+            return false;
+          }
+        }
+        doClick(link);
+      });
+
+      overlay.addEventListener('click', function(e) {
+        overlay.style.display = "none";
+      })
+
+      function keyPressed(e) {
+        e = e || window.event;
+        var charCode = e.keyCode || e.which;
+        switch(charCode) {
+          case 27: // Esc
+            overlay.style.display = "none";
+            break;
+          case 34: // Page Down
+          case 39: // Right arrow
+          case 54: // Keypad right
+          case 76: // l
+          case 102: // Keypad right
+            e.preventDefault();
+            doClick(imageDisplay);
+            break;
+          case 33: // Page up
+          case 37: // Left arrow
+          case 52: // Keypad left
+          case 72: // h
+          case 100: // Keypad left
+            e.preventDefault();
+            document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
+            doClick(imageDisplay);
+            break;
+         }
+      };
+      document.body.addEventListener('keydown', keyPressed);
+    </script>
+  </body>
+</html>
diff --git a/ios/Snapfile b/ios/Snapfile
@@ -1,9 +1,8 @@
 # A list of devices you want to take the screenshots from
 devices([
-  "iPhone 8 Plus", # 5.5"
-  "iPhone 11 Pro Max", # 6.5"
-  "iPhone 14 Pro Max", # 6.7"
-  "iPad Pro (12.9-inch) (2nd generation)",
+  "iPhone SE (3rd generation)",
+  "iPhone 15 Pro",
+  "iPhone 15 Pro Max",
   "iPad Pro (12.9-inch) (6th generation)"
 ])