Merge pull request #176 from alphagov/remove-jquery

Remove jQuery from browser extension components

spec/javascripts/design_mode_component_spec.js → spec/javascripts/design_mode_component.spec.js

@@ -1,6 +1,7 @@
 "use strict";
 describe("Toggling design mode", function () {
-  var $bannerEl;
+  var designModeBannerId = "govuk-chrome-toolkit-design-mode-banner";
+  var designModeBannerElement;
   var designModeComponent;
 
   beforeEach(function () {
@@ -16,16 +17,16 @@ describe("Toggling design mode", function () {
       }
     };
     designModeComponent = new DesignModeComponent;
-    $bannerEl = $("#govuk-chrome-toolkit-design-mode-banner");
+    designModeBannerElement = document.querySelector(`#${designModeBannerId}`)
   });
 
   it("shows design mode banner", function () {
-    expect($bannerEl.text()).toMatch(/You are in design mode./);
+    expect(designModeBannerElement.textContent).toMatch(/You are in design mode./);
   });
 
   it("removes the banner when toggled off", function () {
     designModeComponent.toggleDesignMode();
-    expect($bannerEl.parent()).toHaveLength(0);
+    expect(designModeBannerElement).not.toBeVisible();
   });
 
   it("design mode is on when toggled on", function () {

spec/javascripts/highlight_component_spec.js → 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"),
           }
         ]
       )
@@ -128,28 +128,28 @@ describe("highlightComponent", function () {
 
       var highlightComponent = new HighlightComponent;
 
-      expect(highlightComponent.state).toEqual(false);
+      expect(highlightComponent.isComponentsHighlighted).toEqual(false);
 
       highlightComponent.toggleComponents();
-      expect(highlightComponent.state).toEqual(true);
+      expect(highlightComponent.isComponentsHighlighted).toEqual(true);
 
       highlightComponent.toggleComponents();
-      expect(highlightComponent.state).toEqual(false);
+      expect(highlightComponent.isComponentsHighlighted).toEqual(false);
     });
 
     it("toggles the highlight-component class", function () {
       loadFixtures("gem-c-button.html");
 
       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 → spec/javascripts/show_meta_tags.spec.js

@@ -1,7 +1,8 @@
 'use strict';
 describe("Toggling meta tags", function () {
-  var $bannerEl;
-  var highlightComponent;
+  var showMetaTagsBannerId = "govuk-chrome-toolkit-banner";
+  var showMetaTagsBannerElement;
+  var showMetaTagsComponent;
 
   beforeEach(function () {
     window.chrome = {
@@ -15,24 +16,24 @@ describe("Toggling meta tags", function () {
 
     loadFixtures("meta-tags.html")
 
-    highlightComponent = new HighlightComponent;
-    highlightComponent.toggleMetaTags();
+    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 () {
-    highlightComponent.toggleMetaTags();
+    showMetaTagsComponent.toggleMetaTags();
 
-    expect($bannerEl.parent()).toHaveLength(0);
+    expect(showMetaTagsBannerElement).not.toBeVisible();
   });
 });

spec/support/jasmine-browser.json

@@ -1,9 +1,35 @@
 {
   "srcDir": "src",
-  "srcFiles": ["**/ab_bucket_store.js", "lib/jquery.min.js", "popup/ab_tests.js", "popup/content_links.js", "popup/environment.js", "popup/extract_path.js", "popup/external_links.js", "components/highlight-component/highlight-component.js", "components/design-mode-component/design-mode-component.js"],
+  "srcFiles": [
+    "**/ab_bucket_store.js",
+    "lib/jquery.min.js",
+    "popup/ab_tests.js",
+    "popup/content_links.js",
+    "popup/environment.js",
+    "popup/extract_path.js",
+    "popup/external_links.js",
+    "components/highlight-component/highlight-component.js",
+    "components/design-mode-component/design-mode-component.js",
+    "components/show-meta-tags-component/show-meta-tags-component.js"
+  ],
   "specDir": "spec",
-  "specFiles": ["**/show_meta_tags_spec.js", "**/highlight_component_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"],
-  "helpers": ["helpers/jquery.min.js", "helpers/jasmine-jquery.js", "helpers/helpers.js", "helpers/polyfills/String.startsWith.js"],
+  "specFiles": [
+    "**/show_meta_tags.spec.js",
+    "**/highlight_component.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"
+  ],
+  "helpers": [
+    "helpers/jquery.min.js",
+    "helpers/jasmine-jquery.js",
+    "helpers/helpers.js",
+    "helpers/polyfills/String.startsWith.js"
+  ],
   "env": {
     "stopSpecOnExpectationFailure": false,
     "stopOnSpecFailure": false,

src/components/design-mode-component/design-mode-component.js

@@ -18,17 +18,21 @@ DesignModeComponent.prototype.toggleDesignMode = function () {
 }
 
 DesignModeComponent.prototype.toggleDesignModeBanner = function() {
-  var id = "govuk-chrome-toolkit-design-mode-banner";
+  var designModeBannerId = "govuk-chrome-toolkit-design-mode-banner";
   if (this.state) {
-    $('body').prepend("\
-      <div class=\"govuk-panel design-mode-component__banner\" id=\""+ id + "\">\
-        <div class=\"govuk-panel__body\">\
-          You are in design mode.\
-        </div>\
-      </div>\
-    ");
+    var designModeBanner = `
+    <div class="govuk-panel design-mode-component__banner" id="${designModeBannerId}">
+      <div class="govuk-panel__body">
+        You are in design mode.
+      </div>
+    </div>
+  `
+    var designModeWrapper = document.createElement("div")
+    designModeWrapper.innerHTML = designModeBanner
+    document.body.prepend(designModeWrapper);
   } else {
-    $("#"+id).remove();
+    var designModeBannerElement = document.querySelector(`#${designModeBannerId}`)
+    designModeBannerElement.remove()
   }
 }