Remove jQuery from tests

spec/javascripts/highlight_component.spec.js

@@ -1,7 +1,7 @@
 'use strict';
 describe("Toggling component highlighting", function () {
 
-  var $breadcrumbsEl;
+  var breadcrumbsElement;
   var highlightComponent;
 
   beforeEach(function () {
@@ -21,26 +21,26 @@ describe("Toggling component highlighting", function () {
 
     highlightComponent = new HighlightComponent;
 
-    $breadcrumbsEl = $("#jasmine-fixtures .gem-c-breadcrumbs");
+    breadcrumbsElement = document.querySelector("#jasmine-fixtures .gem-c-breadcrumbs");
   });
 
   it("highlights govuk components", function () {
-    expect($breadcrumbsEl).toHaveClass("highlight-component");
+    expect(breadcrumbsElement).toHaveClass("highlight-component");
   });
 
   it("exposes the component name as data attribute", function () {
-    expect($breadcrumbsEl.data("component-name")).toEqual("breadcrumbs");
+    expect(breadcrumbsElement.dataset.componentName).toEqual("breadcrumbs");
   });
 
   it("exposes the app name as data attribute", function () {
-    expect($breadcrumbsEl.data("app-name")).toEqual("gem-c-");
+    expect(breadcrumbsElement.dataset.appName).toEqual("gem-c-");
   });
 
   it("adds the ability to click through to the component's documentation", function () {
     spyOn(window, "open").and.callThrough()
-    var clickEvent = spyOnEvent($breadcrumbsEl, "click");
+    var clickEvent = spyOnEvent(breadcrumbsElement, "click");
 
-    $breadcrumbsEl.click();
+    breadcrumbsElement.click();
 
     expect(clickEvent).toHaveBeenTriggered();
     expect(window.open).toHaveBeenCalledWith(
@@ -51,16 +51,16 @@ describe("Toggling component highlighting", function () {
   it("removes the highlight when toggled off", function () {
     highlightComponent.toggleComponents();
 
-    expect($breadcrumbsEl).not.toHaveClass("highlight-component");
+    expect(breadcrumbsElement).not.toHaveClass("highlight-component");
   });
 
   it("removes the click functionality when toggled off", function () {
     spyOn(window, "open").and.callThrough()
     highlightComponent.toggleComponents();
 
-    var clickEvent = spyOnEvent($breadcrumbsEl, "click");
+    var clickEvent = spyOnEvent(breadcrumbsElement, "click");
 
-    $breadcrumbsEl.click();
+    breadcrumbsElement.click();
 
     expect(clickEvent).toHaveBeenTriggered();
     expect(window.open).not.toHaveBeenCalled();
@@ -80,7 +80,7 @@ describe("highlightComponent", function () {
   })
 
   describe("components", function () {
-    var $html;
+    var html;
 
     beforeEach(function () {
       loadFixtures(
@@ -90,7 +90,7 @@ describe("highlightComponent", function () {
         "gem-c-label.html"
       )
 
-      $html = $("#jasmine-fixtures");
+      html = document.querySelector("#jasmine-fixtures");
     });
 
     it("builds an array of components", function () {
@@ -101,22 +101,22 @@ describe("highlightComponent", function () {
           {
             name: "back-to-top",
             prefix: "app-c-",
-            element: $html.find(".app-c-back-to-top")[0],
+            element: html.querySelector(".app-c-back-to-top"),
           },
           {
             name: "breadcrumbs",
             prefix: "gem-c-",
-            element: $html.find(".gem-c-breadcrumbs")[0],
+            element: html.querySelector(".gem-c-breadcrumbs"),
           },
           {
             name: "button",
             prefix: "gem-c-",
-            element: $html.find(".gem-c-button")[0],
+            element: html.querySelector(".gem-c-button"),
           },
           {
             name: "label",
             prefix: "gem-c-",
-            element: $html.find(".gem-c-label")[0],
+            element: html.querySelector(".gem-c-label"),
           }
         ]
       )
@@ -142,14 +142,14 @@ describe("highlightComponent", function () {
 
       var highlightComponent = new HighlightComponent;
 
-      var $buttonEl = $("#jasmine-fixtures .gem-c-button");
-      expect($buttonEl).not.toHaveClass("highlight-component");
+      var buttonElement = document.querySelector("#jasmine-fixtures .gem-c-button");
+      expect(buttonElement).not.toHaveClass("highlight-component");
 
       highlightComponent.toggleComponents();
-      expect($buttonEl).toHaveClass("highlight-component");
+      expect(buttonElement).toHaveClass("highlight-component");
 
       highlightComponent.toggleComponents();
-      expect($buttonEl).not.toHaveClass("highlight-component");
+      expect(buttonElement).not.toHaveClass("highlight-component");
     });
   });
 });

spec/javascripts/show_meta_tags.spec.js

@@ -1,6 +1,7 @@
 'use strict';
 describe("Toggling meta tags", function () {
-  var $bannerEl;
+  var showMetaTagsBannerId = "govuk-chrome-toolkit-banner";
+  var showMetaTagsBannerElement;
   var showMetaTagsComponent;
 
   beforeEach(function () {
@@ -18,21 +19,21 @@ describe("Toggling meta tags", function () {
     showMetaTagsComponent = new ShowMetaTagsComponent;
     showMetaTagsComponent.toggleMetaTags();
 
-    $bannerEl = $("#govuk-chrome-toolkit-banner");
+    showMetaTagsBannerElement = document.querySelector(`#${showMetaTagsBannerId}`);
   });
 
   it("shows meta tags with name and content", function () {
-    expect($bannerEl.text()).toMatch(/foo/);
+    expect(showMetaTagsBannerElement.textContent).toMatch(/foo/);
   });
 
   it("doesn't show meta tags that use property instead of name", function () {
     // No particular reason for this, it just doesn't
-    expect($bannerEl.text()).not.toMatch(/og:image/);
+    expect(showMetaTagsBannerElement.textContent).not.toMatch(/og:image/);
   });
 
   it("removes the banner when toggled off", function () {
     showMetaTagsComponent.toggleMetaTags();
 
-    expect($bannerEl.parent()).toHaveLength(0);
+    expect(showMetaTagsBannerElement).not.toBeVisible();
   });
 });

spec/support/jasmine-browser.json

@@ -16,13 +16,13 @@
   "specFiles": [
     "**/show_meta_tags.spec.js",
     "**/highlight_component.spec.js",
-    "**/extract_path_spec.js",
-    "**/external_links_spec.js",
-    "**/environment_spec.js",
+    "**/extract_path.spec.js",
+    "**/external_links.spec.js",
+    "**/environment.spec.js",
     "**/design_mode_component.spec.js",
-    "**/content_links_spec.js",
-    "**/ab_tests_spec.js",
-    "**/ab_bucket_store_spec.js"
+    "**/content_links.spec.js",
+    "**/ab_tests.spec.js",
+    "**/ab_bucket_store.spec.js"
   ],
   "helpers": [
     "helpers/jquery.min.js",