Update layout_for_admin template

- Added support for custom filename when using es6 components - Added tests to check the correct file is used when using either a custom filename or using the default filename - Documented the new input option for custom es6 component file names - Moved the new es6-components js file to the head section of template
alphagov · Jul 12, 2024 · 0251886 · 0251886
1 parent 7a22e1e
commit 0251886
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb b/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb
@@ -1,6 +1,7 @@
 <%
   add_gem_component_stylesheet("layout-for-admin")
   js_filename ||= "application"
+  js_module_filename ||= "es6-components"
   css_filename ||= "application"
 
   product_name ||= "Publishing"
@@ -17,6 +18,9 @@
     <%= favicon_link_tag "govuk_publishing_components/favicon-#{environment}.png" %>
     <%= stylesheet_link_tag css_filename, media: "all" %>
     <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
+    <% if GovukPublishingComponents::Config.use_es6_components %>
+      <%= javascript_include_tag js_module_filename, type: "module" %>
+    <% end %>
     <%= yield :head %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body">
@@ -25,8 +29,5 @@
     <% end -%>
     <%= yield %>
     <%= javascript_include_tag js_filename %>
-    <% if GovukPublishingComponents::Config.use_es6_components %>
-      <%= javascript_include_tag 'es6-components', type: "module" %>
-    <% end %>
   </body>
 </html>
diff --git a/app/views/govuk_publishing_components/components/docs/layout_for_admin.yml b/app/views/govuk_publishing_components/components/docs/layout_for_admin.yml
@@ -32,6 +32,15 @@ examples:
       js_filename: "application"
       block: |
         <!-- You probably want to use the header, main & footer components here -->
+  with_custom_js_filename_for_es6_components:
+    description: An alternative JS filename can be used in place of the default `es6-components.js` if required (note that this cannot easily be demonstrated here).
+    data:
+      environment: production
+      product_name: Publishing
+      browser_title: 'A page title'
+      js_module_filename: "es6-bundle"
+      block: |
+        <!-- You probably want to use the header, main & footer components here -->
   with_custom_css_filename:
     description: An alternative JS filename can be used in place of the default `application.scss` if required (note that this cannot easily be demonstrated here).
     data:

diff --git a/spec/components/layout_for_admin_spec.rb b/spec/components/layout_for_admin_spec.rb
@@ -28,6 +28,43 @@ def component_name
     )
   end
 
+  context "loads a separate bundle for es6 components" do
+    before "enable loading of separate es6 components bundle" do
+      GovukPublishingComponents.configure do |config|
+        config.use_es6_components = true
+      end
+    end
+
+    it "can receive a custom js filename for es6 " do
+      allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("govuk_publishing_components/vendor/modernizr")
+      allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("application")
+      expect_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("es6-bundle", { type: "module" }).once
+
+      render_component(
+        browser_title: "Hello, admin page",
+        environment: "production",
+        js_module_filename: "es6-bundle",
+      )
+    end
+
+    it "can use the default filename for es6 components" do
+      allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("govuk_publishing_components/vendor/modernizr")
+      allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("application")
+      expect_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).with("es6-components", { type: "module" }).once
+
+      render_component(
+        browser_title: "Hello, admin page",
+        environment: "production",
+      )
+    end
+
+    after "disable loading of separate es6 components bundle" do
+      GovukPublishingComponents.configure do |config|
+        config.use_es6_components = false
+      end
+    end
+  end
+
   it "can receive a custom css filename" do
     expect_any_instance_of(ActionView::Base).to receive(:stylesheet_link_tag).with("admin", media: "all")