✅ Add unit tests; closes brave/brave-browser#4523

components/brave_new_tab_ui/components/newTab/settings.tsx

@@ -10,7 +10,7 @@ import { Toggle } from 'brave-ui/features/newTab/toggle'
 
 import { getLocale } from '../../../common/locale'
 
-interface Props {
+export interface Props {
   onClickOutside: () => void
   toggleShowBackgroundImage: () => void
   showBackgroundImage: boolean

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -18,7 +18,7 @@ export const enum types {
   NEW_TAB_GRID_SITES_UPDATED = '@@newtab/NEW_TAB_GRID_SITES_UPDATED',
   NEW_TAB_STATS_UPDATED = '@@newtab/NEW_TAB_STATS_UPDATED',
   NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE = '@@newtab/NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE',
-  NEW_TAB_SHOW_SETTINGS_MENU = '@@newtab/NEW_TAB_STATS_UPDATED',
+  NEW_TAB_SHOW_SETTINGS_MENU = '@@newtab/NEW_TAB_SHOW_SETTINGS_MENU',
   NEW_TAB_CLOSE_SETTINGS_MENU = '@@newtab/NEW_TAB_CLOSE_SETTINGS_MENU',
   NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE = '@@newtab/NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE'
 }

components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts

@@ -144,4 +144,19 @@ describe('newTabActions', () => {
       payload: { shouldUse }
     })
   })
+  it('showSettingsMenu', () => {
+    expect(actions.showSettingsMenu()).toEqual({
+      type: types.NEW_TAB_SHOW_SETTINGS_MENU
+    })
+  })
+  it('closeSettingsMenu', () => {
+    expect(actions.showSettingsMenu()).toEqual({
+      type: types.NEW_TAB_SHOW_SETTINGS_MENU
+    })
+  })
+  it('toggleShowBackgroundImage', () => {
+    expect(actions.toggleShowBackgroundImage()).toEqual({
+      type: types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE
+    })
+  })
 })

components/test/brave_new_tab_ui/components/settings_test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { SettingsMenu, SettingsWrapper } from 'brave-ui/features/newTab/default'
+import Settings, { Props } from '../../../../components/brave_new_tab_ui/components/newTab/settings'
+
+describe('settings component tests', () => {
+  const mockProps: Props = {
+    onClickOutside: () => null,
+    toggleShowBackgroundImage: () => null,
+    showBackgroundImage: true
+  }
+  it('should render the component properly', () => {
+    const wrapper = shallow(
+      <Settings
+        onClickOutside={mockProps.onClickOutside}
+        toggleShowBackgroundImage={mockProps.toggleShowBackgroundImage}
+        showBackgroundImage={mockProps.showBackgroundImage}
+      />)
+    expect(wrapper.find(SettingsMenu)).toHaveLength(1)
+    expect(wrapper.find(SettingsWrapper)).toHaveLength(1)
+  })
+})

components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts

@@ -324,4 +324,43 @@ describe('newTabReducer', () => {
       })
     })
   })
+
+  describe('NEW_TAB_SHOW_SETTINGS_MENU', () => {
+    it('should set show settings to true', () => {
+      const mockState = { ...fakeState, showSettings: false }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_SHOW_SETTINGS_MENU
+      })
+      const expected = {
+        ...mockState,
+        showSettings: true
+      }
+      expect(assertion).toEqual(expected)
+    })
+  })
+
+  describe('NEW_TAB_CLOSE_SETTINGS_MENU', () => {
+    it('should set show settings to false', () => {
+      const mockState = { ...fakeState, showSettings: true }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_CLOSE_SETTINGS_MENU
+      })
+      const expected = {
+        ...mockState,
+        showSettings: false
+      }
+      expect(assertion).toEqual(expected)
+    })
+  })
+
+  describe('NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE', () => {
+    it('should toggle showBackgroundimage status to be true', () => {
+      const mockState = { ...fakeState, showBackgroundImage: false }
+      const expected = { ...mockState, showBackgroundImage: true }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE
+      })
+      expect(assertion).toEqual(expected)
+    })
+  })
 })

components/test/testData.ts

@@ -41,6 +41,8 @@ export const syncInitialState: Sync.ApplicationState = { syncData }
 
 export const newTabInitialState: NewTab.ApplicationState = {
   newTabData: {
+    showBackgroundImage: false,
+    showSettings: false,
     topSites: [],
     ignoredTopSites: [],
     pinnedTopSites: [],

package.json

@@ -277,7 +277,7 @@
     "@types/react-redux": "6.0.4",
     "@types/redux-logger": "^3.0.7",
     "awesome-typescript-loader": "^5.2.1",
-    "brave-ui": "github:brave/brave-ui#584973511366801f9099d28a6d35604214afa146",
+    "brave-ui": "github:brave/brave-ui#77b4e9f2687aa3032479b322e382f82a7fdd29b2",
     "css-loader": "^2.1.1",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",