Increase test coverage

Author: gethinwebster

src/alert/__tests__/alert.test.tsx

@@ -18,6 +18,18 @@ jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
   useVisualRefresh: jest.fn().mockReturnValue(false),
 }));
 
+let mockElementOffsetLeft = 200;
+
+Object.defineProperties(window.HTMLElement.prototype, {
+  offsetLeft: {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return mockElementOffsetLeft;
+    },
+  },
+});
+
 function renderAlert(props: AlertProps = {}) {
   const { container } = render(<Alert {...props} />);
   return { wrapper: createWrapper(container).findAlert()!, container };
@@ -33,6 +45,7 @@ const i18nStrings: AlertProps.I18nStrings = {
 
 beforeEach(() => {
   jest.mocked(useVisualRefresh).mockReset();
+  mockElementOffsetLeft = 200;
 });
 
 describe('Alert Component', () => {
@@ -139,6 +152,24 @@ describe('Alert Component', () => {
     expect(wrapper.findActionSlot()!.findButton()!.getElement()).toHaveTextContent('Click');
   });
 
+  it('adds wrapped class to actions if they are displayed on a new line', () => {
+    mockElementOffsetLeft = 10;
+    const { container } = renderAlert({
+      children: 'Message body',
+      action: <Button>Click</Button>,
+    });
+    expect(container.querySelector(`.${styles['action-wrapped']}`)).toBeTruthy();
+  });
+
+  it('does not add wrapped class to actions if they are displayed on same line', () => {
+    mockElementOffsetLeft = 200;
+    const { container } = renderAlert({
+      children: 'Message body',
+      action: <Button>Click</Button>,
+    });
+    expect(container.querySelector(`.${styles['action-wrapped']}`)).toBeFalsy();
+  });
+
   it('when both `buttonText` and `action` provided, prefers the latter', () => {
     const { wrapper } = renderAlert({
       children: 'Message body',

src/flashbar/__tests__/flashbar.test.tsx

@@ -25,12 +25,27 @@ jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => {
   };
 });
 
+let mockElementOffsetLeft = 200;
+Object.defineProperties(window.HTMLElement.prototype, {
+  offsetLeft: {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return mockElementOffsetLeft;
+    },
+  },
+});
+
 LiveRegionController.defaultDelay = 0;
 
 mockInnerText();
 
 const noop = () => void 0;
 
+beforeEach(() => {
+  mockElementOffsetLeft = 200;
+});
+
 let consoleWarnSpy: jest.SpyInstance;
 afterEach(() => {
   consoleWarnSpy?.mockRestore();
@@ -265,6 +280,22 @@ describe('Flashbar component', () => {
       expect(wrapper.findItems()[0].findAction()!.findButton()!.getElement()).toHaveTextContent('Click me');
     });
 
+    it('adds wrapped class to actions if they are displayed on a new line', () => {
+      mockElementOffsetLeft = 10;
+      const { container } = reactRender(
+        <Flashbar items={[{ header: 'The header', content: 'The content', action: <Button>Click me</Button> }]} />
+      );
+      expect(container.querySelector(`.${styles['action-wrapped']}`)).toBeTruthy();
+    });
+
+    it('does not add wrapped class to actions if they are displayed on same line', () => {
+      mockElementOffsetLeft = 200;
+      const { container } = reactRender(
+        <Flashbar items={[{ header: 'The header', content: 'The content', action: <Button>Click me</Button> }]} />
+      );
+      expect(container.querySelector(`.${styles['action-wrapped']}`)).toBeFalsy();
+    });
+
     test('when both `buttonText` and `action` provided, prefers the latter', () => {
       const wrapper = createFlashbarWrapper(
         <Flashbar