Add govuk-frontend checking to the component auditing

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add govuk-frontend checking to the component auditing ([PR #4058](https://github.com/alphagov/govuk_publishing_components/pull/4058))
+
 ## 39.0.0
 
 * Use `GOVUK_ENVIRONMENT` instead of `GOVUK_ENVIRONMENT_NAME` for current environment ([PR #4060](https://github.com/alphagov/govuk_publishing_components/pull/4060))

app/models/govuk_publishing_components/audit_components.rb

@@ -22,6 +22,8 @@ def initialize(path, options = {})
         stylesheet: 0,
         print_stylesheet: 0,
         javascript: 0,
+        uses_govuk_frontend_js: 0,
+        uses_govuk_frontend_css: 0,
         test: 0,
         javascript_test: 0,
         helper: 0,
@@ -120,6 +122,16 @@ def get_component_asset_detail(detail, component)
           details["#{type}_exists".to_sym] = true
           details["#{type}_lines".to_sym] = count_lines_in(file)
           details["#{type}_link".to_sym] = get_asset_link(type, component)
+
+          if type == "javascript" && uses_govuk_frontend_js?(file)
+            details[:uses_govuk_frontend_js] = true
+            @component_numbers[:uses_govuk_frontend_js] += 1
+          end
+
+          if type == "stylesheet" && uses_govuk_frontend_css?(file)
+            details[:uses_govuk_frontend_css] = true
+            @component_numbers[:uses_govuk_frontend_css] += 1
+          end
         end
       end
 
@@ -130,6 +142,14 @@ def count_lines_in(file)
       File.read(file).each_line.count
     end
 
+    def uses_govuk_frontend_js?(file)
+      File.read(file).match(/require govuk\/components/)
+    end
+
+    def uses_govuk_frontend_css?(file)
+      File.read(file).match(/@import "govuk\/components/)
+    end
+
     def clean_files(files, replace)
       files.map { |file| clean_file_name(file.gsub(replace, "")) }.sort
     end

app/views/govuk_publishing_components/audit/_component_contents.html.erb

@@ -1,44 +1,59 @@
+<p class="govuk-body">
+  Numbers in table headers show column totals. Numbers in table cells show number of lines in files. Note that component test files cannot currently be detected in applications that use minitest instead of Rspec.</p>
+</p>
 <table class="govuk-table">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row" <% if show_application_name %>data-audit-headings<% end %>>
       <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="total">Component</th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template">
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template" title="Component has a template">
         Template
         <% unless show_application_name %>
           <span class="component__count"><%= passed_components[:component_numbers][:template] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="stylesheet">
-        CSS 
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="stylesheet" title="Component has a stylesheet">
+        CSS
         <% unless show_application_name %>
           <span class="component__count"><%= passed_components[:component_numbers][:stylesheet] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="print_stylesheet">
-        Print styles
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="print_stylesheet" title="Component has print styles">
+        Print CSS
         <% unless show_application_name %>
           <span class="component__count"><%= passed_components[:component_numbers][:print_stylesheet] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript">
-        JS 
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript" title="Component has JavaScript">
+        JS
         <% unless show_application_name %>
           <span class="component__count"><%= passed_components[:component_numbers][:javascript] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="test">
-        Test 
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript_test" title="Component has a JavaScript test file">
+        JS test
         <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:test] %></span>
+          <span class="component__count"><%= passed_components[:component_numbers][:javascript_test] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript_test">
-        JS test
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-css" title="Component includes styles imported from govuk-frontend">
+        GF CSS
         <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:javascript_test] %></span>
+          <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_css] %></span>
         <% end %>
       </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="helper">
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-js" title="Component includes JavaScript imported from govuk-frontend">
+        GF JS
+        <% unless show_application_name %>
+          <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_js] %></span>
+        <% end %>
+      </th>
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="test" title="Component has a test file">
+        Test
+        <% unless show_application_name %>
+          <span class="component__count"><%= passed_components[:component_numbers][:test] %></span>
+        <% end %>
+      </th>
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="helper" title="Component has a helper file">
         Helper
         <% unless show_application_name %>
           <span class="component__count"><%= passed_components[:component_numbers][:helper] %></span>
@@ -65,52 +80,68 @@
         </th>
         <td class="govuk-table__cell" data-component-type="template">
           <% if component[:template_exists] %>
-            <a href="<%= component[:template_link] %>" class="govuk-link">
+            <a href="<%= component[:template_link] %>" class="govuk-link" title="This file has <%= component[:template_lines] %> lines">
               <%= component[:template_lines] %>
               <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
             </a>
           <% end %>
         </td>
         <td class="govuk-table__cell" data-component-type="stylesheet">
           <% if component[:stylesheet_exists] %>
-            <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
+            <a href="<%= component[:stylesheet_link] %>" class="govuk-link" title="This file has <%= component[:stylesheet_lines] %> lines">
               <%= component[:stylesheet_lines] %>
               <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
             </a>
           <% end %>
         </td>
         <td class="govuk-table__cell" data-component-type="print_stylesheet">
           <% if component[:print_stylesheet_exists] %>
-            Yes
+            <span title="This component has a print stylesheet">
+              Yes
+            </span>
           <% end %>
         </td>
         <td class="govuk-table__cell" data-component-type="javascript">
           <% if component[:javascript_exists] %>
-            <a href="<%= component[:javascript_link] %>" class="govuk-link">
+            <a href="<%= component[:javascript_link] %>" class="govuk-link" title="This file has <%= component[:javascript_lines] %> lines">
               <%= component[:javascript_lines] %>
               <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
             </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell" data-component-type="test">
-          <% if component[:test_exists] %>
-            <a href="<%= component[:test_link] %>" class="govuk-link">
-              <%= component[:test_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
-            </a>
-          <% end %>
-        </td>
         <td class="govuk-table__cell" data-component-type="javascript_test">
           <% if component[:javascript_test_exists] %>
-            <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
+            <a href="<%= component[:javascript_test_link] %>" class="govuk-link" title="This file has <%= component[:javascript_test_lines] %> lines">
               <%= component[:javascript_test_lines] %>
               <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
             </a>
           <% end %>
         </td>
+        <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-css">
+          <% if component[:uses_govuk_frontend_css] %>
+            <span title="Component includes styles imported from govuk-frontend">
+              Yes
+            </span>
+          <% end %>
+        </td>
+        <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-js">
+          <% if component[:uses_govuk_frontend_js] %>
+            <span title="Component includes JavaScript imported from govuk-frontend">
+              Yes
+            </span>
+          <% end %>
+        </td>
+        <td class="govuk-table__cell" data-component-type="test">
+          <% if component[:test_exists] %>
+            <a href="<%= component[:test_link] %>" class="govuk-link" title="This file has <%= component[:test_lines] %> lines">
+              <%= component[:test_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
+            </a>
+          <% end %>
+        </td>
         <td class="govuk-table__cell" data-component-type="helper">
           <% if component[:helper_exists] %>
-            <a href="<%= component[:helper_link] %>" class="govuk-link">
+            <a href="<%= component[:helper_link] %>" class="govuk-link" title="This file has <%= component[:helper_lines] %> lines">
               <%= component[:helper_lines] %>
               <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
             </a>

spec/component_guide/audit_applications_spec.rb

@@ -198,6 +198,8 @@
           stylesheet: 1,
           template: 15,
           test: 0,
+          uses_govuk_frontend_css: 0,
+          uses_govuk_frontend_js: 0,
         },
       },
     }

