From 3653c51c98398b0cfeeb2223205c1df90088a79c Mon Sep 17 00:00:00 2001
From: Ryan Koch <6863534+ryguyk@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:32:53 -0600
Subject: [PATCH] VAGOV-TEAM-97920: Form Builder Navbar (#20149)

* VAGOV-TEAM-97920:
- Renames form-builder theme and sets it as page-level theme.

* Allows for active tab to be set on each path.

* Updates page template and styles for navbar

* Removes unnecessary properties from base form.

* Adds id class to each navbar tab

* Adds unpkg external stylesheet to the module-defined library.

* Attaches styles at page level rather than form level.

* Adds unit test for libraries.yml.

* Updates existing test suites.

* Updates class names in test to reflect changes in template.
---
 .../css/va_gov_form_builder.css               | 90 ++++++++++++++++++-
 .../Controller/VaGovFormBuilderController.php | 45 +++++++++-
 .../src/Form/Base/FormBuilderBase.php         | 22 ++---
 .../page--va-gov-form-builder.html.twig       | 70 ++++++++++-----
 .../va_gov_form_builder.libraries.yml         |  2 +
 .../va_gov_form_builder.module                |  6 +-
 .../VaGovFormBuilderControllerTest.php        | 31 +++++--
 .../functional/Form/IntroTest.php             | 14 ++-
 .../functional/Form/NameAndDobTest.php        | 20 +++--
 .../functional/Form/StartConversionTest.php   | 23 +++--
 .../templates/FormBuilderPageTemplateTest.php |  4 +-
 .../unit/Form/Base/FormBuilderBaseTest.php    | 29 +-----
 .../unit/LibrariesTest.php                    | 71 +++++++++++++++
 .../va_gov_form_builder/unit/ModuleTest.php   | 10 +--
 14 files changed, 332 insertions(+), 105 deletions(-)
 create mode 100644 tests/phpunit/va_gov_form_builder/unit/LibrariesTest.php

diff --git a/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css b/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css
index e5f1ffc8dc..80bc63ece9 100644
--- a/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css
+++ b/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css
@@ -1,4 +1,92 @@
 /* page container */
-.va-gov-form-builder-page-container {
+.form-builder-page-container {
   font-family: var(--font-family-serif);
 }
+
+/* headings */
+.form-builder-page-container h1 {
+  font-size: var(--vads-font-size-heading-level-1);
+  line-height: var(--units-6);
+}
+
+.form-builder-page-container h2 {
+  font-size: var(--vads-font-size-heading-level-2);
+}
+
+.form-builder-page-container h2 {
+  font-size: var(--vads-font-size-heading-level-2);
+}
+
+.form-builder-page-container h3 {
+  font-size: var(--vads-font-size-heading-level-3);
+}
+
+.form-builder-page-container h4 {
+  font-size: var(--vads-font-size-heading-level-4);
+}
+
+.form-builder-page-container h5 {
+  font-size: var(--vads-font-size-heading-level-5);
+}
+
+.form-builder-page-container h6 {
+  font-size: var(--vads-font-size-heading-level-6);
+}
+
+/* header */
+.form-builder-header {
+  background-color: var(--va-blue-darkest);
+  color: var(--va-white);
+  padding-top: var(--units-1);
+}
+
+/* layout container */
+.form-builder-layout-container {
+  margin: 0 var(--units-7);
+}
+
+/* title */
+.form-builder-title {
+  margin-bottom: var(--units-1p5);
+}
+
+/* navbar */
+.form-builder-navbar__nav {
+  display: flex;
+}
+
+.form-builder-navbar__tabs {
+  display: flex;
+  gap: var(--units-5);
+  list-style: none;
+  margin: 0;
+}
+
+.form-builder-navbar__tab {
+  min-width: 100px;
+  padding: var(--units-1);
+  position: relative;
+  text-align: center;
+}
+
+.form-builder-navbar__tab--active {
+  border-bottom: var(--units-0p5) solid var(--uswds-system-color-gold-vivid-20);
+}
+
+.form-builder-navbar__link {
+  color: var(--vads-color-white);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--vads-font-line-height-default);
+  text-decoration: none;
+}
+
+.form-builder-navbar__link:hover {
+  background: transparent;
+  color: var(--vads-color-white);
+}
+
+.form-builder-navbar__tab--active .form-builder-navbar__link,
+.form-builder-navbar__tab--active .form-builder-navbar__link:hover {
+  color: var(--uswds-system-color-gold-vivid-20);
+}
diff --git a/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php b/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php
index 82308e899b..5217021410 100644
--- a/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php
+++ b/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php
@@ -31,6 +31,13 @@ class VaGovFormBuilderController extends ControllerBase {
    */
   private $drupalFormBuilder;
 
+  /**
+   * The active tab in the form builder.
+   *
+   * @var 'forms'|'content'|'layout'
+   */
+  private $activeTab;
+
   /**
    * {@inheritdoc}
    */
@@ -41,6 +48,34 @@ public static function create(ContainerInterface $container) {
     return $instance;
   }
 
+  /**
+   * Returns a render array representing the page with the passed-in form.
+   *
+   * @param string $formName
+   *   The filename of the form to be rendered.
+   * @param string $nid
+   *   The node id, passed in when the form in question edits an existing node.
+   */
+  private function getFormPage($formName, $nid = NULL) {
+    // @phpstan-ignore-next-line
+    $form = $this->drupalFormBuilder->getForm('Drupal\va_gov_form_builder\Form\\' . $formName, $nid);
+
+    return [
+      '#type' => 'page',
+      'content' => $form,
+      // Add custom data.
+      'form_builder_page_data' => [
+        'active_tab' => $this->activeTab,
+      ],
+      // Add styles.
+      '#attached' => [
+        'library' => [
+          'va_gov_form_builder/va_gov_form_builder_styles',
+        ],
+      ],
+    ];
+  }
+
   /**
    * Entry point for the VA Form Builder. Redirects to the intro page.
    */
@@ -52,22 +87,24 @@ public function entry() {
    * Intro page.
    */
   public function intro() {
-    return $this->drupalFormBuilder->getForm('Drupal\va_gov_form_builder\Form\Intro');
+    $this->activeTab = 'forms';
+    return $this->getFormPage('Intro');
   }
 
   /**
    * Start-conversion page.
    */
   public function startConversion() {
-    return $this->drupalFormBuilder->getForm('Drupal\va_gov_form_builder\Form\StartConversion');
+    $this->activeTab = 'forms';
+    return $this->getFormPage('StartConversion');
   }
 
   /**
    * Name-and-date-of-birth page.
    */
   public function nameAndDob($nid) {
-    // @phpstan-ignore-next-line
-    return $this->drupalFormBuilder->getForm('Drupal\va_gov_form_builder\Form\NameAndDob', $nid);
+    $this->activeTab = 'content';
+    return $this->getFormPage('NameAndDob', $nid);
   }
 
 }
diff --git a/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php b/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php
index fdf2f6c7c2..da73db7070 100644
--- a/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php
+++ b/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php
@@ -12,25 +12,13 @@ abstract class FormBuilderBase extends FormBase {
 
   /**
    * {@inheritdoc}
+   *
+   * After initially containing some logic, this function
+   * is now empty, and this entire class is a candiate
+   * for removal. Leaving it here for now, as it might prove
+   * necessary as we continue on.
    */
   public function buildForm(array $form, FormStateInterface $form_state) {
-    $form['#theme'] = 'va_gov_form_builder';
-    $form['#title'] = $this->t('Form Builder');
-
-    // Add styles.
-    $form['#attached']['html_head'][] = [
-      [
-        '#tag' => 'link',
-        '#attributes' => [
-          'rel' => 'stylesheet',
-          'href' => 'https://unpkg.com/@department-of-veterans-affairs/css-library@0.16.0/dist/tokens/css/variables.css',
-        ],
-      ],
-      'external_stylesheet',
-    ];
-    $form['#attached']['library'][] = 'va_gov_form_builder/va_gov_form_builder_styles';
-
-    return $form;
   }
 
 }
diff --git a/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig b/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig
index 86efcd7ae3..0bc5004f56 100644
--- a/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig
+++ b/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig
@@ -3,38 +3,66 @@
  * @file
  * VA.gov Form Builder's implementation of a single page.
  *
- * Nearly identical to VAgovClaro's implementation, except:
- * - An outermost page container has been added.
- * - The header includes additional content (navbar, eventually)
- * - Breadcrumbs have been removed
+ * The variables available to this template are passed from the controller:
+ * - page
+ *   - content: The main content of the page; the individual form
+ * - form_builder_page_data
+ *   - active_tab: The active tab in the navbar
  *
- * For more information:
- * @see docroot/themes/custom/vagovclaro/templates/page/page.html.twig
+ * @see /docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php
  */
 #}
-<div class="va-gov-form-builder-page-container">
-  <header class="content-header clearfix">
-    <div class="layout-container">
-      {{ page.header }}
+<div class="form-builder-page-container">
+  <header class="form-builder-header">
+    <div class="form-builder-layout-container">
 
-      <div class="va-gov-form-builder-navbar">
-        <!-- This is a placeholder for our navigation bar -->
+      <div class="form-builder-title">
+        <h1 class="form-builder-title__page-title">Form Builder</h1>
+      </div>
+
+      {% set active_tab = page.form_builder_page_data.active_tab %}
+      <div class="form-builder-navbar">
+        <nav class="form-builder-navbar__nav">
+          <ul class="form-builder-navbar__tabs">
+
+            <li class="form-builder-navbar__tab form-builder-navbar__tab--forms
+              {{
+                active_tab == 'forms' ? 'form-builder-navbar__tab--active'
+                : ''
+              }}"
+            >
+              <a href="#" class="form-builder-navbar__link">Forms</a>
+            </li>
+
+            <li class="form-builder-navbar__tab form-builder-navbar__tab--content
+              {{
+                active_tab == 'content' ? 'form-builder-navbar__tab--active'
+                : ''
+              }}">
+              <a href="#" class="form-builder-navbar__link">Content</a>
+            </li>
+
+            <li class="form-builder-navbar__tab form-builder-navbar__tab--layout
+              {{
+                active_tab == 'layout' ? 'form-builder-navbar__tab--active'
+                : ''
+              }}"
+            >
+              <a href="#" class="form-builder-navbar__link">Layout</a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   </header>
 
-  <div class="layout-container">
-    {{ page.pre_content }}
-
+  <div class="form-builder-layout-container">
     <main class="page-content clearfix" role="main">
       <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
-      {{ page.highlighted }}
-      {% if page.help %}
-      <div class="help">
-        {{ page.help }}
-      </div>
-      {% endif %}
+
+      {# The form content #}
       {{ page.content }}
+
     </main>
   </div>
 </div>
diff --git a/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml b/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml
index 8d4fd5bf12..4c70ae555e 100644
--- a/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml
+++ b/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml
@@ -3,3 +3,5 @@ va_gov_form_builder_styles:
   css:
     theme:
       css/va_gov_form_builder.css: {}
+      https://unpkg.com/@department-of-veterans-affairs/css-library@0.16.0/dist/tokens/css/variables.css:
+        {}
diff --git a/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.module b/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.module
index e3f9b98dca..69e564509f 100644
--- a/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.module
+++ b/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.module
@@ -23,8 +23,8 @@ function va_gov_form_builder_entity_bundle_field_info_alter(&$fields, EntityType
  */
 function va_gov_form_builder_theme() {
   return [
-    'va_gov_form_builder_page' => [
-      'template' => 'page--va-gov-form-builder',
+    'page__va_gov_form_builder' => [
+      'base hook' => 'page',
       'path' => \Drupal::service('extension.list.module')->getPath('va_gov_form_builder') . '/templates',
     ],
   ];
@@ -39,7 +39,7 @@ function va_gov_form_builder_theme_suggestions_page(array &$variables) {
 
   // Apply custom page template for all Form Builder routes.
   if (strpos($route_name, 'va_gov_form_builder.') === 0) {
-    $suggestions[] = 'va_gov_form_builder_page';
+    $suggestions[] = 'page__va_gov_form_builder';
   }
 
   return $suggestions;
diff --git a/tests/phpunit/va_gov_form_builder/functional/Controller/VaGovFormBuilderControllerTest.php b/tests/phpunit/va_gov_form_builder/functional/Controller/VaGovFormBuilderControllerTest.php
index 6f28128fe5..7c6bdae099 100644
--- a/tests/phpunit/va_gov_form_builder/functional/Controller/VaGovFormBuilderControllerTest.php
+++ b/tests/phpunit/va_gov_form_builder/functional/Controller/VaGovFormBuilderControllerTest.php
@@ -41,6 +41,19 @@ public function setUp(): void {
     $this->controller = VaGovFormBuilderController::create($container);
   }
 
+  /**
+   * Tests css is included.
+   */
+  public function testCssIncluded() {
+    $page = $this->controller->intro();
+
+    $this->assertContains(
+      'va_gov_form_builder/va_gov_form_builder_styles',
+      $page['#attached']['library'],
+      "The library 'va_gov_form_builder/va_gov_form_builder_styles' is successfully attached."
+    );
+  }
+
   /**
    * Tests the entry method redirects correctly.
    */
@@ -55,20 +68,20 @@ public function testEntryRedirect() {
    * Tests the intro method returns an Intro form.
    */
   public function testIntro() {
-    $form = $this->controller->intro();
+    $page = $this->controller->intro();
 
-    $this->assertArrayHasKey('#type', $form);
-    $this->assertArrayHasKey('working_with_form_builder_header', $form);
+    $this->assertArrayHasKey('content', $page);
+    $this->assertArrayHasKey('working_with_form_builder_header', $page['content']);
   }
 
   /**
    * Tests the startConversion method returns a StartConversion form.
    */
   public function testStartConversion() {
-    $form = $this->controller->startConversion();
+    $page = $this->controller->startConversion();
 
-    $this->assertArrayHasKey('#type', $form);
-    $this->assertArrayHasKey('start_new_conversion_header', $form);
+    $this->assertArrayHasKey('content', $page);
+    $this->assertArrayHasKey('start_new_conversion_header', $page['content']);
   }
 
   /**
@@ -81,10 +94,10 @@ public function testNameAndDob() {
       'field_chapters' => [],
     ]);
 
-    $form = $this->controller->nameAndDob($node->id());
+    $page = $this->controller->nameAndDob($node->id());
 
-    $this->assertArrayHasKey('#type', $form);
-    $this->assertArrayHasKey('name_and_dob_header', $form);
+    $this->assertArrayHasKey('content', $page);
+    $this->assertArrayHasKey('name_and_dob_header', $page['content']);
   }
 
 }
diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php
index c3ff795837..80d6905791 100644
--- a/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php
+++ b/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php
@@ -20,7 +20,7 @@ class IntroTest extends VaGovExistingSiteBase {
   private static $modules = ['va_gov_form_builder'];
 
   /**
-   * Setup the environment for each test.
+   * Set up the environment for each test.
    */
   public function setUp(): void {
     parent::setUp();
@@ -30,7 +30,7 @@ public function setUp(): void {
   }
 
   /**
-   * Test the form is accessible to a user with the correct privilege.
+   * Test that the form is accessible to a user with the correct privilege.
    */
   public function testFormLoads() {
     $this->assertSession()->statusCodeEquals(200);
@@ -38,7 +38,7 @@ public function testFormLoads() {
   }
 
   /**
-   * Test the form is not accessible to a user without the correct privilege.
+   * Test that the form is not accessible to a user without privilege.
    */
   public function testFormDoesNotLoad() {
     // Log out the good user and log in a user without permission.
@@ -48,6 +48,14 @@ public function testFormDoesNotLoad() {
     $this->assertSession()->statusCodeNotEquals(200);
   }
 
+  /**
+   * Test that the active tab is correct.
+   */
+  public function testActiveTab() {
+    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
+    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--forms'), 'The expected tab is active.');
+  }
+
   /**
    * Test the 'Start conversion' button.
    */
diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php
index 67caf734e2..98a963b380 100644
--- a/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php
+++ b/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php
@@ -48,7 +48,7 @@ private function reloadNode() {
   }
 
   /**
-   * Setup the environment for each test.
+   * Set up the environment for each test.
    */
   public function setUp(): void {
     parent::setUp();
@@ -65,21 +65,29 @@ public function setUp(): void {
   }
 
   /**
-   * Test the form is accessible to a user with the correct privilege.
+   * Test that the form is accessible to a user with the correct privilege.
    */
   public function testFormLoads() {
     $this->sharedTestFormLoads($this->getFormPageUrl(), 'Collecting Name and Date of birth');
   }
 
   /**
-   * Test the form is not accessible to a user without the correct privilege.
+   * Test that the form is not accessible to a user without privilege.
    */
   public function testFormDoesNotLoad() {
     $this->sharedTestFormDoesNotLoad($this->getFormPageUrl());
   }
 
   /**
-   * Test the form submission adds a chapter when not already present.
+   * Test that the active tab is correct.
+   */
+  public function testActiveTab() {
+    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
+    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--content'), 'The expected tab is active.');
+  }
+
+  /**
+   * Test that the form submission adds a chapter when not already present.
    */
   public function testFormSubmissionAddsChapter() {
     $formInput = [
@@ -93,7 +101,7 @@ public function testFormSubmissionAddsChapter() {
   }
 
   /**
-   * Test the form submission does not add a chapter when already present.
+   * Test that the form submission does not add a chapter when already present.
    */
   public function testFormSubmissionDoesNotAddChapter() {
     // Add a chapter to begin.
@@ -116,7 +124,7 @@ public function testFormSubmissionDoesNotAddChapter() {
   }
 
   /**
-   * Test the 'Back' button takes the user back to the start-conversion page.
+   * Test that the 'Back' button takes the user to the start-conversion page.
    */
   public function testBackButton() {
     $this->click('.button#edit-back');
diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php
index d5b26a80e0..cdb1aeae36 100644
--- a/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php
+++ b/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php
@@ -32,7 +32,7 @@ private function getFormPageUrl() {
   }
 
   /**
-   * Setup the environment for each test.
+   * Set up the environment for each test.
    */
   public function setUp(): void {
     parent::setUp();
@@ -42,21 +42,29 @@ public function setUp(): void {
   }
 
   /**
-   * Test the form is accessible to a user with the correct privilege.
+   * Test that the form is accessible to a user with the correct privilege.
    */
   public function testFormLoads() {
     $this->sharedTestFormLoads($this->getFormPageUrl(), 'Start a new conversion');
   }
 
   /**
-   * Test the form is not accessible to a user without the correct privilege.
+   * Test that the form is not accessible to a user without privilege.
    */
   public function testFormDoesNotLoad() {
     $this->sharedTestFormDoesNotLoad($this->getFormPageUrl());
   }
 
   /**
-   * Test the form submission succeeds.
+   * Test that the active tab is correct.
+   */
+  public function testActiveTab() {
+    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
+    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--forms'), 'The expected tab is active.');
+  }
+
+  /**
+   * Test that the form submission succeeds.
    *
    * When proper information is entered, form should be submitted.
    */
@@ -71,8 +79,9 @@ public function testFormSubmissionSucceeds() {
     ];
     $this->submitForm($formInput, 'Continue');
 
-    // Check if the form submission was successful.
-    $this->assertSession()->pageTextNotContains('error has been found');
+    // Successful submission should take user to next page.
+    $nextPageUrl = $this->getSession()->getCurrentUrl();
+    $this->assertStringContainsString('/name-and-dob', $nextPageUrl);
   }
 
   /**
@@ -90,7 +99,7 @@ public function testFormSubmissionFailsOnMissingRequiredField() {
     $this->submitForm($formInput, 'Continue');
 
     // Check if the form submission was successful.
-    $this->assertSession()->pageTextContains('error has been found');
+    $this->assertSession()->pageTextContains('Expiration date field is required.');
   }
 
   /**
diff --git a/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php b/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php
index ab468cc5de..34f201df60 100644
--- a/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php
+++ b/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php
@@ -46,10 +46,10 @@ public function setUp(): void {
   public function testExpectedElementsExist() {
     $this->assertSession()->statusCodeEquals(200);
 
-    $containerElement = $this->cssSelect('.va-gov-form-builder-page-container');
+    $containerElement = $this->cssSelect('.form-builder-page-container');
     $this->assertCount(1, $containerElement);
 
-    $navbarElement = $this->cssSelect('.va-gov-form-builder-navbar');
+    $navbarElement = $this->cssSelect('.form-builder-navbar');
     $this->assertCount(1, $navbarElement);
   }
 
diff --git a/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php b/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php
index 1013072297..bd5246132c 100644
--- a/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php
+++ b/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php
@@ -28,6 +28,8 @@ class FormBuilderBaseTest extends VaGovUnitTestBase {
    * Setup the environment for each test.
    */
   public function setUp(): void {
+    $this->markTestSkipped('Skipping all tests in this file.');
+
     parent::setUp();
 
     // Create an anonymous instance of a class that extends our abstract class.
@@ -44,33 +46,6 @@ public function testBuildForm() {
     $formStateMock = $this->createMock(FormStateInterface::class);
 
     $form = $this->classInstance->buildForm($form, $formStateMock);
-
-    // Title.
-    $this->assertArrayHasKey('#title', $form);
-    $this->assertEquals($form['#title'], 'Form Builder');
-
-    // CSS.
-    $this->assertArrayHasKey('#attached', $form);
-
-    // 1. Form Builder Library.
-    $this->assertArrayHasKey('html_head', $form['#attached']);
-    $this->assertNotEmpty($form['#attached']['html_head']);
-
-    $found = FALSE;
-    foreach ($form['#attached']['html_head'] as $html_head_item) {
-      if (
-        isset($html_head_item[0]['#attributes']['href']) &&
-        $html_head_item[0]['#attributes']['href'] === 'https://unpkg.com/@department-of-veterans-affairs/css-library@0.16.0/dist/tokens/css/variables.css'
-      ) {
-        $found = TRUE;
-        break;
-      }
-    }
-    $this->assertTrue($found, 'The html_head array contains a link with the unpkg token url.');
-
-    // 2. External CSS.
-    $this->assertArrayHasKey('library', $form['#attached']);
-    $this->assertContains('va_gov_form_builder/va_gov_form_builder_styles', $form['#attached']['library']);
   }
 
 }
diff --git a/tests/phpunit/va_gov_form_builder/unit/LibrariesTest.php b/tests/phpunit/va_gov_form_builder/unit/LibrariesTest.php
new file mode 100644
index 0000000000..d306020496
--- /dev/null
+++ b/tests/phpunit/va_gov_form_builder/unit/LibrariesTest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace tests\phpunit\va_gov_form_builder\unit;
+
+use DrupalFinder\DrupalFinder;
+use Symfony\Component\Yaml\Yaml;
+use Tests\Support\Classes\VaGovUnitTestBase;
+
+/**
+ * Unit tests for va_gov_form_builder.libraries.yml.
+ *
+ * @group unit
+ * @group all
+ */
+class LibrariesTest extends VaGovUnitTestBase {
+
+  /**
+   * The path to the module being tested.
+   *
+   * @var string
+   */
+  private $modulePath = 'modules/custom/va_gov_form_builder';
+
+  /**
+   * The libraries defined in libraries.yml.
+   *
+   * @var array{
+   *   css?: array{
+   *     theme?: array<string, mixed>
+   *   },
+   *   js?: array<string, mixed>,
+   *   dependencies?: array<string>
+   * }
+   */
+  private $libraries;
+
+  /**
+   * Set up the environment for each test.
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    // Find Drupal root.
+    $drupalFinder = new DrupalFinder();
+    $drupalFinder->locateRoot(__DIR__);
+    $drupalRoot = $drupalFinder->getDrupalRoot();
+
+    $yamlFile = $drupalRoot . '/' . $this->modulePath . '/va_gov_form_builder.libraries.yml';
+
+    $this->libraries = Yaml::parseFile($yamlFile);
+  }
+
+  /**
+   * Tests that the library definition contains necessary css.
+   */
+  public function testLibraryCss() {
+    $this->assertArrayHasKey('va_gov_form_builder_styles', $this->libraries);
+    $this->assertArrayHasKey('css', $this->libraries['va_gov_form_builder_styles']);
+    $this->assertArrayHasKey('theme', $this->libraries['va_gov_form_builder_styles']['css']);
+
+    $cssArray = array_keys($this->libraries['va_gov_form_builder_styles']['css']['theme']);
+
+    // Assert Form Builder css is present.
+    $this->assertContains('css/va_gov_form_builder.css', $cssArray, 'Form Builder css is present.');
+
+    // Assert external VADS tokens definition is present.
+    $matches = preg_grep('/unpkg.*@department-of-veterans-affairs.*css-library.*tokens\/css\/variables.css/', $cssArray);
+    $this->assertNotEmpty($matches, 'VADS tokens css is present.');
+  }
+
+}
diff --git a/tests/phpunit/va_gov_form_builder/unit/ModuleTest.php b/tests/phpunit/va_gov_form_builder/unit/ModuleTest.php
index 6e41d85f00..07ad0b2858 100644
--- a/tests/phpunit/va_gov_form_builder/unit/ModuleTest.php
+++ b/tests/phpunit/va_gov_form_builder/unit/ModuleTest.php
@@ -31,7 +31,7 @@ class ModuleTest extends VaGovUnitTestBase {
   private $container;
 
   /**
-   * Setup the environment for each test.
+   * Set up the environment for each test.
    */
   protected function setUp(): void {
     parent::setUp();
@@ -69,9 +69,9 @@ public function testVaGovFormBuilderHookTheme() {
     $result = va_gov_form_builder_theme();
 
     // Assert the expected theme definition exists.
-    $this->assertArrayHasKey('va_gov_form_builder_page', $result);
-    $this->assertEquals('page--va-gov-form-builder', $result['va_gov_form_builder_page']['template']);
-    $this->assertEquals($this->modulePath . '/templates', $result['va_gov_form_builder_page']['path']);
+    $this->assertArrayHasKey('page__va_gov_form_builder', $result);
+    $this->assertEquals('page', $result['page__va_gov_form_builder']['base hook']);
+    $this->assertEquals($this->modulePath . '/templates', $result['page__va_gov_form_builder']['path']);
   }
 
   /**
@@ -96,7 +96,7 @@ public function testVaGovFormBuilderThemeSuggestionsPage() {
     $suggestions = va_gov_form_builder_theme_suggestions_page($variables);
 
     // Assert the expected theme suggestion is returned.
-    $this->assertContains('va_gov_form_builder_page', $suggestions);
+    $this->assertContains('page__va_gov_form_builder', $suggestions);
   }
 
 }