Created unit tests, fixtures and integration tests

Also changed the user_callout haml to a partial and
added the corresponding SVG icon

2 files changed, 54 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml
new file mode 100644
index 00000000000..2aa6bf4b604
--- /dev/null
+++ b/spec/javascripts/fixtures/user_callout.html.haml
@@ -0,0 +1,12 @@
+#user-callout
+  .bordered-box.landing.content-block
+    %i.fa.fa-times.dismiss-icon
+    .row
+      .col-sm-3.col-xs-12.svg-container
+      .col-sm-8.col-xs-12.inner-content
+        %h4
+          Customize your experience
+        %p
+          Change syntax themes, default project pages, and more in preferences.
+        %a{ href: 'foo', class:'user-callout-btn' }
+          Check it out
\ No newline at end of file
diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js
new file mode 100644
index 00000000000..26a12bed067
--- /dev/null
+++ b/spec/javascripts/user_callout_spec.js
@@ -0,0 +1,42 @@
+/* esint-disable space-before-function-paren, arrow-body-style */
+require('~/user_callout');
+
+((global) => {
+  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+  const Cookie = window.Cookies;
+
+  describe('UserCallout', function () {
+    const fixtureName = 'static/user_callout.html.raw';
+    preloadFixtures(fixtureName);
+
+    it('should be defined in the global scope', () => {
+      expect(global.UserCallout).toBeDefined();
+    });
+
+    beforeEach(() => {
+      loadFixtures(fixtureName);
+      this.userCallout = new global.UserCallout();
+      this.dismissIcon = $('.dismiss-icon');
+      this.userCalloutContainer = $('#user-callout');
+      this.userCalloutBtn = $('.user-callout-btn');
+      Cookie.set(USER_CALLOUT_COOKIE, 0);
+    });
+
+    it('shows when cookie is set to false', () => {
+      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
+      expect(this.userCalloutContainer.is(':visible')).toBe(true);
+    });
+
+    it('hides when user clicks on the dismiss-icon', () => {
+      this.dismissIcon.click();
+      expect(this.userCalloutContainer.is(':visible')).toBe(false);
+      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
+    });
+
+    it('hides when user clicks on the "check it out" button', () => {
+      this.userCalloutBtn.click();
+      expect(this.userCalloutContainer.is(':visible')).toBe(false);
+      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
+    });
+  });
+})(window.gl || (window.gl = {}));