spec/component_guide/audit_components_spec.rb

@@ -41,7 +41,7 @@
           template_lines: 7,
           template_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/app/views/govuk_publishing_components/components/_test_component.html.erb",
           stylesheet_exists: true,
-          stylesheet_lines: 4,
+          stylesheet_lines: 6,
           stylesheet_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/_test-component.scss",
           print_stylesheet_exists: true,
           javascript_exists: true,
@@ -56,6 +56,7 @@
           helper_exists: true,
           helper_lines: 6,
           helper_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/lib/govuk_publishing_components/presenters/test_component_helper.rb",
+          uses_govuk_frontend_css: true,
         },
         {
           name: "test component containing other component",
@@ -64,16 +65,26 @@
           template_exists: true,
           template_lines: 3,
           template_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/app/views/govuk_publishing_components/components/_test_component_containing_other_component.html.erb",
+          print_stylesheet_exists: false,
+          stylesheet_exists: true,
+          stylesheet_lines: 4,
+          stylesheet_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/_test-component-containing-other-component.scss",
+          javascript_exists: true,
+          javascript_lines: 4,
+          javascript_link: "https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/components/test-component-containing-other-component.js",
+          uses_govuk_frontend_js: true,
         },
       ],
       component_numbers: {
         template: 2,
-        stylesheet: 1,
+        stylesheet: 2,
         print_stylesheet: 1,
-        javascript: 1,
+        javascript: 2,
         test: 1,
         javascript_test: 1,
         helper: 1,
+        uses_govuk_frontend_css: 1,
+        uses_govuk_frontend_js: 1,
       },
       helper_usage: [
         {

spec/dummy_gem/app/assets/javascripts/govuk_publishing_components/components/test-component-containing-other-component.js

@@ -0,0 +1,4 @@
+// this file is needed to test the component auditing
+// = require govuk/components/notarealcomponent/notarealcomponent.js
+
+var thisDoesNothing = 0

spec/dummy_gem/app/assets/stylesheets/govuk_publishing_components/components/_test-component-containing-other-component.scss

@@ -0,0 +1,4 @@
+// this file is needed to test the component auditing
+.test {
+  background: none;
+}

spec/dummy_gem/app/assets/stylesheets/govuk_publishing_components/components/_test-component.scss

@@ -1,4 +1,6 @@
 // this file is needed to test the component auditing
+@import "govuk/components/accordion/accordion";
+
 @include govuk-media-query($media-type: print) {
   .test {}
 }