Add color checking to peek-bot

Author: Thomas-Boi

.github/scripts/build_assets/selenium_runner/PeekSeleniumRunner.py

@@ -5,17 +5,18 @@
 from build_assets.selenium_runner.enums import IcomoonPage, IcomoonAlerts
 
 class PeekSeleniumRunner(SeleniumRunner):
-    def peek(self, svgs: List[str], screenshot_folder: str):
+    def peek(self, svgs: List[str], screenshot_folder: str, icon_info: dict):
         """
         Upload the SVGs and peek at how Icomoon interpret its SVGs and
         font versions.
         :param svgs: a list of svg Paths that we'll upload to icomoon.
         :param screenshot_folder: the name of the screenshot_folder. 
+        :param icon_info: a dictionary containing info on an icon. Taken from the devicon.json.
         :return an array of svgs with strokes as strings. These show which icon
         contains stroke.
         """
         messages = self.peek_svgs(svgs, screenshot_folder)        
-        self.peek_icons(svgs, screenshot_folder)
+        self.peek_icons(screenshot_folder, icon_info)
         return messages
 
     def peek_svgs(self, svgs: List[str], screenshot_folder: str):
@@ -61,10 +62,11 @@ def peek_svgs(self, svgs: List[str], screenshot_folder: str):
         print("Finished peeking the svgs...")
         return svgs_with_strokes
 
-    def peek_icons(self, svgs: List[str], screenshot_folder: str):
+    def peek_icons(self, screenshot_folder: str, icon_info: dict):
         """
         Peek at the icon versions of the SVGs that were uploaded.
         :param screenshot_folder: the name of the screenshot_folder. 
+        :param icon_info: a dictionary containing info on an icon. Taken from the devicon.json.
         """
         print("Begin peeking at the icons...")
         # ensure all icons in the set is selected.
@@ -85,7 +87,7 @@ def peek_icons(self, svgs: List[str], screenshot_folder: str):
         main_content = self.driver.find_element_by_xpath(main_content_xpath)
         main_content.screenshot(new_icons_path);
 
-        # go downward so we get the oldest icon first
+        # go in reverse order so we get the oldest icon first
         icon_divs_xpath = f'//div[@id="glyphSet0"]/div'
         icon_divs = self.driver.find_elements_by_xpath(icon_divs_xpath)
         icon_divs.reverse()
@@ -98,6 +100,23 @@ def peek_icons(self, svgs: List[str], screenshot_folder: str):
                 Path(screenshot_folder, f"new_icon_{i}.png").resolve()
             )
             icon_div.screenshot(icon_screenshot)
+
+            i += 1
+
+        # test the colors
+        style = "#glyphSet0 span:first-of-type {color: " + icon_info["color"] + "}"
+        script = f"document.styleSheets[0].insertRule({style}, 0)"
+        self.driver.execute_script(script)
+        i = 0
+        for icon_div in icon_divs:
+            if not icon_div.is_displayed():
+                continue
+
+            icon_screenshot = str(
+                Path(screenshot_folder, f"new_colored_icon_{i}.png").resolve()
+            )
+            icon_div.screenshot(icon_screenshot)
+
             i += 1
 
         print("Finished peeking the icons...")

.github/scripts/build_assets/selenium_runner/SeleniumRunner.py

@@ -303,7 +303,7 @@ def edit_svg(self, screenshot_folder: str=None, index: int=None):
         except SeleniumTimeoutException:
             pass # do nothing cause sometimes, the color tab doesn't appear in the site
 
