Migrated src/components/theme to vitest

plone · Jan 21, 2025 · 4793eba · 4793eba
1 parent 8fc3bbc
commit 4793eba
Show file tree

Hide file tree

Showing 88 changed files with 552 additions and 586 deletions.
diff --git a/packages/volto/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap b/packages/volto/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Anontools renders an anontools component when no token is specified 1`] = `
+exports[`Anontools > renders an anontools component when no token is specified 1`] = `
 <div
   className="ui pointing secondary right floated menu"
 >
@@ -19,4 +19,4 @@ exports[`Anontools renders an anontools component when no token is specified 1`]
 </div>
 `;
 
-exports[`Anontools should not render an anontools component when a token is specified 1`] = `null`;
+exports[`Anontools > should not render an anontools component when a token is specified 1`] = `null`;
diff --git a/packages/volto/src/components/theme/App/App.test.jsx b/packages/volto/src/components/theme/App/App.test.jsx
@@ -7,6 +7,8 @@ import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
+import { vi } from 'vitest';
+
 beforeAll(() => {
   config.settings.navDepth = 1;
   config.views.errorViews = {
@@ -16,24 +18,28 @@ beforeAll(() => {
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="toolbar" />),
-);
-jest.mock('../Header/Header', () => jest.fn(() => <div id="toolbar" />));
-jest.mock('../Breadcrumbs/Breadcrumbs', () =>
-  jest.fn(() => <div id="breadcrumbs" />),
-);
-jest.mock('../../manage/Messages/Messages', () =>
-  jest.fn(() => <div id="messages" />),
-);
-jest.mock('../Navigation/Navigation', () =>
-  jest.fn(() => <div id="navigation" />),
-);
-jest.mock('semantic-ui-react', () => ({
-  Segment: jest.fn(() => <div id="segment" />),
-  Container: jest.fn(() => <div id="container" />),
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="toolbar" />),
+}));
+vi.mock('../Header/Header', () => ({
+  default: vi.fn(() => <div id="header" />),
+}));
+vi.mock('../Breadcrumbs/Breadcrumbs', () => ({
+  default: vi.fn(() => <div id="breadcrumbs" />),
+}));
+vi.mock('../../manage/Messages/Messages', () => ({
+  default: vi.fn(() => <div id="messages" />),
+}));
+vi.mock('../Navigation/Navigation', () => ({
+  default: vi.fn(() => <div id="navigation" />),
+}));
+vi.mock('semantic-ui-react', () => ({
+  Segment: vi.fn(() => <div id="segment" />),
+  Container: vi.fn(() => <div id="container" />),
+}));
+vi.mock('../Footer/Footer', () => ({
+  default: vi.fn(() => <div id="footer" />),
 }));
-jest.mock('../Footer/Footer', () => jest.fn(() => <div id="footer" />));
 
 describe('App', () => {
   it('renders a app component', () => {

diff --git a/packages/volto/src/components/theme/App/__snapshots__/App.test.jsx.snap b/packages/volto/src/components/theme/App/__snapshots__/App.test.jsx.snap
@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`App renders a app component 1`] = `
-Array [
+exports[`App > renders a app component 1`] = `
+[
   <div
     aria-label="Skiplinks"
     className="skiplinks-wrapper"
@@ -27,7 +27,7 @@ Array [
     </a>
   </div>,
   <div
-    id="toolbar"
+    id="header"
   />,
   <div
     id="breadcrumbs"
@@ -39,7 +39,7 @@ Array [
     id="route-announcer"
     role="alert"
     style={
-      Object {
+      {
         "border": 0,
         "clip": "rect(1px 1px 1px 1px)",
         "height": "1px",

diff --git a/packages/volto/src/components/theme/AppExtras/AppExtras.test.jsx b/packages/volto/src/components/theme/AppExtras/AppExtras.test.jsx
@@ -3,21 +3,23 @@ import renderer from 'react-test-renderer';
 import config from '@plone/volto/registry';
 import AppExtras from './AppExtras';
 
+import { vi } from 'vitest';
+
 beforeAll(() => {
   config.settings.appExtras = [
     {
       match: {
         path: '',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="everywhere">{props.pathname}</div>
       )),
     },
     {
       match: {
         path: '/all-blogs/*',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-listing" one={props.one} three={props.three} />
       )),
       props: {
@@ -29,27 +31,27 @@ beforeAll(() => {
       match: {
         path: '/blog/edit',
       },
-      component: jest.fn((props) => <div className="blog-edit" />),
+      component: vi.fn((props) => <div className="blog-edit" />),
     },
     {
       match: {
         path: '/blog',
         exact: true,
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-view">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/something',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="something">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/frontpage',
       ignore: '/frontpage/images',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="frontpage-content">{JSON.stringify(props.match)}</div>
       )),
     },

diff --git a/packages/volto/src/components/theme/AppExtras/__snapshots__/AppExtras.test.jsx.snap b/packages/volto/src/components/theme/AppExtras/__snapshots__/AppExtras.test.jsx.snap
@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AppExtras can take string extra parameters to be used from the actual component 1`] = `
-Array [
+exports[`AppExtras > can take string extra parameters to be used from the actual component 1`] = `
+[
   <div
     className="everywhere"
   >
@@ -15,8 +15,8 @@ Array [
 ]
 `;
 
-exports[`AppExtras can take string path as match 1`] = `
-Array [
+exports[`AppExtras > can take string path as match 1`] = `
+[
   <div
     className="everywhere"
   >
@@ -30,8 +30,8 @@ Array [
 ]
 `;
 
-exports[`AppExtras ignore property works 1`] = `
-Array [
+exports[`AppExtras > ignore property works 1`] = `
+[
   <div
     className="everywhere"
   >
@@ -45,16 +45,16 @@ Array [
 ]
 `;
 
-exports[`AppExtras ignore property works 2`] = `
+exports[`AppExtras > ignore property works 2`] = `
 <div
   className="everywhere"
 >
   /frontpage/images
 </div>
 `;
 
-exports[`AppExtras renders 2 app extras on specific path /blog/edit 1`] = `
-Array [
+exports[`AppExtras > renders 2 app extras on specific path /blog/edit 1`] = `
+[
   <div
     className="everywhere"
   >
@@ -66,16 +66,16 @@ Array [
 ]
 `;
 
-exports[`AppExtras renders one app extras registered on empty string 1`] = `
+exports[`AppExtras > renders one app extras registered on empty string 1`] = `
 <div
   className="everywhere"
 >
   /
 </div>
 `;
 
-exports[`AppExtras renders other 2 app extras on exact path /blog 1`] = `
-Array [
+exports[`AppExtras > renders other 2 app extras on exact path /blog 1`] = `
+[
   <div
     className="everywhere"
   >

diff --git a/packages/volto/src/components/theme/Avatar/__snapshots__/Avatar.test.jsx.snap b/packages/volto/src/components/theme/Avatar/__snapshots__/Avatar.test.jsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Renders avatar 1`] = `
 <div

diff --git a/packages/volto/src/components/theme/Breadcrumbs/__snapshots__/Breadcrumbs.test.jsx.snap b/packages/volto/src/components/theme/Breadcrumbs/__snapshots__/Breadcrumbs.test.jsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Breadcrumbs renders a breadcrumbs component 1`] = `
+exports[`Breadcrumbs > renders a breadcrumbs component 1`] = `
 <div
   aria-label="Breadcrumbs"
   className="ui secondary vertical segment breadcrumbs"
@@ -21,20 +21,18 @@ exports[`Breadcrumbs renders a breadcrumbs component 1`] = `
         <svg
           className="icon"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": undefined,
             }
           }
           onClick={null}
           style={
-            Object {
+            {
               "fill": "currentColor",
               "height": "18px",
               "width": "auto",
             }
           }
-          viewBox=""
-          xmlns=""
         />
       </a>
       <div

diff --git a/packages/volto/src/components/theme/Comments/CommentEditModal.test.jsx b/packages/volto/src/components/theme/Comments/CommentEditModal.test.jsx
@@ -7,7 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

diff --git a/packages/volto/src/components/theme/Comments/Comments.test.jsx b/packages/volto/src/components/theme/Comments/Comments.test.jsx
@@ -4,23 +4,22 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
 import Comments from './Comments';
+import { __setLoadables } from '@plone/volto/helpers/Loadable/Loadable';
 
 const mockStore = configureStore();
-
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
+vi.mock('moment', () => ({
+  default: vi.fn(() => ({
+    format: vi.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
+    fromNow: vi.fn(() => 'a few seconds ago'),
   })),
-);
+}));
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+beforeAll(async () => {
+  await __setLoadables();
+});
 
 describe('Comments', () => {
   it('renders a comments component', () => {

diff --git a/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap b/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CommentEditModal renders a comment edit modal component 1`] = `
+exports[`CommentEditModal > renders a comment edit modal component 1`] = `
 <div
   data-schema="{
-  \\"fieldsets\\": [
+  "fieldsets": [
     {
-      \\"id\\": \\"default\\",
-      \\"title\\": \\"Default\\",
-      \\"fields\\": [
-        \\"text\\"
+      "id": "default",
+      "title": "Default",
+      "fields": [
+        "text"
       ]
     }
   ],
-  \\"properties\\": {
-    \\"text\\": {
-      \\"title\\": \\"Comment\\",
-      \\"type\\": \\"string\\",
-      \\"widget\\": \\"textarea\\",
-      \\"description\\": \\"\\"
+  "properties": {
+    "text": {
+      "title": "Comment",
+      "type": "string",
+      "widget": "textarea",
+      "description": ""
     }
   },
-  \\"required\\": [
-    \\"text\\"
+  "required": [
+    "text"
   ]
 }"
   id="ModalForm"