Resolve "2FA should not attempt to use U2F in unsupported browsers"

1 files changed, 54 insertions, 30 deletions

diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index d84b13b07c4..57e0caa692c 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -6,7 +6,7 @@ import MockU2FDevice from './mock_u2f_device';
 describe('U2FAuthenticate', function () {
   preloadFixtures('u2f/authenticate.html.raw');
 
-  beforeEach((done) => {
+  beforeEach(() => {
     loadFixtures('u2f/authenticate.html.raw');
     this.u2fDevice = new MockU2FDevice();
     this.container = $('#js-authenticate-u2f');
@@ -19,46 +19,70 @@ describe('U2FAuthenticate', function () {
       document.querySelector('#js-login-2fa-device'),
       document.querySelector('.js-2fa-form'),
     );
+  });
 
-    // bypass automatic form submission within renderAuthenticated
-    spyOn(this.component, 'renderAuthenticated').and.returnValue(true);
+  describe('with u2f unavailable', () => {
+    beforeEach(() => {
+      spyOn(this.component, 'switchToFallbackUI');
+      this.oldu2f = window.u2f;
+      window.u2f = null;
+    });
 
-    this.component.start().then(done).catch(done.fail);
-  });
+    afterEach(() => {
+      window.u2f = this.oldu2f;
+    });
 
-  it('allows authenticating via a U2F device', () => {
-    const inProgressMessage = this.container.find('p');
-    expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
-    this.u2fDevice.respondToAuthenticateRequest({
-      deviceData: 'this is data from the device',
+    it('falls back to normal 2fa', (done) => {
+      this.component.start().then(() => {
+        expect(this.component.switchToFallbackUI).toHaveBeenCalled();
+        done();
+      }).catch(done.fail);
     });
-    expect(this.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');
-      setupButton.trigger('click');
-      this.u2fDevice.respondToAuthenticateRequest({
-        errorCode: 'error!',
-      });
-      const errorMessage = this.container.find('p');
-      return expect(errorMessage.text()).toContain('There was a problem communicating with your device');
+  describe('with u2f available', () => {
+    beforeEach((done) => {
+      // bypass automatic form submission within renderAuthenticated
+      spyOn(this.component, 'renderAuthenticated').and.returnValue(true);
+      this.u2fDevice = new MockU2FDevice();
+
+      this.component.start().then(done).catch(done.fail);
     });
-    return it('allows retrying authentication after an error', () => {
-      let setupButton = this.container.find('#js-login-u2f-device');
-      setupButton.trigger('click');
-      this.u2fDevice.respondToAuthenticateRequest({
-        errorCode: 'error!',
-      });
-      const retryButton = this.container.find('#js-u2f-try-again');
-      retryButton.trigger('click');
-      setupButton = this.container.find('#js-login-u2f-device');
-      setupButton.trigger('click');
+
+    it('allows authenticating via a U2F device', () => {
+      const inProgressMessage = this.container.find('p');
+      expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
       this.u2fDevice.respondToAuthenticateRequest({
         deviceData: 'this is data from the device',
       });
       expect(this.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');
+        setupButton.trigger('click');
+        this.u2fDevice.respondToAuthenticateRequest({
+          errorCode: 'error!',
+        });
+        const errorMessage = this.container.find('p');
+        return 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');
+        setupButton.trigger('click');
+        this.u2fDevice.respondToAuthenticateRequest({
+          errorCode: 'error!',
+        });
+        const retryButton = this.container.find('#js-u2f-try-again');
+        retryButton.trigger('click');
+        setupButton = this.container.find('#js-login-u2f-device');
+        setupButton.trigger('click');
+        this.u2fDevice.respondToAuthenticateRequest({
+          deviceData: 'this is data from the device',
+        });
+        expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
+      });
+    });
   });
 });