@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.13

package/lib/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js}

@@ -7,7 +7,7 @@ exports.default = LocaleDropdownNavbarItem;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
+var _DropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DropdownNavbarItem"));
 
 var _IconLanguage = _interopRequireDefault(require("@theme/IconLanguage"));
 
@@ -15,6 +15,8 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -53,20 +55,14 @@ function LocaleDropdownNavbarItem({
       to,
       target: '_self',
       autoAddBaseUrl: false,
-      className: locale === currentLocale ? 'dropdown__link--active' : '',
-      style: {
-        textTransform: 'capitalize'
-      }
+      className: locale === currentLocale ? 'dropdown__link--active' : ''
     };
   });
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently
 
   const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
-  return <_DefaultNavbarItem.default {...props} href="#" mobile={mobile} label={<span>
-          <_IconLanguage.default style={{
-      verticalAlign: 'text-bottom',
-      marginRight: 5
-    }} />
+  return <_DropdownNavbarItem.default {...props} mobile={mobile} label={<span>
+          <_IconLanguage.default className={_stylesModule.default.iconLanguage} />
           <span>{dropdownLabel}</span>
         </span>} items={items} />;
 }

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+}

package/lib/theme/NavbarItem/index.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavbarItem;
+exports.getInfimaActiveClassName = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
 
+var _DropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DropdownNavbarItem"));
+
 var _LocaleDropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/LocaleDropdownNavbarItem"));
 
 var _SearchNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/SearchNavbarItem"));
@@ -25,30 +28,47 @@ const NavbarItemComponents = {
   default: () => _DefaultNavbarItem.default,
   localeDropdown: () => _LocaleDropdownNavbarItem.default,
   search: () => _SearchNavbarItem.default,
+  dropdown: () => _DropdownNavbarItem.default,
   // Need to lazy load these items as we don't know for sure the docs plugin is loaded
   // See https://github.com/facebook/docusaurus/issues/3360
-  docsVersion: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocsVersionNavbarItem').default,
-  docsVersionDropdown: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
-  doc: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocNavbarItem').default
+
+  /* eslint-disable @typescript-eslint/no-var-requires, global-require */
+  docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
+  docsVersionDropdown: () => require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
+  doc: () => require('@theme/NavbarItem/DocNavbarItem').default
+  /* eslint-enable @typescript-eslint/no-var-requires, global-require */
+
 };
 
