Migrate spec/javascripts/u2f/ to Jest

Closes gitlab-org/gitlab#194257

spec/javascripts/u2f/authenticate_spec.js → spec/frontend/u2f/authenticate_spec.js

@@ -3,15 +3,19 @@ import U2FAuthenticate from '~/u2f/authenticate';
 import 'vendor/u2f';
 import MockU2FDevice from './mock_u2f_device';
 
-describe('U2FAuthenticate', function() {
+describe('U2FAuthenticate', () => {
+  let u2fDevice;
+  let container;
+  let component;
+
   preloadFixtures('u2f/authenticate.html');
 
   beforeEach(() => {
     loadFixtures('u2f/authenticate.html');
-    this.u2fDevice = new MockU2FDevice();
-    this.container = $('#js-authenticate-u2f');
-    this.component = new U2FAuthenticate(
-      this.container,
+    u2fDevice = new MockU2FDevice();
+    container = $('#js-authenticate-u2f');
+    component = new U2FAuthenticate(
+      container,
       '#js-login-u2f-form',
       {
         sign_requests: [],
@@ -22,21 +26,23 @@ describe('U2FAuthenticate', function() {
   });
 
   describe('with u2f unavailable', () => {
+    let oldu2f;
+
     beforeEach(() => {
-      spyOn(this.component, 'switchToFallbackUI');
-      this.oldu2f = window.u2f;
+      jest.spyOn(component, 'switchToFallbackUI').mockImplementation(() => {});
+      oldu2f = window.u2f;
       window.u2f = null;
     });
 
     afterEach(() => {
-      window.u2f = this.oldu2f;
+      window.u2f = oldu2f;
     });
 
     it('falls back to normal 2fa', done => {
-      this.component
+      component
         .start()
         .then(() => {
-          expect(this.component.switchToFallbackUI).toHaveBeenCalled();
+          expect(component.switchToFallbackUI).toHaveBeenCalled();
           done();
         })
         .catch(done.fail);
@@ -46,54 +52,55 @@ describe('U2FAuthenticate', function() {
   describe('with u2f available', () => {
     beforeEach(done => {
       // bypass automatic form submission within renderAuthenticated
-      spyOn(this.component, 'renderAuthenticated').and.returnValue(true);
-      this.u2fDevice = new MockU2FDevice();
+      jest.spyOn(component, 'renderAuthenticated').mockReturnValue(true);
+      u2fDevice = new MockU2FDevice();
 
-      this.component
+      component
         .start()
         .then(done)
         .catch(done.fail);
     });
 
     it('allows authenticating via a U2F device', () => {
-      const inProgressMessage = this.container.find('p');
+      const inProgressMessage = container.find('p');
 
       expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
-      this.u2fDevice.respondToAuthenticateRequest({
+      u2fDevice.respondToAuthenticateRequest({
         deviceData: 'this is data from the device',
       });
 
-      expect(this.component.renderAuthenticated).toHaveBeenCalledWith(
+      expect(component.renderAuthenticated).toHaveBeenCalledWith(
         '{"deviceData":"this is data from the device"}',
       );
     });
 
     describe('errors', () => {
       it('displays an error message', () => {
-        const setupButton = this.container.find('#js-login-u2f-device');
+        const setupButton = container.find('#js-login-u2f-device');
         setupButton.trigger('click');
-        this.u2fDevice.respondToAuthenticateRequest({
+        u2fDevice.respondToAuthenticateRequest({
           errorCode: 'error!',
         });
-        const errorMessage = this.container.find('p');
+        const errorMessage = container.find('p');
 
         expect(errorMessage.text()).toContain('There was a problem communicating with your device');
       });
-      return it('allows retrying authentication after an error', () => {
-        let setupButton = this.container.find('#js-login-u2f-device');
+
+      it('allows retrying authentication after an error', () => {
+        let setupButton = container.find('#js-login-u2f-device');
         setupButton.trigger('click');
-        this.u2fDevice.respondToAuthenticateRequest({
+        u2fDevice.respondToAuthenticateRequest({
           errorCode: 'error!',
         });
-        const retryButton = this.container.find('#js-u2f-try-again');
+        const retryButton = container.find('#js-u2f-try-again');
         retryButton.trigger('click');
-        setupButton = this.container.find('#js-login-u2f-device');
+        setupButton = container.find('#js-login-u2f-device');
         setupButton.trigger('click');
-        this.u2fDevice.respondToAuthenticateRequest({
+        u2fDevice.respondToAuthenticateRequest({
           deviceData: 'this is data from the device',
         });
 
-        expect(this.component.renderAuthenticated).toHaveBeenCalledWith(
+        expect(component.renderAuthenticated).toHaveBeenCalledWith(
           '{"deviceData":"this is data from the device"}',
         );
       });

spec/javascripts/u2f/register_spec.js → spec/frontend/u2f/register_spec.js

@@ -3,33 +3,37 @@ import U2FRegister from '~/u2f/register';
 import 'vendor/u2f';
 import MockU2FDevice from './mock_u2f_device';
 
-describe('U2FRegister', function() {
+describe('U2FRegister', () => {
+  let u2fDevice;
+  let container;
+  let component;
+
   preloadFixtures('u2f/register.html');
 
   beforeEach(done => {
     loadFixtures('u2f/register.html');
-    this.u2fDevice = new MockU2FDevice();
-    this.container = $('#js-register-u2f');
-    this.component = new U2FRegister(this.container, $('#js-register-u2f-templates'), {}, 'token');
-    this.component
+    u2fDevice = new MockU2FDevice();
+    container = $('#js-register-u2f');
+    component = new U2FRegister(container, $('#js-register-u2f-templates'), {}, 'token');
+    component
       .start()
       .then(done)
       .catch(done.fail);
   });
 
   it('allows registering a U2F device', () => {
-    const setupButton = this.container.find('#js-setup-u2f-device');
+    const setupButton = container.find('#js-setup-u2f-device');
 
     expect(setupButton.text()).toBe('Set up new U2F device');
     setupButton.trigger('click');
-    const inProgressMessage = this.container.children('p');
+    const inProgressMessage = container.children('p');
 
     expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
-    this.u2fDevice.respondToRegisterRequest({
+    u2fDevice.respondToRegisterRequest({
       deviceData: 'this is data from the device',
     });
-    const registeredMessage = this.container.find('p');
-    const deviceResponse = this.container.find('#js-device-response');
+    const registeredMessage = container.find('p');
+    const deviceResponse = container.find('#js-device-response');
 
     expect(registeredMessage.text()).toContain('Your device was successfully set up!');
     expect(deviceResponse.val()).toBe('{"deviceData":"this is data from the device"}');
@@ -37,41 +41,41 @@ describe('U2FRegister', function() {
 
   describe('errors', () => {
     it("doesn't allow the same device to be registered twice (for the same user", () => {
-      const setupButton = this.container.find('#js-setup-u2f-device');
+      const setupButton = container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
-      this.u2fDevice.respondToRegisterRequest({
+      u2fDevice.respondToRegisterRequest({
         errorCode: 4,
       });
-      const errorMessage = this.container.find('p');
+      const errorMessage = container.find('p');
 
       expect(errorMessage.text()).toContain('already been registered with us');
     });
 
     it('displays an error message for other errors', () => {
-      const setupButton = this.container.find('#js-setup-u2f-device');
+      const setupButton = container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
-      this.u2fDevice.respondToRegisterRequest({
+      u2fDevice.respondToRegisterRequest({
         errorCode: 'error!',
       });
-      const errorMessage = this.container.find('p');
+      const errorMessage = container.find('p');
 
       expect(errorMessage.text()).toContain('There was a problem communicating with your device');
     });
 
     it('allows retrying registration after an error', () => {
-      let setupButton = this.container.find('#js-setup-u2f-device');
+      let setupButton = container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
-      this.u2fDevice.respondToRegisterRequest({
+      u2fDevice.respondToRegisterRequest({
         errorCode: 'error!',
       });
-      const retryButton = this.container.find('#U2FTryAgain');
+      const retryButton = container.find('#U2FTryAgain');
       retryButton.trigger('click');
-      setupButton = this.container.find('#js-setup-u2f-device');
+      setupButton = container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
-      this.u2fDevice.respondToRegisterRequest({
+      u2fDevice.respondToRegisterRequest({
         deviceData: 'this is data from the device',
       });
-      const registeredMessage = this.container.find('p');
+      const registeredMessage = container.find('p');
 
       expect(registeredMessage.text()).toContain('Your device was successfully set up!');
     });