-        if screenshot_folder != None and index != None:
+        if screenshot_folder is not None and index is not None:
             edit_screen_selector = "div.overlay div.overlayWindow"
             screenshot_path = str(
                 Path(screenshot_folder, f"new_svg_{index}.png").resolve()

.github/scripts/icomoon_peek.py

@@ -7,17 +7,17 @@ def main():
     runner = None
     try:
         args = arg_getters.get_selenium_runner_args(peek_mode=True)
-        new_icons = filehandler.get_json_file_content(args.devicon_json_path)
+        all_icons = filehandler.get_json_file_content(args.devicon_json_path)
 
         # get only the icon object that has the name matching the pr title
-        filtered_icon = util.find_object_added_in_pr(new_icons, args.pr_title)
+        filtered_icon = util.find_object_added_in_pr(all_icons, args.pr_title)
         check_devicon_object(filtered_icon)
         print("Icon being checked:", filtered_icon, sep = "\n", end='\n\n')
 
         runner = PeekSeleniumRunner(args.download_path, args.geckodriver_path, args.headless)
         svgs = filehandler.get_svgs_paths([filtered_icon], args.icons_folder_path, True)
         screenshot_folder = filehandler.create_screenshot_folder("./") 
-        svgs_with_strokes = runner.peek(svgs, screenshot_folder)
+        svgs_with_strokes = runner.peek(svgs, screenshot_folder, filtered_icon)
         print("Task completed.")
 
         message = ""
@@ -36,6 +36,7 @@ def main():
 def check_devicon_object(icon: dict):
     """
     Check that the devicon object added is up to standard.
+    :param icon: a dictionary containing info on an icon. Taken from the devicon.json.
     :return a string containing the error messages if any.
     """
     err_msgs = []

.github/workflows/post_peek_screenshot.yml

@@ -72,6 +72,14 @@ jobs:
           path: ./screenshots/new_icon_*.png
           client_id: ${{secrets.IMGUR_CLIENT_ID}}
 
+      - name: Upload zoomed in screenshot of the colored icons gotten from the artifacts 
+        id: colored_icons_detailed_img_step
+        uses: devicons/[email protected]
+        if: env.PEEK_STATUS == 'success' && success()
+        with:
+          path: ./screenshots/new_colored_icon_*.png
+          client_id: ${{secrets.IMGUR_CLIENT_ID}}
+
       - name: Comment on the PR about the result - Success
         uses: jungwinter/comment@v1 # let us comment on a specific PR
         if: env.PEEK_STATUS == 'success' && success()
@@ -84,15 +92,18 @@ jobs:
             Here are the SVGs as intepreted by Icomoon when we upload the files:
             {0}
 
-            Here are the zoomed-in screenshots of the added icons as **SVGs**. This is how Icomoon intepret the uploaded SVGs:
+            Here are the zoomed-in screenshots of the added icons as **SVGs**:
             {1}
 
             Here are the icons that will be generated by Icomoon:
             {2}
 
-            Here are the zoomed-in screenshots of the added icons as **icons**. This is what the font will look like:
+            Here are the zoomed-in screenshots of the added icons as **icons**:
             {3}
+
+            Here are the colored versions:
             {4}
+            {5}
 
             The maintainers will now check for:
             1. The number of Glyphs matches the number of SVGs that were selected. 
@@ -103,7 +114,7 @@ jobs:
 
             Thank you for contributing to Devicon! I hope that your icons are accepted into the repository.
 
-            Note: If the images don't show up, it's probably because it has been autodeleted by Imgur after 6 months due to our API choice.
+            Note: If the images don't show up, it has been autodeleted by Imgur after 6 months due to our API choice.
 
             Cheers, 
             Peek Bot :blush:
@@ -119,6 +130,7 @@ jobs:
                 join(fromJSON(steps.svgs_detailed_img_step.outputs.markdown_urls), '  '),
                 fromJSON(steps.icons_overview_img_step.outputs.markdown_urls)[0],
                 join(fromJSON(steps.icons_detailed_img_step.outputs.markdown_urls), '  '),
+                join(fromJSON(steps.colored_icons_detailed_img_step.outputs.markdown_urls), '  '),
                 steps.err_message_reader.outputs.content
               ) 
             }}