@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.5

package/src/containers/CourseFilterControls/components/FilterForm.test.jsx

@@ -1,29 +1,54 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { FilterKeys } from '@src/data/constants/app';
+import { FilterForm, filterOrder } from './FilterForm';
+import messages from '../messages';
 
-import { FilterKeys } from 'data/constants/app';
-import FilterForm, { filterOrder } from './FilterForm';
+const mockHandleFilterChange = jest.fn();
 
-jest.mock('./Checkbox', () => 'Checkbox');
+const defaultProps = {
+  filters: [FilterKeys.inProgress],
+  handleFilterChange: mockHandleFilterChange,
+};
+
+const renderComponent = (props = defaultProps) => render(
+  <IntlProvider messages={{}}>
+    <FilterForm {...props} />
+  </IntlProvider>,
+);
 
 describe('FilterForm', () => {
-  const props = {
-    filters: ['test-filter'],
-    handleFilterChange: jest.fn().mockName('handleFilterChange'),
-  };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<FilterForm {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all filter checkboxes in correct order', () => {
+    renderComponent();
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(filterOrder.length);
+    checkboxes.forEach((checkbox, index) => {
+      expect(checkbox).toHaveAttribute('value', filterOrder[index]);
+    });
+  });
+
+  it('checks boxes based on filters prop', () => {
+    const filters = [FilterKeys.inProgress, FilterKeys.done];
+    renderComponent({ ...defaultProps, filters });
+    filters.forEach(filter => {
+      expect(screen.getByRole('checkbox', { name: formatMessage(messages[filter]) })).toBeChecked();
     });
   });
 
-  test('filterOrder', () => {
-    expect(filterOrder).toEqual([
-      FilterKeys.inProgress,
-      FilterKeys.notStarted,
-      FilterKeys.done,
-      FilterKeys.notEnrolled,
-      FilterKeys.upgraded,
-    ]);
+  it('calls handleFilterChange when checkbox is clicked', () => {
+    renderComponent();
+    const checkbox = screen.getByRole('checkbox', { name: formatMessage(messages.notStarted) });
+    fireEvent.click(checkbox);
+    expect(mockHandleFilterChange).toHaveBeenCalled();
+  });
+
+  it('displays course status heading', () => {
+    renderComponent();
+    expect(screen.getByText(/course status/i)).toBeInTheDocument();
   });
 });

package/src/containers/CourseFilterControls/components/SortForm.test.jsx

@@ -1,19 +1,29 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
 
-import { SortKeys } from 'data/constants/app';
+import { SortKeys } from '@src/data/constants/app';
 import SortForm from './SortForm';
-
-jest.mock('./Checkbox', () => 'Checkbox');
+import messages from '../messages';
 
 describe('SortForm', () => {
   const props = {
     handleSortChange: jest.fn().mockName('handleSortChange'),
     sortBy: SortKeys.enrolled,
   };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<SortForm {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
+  it('renders heading', () => {
+    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
+    const heading = screen.getByText(formatMessage(messages.sort));
+    expect(heading).toBeInTheDocument();
+  });
+  it('renders radio enrolled', () => {
+    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
+    const enrolled = screen.getByRole('radio', { name: formatMessage(messages.sortLastEnrolled) });
+    expect(enrolled).toBeInTheDocument();
+  });
+  it('renders radio title', () => {
+    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
+    const title = screen.getByRole('radio', { name: formatMessage(messages.sortTitle) });
+    expect(title).toBeInTheDocument();
   });
 });

package/src/containers/CourseFilterControls/hooks.test.js

@@ -1,26 +1,35 @@
 import { useToggle } from '@openedx/paragon';
 
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
+import { MockUseState } from '@src/testUtils';
 
-import track from 'tracking';
+import track from '@src/tracking';
+import { reduxHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
 
-jest.mock('tracking', () => ({
-  filter: {
-    filterClicked: jest.fn(),
-    filterOptionSelected: jest.fn(),
-  },
-}));
-
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useAddFilter: jest.fn(),
     useRemoveFilter: jest.fn(),
   },
 }));
 
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  useToggle: jest.fn().mockImplementation((val) => [
+    val,
+    jest.fn().mockName('useToggle.setTrue'),
+    jest.fn().mockName('useToggle.setFalse'),
+  ]),
+}));
+
+jest.mock('@src/tracking', () => ({
+  filter: {
+    filterClicked: jest.fn(),
+    filterOptionSelected: jest.fn(),
+  },
+}));
+
 const state = new MockUseState(hooks);
 
 describe('CourseFilterControls hooks', () => {
@@ -29,9 +38,12 @@ describe('CourseFilterControls hooks', () => {
   const setSortBy = jest.fn();
 
   const removeFilter = jest.fn();
-  reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
   const addFilter = jest.fn();
-  reduxHooks.useAddFilter.mockReturnValue(addFilter);
+
+  beforeEach(() => {
+    reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
+    reduxHooks.useAddFilter.mockReturnValue(addFilter);
+  });
 
   const toggleOpen = jest.fn();
   const toggleClose = jest.fn();

package/src/containers/CoursesPanel/CourseList/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import { useIsCollapsed } from './hooks';
 import CourseList from '.';
@@ -7,9 +7,9 @@ jest.mock('./hooks', () => ({
   useIsCollapsed: jest.fn(),
 }));
 
-jest.mock('containers/CourseCard', () => 'CourseCard');
-jest.mock('containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: 'ActiveCourseFilters',
+jest.mock('../../CourseCard', () => jest.fn(() => <div>CourseCard</div>));
+jest.mock('../../CourseFilterControls', () => ({
+  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
 }));
 
 describe('CourseList', () => {
@@ -22,43 +22,60 @@ describe('CourseList', () => {
   };
   useIsCollapsed.mockReturnValue(false);
 
-  const createWrapper = (courseListData = defaultCourseListData) => (
-    shallow(<CourseList courseListData={courseListData} />)
+  const renderList = (courseListData = defaultCourseListData) => (
+    render(<CourseList courseListData={courseListData} />)
   );
 
   describe('no courses or filters', () => {
-    test('snapshot', () => {
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
+    it('should not render related components', () => {
+      renderList();
+      const filterControls = screen.queryByText('ActiveCourseFilters');
+      const courseCard = screen.queryByText('CourseCard');
+      const prevButton = screen.queryByRole('button', { name: 'Previous' });
+      expect(filterControls).toBeNull();
+      expect(courseCard).toBeNull();
+      expect(prevButton).toBeNull();
     });
   });
   describe('with filters', () => {
-    test('snapshot', () => {
-      const wrapper = createWrapper({
-        filterOptions: { abitary: 'filter' },
+    it('should render filter component', () => {
+      renderList({
+        ...defaultCourseListData,
         showFilters: true,
       });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      const filterControls = screen.getByText('ActiveCourseFilters');
+      expect(filterControls).toBeInTheDocument();
     });
   });
   describe('with multiple courses and pages', () => {
-    test('snapshot', () => {
-      const wrapper = createWrapper({
-        visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
-        numPages: 3,
+    it('render Course Cards and pagination', () => {
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
+      const numPages = 3;
+      renderList({
+        ...defaultCourseListData,
+        visibleList,
+        numPages,
       });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      const courseCards = screen.getAllByText('CourseCard');
+      expect(courseCards.length).toEqual(visibleList.length);
+      const pageButtons = screen.getAllByRole('button', { name: /^Page/i });
+      expect(pageButtons.length).toBe(numPages);
     });
   });
   describe('collapsed with multiple courses and pages', () => {
-    test('snapshot', () => {
+    it('should render correct components', () => {
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
       useIsCollapsed.mockReturnValueOnce(true);
-      const wrapper = createWrapper({
-        visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
+      renderList({
+        ...defaultCourseListData,
+        visibleList,
         numPages: 3,
         showFilters: true,
       });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      const courseCards = screen.getAllByText('CourseCard');
+      expect(courseCards.length).toEqual(visibleList.length);
+      const reducedPagination = screen.getByRole('button', { name: '1 of 3' });
+      expect(reducedPagination).toBeInTheDocument();
     });
   });
 });

package/src/containers/CoursesPanel/NoCoursesView/index.scss

@@ -1,15 +1,13 @@
-@import "@openedx/paragon/scss/core/core";
-
 #no-courses-content-view {
-  border: 2px solid $light-400;
+  border: 2px solid var(--pgn-color-light-400);
   flex-direction: column;
-  padding-bottom: map-get($spacers, 5);
-  padding-top: map-get($spacers, 5);
+  padding-bottom: var(--pgn-spacing-spacer-5);
+  padding-top: var(--pgn-spacing-spacer-5);
   height: 100%;
 
   & > * {
-    margin-top: map-get($spacers, 3);
-    margin-bottom: map-get($spacers, 3);
+    margin-top: var(--pgn-spacing-spacer-3);
+    margin-bottom: var(--pgn-spacing-spacer-3);
   }
 }
 

package/src/containers/CoursesPanel/NoCoursesView/index.test.jsx

@@ -1,18 +1,38 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { baseAppUrl } from '@src/data/services/lms/urls';
 
 import EmptyCourse from '.';
+import messages from './messages';
 
-jest.mock('hooks', () => ({
+const courseSearchUrl = '/course-search-url';
+
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: '/course-search-url',
+      courseSearchUrl,
     })),
   },
 }));
 
 describe('NoCoursesView', () => {
-  test('snapshot', () => {
-    expect(shallow(<EmptyCourse />).snapshot).toMatchSnapshot();
+  it('should display image, heading and button', () => {
+    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
+    const image = screen.getByRole('img', { alt: formatMessage(messages.bannerAlt) });
+    expect(image).toBeInTheDocument();
+  });
+  it('should display heading and prompt', () => {
+    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
+    const heading = screen.getByText(formatMessage(messages.lookingForChallengePrompt));
+    const prompt = screen.getByText(formatMessage(messages.exploreCoursesPrompt));
+    expect(heading).toBeInTheDocument();
+    expect(prompt).toBeInTheDocument();
+  });
+  it('should display button', () => {
+    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
+    const button = screen.getByRole('link', { name: formatMessage(messages.exploreCoursesButton) });
+    expect(button).toBeInTheDocument();
+    expect(button.href).toBe(baseAppUrl(courseSearchUrl));
   });
 });

package/src/containers/CoursesPanel/hooks.test.js

@@ -1,9 +1,9 @@
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
-import { ListPageSize, SortKeys } from 'data/constants/app';
+import { MockUseState } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
+import { ListPageSize, SortKeys } from '@src/data/constants/app';
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCurrentCourseList: jest.fn(),
     usePageNumber: jest.fn(() => 23),

package/src/containers/CoursesPanel/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-list-heading-container {
   display: flex;
   flex-direction: row;
@@ -8,8 +6,8 @@
 }
 
 .course-list-title {
-  font-size: $h2-font-size;
-  margin: map-get($spacers, 3) 0;
+  font-size: var(--pgn-typography-font-size-h2-base);
+  margin: var(--pgn-spacing-spacer-3) 0;
 }
 
 .course-list-loading {
@@ -24,7 +22,7 @@
   align-self: center;
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .course-list-heading-container {
     flex-direction: column-reverse;
     align-items: flex-start;
@@ -36,7 +34,7 @@
   }
 
   .course-list-title {
-    font-size: $h3-font-size;
-    margin: map-get($spacers, 2) 0;
+    font-size: var(--pgn-typography-font-size-h3-base);
+    margin: var(--pgn-spacing-spacer-2) 0;
   }
 }

package/src/containers/CoursesPanel/index.test.jsx

@@ -1,32 +1,42 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter } from 'react-router-dom';
+import { FilterKeys } from '@src/data/constants/app';
+import { reduxHooks } from '@src/hooks';
 
-import { reduxHooks } from 'hooks';
+import messagesNoCourses from '@src/containers/CoursesPanel/NoCoursesView/messages';
 import { useCourseListData } from './hooks';
 import CoursesPanel from '.';
+import messages from './messages';
 
-jest.mock('hooks', () => ({
-  reduxHooks: { useHasCourses: jest.fn() },
+const courseSearchUrl = '/course-search-url';
+
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useHasCourses: jest.fn(),
+    usePlatformSettingsData: jest.fn(() => ({
+      courseSearchUrl,
+    })),
+  },
 }));
 
 jest.mock('./hooks', () => ({
   useCourseListData: jest.fn(),
 }));
 
-jest.mock('containers/CourseCard', () => 'CourseCard');
-jest.mock('containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: 'ActiveCourseFilters',
-  CourseFilterControls: 'CourseFilterControls',
-}));
-jest.mock('@openedx/frontend-plugin-framework', () => ({
-  PluginSlot: 'PluginSlot',
+jest.mock('@src/containers/CourseCard', () => jest.fn(() => <div>CourseCard</div>));
+jest.mock('@src/containers/CourseFilterControls', () => ({
+  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
+  CourseFilterControls: jest.fn(() => <div>CourseFilterControls</div>),
 }));
-jest.mock('./CourseList', () => 'CourseList');
+
+const filters = Object.values(FilterKeys);
 
 reduxHooks.useHasCourses.mockReturnValue(true);
 
 describe('CoursesPanel', () => {
   const defaultCourseListData = {
-    filterOptions: {},
+    filterOptions: { filters, handleRemoveFilter: jest.fn() },
     numPages: 1,
     setPageNumber: jest.fn().mockName('setPageNumber'),
     showFilters: false,
@@ -34,25 +44,49 @@ describe('CoursesPanel', () => {
   };
 
   const createWrapper = (courseListData) => {
-    useCourseListData.mockReturnValueOnce({
+    useCourseListData.mockReturnValue({
       ...defaultCourseListData,
       ...courseListData,
     });
-    return shallow(<CoursesPanel />);
+    return render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <CoursesPanel />
+        </IntlProvider>
+      </MemoryRouter>
+    );
   };
 
   describe('no courses', () => {
-    test('snapshot', () => {
+    it('should render no courses view slot', () => {
       reduxHooks.useHasCourses.mockReturnValue(false);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
+      createWrapper();
+      const imgNoCourses = screen.getByRole('img', { name: messagesNoCourses.bannerAlt.defaultMessage });
+      expect(imgNoCourses).toBeInTheDocument();
+      const courseCard = screen.queryByText('CourseCard');
+      expect(courseCard).toBeNull();
     });
   });
   describe('with courses', () => {
-    test('snapshot', () => {
+    it('should render courselist', () => {
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      createWrapper({ visibleList });
+      const courseCards = screen.getAllByText('CourseCard');
+      expect(courseCards.length).toEqual(visibleList.length);
+    });
+    it('displays course filter controls', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      createWrapper();
+      expect(screen.getByText('CourseFilterControls')).toBeInTheDocument();
+    });
+
+    it('displays course list slot when courses exist', () => {
       reduxHooks.useHasCourses.mockReturnValue(true);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
+      createWrapper({ visibleList });
+      const heading = screen.getByText(messages.myCourses.defaultMessage);
+      expect(heading).toBeInTheDocument();
     });
   });
 });

package/src/containers/Dashboard/DashboardLayout.test.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Col, Row } from '@openedx/paragon';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter } from 'react-router-dom';
 import hooks from './hooks';
-import DashboardLayout, { columnConfig } from './DashboardLayout';
+import DashboardLayout from './DashboardLayout';
 
 jest.mock('./hooks', () => ({
   useDashboardLayoutData: jest.fn(),
@@ -16,50 +15,55 @@ const hookProps = {
 };
 hooks.useDashboardLayoutData.mockReturnValue(hookProps);
 
-const children = 'test-children';
+const children = <div>test children</div>;
 
-let el;
 describe('DashboardLayout', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    el = shallow(<DashboardLayout>{children}</DashboardLayout>);
+    render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <DashboardLayout>{children}</DashboardLayout>
+        </IntlProvider>
+      </MemoryRouter>
+    );
   });
 
   const testColumns = () => {
-    it('loads courseList and sidebar column layout', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.sidebar).forEach(size => {
-        expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
-      });
+    it('loads courseList and sidebar column layout with corresponding children', () => {
+      const courseChildren = screen.getByText('test children');
+      const courseListCol = courseChildren.parentElement;
+      const sidebarCol = courseListCol.nextSibling;
+      expect(courseListCol).toHaveClass('course-list-column');
+      expect(sidebarCol).toHaveClass('sidebar-column');
     });
     it('displays children in first column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[0].children).not.toHaveLength(0);
+      const courseChildren = screen.getByText('test children');
+      const courseListCol = courseChildren.parentElement;
+      expect(courseChildren).toBeInTheDocument();
+      expect(courseListCol).toHaveClass('course-list-column');
     });
     it('displays WidgetSidebarSlot in second column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
+      const courseListCol = screen.getByText('test children').parentElement;
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column');
+      expect(sidebarCol.children[0]).toHaveAttribute('id', 'looking-for-challenge-widget');
     });
   };
-  const testSidebarLayout = () => {
+  const testSidebarLayout = ({ isCollapsed }) => {
     it('displays withSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
-      });
+      const courseListCol = screen.getByText('test children').parentElement;
+      expect(courseListCol).toHaveClass('col-xl-8');
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
     });
   };
-  const testNoSidebarLayout = () => {
+  const testNoSidebarLayout = ({ isCollapsed }) => {
     it('displays noSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
-      });
-    });
-  };
-  const testSnapshot = () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
+      const courseListCol = screen.getByText('test children').parentElement;
+      expect(courseListCol).toHaveClass('col-xl-12');
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
     });
   };
   describe('collapsed', () => {
@@ -68,27 +72,18 @@ describe('DashboardLayout', () => {
         hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true });
       });
       testColumns();
-      testSnapshot();
-      testSidebarLayout();
+      testSidebarLayout({ isCollapsed: true });
     });
     describe('sidebar not showing', () => {
+      beforeEach(() => {
+        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps });
+      });
       testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-    });
-    it('does not show spacer component above widget sidebar', () => {
-      const columns = el.instance.findByType(Col);
-      expect(columns[1].findByType('h2').length).toEqual(0);
+      testNoSidebarLayout({ isCollapsed: true });
     });
   });
 
   describe('not collapsed', () => {
-    const testWidgetSpacing = () => {
-      it('shows not-collapsed class on widget sidebar', () => {
-        const columns = el.instance.findByType(Col);
-        expect(columns[1].props.className).toContain('not-collapsed');
-      });
-    };
     describe('sidebar showing', () => {
       beforeEach(() => {
         hooks.useDashboardLayoutData.mockReturnValueOnce({
@@ -98,18 +93,14 @@ describe('DashboardLayout', () => {
         });
       });
       testColumns();
-      testSnapshot();
-      testSidebarLayout();
-      testWidgetSpacing();
+      testSidebarLayout({ isCollapsed: false });
     });
     describe('sidebar not showing', () => {
       beforeEach(() => {
         hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false });
       });
       testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-      testWidgetSpacing();
+      testNoSidebarLayout({ isCollapsed: false });
     });
   });
 });