From 734cbe7076fb9f40449ca9990ddd321240e96570 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 12 May 2022 16:45:20 +0200 Subject: [PATCH] refactor: use guard clauses in button colors getters --- example/src/Examples/ButtonExample.tsx | 10 +- src/components/Banner.tsx | 2 +- src/components/Button/Button.tsx | 25 +- src/components/Button/helpers.tsx | 271 +++++--- src/components/Snackbar.tsx | 2 +- src/components/__tests__/Button.test.js | 626 +++++++++++++++++- .../__snapshots__/Button.test.js.snap | 97 +++ 7 files changed, 937 insertions(+), 96 deletions(-) diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index 1de4c612c6..900069bb11 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -15,7 +15,7 @@ const ButtonExample = () => { - ).toJSON(); @@ -78,7 +100,15 @@ it('renders disabled button', () => { it('renders button with color', () => { const tree = renderer - .create() + .create() + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + +it('renders button with button color', () => { + const tree = renderer + .create() .toJSON(); expect(tree).toMatchSnapshot(); @@ -113,3 +143,595 @@ it('renders button with an accessibility hint', () => { expect(tree).toMatchSnapshot(); }); + +describe('getButtonColors - background color', () => { + const customButtonColor = '#111111'; + + it('should return custom color no matter what is the theme version, when not disabled', () => { + expect( + getButtonColors({ + customButtonColor, + theme: getTheme(), + disabled: false, + }) + ).toMatchObject({ backgroundColor: customButtonColor }); + }); + + ['outlined', 'text'].forEach((mode) => + it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => { + expect( + getButtonColors({ + customButtonColor, + theme: getTheme(), + mode, + disabled: true, + }) + ).toMatchObject({ backgroundColor: 'transparent' }); + }) + ); + + ['outlined', 'text'].forEach((mode) => + it(`should return correct disabled color, for theme version 3, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + customButtonColor, + theme: getTheme(), + mode, + disabled: true, + }) + ).toMatchObject({ backgroundColor: 'transparent' }); + }) + ); + + ['contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => { + return expect( + getButtonColors({ + customButtonColor, + theme: getTheme(), + mode, + disabled: true, + }) + ).toMatchObject({ + backgroundColor: getTheme().colors.surfaceDisabled, + }); + }) + ); + + ['contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return correct disabled color, for theme version 3, dark theme, ${mode} mode`, () => { + return expect( + getButtonColors({ + customButtonColor, + theme: getTheme(true), + mode, + disabled: true, + }) + ).toMatchObject({ + backgroundColor: getTheme(true).colors.surfaceDisabled, + }); + }) + ); + + it('should return correct theme color, for theme version 3, elevated mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'elevated', + }) + ).toMatchObject({ + backgroundColor: getTheme().colors.elevation.level1, + }); + }); + + it('should return correct theme color, for theme version 3, dark theme, elevated mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'elevated', + }) + ).toMatchObject({ + backgroundColor: getTheme(true).colors.elevation.level1, + }); + }); + + it('should return correct theme color, for theme version 3, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'contained', + }) + ).toMatchObject({ + backgroundColor: getTheme().colors.primary, + }); + }); + + it('should return correct theme color, for theme version 3, dark theme, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'contained', + }) + ).toMatchObject({ + backgroundColor: getTheme(true).colors.primary, + }); + }); + + it('should return correct theme color, for theme version 3, contained-tonal mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'contained-tonal', + }) + ).toMatchObject({ + backgroundColor: getTheme().colors.secondaryContainer, + }); + }); + + it('should return correct theme color, for theme version 3, dark theme, contained-tonal mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'contained-tonal', + }) + ).toMatchObject({ + backgroundColor: getTheme(true).colors.secondaryContainer, + }); + }); + + ['text', 'outlined'].forEach((mode) => + it(`should return transparent color, for theme version 3, ${mode} mode`, () => { + return expect( + getButtonColors({ + theme: getTheme(), + mode, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); + + ['text', 'outlined'].forEach((mode) => + it(`should return transparent color, for theme version 3, dark theme, ${mode} mode`, () => { + return expect( + getButtonColors({ + theme: getTheme(true), + mode, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); + + it('should return correct theme color, for theme version 2, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode: 'contained', + }) + ).toMatchObject({ + backgroundColor: getTheme(false, false).colors.primary, + }); + }); + + it('should return correct theme color, for theme version 2, when disabled, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode: 'contained', + disabled: true, + }) + ).toMatchObject({ + backgroundColor: color(black).alpha(0.12).rgb().string(), + }); + }); + + it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + mode: 'contained', + disabled: true, + }) + ).toMatchObject({ + backgroundColor: color(white).alpha(0.12).rgb().string(), + }); + }); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme color, for theme version 2, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + mode, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode, + disabled: true, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + mode, + disabled: true, + }) + ).toMatchObject({ + backgroundColor: 'transparent', + }); + }) + ); +}); + +describe('getButtonColors - text color', () => { + const customTextColor = '#313131'; + + it('should return custom text color no matter what is the theme version, when not disabled', () => { + expect( + getButtonColors({ + customTextColor, + theme: getTheme(), + disabled: false, + }) + ).toMatchObject({ textColor: customTextColor }); + }); + + it('should return correct disabled text color, for theme version 3, no matter what the mode is', () => { + expect( + getButtonColors({ + customTextColor, + theme: getTheme(), + disabled: true, + }) + ).toMatchObject({ + textColor: getTheme().colors.onSurfaceDisabled, + }); + }); + + it('should return correct disabled text color, for theme version 3, dark theme, no matter what the mode is', () => { + expect( + getButtonColors({ + customTextColor, + theme: getTheme(true), + disabled: true, + }) + ).toMatchObject({ + textColor: getTheme(true).colors.onSurfaceDisabled, + }); + }); + + ['contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return correct text color for dark prop, for theme version 3, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(), + mode, + dark: true, + }) + ).toMatchObject({ + textColor: white, + }); + }) + ); + + ['outlined', 'text', 'elevated'].forEach((mode) => + it(`should return correct theme text color, for theme version 3, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(), + mode, + }) + ).toMatchObject({ + textColor: getTheme().colors.primary, + }); + }) + ); + + ['outlined', 'text', 'elevated'].forEach((mode) => + it(`should return correct theme text color, for theme version 3, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode, + }) + ).toMatchObject({ + textColor: getTheme(true).colors.primary, + }); + }) + ); + + it('should return correct theme text color, for theme version 3, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'contained', + }) + ).toMatchObject({ + textColor: getTheme().colors.onPrimary, + }); + }); + + it('should return correct theme text color, for theme version 3, dark theme, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'contained', + }) + ).toMatchObject({ + textColor: getTheme(true).colors.onPrimary, + }); + }); + + it('should return correct theme text color, for theme version 3, contained-tonal mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'contained-tonal', + }) + ).toMatchObject({ + textColor: getTheme().colors.onSecondaryContainer, + }); + }); + + it('should return correct theme text color, for theme version 3, dark theme contained-tonal mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'contained-tonal', + }) + ).toMatchObject({ + textColor: getTheme(true).colors.onSecondaryContainer, + }); + }); + + it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + disabled: true, + }) + ).toMatchObject({ + textColor: color(black).alpha(0.32).rgb().string(), + }); + }); + + it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + disabled: true, + }) + ).toMatchObject({ + textColor: color(white).alpha(0.32).rgb().string(), + }); + }); + + it('should return correct theme text color, for theme version 2, contained mode', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode: 'contained', + dark: true, + }) + ).toMatchObject({ + textColor: '#ffffff', + }); + }); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode, + }) + ).toMatchObject({ + textColor: getTheme(false, false).colors.primary, + }); + }) + ); + + ['text', 'outlined'].forEach((mode) => + it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + mode, + }) + ).toMatchObject({ + textColor: getTheme(true, false).colors.primary, + }); + }) + ); +}); + +describe('getButtonColors - border color', () => { + it('should return correct border color, for theme version 3, when disabled, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + disabled: true, + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: getTheme().colors.surfaceDisabled, + }); + }); + + it('should return correct border color, for theme version 3, when disabled, dark theme, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + disabled: true, + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: getTheme(true).colors.surfaceDisabled, + }); + }); + + it('should return correct border color, for theme version 3, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: getTheme().colors.outline, + }); + }); + + it('should return correct border color, for theme version 3, dark theme, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: getTheme(true).colors.outline, + }); + }); + + ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return transparent border, for theme version 3, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(), + mode, + }) + ).toMatchObject({ + borderColor: 'transparent', + }); + }) + ); + + ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return transparent border, for theme version 3, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(true), + mode, + }) + ).toMatchObject({ + borderColor: 'transparent', + }); + }) + ); + + it('should return correct border color, for theme version 2, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: color(black).alpha(0.29).rgb().string(), + }); + }); + + it('should return correct border color, for theme version 2, dark theme, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(true, false), + mode: 'outlined', + }) + ).toMatchObject({ + borderColor: color(white).alpha(0.29).rgb().string(), + }); + }); + + ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return transparent border, for theme version 2, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode, + }) + ).toMatchObject({ + borderColor: 'transparent', + }); + }) + ); + + ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode, + }) + ).toMatchObject({ + borderColor: 'transparent', + }); + }) + ); +}); + +describe('getButtonColors - border width', () => { + it('should return correct border width, for theme version 3, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(), + mode: 'outlined', + }) + ).toMatchObject({ + borderWidth: 1, + }); + }); + + it('should return correct border width, for theme version 2, outlined mode', () => { + expect( + getButtonColors({ + theme: getTheme(false, false), + mode: 'outlined', + }) + ).toMatchObject({ + borderWidth: StyleSheet.hairlineWidth, + }); + }); + + ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) => + it(`should return correct border width, for ${mode} mode`, () => { + expect( + getButtonColors({ + theme: getTheme(), + mode, + }) + ).toMatchObject({ + borderWidth: 0, + }); + }) + ); +}); diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap index a2dbe090a8..4fb393b51b 100644 --- a/src/components/__tests__/__snapshots__/Button.test.js.snap +++ b/src/components/__tests__/__snapshots__/Button.test.js.snap @@ -196,6 +196,103 @@ exports[`renders button with an accessibility label 1`] = ` `; +exports[`renders button with button color 1`] = ` + + + + + Custom Button + + + + +`; + exports[`renders button with color 1`] = `