Add default label test for sidebar

src/components/Header/component/SafeListHeader/index.jsx

@@ -13,6 +13,8 @@ import {
 import { safesCountSelector } from '~/routes/safe/store/selectors'
 import { SidebarContext } from '~/components/Sidebar'
 
+export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
+
 const useStyles = makeStyles({
   container: {
     flexGrow: 0,
@@ -47,7 +49,12 @@ const SafeListHeader = ({ safesCount }: Props) => {
       <Paragraph size="xs" className={classes.counter}>
         {safesCount}
       </Paragraph>
-      <IconButton onClick={toggleSidebar} className={classes.icon} aria-label="Expand Safe List">
+      <IconButton
+        onClick={toggleSidebar}
+        className={classes.icon}
+        aria-label="Expand Safe List"
+        data-testid={TOGGLE_SIDEBAR_BTN_TESTID}
+      >
         {isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon color="secondary" />}
       </IconButton>
     </Col>

src/components/Sidebar/SafeList/index.jsx

@@ -19,6 +19,8 @@ import { type Safe } from '~/routes/safe/store/models/safe'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
 import DefaultBadge from './DefaultBadge'
 
+export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID'
+
 type SafeListProps = {
   safes: List<Safe>,
   onSafeClick: Function,
@@ -69,7 +71,7 @@ const SafeList = ({
     <MuiList className={classes.list}>
       {safes.map((safe) => (
         <React.Fragment key={safe.address}>
-          <Link to={`${SAFELIST_ADDRESS}/${safe.address}`} onClick={onSafeClick}>
+          <Link to={`${SAFELIST_ADDRESS}/${safe.address}`} onClick={onSafeClick} data-testid={SIDEBAR_SAFELIST_ROW_TESTID}>
             <ListItem classes={{ root: classes.listItemRoot }}>
               <ListItemIcon>
                 <Identicon address={safe.address} diameter={32} className={classes.icon} />

src/test/safe.dom.sidebar.test.js

@@ -1 +1,30 @@
 // @flow
+import { act, fireEvent } from '@testing-library/react'
+import { aNewStore } from '~/store'
+import { aMinedSafe } from '~/test/builder/safe.redux.builder'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
+import '@testing-library/jest-dom/extend-expect'
+import { TOGGLE_SIDEBAR_BTN_TESTID } from '~/components/Header/component/SafeListHeader'
+import { SIDEBAR_SAFELIST_ROW_TESTID } from '~/components/Sidebar/SafeList'
+
+describe('DOM > Feature > Sidebar', () => {
+  let store
+  let safeAddress: string
+  beforeEach(async () => {
+    store = aNewStore()
+    safeAddress = await aMinedSafe(store)
+  })
+
+  it('Shows "default" label for a single safe', async () => {
+    const SafeDom = await renderSafeView(store, safeAddress)
+
+    act(() => {
+      fireEvent.click(SafeDom.getByTestId(TOGGLE_SIDEBAR_BTN_TESTID))
+    })
+
+    const safes = SafeDom.getAllByTestId(SIDEBAR_SAFELIST_ROW_TESTID)
+    expect(safes.length).toBe(1)
+
+    expect(safes[0]).toContainElement(SafeDom.getByText('default'))
+  })
+})