-const getNavbarItemComponent = (type = 'default') => {
-  const navbarItemComponent = NavbarItemComponents[type];
+const getNavbarItemComponent = type => {
+  const navbarItemComponentFn = NavbarItemComponents[type];
 
-  if (!navbarItemComponent) {
+  if (!navbarItemComponentFn) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
 
-  return navbarItemComponent();
+  return navbarItemComponentFn();
 };
 
+function getComponentType(type, isDropdown) {
+  // Backward compatibility: navbar item with no type set
+  // but containing dropdown items should use the type "dropdown"
+  if (!type || type === 'default') {
+    return isDropdown ? 'dropdown' : 'default';
+  }
+
+  return type;
+}
+
+const getInfimaActiveClassName = mobile => mobile ? 'menu__link--active' : 'navbar__link--active';
+
+exports.getInfimaActiveClassName = getInfimaActiveClassName;
+
 function NavbarItem({
   type,
   ...props
 }) {
-  const NavbarItemComponent = getNavbarItemComponent(type);
+  const componentType = getComponentType(type, props.items !== undefined);
+  const NavbarItemComponent = getNavbarItemComponent(componentType);
   return <NavbarItemComponent {...props} />;
 }

package/lib/theme/{SearchMetadatas → SearchMetadata}/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SearchMetadatas;
+exports.default = SearchMetadata;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -20,7 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Note: we don't couple this to Algolia/DocSearch on purpose
 // We may want to support other search engine plugins too
 // Search plugins should swizzle/override this comp to add their behavior
-function SearchMetadatas({
+function SearchMetadata({
   locale,
   version,
   tag

package/lib/theme/Seo/index.js

@@ -11,7 +11,7 @@ var _Head = _interopRequireDefault(require("@docusaurus/Head"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
+var _useBaseUrl = require("@docusaurus/useBaseUrl");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,15 +25,16 @@ function Seo({
   title,
   description,
   keywords,
-  image
+  image,
+  children
 }) {
-  const {
-    image: defaultImage
-  } = (0, _themeCommon.useThemeConfig)();
   const pageTitle = (0, _themeCommon.useTitleFormatter)(title);
-  const pageImage = (0, _useBaseUrl.default)(image || defaultImage, {
+  const {
+    withBaseUrl
+  } = (0, _useBaseUrl.useBaseUrlUtils)();
+  const pageImage = image ? withBaseUrl(image, {
     absolute: true
-  });
+  }) : undefined;
   return <_Head.default>
       {title && <title>{pageTitle}</title>}
       {title && <meta property="og:title" content={pageTitle} />}
@@ -45,5 +46,7 @@ function Seo({
 
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
+
+      {children}
     </_Head.default>;
 }

package/lib/theme/TOC/index.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOCHeadings = TOCHeadings;
 exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _useTOCHighlight = _interopRequireDefault(require("@theme/hooks/useTOCHighlight"));
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
@@ -22,37 +21,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const LINK_CLASS_NAME = 'table-of-contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
-const TOP_OFFSET = 100;
-/* eslint-disable jsx-a11y/control-has-associated-label */
-
-function TOCHeadings({
-  toc,
-  isChild
-}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return <ul className={isChild ? '' : 'table-of-contents table-of-contents__left-border'}>
-      {toc.map(heading => <li key={heading.id}>
-          <a href={`#${heading.id}`} className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: heading.value
-      }} />
-          <TOCHeadings isChild toc={heading.children} />
-        </li>)}
-    </ul>;
-}
+// Using a custom className
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
 function TOC({
-  toc
+  className,
+  ...props
 }) {
-  (0, _useTOCHighlight.default)(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
-  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContents, 'thin-scrollbar')}>
-      <TOCHeadings toc={toc} />
+  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContents, 'thin-scrollbar', className)}>
+      <_TOCItems.default {...props} linkClassName={LINK_CLASS_NAME} linkActiveClassName={LINK_ACTIVE_CLASS_NAME} />
     </div>;
 }
 

package/lib/theme/TOC/styles.module.css

@@ -12,7 +12,7 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .tableOfContents {
     display: none;
   }

package/lib/theme/TOCCollapsible/index.js

@@ -15,7 +15,7 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
-var _TOC = require("@theme/TOC");
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function TOCCollapsible({
   toc,
-  className
+  className,
+  minHeadingLevel,
+  maxHeadingLevel
 }) {
   const {
     collapsed,
@@ -35,7 +37,7 @@ function TOCCollapsible({
   } = (0, _themeCommon.useCollapsible)({
     initialState: true
   });
-  return <div className={(0, _clsx.default)('margin-vert--md', _stylesModule.default.tocCollapsible, {
+  return <div className={(0, _clsx.default)(_stylesModule.default.tocCollapsible, {
     [_stylesModule.default.tocCollapsibleExpanded]: !collapsed
   }, className)}>
       <button type="button" className={(0, _clsx.default)('clean-btn', _stylesModule.default.tocCollapsibleButton)} onClick={toggleCollapsed}>
@@ -44,8 +46,8 @@ function TOCCollapsible({
         </_Translate.default>
       </button>
 
-      <_themeCommon.Collapsible className={_stylesModule.default.tocCollapsibleContent} collapsed={collapsed}>
-        <_TOC.TOCHeadings toc={toc} />
+      <_themeCommon.Collapsible lazy className={_stylesModule.default.tocCollapsibleContent} collapsed={collapsed}>
+        <_TOCItems.default toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} />
       </_themeCommon.Collapsible>
     </div>;
 }

package/lib/theme/TOCCollapsible/styles.module.css

@@ -8,6 +8,7 @@
 .tocCollapsible {
   background-color: var(--ifm-menu-color-background-active);
   border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
 }
 
 .tocCollapsibleButton {

package/lib/theme/TOCInline/index.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -19,33 +19,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function HeadingsInline({
-  toc,
-  isChild
-}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return <ul className={isChild ? '' : 'table-of-contents'}>
-      {toc.map(heading => <li key={heading.id}>
-          <a href={`#${heading.id}`} // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: heading.value
-      }} />
-          <HeadingsInline isChild toc={heading.children} />
-        </li>)}
-    </ul>;
-}
-
 function TOCInline({
-  toc
+  toc,
+  minHeadingLevel,
+  maxHeadingLevel
 }) {
-  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContentsInline)}>
-      <HeadingsInline toc={toc} />
+  return <div className={_stylesModule.default.tableOfContentsInline}>
+      <_TOCItems.default toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} className="table-of-contents" linkClassName={null} />
     </div>;
 }
 

package/lib/theme/TOCItems/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TOCItems;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Recursive component rendering the toc tree
+
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function TOCItemList({
+  toc,
+  className,
+  linkClassName,
+  isChild
+}) {
+  if (!toc.length) {
+    return null;
+  }
+
+  return <ul className={isChild ? undefined : className}>
+      {toc.map(heading => <li key={heading.id}>
+          <a href={`#${heading.id}`} className={linkClassName !== null && linkClassName !== void 0 ? linkClassName : undefined} // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: heading.value
+      }} />
+          <TOCItemList isChild toc={heading.children} className={className} linkClassName={linkClassName} />
+        </li>)}
+    </ul>;
+}
+
+function TOCItems({
+  toc,
+  className = 'table-of-contents table-of-contents__left-border',
+  linkClassName = 'table-of-contents__link',
+  linkActiveClassName = undefined,
+  minHeadingLevel: minHeadingLevelOption,
+  maxHeadingLevel: maxHeadingLevelOption,
+  ...props
+}) {
+  const themeConfig = (0, _themeCommon.useThemeConfig)();
+  const minHeadingLevel = minHeadingLevelOption !== null && minHeadingLevelOption !== void 0 ? minHeadingLevelOption : themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel = maxHeadingLevelOption !== null && maxHeadingLevelOption !== void 0 ? maxHeadingLevelOption : themeConfig.tableOfContents.maxHeadingLevel;
+  const tocFiltered = (0, _themeCommon.useTOCFilter)({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel
+  });
+  const tocHighlightConfig = (0, _react.useMemo)(() => {
+    if (linkClassName && linkActiveClassName) {
+      return {
+        linkClassName,
+        linkActiveClassName,
+        minHeadingLevel,
+        maxHeadingLevel
+      };
+    }
+
+    return undefined;
+  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+  (0, _themeCommon.useTOCHighlight)(tocHighlightConfig);
+  return <TOCItemList toc={tocFiltered} className={className} linkClassName={linkClassName} {...props} />;
+}

package/lib/theme/Tabs/__tests__/index.test.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+var _TabItem = _interopRequireDefault(require("../../TabItem"));
+
+var _UserPreferencesProvider = _interopRequireDefault(require("@theme/UserPreferencesProvider"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+describe('Tabs', () => {
+  test('Should reject bad Tabs child', () => {
+    expect(() => {
+      _reactTestRenderer.default.create(<_index.default>
+          <div>Naughty</div>
+          <_TabItem.default value="good">Good</_TabItem.default>
+        </_index.default>);
+    }).toThrowErrorMatchingInlineSnapshot(`"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \\"value\\" prop."`);
+  });
+  test('Should reject bad Tabs defaultValue', () => {
+    expect(() => {
+      _reactTestRenderer.default.create(<_index.default defaultValue="bad">
+          <_TabItem.default value="v1">Tab 1</_TabItem.default>
+          <_TabItem.default value="v2">Tab 2</_TabItem.default>
+        </_index.default>);
+    }).toThrowErrorMatchingInlineSnapshot(`"Docusaurus error: The <Tabs> has a defaultValue \\"bad\\" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`);
+  });
+  test('Should reject duplicate values', () => {
+    expect(() => {
+      _reactTestRenderer.default.create(<_index.default>
+          <_TabItem.default value="v1">Tab 1</_TabItem.default>
+          <_TabItem.default value="v2">Tab 2</_TabItem.default>
+          <_TabItem.default value="v3">Tab 3</_TabItem.default>
+          <_TabItem.default value="v4">Tab 4</_TabItem.default>
+          <_TabItem.default value="v1">Tab 5</_TabItem.default>
+          <_TabItem.default value="v2">Tab 6</_TabItem.default>
+        </_index.default>);
+    }).toThrowErrorMatchingInlineSnapshot(`"Docusaurus error: Duplicate values \\"v1, v2\\" found in <Tabs>. Every value needs to be unique."`);
+  });
+  test('Should accept valid Tabs config', () => {
+    expect(() => {
+      _reactTestRenderer.default.create(<_themeCommon.ScrollControllerProvider>
+          <_UserPreferencesProvider.default>
+            <_index.default>
+              <_TabItem.default value="v1">Tab 1</_TabItem.default>
+              <_TabItem.default value="v2">Tab 2</_TabItem.default>
+            </_index.default>
+            <_index.default>
+              <_TabItem.default value="v1">Tab 1</_TabItem.default>
+              <_TabItem.default value="v2" default>
+                Tab 2
+              </_TabItem.default>
+            </_index.default>
+            <_index.default defaultValue="v1">
+              <_TabItem.default value="v1" label="V1">
+                Tab 1
+              </_TabItem.default>
+              <_TabItem.default value="v2" label="V2">
+                Tab 2
+              </_TabItem.default>
+            </_index.default>
+            <_index.default defaultValue="v1" values={[{
+            value: 'v1',
+            label: 'V1'
+          }, {
+            value: 'v2',
+            label: 'V2'
+          }]}>
+              <_TabItem.default value="v1">Tab 1</_TabItem.default>
+              <_TabItem.default value="v2">Tab 2</_TabItem.default>
+            </_index.default>
+            <_index.default defaultValue={null} values={[{
+            value: 'v1',
+            label: 'V1'
+          }, {
+            value: 'v2',
+            label: 'V2'
+          }]}>
+              <_TabItem.default value="v1">Tab 1</_TabItem.default>
+              <_TabItem.default value="v2">Tab 2</_TabItem.default>
+            </_index.default>
+            <_index.default defaultValue={null}>
+              <_TabItem.default value="v1" label="V1">
+                Tab 1
+              </_TabItem.default>
+              <_TabItem.default value="v2" label="V2">
+                Tab 2
+              </_TabItem.default>
+            </_index.default>
+          </_UserPreferencesProvider.default>
+        </_themeCommon.ScrollControllerProvider>);
+    }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
+  }); // https://github.com/facebook/docusaurus/issues/5729
+
+  test('Should accept dynamic Tabs with number values', () => {
+    expect(() => {
+      const tabs = ['Apple', 'Banana', 'Carrot'];
+
+      _reactTestRenderer.default.create(<_themeCommon.ScrollControllerProvider>
+          <_UserPreferencesProvider.default>
+            <_index.default values={tabs.map((t, idx) => ({
+            label: t,
+            value: idx
+          }))} defaultValue={0}>
+              {tabs.map((t, idx) => <_TabItem.default value={idx}>{t}</_TabItem.default>)}
+            </_index.default>
+          </_UserPreferencesProvider.default>
+        </_themeCommon.ScrollControllerProvider>);
+    }).not.toThrow();
+  });
+});