From f80b9a7642fe0a632e4e5717bb1ad2b136bded82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Rudge?= Date: Fri, 11 Aug 2017 19:50:31 -0300 Subject: [PATCH] Fix custom theme for custom connections (#1083) --- .../last_login_screen.test.jsx.snap | 153 ++++++++++++++++++ .../core/sso/last_login_screen.test.jsx | 113 +++++++++++++ src/core/sso/last_login_screen.jsx | 10 ++ 3 files changed, 276 insertions(+) create mode 100644 src/__tests__/core/sso/__snapshots__/last_login_screen.test.jsx.snap create mode 100644 src/__tests__/core/sso/last_login_screen.test.jsx diff --git a/src/__tests__/core/sso/__snapshots__/last_login_screen.test.jsx.snap b/src/__tests__/core/sso/__snapshots__/last_login_screen.test.jsx.snap new file mode 100644 index 000000000..2a03264b8 --- /dev/null +++ b/src/__tests__/core/sso/__snapshots__/last_login_screen.test.jsx.snap @@ -0,0 +1,153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LastLoginScreen renders correct icon when strategy is adfs 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="windows" +/> +`; + +exports[`LastLoginScreen renders correct icon when strategy is google-apps 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="google-apps" +/> +`; + +exports[`LastLoginScreen renders correct icon when strategy is office365 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="windows" +/> +`; + +exports[`LastLoginScreen renders correct icon when strategy is some-other-strategy 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="auth0" +/> +`; + +exports[`LastLoginScreen renders correct icon when strategy is this-strategy-exists 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="auth0" +/> +`; + +exports[`LastLoginScreen renders correct icon when strategy is waad 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="windows" +/> +`; + +exports[`LastLoginScreen renders correctly 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor={undefined} + data-strategy="auth0" +/> +`; + +exports[`LastLoginScreen renders with custom connection theme 1`] = ` +
+ lastLoginInstructions +

+ } + data-primaryColor="primaryColor" + data-strategy="auth0" +/> +`; diff --git a/src/__tests__/core/sso/last_login_screen.test.jsx b/src/__tests__/core/sso/last_login_screen.test.jsx new file mode 100644 index 000000000..87de9e64a --- /dev/null +++ b/src/__tests__/core/sso/last_login_screen.test.jsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Immutable from 'immutable'; + +import { expectComponent, extractPropsFromWrapper, mockComponent } from 'testUtils'; + +jest.mock('ui/pane/quick_auth_pane', () => mockComponent('quick_auth_pane')); + +//there's a circular dependency with this module, so we need to mock it +jest.mock('engine/classic'); + +const getComponent = () => { + const LastLoginScreen = require('core/sso/last_login_screen').default; + const screen = new LastLoginScreen(); + return screen.render(); +}; + +describe('LastLoginScreen', () => { + beforeEach(() => { + jest.resetModules(); + + jest.mock('quick-auth/actions', () => ({ + logIn: jest.fn(), + skipQuickAuth: jest.fn() + })); + + jest.mock('core/index', () => ({ + id: () => 'id' + })); + + jest.mock('core/sso/index', () => ({ + lastUsedConnection: () => ({ + get: () => 'lastUsedConnection' + }), + lastUsedUsername: () => 'lastUsedUsername' + })); + + jest.mock('connection/social/index', () => ({ + STRATEGIES: {}, + authButtonsTheme: () => ({ + get: () => undefined + }) + })); + }); + const defaultProps = { + i18n: { + str: (...keys) => keys.join(','), + group: (...keys) => keys.join(','), + html: (...keys) => keys.join(',') + }, + model: 'model' + }; + it('renders correctly', () => { + const Component = getComponent(); + expectComponent().toMatchSnapshot(); + }); + it('renders with custom connection theme', () => { + require('connection/social/index').authButtonsTheme = () => ({ + get: () => + Immutable.fromJS({ + primaryColor: 'primaryColor', + foregroundColor: 'foregroundColor', + icon: 'icon' + }) + }); + const Component = getComponent(); + expectComponent().toMatchSnapshot(); + }); + describe('renders correct icon', () => { + const testStrategy = strategy => { + it(`when strategy is ${strategy}`, () => { + require('core/sso/index').lastUsedConnection = () => + Immutable.fromJS({ + strategy + }); + const Component = getComponent(); + expectComponent().toMatchSnapshot(); + }); + }; + const testStrategyName = 'this-strategy-exists'; + require('connection/social/index').STRATEGIES = { + [testStrategyName]: 'Test Strategy' + }; + const strategies = [ + testStrategyName, + 'google-apps', + 'adfs', + 'office365', + 'waad', + 'some-other-strategy' + ].forEach(testStrategy); + }); + it('calls logIn in the buttonClickHandler', () => { + const Component = getComponent(); + const wrapper = mount(); + const props = extractPropsFromWrapper(wrapper); + props.buttonClickHandler(); + const { mock } = require('quick-auth/actions').logIn; + expect(mock.calls.length).toBe(1); + expect(mock.calls[0][0]).toBe('id'); + expect(mock.calls[0][1].get()).toBe('lastUsedConnection'); + expect(mock.calls[0][2]).toBe('lastUsedUsername'); + }); + it('calls skipQuickAuth in the alternativeClickHandler', () => { + const Component = getComponent(); + const wrapper = mount(); + const props = extractPropsFromWrapper(wrapper); + props.alternativeClickHandler(); + const { mock } = require('quick-auth/actions').skipQuickAuth; + expect(mock.calls.length).toBe(1); + expect(mock.calls[0][0]).toBe('id'); + }); +}); diff --git a/src/core/sso/last_login_screen.jsx b/src/core/sso/last_login_screen.jsx index 47defb8e2..3bc90a4a9 100644 --- a/src/core/sso/last_login_screen.jsx +++ b/src/core/sso/last_login_screen.jsx @@ -6,6 +6,7 @@ import { lastUsedConnection, lastUsedUsername } from './index'; import * as l from '../index'; import { renderSignedInConfirmation } from '../signed_in_confirmation'; import { STRATEGIES as SOCIAL_STRATEGIES } from '../../connection/social/index'; +import { authButtonsTheme } from '../../connection/social/index'; // TODO: handle this from CSS function icon(strategy) { @@ -18,6 +19,12 @@ function icon(strategy) { const Component = ({ i18n, model }) => { const headerText = i18n.html('lastLoginInstructions') || null; const header = headerText &&

{headerText}

; + const theme = authButtonsTheme(model); + const connectionName = lastUsedConnection(model).get('name'); + const buttonTheme = theme.get(connectionName); + const primaryColor = buttonTheme && buttonTheme.get('primaryColor'); + const foregroundColor = buttonTheme && buttonTheme.get('foregroundColor'); + const buttonIcon = buttonTheme && buttonTheme.get('icon'); const buttonClickHandler = () => { logIn(l.id(model), lastUsedConnection(model), lastUsedUsername(model)); @@ -31,6 +38,9 @@ const Component = ({ i18n, model }) => { buttonClickHandler={buttonClickHandler} header={header} strategy={icon(lastUsedConnection(model).get('strategy'))} + buttonIcon={buttonIcon} + primaryColor={primaryColor} + foregroundColor={foregroundColor} /> ); };