added comments, moved duplicate code into filters, removed unneeded code

Enterprise-CMCS · Feb 25, 2025 · 4ed4abe · 4ed4abe
1 parent cfa09dd
commit 4ed4abe
Show file tree

Hide file tree

Showing 20 changed files with 281 additions and 98 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    // Liquid formatter
+    "sissel.shopify-liquid",
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "[jekyll]": {
+      "editor.formatOnSave": false,
+      "editor.wordWrap": "on",
+      "editor.renderWhitespace": "all",
+      "editor.acceptSuggestionOnEnter": "off"
+  },
+  "[liquid]": {
+    "editor.defaultFormatter": "sissel.shopify-liquid",
+    "editor.formatOnSave": false
+  },
+  "files.associations": {
+      "*.md": "liquid",
+      "*.markdown": "liquid",
+      "*.html": "liquid",
+      "*.liquid": "liquid",
+  },
+}
diff --git a/_includes/coverage-summary.html b/_includes/coverage-summary.html
@@ -1,35 +1,42 @@
 {% if include.total %}
+  <!-- if total was included, display the summary -->
   <div class="test-coverage-report-container">
+    <!-- loop through the keys in total -->
     {% for stat in include.total %}
+      <!-- assign the key to name -->
       {% assign name = stat[0] %}
+      <!--
+        the coverage summary includes a field called "branchesTrue", but we want to skip it because it's a duplicate of "branches"
+      -->
       {% if name != "branchesTrue" %}
-      <div class="stat-container">
-        <div class="stat-header">
-          {{ name | capitalize }}
+        <!-- assign the value to values -->
+        {% assign values = stat[1] %}
+        <div class="stat-container">
+          <div class="stat-header">
+            <!-- Liquid provides a helper method to capitalize text -->
+            {{ name | capitalize }}
+          </div>
+          <!-- use the custom coverage_status filter with the stat name to get the correct styling for the percent -->
+          <div class="stat-percent coverage-{{ values.pct | coverage_status: name }}">
+            <!-- Liquid provides a helper method for rounding floats to a number -->
+            {{ values.pct | round: 1 }} %
+          </div>
+          <div class="stat-fraction">
+            {{ values.covered }} / {{ values.total }}
+          </div>
         </div>
-        {% capture coverage-class %}
-          {% if stat[1].pct >= site.data.coverage.thresholds.pass[name] %}
-            coverage-success
-          {% elsif stat[1].pct >= site.data.coverage.thresholds.fail[name] %}
-            coverage-warn
-          {% else %}
-            coverage-failure
-          {% endif %}  
-        {% endcapture %}
-        <div class="stat-percent {{ coverage-class }}">
-          {{ stat[1].pct | round: 1 }} %
-        </div>
-        <div class="stat-fraction">
-          {{ stat[1].covered }} / {{ stat[1].total }}
-        </div>
-      </div>
       {% endif %}
     {% endfor %}
   </div>
   <div class="coverage-links">
-    <a href="{{ "/coverage" | relative_url }}" target="_blank">View Full Report</a>
-    <a rel="noopener" href="https://codeclimate.com/github/Enterprise-CMCS/macpro-mako" target="_blank">Code Climate</a>
+    <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
+    <a href="{{ '/coverage' | relative_url }}" target="_blank">View Full Report</a>
+    <a
+      rel="noopener"
+      href="https://codeclimate.com/github/Enterprise-CMCS/macpro-mako"
+      target="_blank">Code Climate</a>
   </div>
 {% else %}
