@laerdal/life-react-components 1.3.1-dev.4 → 1.3.2-dev.11.full

package/dist/js/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/js/Modals/__tests__/Modal.test.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("jest-styled-components");
+
+var _ = require("..");
+
+var _2 = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<ModalDialog />', function () {
+  var mountingDiv;
+  beforeEach(function () {
+    //being rendered as a React.Portal we need to have the 'root' div defined
+    mountingDiv = document.createElement('div');
+    mountingDiv.id = 'root';
+    document.body.appendChild(mountingDiv);
+  });
+  afterEach(function () {
+    document.body.removeChild(mountingDiv);
+  });
+  it('Check modal not rendered when isModalOpen is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              isModalOpen: false,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {}
+            })), container = _render.container, getByText = _render.getByText; //check modal portal not exists when modal not opened
+
+            expect(container.querySelector('.ReactModalPortal')).toBeNull();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('Check modal visible, title and footer buttons displayed correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container, getByText;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              isModalOpen: true,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {},
+              buttons: [{
+                action: function action() {},
+                text: 'Close',
+                variant: 'tertiary'
+              }, {
+                action: function action() {},
+                text: 'Save'
+              }]
+            })), container = _render2.container, getByText = _render2.getByText; //check modal portal defined
+
+            expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
+
+            expect(getByText('Header')).toBeDefined();
+            expect(getByText('Close')).toBeDefined();
+            expect(getByText('Save')).toBeDefined();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('Check tooltip, and link displayed without right footer buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _render3, baseElement, getByText;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              isModalOpen: true,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {},
+              tooltip: 'some test tooltip',
+              leftFooterAction: {
+                id: 'test-link',
+                actionType: 'hyperlink',
+                text: 'Link',
+                href: 'http://test.com',
+                icon: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null),
+                variant: 'default'
+              }
+            })), baseElement = _render3.baseElement, getByText = _render3.getByText; //check tooltip displayed
+
+            expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
+
+            expect(getByText('Link').children).toBeDefined();
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('Check note and footer note displayed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var _baseElement$querySel;
+
+    var _render4, baseElement, getByText;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              isModalOpen: true,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {},
+              leftFooterAction: {
+                id: 'test-note',
+                actionType: 'note',
+                text: 'Test note',
+                icon: /*#__PURE__*/_react.default.createElement(_2.SystemIcons.Information, null)
+              },
+              note: 'Message text',
+              state: 'critical'
+            })), baseElement = _render4.baseElement, getByText = _render4.getByText; //check footer note text displayed
+
+            expect(getByText('Test note').textContent).toBeDefined(); //check note section added
+
+            expect((_baseElement$querySel = baseElement.querySelectorAll('section')) === null || _baseElement$querySel === void 0 ? void 0 : _baseElement$querySel.length).toEqual(4); //check note message displayed
+
+            expect(getByText('Message text').children).toBeDefined();
+
+          case 4:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('Check back button and close icon displayed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    var _baseElement$querySel2;
+
+    var _render5, baseElement, getByText, container;
+
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              backButton: function backButton() {},
+              isModalOpen: true,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {}
+            })), baseElement = _render5.baseElement, getByText = _render5.getByText, container = _render5.container; //only 2 svg elements should be found in the header of the modal
+
+            expect((_baseElement$querySel2 = baseElement.querySelectorAll('svg')) === null || _baseElement$querySel2 === void 0 ? void 0 : _baseElement$querySel2.length).toEqual(2);
+
+          case 2:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('Check modal body displayed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var _baseElement$querySel3, _baseElement$querySel4;
+
+    var _render6, baseElement, getByText, container;
+
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ModalDialog, {
+              key: "smallModalWithoutImage",
+              closeModalAndClearInput: function closeModalAndClearInput() {},
+              title: 'Header',
+              size: _2.Size.Small,
+              isModalOpen: true,
+              closeAction: function closeAction() {},
+              submitAction: function submitAction() {}
+            }, /*#__PURE__*/_react.default.createElement("span", null, "Inner modal text"))), baseElement = _render6.baseElement, getByText = _render6.getByText, container = _render6.container; //Check all dialog sections are displayed
+
+            expect((_baseElement$querySel3 = baseElement.querySelectorAll('section')) === null || _baseElement$querySel3 === void 0 ? void 0 : _baseElement$querySel3.length).toEqual(3); //Check that the second section (modal body) has the correct text
+
+            expect((_baseElement$querySel4 = baseElement.querySelectorAll('section')) === null || _baseElement$querySel4 === void 0 ? void 0 : _baseElement$querySel4[1].textContent).toEqual('Inner modal text');
+
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});
+//# sourceMappingURL=Modal.test.js.map

package/dist/js/Modals/__tests__/Modal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["describe","mountingDiv","beforeEach","document","createElement","id","body","appendChild","afterEach","removeChild","it","Size","Small","container","getByText","expect","querySelector","toBeNull","action","text","variant","toBeDefined","actionType","href","icon","baseElement","textContent","children","querySelectorAll","length","toEqual"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n  let mountingDiv: HTMLElement;\n\n  beforeEach(() => {\n    //being rendered as a React.Portal we need to have the 'root' div defined\n    mountingDiv = document.createElement('div');\n    mountingDiv.id = 'root';\n    document.body.appendChild(mountingDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(mountingDiv);\n  });\n\n  it('Check modal not rendered when isModalOpen is false', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={false}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //check modal portal not exists when modal not opened\n    expect(container.querySelector('.ReactModalPortal')).toBeNull();\n  });\n\n  it('Check modal visible, title and footer buttons displayed correctly', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        buttons={[\n          {\n            action: () => {},\n            text: 'Close',\n            variant: 'tertiary',\n          },\n          {\n            action: () => {},\n            text: 'Save',\n          },\n        ]}\n      />,\n    );\n    //check modal portal defined\n    expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n    //Check header and footer buttons\n    expect(getByText('Header')).toBeDefined();\n    expect(getByText('Close')).toBeDefined();\n    expect(getByText('Save')).toBeDefined();\n  });\n\n  it('Check tooltip, and link displayed without right footer buttons', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        tooltip={'some test tooltip'}\n        leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n      />,\n    );\n    //check tooltip displayed\n    expect(getByText('some test tooltip').textContent).toBeDefined();\n    //check footer link displayed\n    expect(getByText('Link').children).toBeDefined();\n  });\n\n  it('Check note and footer note displayed', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n        note={'Message text'}\n        state={'critical'}\n      />,\n    );\n    //check footer note text displayed\n    expect(getByText('Test note').textContent).toBeDefined();\n    //check note section added\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n    //check note message displayed\n    expect(getByText('Message text').children).toBeDefined();\n  });\n\n  it('Check back button and close icon displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        backButton={() => {}}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //only 2 svg elements should be found in the header of the modal\n    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n  });\n\n  it('Check modal body displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}>\n        <span>Inner modal text</span>\n      </ModalDialog>,\n    );\n    //Check all dialog sections are displayed\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n    //Check that the second section (modal body) has the correct text\n    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n  });\n});\n"],"file":"Modal.test.js"}