diff --git a/packages/fxa-content-server/app/scripts/templates/index.mustache b/packages/fxa-content-server/app/scripts/templates/index.mustache index 19c74bb0d87..84bd87a8ef5 100644 --- a/packages/fxa-content-server/app/scripts/templates/index.mustache +++ b/packages/fxa-content-server/app/scripts/templates/index.mustache @@ -43,7 +43,14 @@ </form> {{#isInThirdPartyAuthExperiment}} - {{{ unsafeThirdPartyAuthHTML }}} + {{^isSync}} + {{{ unsafeThirdPartyAuthHTML }}} + {{/isSync}} + {{#isSync}} + <p class="text-xs text-grey-500 mb-0 mt-5" id="firefox-family-services"> + {{#t}}A Firefox account also unlocks access to more privacy-protecting products from Mozilla.{{/t}} + </p> + {{/isSync}} {{/isInThirdPartyAuthExperiment}} {{^isInThirdPartyAuthExperiment}} diff --git a/packages/fxa-content-server/app/tests/spec/views/index.js b/packages/fxa-content-server/app/tests/spec/views/index.js index 0c648d9f0a8..12964509c2c 100644 --- a/packages/fxa-content-server/app/tests/spec/views/index.js +++ b/packages/fxa-content-server/app/tests/spec/views/index.js @@ -6,7 +6,10 @@ import $ from 'jquery'; import { assert } from 'chai'; import AuthBroker from 'models/auth_brokers/base'; import AuthErrors from 'lib/auth-errors'; -import { ENTER_EMAIL } from '../../../../tests/functional/lib/selectors'; +import { + ENTER_EMAIL, + THIRD_PARTY_AUTH, +} from '../../../../tests/functional/lib/selectors'; import FormPrefill from 'models/form-prefill'; import IndexView from 'views/index'; import { Model } from 'backbone'; @@ -16,7 +19,10 @@ import sinon from 'sinon'; import User from 'models/user'; import WindowMock from '../../mocks/window'; -const Selectors = ENTER_EMAIL; +const Selectors = { + ...ENTER_EMAIL, + THIRD_PARTY_AUTH, +}; const EMAIL = 'testuser@testuser.com'; @@ -216,6 +222,36 @@ describe('views/index', () => { ); }); }); + + describe('user is in thirdPartyAuth experiment', () => { + beforeEach(() => { + sinon + .stub(view, 'isInThirdPartyAuthExperiment') + .callsFake(() => true); + }); + + it('renders as expected when not sync', () => { + return view.render().then(() => { + assert.lengthOf(view.$(Selectors.FIREFOX_FAMILY_SERVICES), 0); + assert.lengthOf(view.$(Selectors.THIRD_PARTY_AUTH.GOOGLE), 1); + assert.lengthOf(view.$(Selectors.THIRD_PARTY_AUTH.APPLE), 1); + }); + }); + it('renders as expected when sync', () => { + relier.set({ + action: 'email', + service: 'sync', + serviceName: 'Firefox Sync', + }); + sinon.stub(relier, 'isSync').callsFake(() => true); + + return view.render().then(() => { + assert.lengthOf(view.$(Selectors.FIREFOX_FAMILY_SERVICES), 1); + assert.lengthOf(view.$(Selectors.THIRD_PARTY_AUTH.GOOGLE), 0); + assert.lengthOf(view.$(Selectors.THIRD_PARTY_AUTH.APPLE), 0); + }); + }); + }); }); describe('fallback behavior', () => { diff --git a/packages/fxa-content-server/tests/functional/lib/selectors.js b/packages/fxa-content-server/tests/functional/lib/selectors.js index 8a3f1c12daf..f98d520c8dc 100644 --- a/packages/fxa-content-server/tests/functional/lib/selectors.js +++ b/packages/fxa-content-server/tests/functional/lib/selectors.js @@ -784,6 +784,10 @@ module.exports = { VPASSWORD: '#vpassword', ...CWTS_ENGINES, }, + THIRD_PARTY_AUTH: { + GOOGLE: '#google-login-button', + APPLE: '#apple-login-button', + }, TOS: { HEADER: '#fxa-tos-header', LINK_BACK: '#fxa-tos-back',