+  <!-- if the total was not included, display a message that there is nothing to display -->
   <div>There is currently no coverage report for {{ include.branch }}.</div>
 {% endif %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,4 +1,5 @@
 <head>
+  <!-- this section is standard to the minima theme -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,11 +9,17 @@
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
+  <!-- end standard header -->
 
+  <!-- this section will loop through the values set in custom_css and add those spreadsheets to the headers -->
   {% if page.custom_css %}
+    <!-- if the page includes a front matter definition for custom_css -->
     {% for stylesheet in page.custom_css %}
-    {% capture link %}/assets/css/{{ stylesheet }}.css{% endcapture %}
-    <link rel="stylesheet" href="{{ link | relative_url }}">
+      <!-- loop through all of the custom_css values -->
+      <!-- capture creates a link using the values in the variables -->
+      {% capture link %}/assets/css/{{ stylesheet }}.css{% endcapture %}
+      <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
+      <link rel="stylesheet" href="{{ link | relative_url }}">
     {% endfor %}
   {% endif %}
 

diff --git a/_includes/img/error.svg b/_includes/img/error.svg
diff --git a/_includes/img/failed.svg b/_includes/img/failed.svg
diff --git a/_includes/img/passed.svg b/_includes/img/passed.svg
diff --git a/_includes/playwright-branch-list.html b/_includes/playwright-branch-list.html
@@ -1,24 +1,28 @@
 {% if site.data.playwright-reports.branches.size > 0 %}
+  <!-- if there are branches in the data, display the summaries for the branches -->
   {% for branch in site.data.playwright-reports.branches %}
+    <!-- loop through the branches and assign the key as the branch_name -->
     {% assign branch_name = branch[0] %}
+    <!-- capture creates a link using the branch_name -->
     {% capture branch_link %}/playwright-reports/branches/{{branch_name}}{% endcapture %}
     <div class="branch-header">
-      <h3>{{branch_name}}</h3>
+      <h3>{{ branch_name }}</h3>
+      <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
       <a href="{{ branch_link | relative_url }}">View Previous Runs</a>
     </div>
 
-    {% assign run_ids = "" | split: "," %}
-    {% for run in site.data.playwright-reports.branches[branch_name] %}
-      {% assign run_id = run[0] %}
-      {% assign run_ids = run_ids | push: run_id %}
-      {% endfor %}
-    {% assign latest_run_id = run_ids | last %}
-
+    <!-- use the custom key_list filter to get all of the run_ids in the branch, then reverse the list and get the first one -->
+    {% assign latest_run_id = site.data.playwright-reports.branches[branch_name] | key_list | reverse | first %}
     {% assign data = site.data.playwright-reports.branches[branch_name][latest_run_id] %}
+    <!-- capture creates a link to the actual report file-->
     {% capture report_link %}/playwright-reports/branches/{{branch_name}}/{{latest_run_id}}.html{% endcapture %}
-    {% assign relative_report_link = report_link | relative_url %}
-    {% include playwright-summary.html branch=branch_name run_id=latest_run_id data=data url=relative_report_link %}
+    <!--
+      Include the html snippet in `_includes/playwright-summary.html` with the parameters the `branch_name` variable as `branch`,
+      the `latest_run_id` variable as `run_id`, the `data` variable as `data`, and the `report_link` variable as `url`.
+    -->
+    {% include playwright-summary.html branch=branch_name run_id=latest_run_id data=data url=report_link %}
   {% endfor %}
 {% else %}
+  <!-- if there are no branches in the data, display a message that there is nothing to display -->
   <div>There are currently no branch reports.</div>
 {% endif %}
diff --git a/_includes/playwright-summary.html b/_includes/playwright-summary.html
@@ -1,50 +1,59 @@
 {% if include.data %}
-  {% capture icon %}
-    {% if include.data.stats.unexpected > 0 %}
-      {% include /img/failed.svg %}
-    {% elsif include.data.errors.size == 0 %}
-      {% include /img/passed.svg %}
-    {% else %}
-      {% include /img/error.svg %}
-    {% endif %}
-  {% endcapture %}
-  {% assign total = include.data.stats.expected | plus: include.data.stats.unexpected | plus: include.data.stats.skipped %}
+  <!-- use the custom normalize_playwright filter to get the status, total number of tests, errors, and test statistics from the data -->
+  {% assign results = include.data | normalize_playwright %}
+  <!-- if the data was included, display the summary -->
   <div class="test-report-container">
     <div class="report-header">
+      <!-- if the run_id was included, display it in the header of the summary -->
       {% if include.run_id %}
-      {% capture run_link %}
-        {{ site.github_url }}/actions/runs/{{ include.run_id }}
-      {% endcapture %}
+        <!-- capture also creates strings with variables, create the url back to the run -->
+        {% capture run_link %}{{ site.github_url }}/actions/runs/{{ include.run_id }}{% endcapture %}
+        <!-- no relative_url necessary here because the link it outside of the app -->
         <span class="report-run">Run Id: <a href="{{ run_link }}" target="_blank">{{ include.run_id }}</a></span>
       {% else %}
         <span class="report-run"></span>
       {% endif %}
-      <span class="report-time">Run At: {{ include.data.stats.startTime | date: "%Y-%m-%d %H:%M %Z" }}</span>
+      <!-- Liquid provides a helper method for formatting dates -->
+      <span class="report-time">Run At: {{ results.startTime | date: "%Y-%m-%d %H:%M %Z" }}</span>
     </div>
     <div class="report-body">
-      {{ icon }}
+      <!-- style the icon according to the report status and use the custom status_icon filter to return the correct svg -->
+      <span class="status-icon status-{{results.status}}">{{ results.status | status_icon }}</span>
       <div class="results">
+        {% if results.status == "error" %}
+          <!-- if there are errors, there won't be any test statistics, so only display the errors -->
+          <div class="report-errors">
+          {% for error in results.errors %}
+            <!-- loop through the errors and display the messages -->
+            <div class="report-error">{{ error.message }}</div>
+          {% endfor %}
+          </div>
+        {% else %}
+        <!-- if there are no errors, display the test statistics -->
         <div class="report-stats">
           <div class="stat-item">
-            All <span class="stat-count">{{ total }}</span>
+            All <span class="stat-count">{{ results.total }}</span>
           </div>
           <div class="stat-item">
-            Passed <span class="stat-count">{{ include.data.stats.expected }}</span>
+            Passed <span class="stat-count">{{ results.expected }}</span>
           </div>
           <div class="stat-item">
-            Failed <span class="stat-count">{{ include.data.stats.unexpected }}</span>
+            Failed <span class="stat-count">{{ results.unexpected }}</span>
           </div>
           <div class="stat-item">
-            Flaky <span class="stat-count">{{ include.data.stats.flaky }}</span>
+            Flaky <span class="stat-count">{{ results.flaky }}</span>
           </div>
           <div class="stat-item">
-            Skipped <span class="stat-count">{{ include.data.stats.skipped }}</span>
+            Skipped <span class="stat-count">{{ results.skipped }}</span>
           </div>
         </div>
-        <span class="report-link"><a href="{{ include.url }}" target="_blank">View Full Report</a></span>
+        {% endif  %}
+        <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
+        <span class="report-link"><a href="{{ include.url | relative_url }}" target="_blank">View Full Report</a></span>
       </div>
     </div>
   </div>
 {% else %}
+  <!-- if the data was not included, display a message that there is nothing to display -->
   <div>There is currently no report for {{ include.branch }}</div>
 {% endif %}
diff --git a/_layouts/playwright-branch.html b/_layouts/playwright-branch.html
@@ -2,17 +2,16 @@
 layout: default
 ---
 
-<h2>{{page.branch}}</h2>
-{% assign run_ids = "" | split: "," %}
-{% for run in site.data.playwright-reports.branches[page.branch] %}
-  {% assign run_id = run[0] %}
-  {% assign run_ids = run_ids | push: run_id %}
-{% endfor %}
-{% assign run_ids = run_ids | reverse %}
-
+<!-- use the custom key_list filter to get the run ids for the branch and sort them by newest to oldest -->
+{% assign run_ids = site.data.playwright-reports.branches[page.branch] | key_list | reverse %}
 {% for run_id in run_ids %}
+  <!-- loop through the run ids -->
   {% assign data = site.data.playwright-reports.branches[page.branch][run_id] %}
+  <!-- capture creates a link using the page.branch variable and the run id -->
   {% capture report_link %}/playwright-reports/branches/{{page.branch}}/{{run_id}}.html{% endcapture %}
-    {% assign relative_report_link = report_link | relative_url %}
-  {% include playwright-summary.html run_id=run_id data=data url=relative_report_link %}
+  <!--
+    Include the html snippet in `_includes/playwright-summary.html` with the parameters the `page.branch` variable as `branch`,
+    the `run_id` variable as `run_id`, the `data` variable as `data`, and the `report_link` variable as `url`.
+  -->
+  {% include playwright-summary.html branch=page.branch run_id=run_id data=data url=report_link %}
 {% endfor %}
diff --git a/_plugins/coverage-result-filter.rb b/_plugins/coverage-result-filter.rb
@@ -0,0 +1,15 @@
+module Jekyll
+  module CoverageResultFilter
+    def coverage_status(input, name)
+      if input >= @context.registers[:site].data["coverage"]["thresholds"]["pass"][name]
+        "pass"
+      elsif input >= @context.registers[:site].data["coverage"]["thresholds"]["fail"][name]
+        "warn"
+      else
+        "fail"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::CoverageResultFilter)
diff --git a/_plugins/icon-filter.rb b/_plugins/icon-filter.rb
@@ -0,0 +1,22 @@
+module Jekyll
+  module IconFilter
+    def status_icon(input)
+      case input
+      when "pass"
+        "<svg aria-hidden='true' fill='currentColor' height='100%' width='100%' viewBox='0 0 16 16' version='1.1'>
+          <path fillRule='evenodd' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'></path>
+        </svg>"
+      when "fail"
+        "<svg aria-hidden='true' fill='currentColor' height='100%' width='100%' viewBox='0 0 16 16' version='1.1'>
+          <path fillRule='evenodd' d='M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z'></path>
+        </svg>"
+      when "warn"
+        "<svg aria-hidden='true' fill='currentColor' height='100%' width='100%' viewBox='0 0 16 16' version='1.1'>
+          <path fillRule='evenodd' d='M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z'></path>
+        </svg>"
+      end
+    end
+  end 
+end
+
+Liquid::Template.register_filter(Jekyll::IconFilter)
diff --git a/_plugins/key-list-filter.rb b/_plugins/key-list-filter.rb
@@ -0,0 +1,14 @@
+module Jekyll
+  module KeyFilter
+    def key_list(input)
+      return if input.nil?
+      keys = []
+      input.each_key do |key|
+        keys.push(key)
+      end
+      keys
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::KeyFilter)
diff --git a/_plugins/playwright-result-filter.rb b/_plugins/playwright-result-filter.rb
@@ -0,0 +1,36 @@
+module Jekyll
+  module PlaywrightResultFilter
+    def normalize_playwright(input)
+      status = playwright_status(input)
+      total = playwright_total(input)
+      stats = input["stats"]
+      stats["errors"] = input["errors"]
+      stats["total"] = total
+      stats["status"] = status
+      stats
+    end
+
+    def playwright_total(input)
+      if input["errors"].size > 0
+        0
+      else
+        input["stats"]["expected"] + input["stats"]["unexpected"] + input["stats"]["skipped"] 
+      end
+    end
+
+    def playwright_status(input)
+      if input["stats"]["unexpected"] > 0
+        # if the unexpected results is greater than one, return fail
+        "fail"
+      elsif input["errors"].size == 0
+        # if there are no unexpected results and no errors, return pass
+        "pass"
+      else
+        # otherwise if there are errors, return error
+        "warn"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::PlaywrightResultFilter)
diff --git a/assets/css/coverage.css b/assets/css/coverage.css
@@ -37,14 +37,14 @@
   justify-content: space-between;
 }
 
-.coverage-success {
+.coverage-pass {
   color: rgb(2, 119, 2);
 }
 
-.coverage-failure {
+.coverage-fail {
   color: rgb(155, 0, 0);
 }
 
-.coverage-warning {
+.coverage-warn {
   color: rgb(243, 186, 17);
 }