@wordpress/components 40.0.0 → 40.1.0

package/src/utils/test/space.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { space } from '../space';
 
 describe( 'space', () => {

package/src/utils/test/strings.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { normalizeTextString } from '../strings';
 
 describe( 'normalizeTextString', () => {

package/src/utils/test/unit-values.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { createCSSUnitValue, parseCSSUnitValue } from '../unit-values';
 
 describe( 'unit-values', () => {

package/src/v-stack/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`props should render alignment 1`] = `
+exports[`props > should render alignment 1`] = `
 <div>
   <div
     class="style-flex style-items-column components-flex components-h-stack components-v-stack"
@@ -14,7 +14,7 @@ exports[`props should render alignment 1`] = `
 </div>
 `;
 
-exports[`props should render correctly 1`] = `
+exports[`props > should render correctly 1`] = `
 <div>
   <div
     class="style-flex style-items-column components-flex components-h-stack components-v-stack"
@@ -28,7 +28,7 @@ exports[`props should render correctly 1`] = `
 </div>
 `;
 
-exports[`props should render spacing 1`] = `
+exports[`props > should render spacing 1`] = `
 <div>
   <div
     class="style-flex style-items-column components-flex components-h-stack components-v-stack"

package/src/v-stack/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { View } from '../../view';
 import { VStack } from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render(

package/src/validated-form-controls/style.scss

@@ -1,23 +1,23 @@
-@use "@wordpress/base-styles/colors" as *;
-
 %red-focus-ring {
-	--focus-color: #{ $alert-red };
+	--focus-color: var(--wpds-color-stroke-interactive-error);
+}
+
+%red-error-border {
+	@extend %red-focus-ring;
+
+	border-color: var(--wpds-color-stroke-interactive-error);
 }
 
 .components-validated-control {
 	// For components based on InputBase
 	&:has(:is(input, select):invalid[data-validity-visible])
 	.components-input-control__backdrop {
-		@extend %red-focus-ring;
-
-		border-color: $alert-red;
+		@extend %red-error-border;
 	}
 
 	// For TextareaControl
 	textarea:invalid[data-validity-visible] {
-		@extend %red-focus-ring;
-
-		border-color: $alert-red;
+		@extend %red-error-border;
 	}
 }
 
@@ -26,17 +26,13 @@
 
 	// For CustomSelectControl
 	&:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
-		@extend %red-focus-ring;
-
-		border-color: $alert-red;
+		@extend %red-error-border;
 	}
 
 	// For ContentEditableControl
 	&:has(input:invalid[data-validity-visible])
 	.components-validated-control__content-editable [role="textbox"] {
-		@extend %red-focus-ring;
-
-		border-color: $alert-red;
+		@extend %red-error-border;
 	}
 }
 

package/src/validated-form-controls/test/{content-editable-control.tsx → content-editable-control.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ValidatedContentEditableControl } from '../components';
@@ -21,7 +22,6 @@ describe( 'ValidatedContentEditableControl', () => {
 	// not the editable that assistive technology interacts with. This is the
 	// same pre-existing limitation as the other delegate-based controls,
 	// tracked in #76741.
-	// eslint-disable-next-line jest/no-disabled-tests
 	it.skip( 'should append the validation error alongside the help description', async () => {
 		const user = userEvent.setup();
 		render(

package/src/validated-form-controls/test/{custom-select-control.tsx → custom-select-control.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ValidatedCustomSelectControl } from '../components';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'ValidatedCustomSelectControl', () => {
 	const options = [
 		{ key: 'small', name: 'Small' },

package/src/validated-form-controls/test/{input-control.tsx → input-control.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ValidatedInputControl } from '../components';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'Shows a deprecation warning', () => {
 	it( 'ValidatedInputControl', () => {
 		render(

package/src/validated-form-controls/test/{range-control.tsx → range-control.jsdom.test.tsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState, useRef } from '@wordpress/element';
 import { ValidatedRangeControl } from '../components';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'ValidatedRangeControl', () => {
 	it( 'should preserve the help description', () => {
 		render(

package/src/validated-form-controls/test/{textarea-control.tsx → textarea-control.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ValidatedTextareaControl } from '../components';

package/src/view/test/__snapshots__/{index.js.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`props should ignore legacy css prop styles (array) 1`] = `
+exports[`props > should ignore legacy css prop styles (array) 1`] = `
 <div>
   <p
     data-testid="custom-css-array-view"
@@ -10,7 +10,7 @@ exports[`props should ignore legacy css prop styles (array) 1`] = `
 </div>
 `;
 
-exports[`props should ignore legacy css prop styles (object) 1`] = `
+exports[`props > should ignore legacy css prop styles (object) 1`] = `
 <div>
   <p
     data-testid="custom-css-object-view"
@@ -20,7 +20,7 @@ exports[`props should ignore legacy css prop styles (object) 1`] = `
 </div>
 `;
 
-exports[`props should ignore legacy css prop styles (string) 1`] = `
+exports[`props > should ignore legacy css prop styles (string) 1`] = `
 <div>
   <p
     data-testid="custom-css-string-view"
@@ -30,7 +30,7 @@ exports[`props should ignore legacy css prop styles (string) 1`] = `
 </div>
 `;
 
-exports[`props should render as a custom component 1`] = `
+exports[`props > should render as a custom component 1`] = `
 <div>
   <section
     class="custom-class"
@@ -42,7 +42,7 @@ exports[`props should render as a custom component 1`] = `
 </div>
 `;
 
-exports[`props should render as another element 1`] = `
+exports[`props > should render as another element 1`] = `
 <div>
   <p>
     <span />
@@ -50,7 +50,7 @@ exports[`props should render as another element 1`] = `
 </div>
 `;
 
-exports[`props should render correctly 1`] = `
+exports[`props > should render correctly 1`] = `
 <div>
   <div>
     <span />

package/src/view/test/{index.js → index.jsdom.test.tsx}

@@ -1,4 +1,6 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from '@wordpress/element';
 import { View } from '../index';
 
@@ -22,11 +24,14 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render as a custom component', () => {
-		const CustomComponent = forwardRef( ( props, ref ) => (
+		const CustomComponent = forwardRef<
+			HTMLElement,
+			ComponentPropsWithoutRef< 'section' >
+		>( ( props, ref ) => (
 			<section ref={ ref } data-custom-component { ...props } />
 		) );
 
-		const ref = jest.fn();
+		const ref = vi.fn();
 		const { container } = render(
 			<View
 				as={ CustomComponent }

package/src/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`props should render _override props 1`] = `
-<div>
-  <div
-    class="components-component test-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  >
-    Code is Poetry
-  </div>
-</div>
-`;
-
-exports[`props should render context props 1`] = `
-<div>
-  <div
-    class="components-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  >
-    Code is Poetry
-  </div>
-</div>
-`;
-
-exports[`props should render correctly 1`] = `
-<div>
-  <div
-    class="components-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  />
-</div>
-`;

package/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`withFilters should display a component overridden by the filter 1`] = `
-<div>
-  <div>
-    Overridden component
-  </div>
-</div>
-`;
-
-exports[`withFilters should display original component when no filters applied 1`] = `
-<div>
-  <div>
-    My component
-  </div>
-</div>
-`;
-
-exports[`withFilters should display two components composed by the filter 1`] = `
-<div>
-  <div>
-    <div>
-      My component
-    </div>
-    <div>
-      Composed component
-    </div>
-  </div>
-</div>
-`;
-
-exports[`withFilters should not re-render component when new filter added before component was mounted 1`] = `
-<div>
-  <blockquote>
-    <div>
-      Spied component
-    </div>
-  </blockquote>
-</div>
-`;
-
-exports[`withFilters should re-render both components once each when one filter added 1`] = `
-<div>
-  <section>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-  </section>
-</div>
-`;
-
-exports[`withFilters should re-render component once when new filter added after component was mounted 1`] = `
-<div>
-  <blockquote>
-    <div>
-      Spied component
-    </div>
-  </blockquote>
-</div>
-`;
-
-exports[`withFilters should re-render component once when two filters added in the same animation frame 1`] = `
-<div>
-  <section>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-  </section>
-</div>
-`;
-
-exports[`withFilters should re-render component twice when new filter added and removed in two different animation frames 1`] = `
-<div>
-  <div>
-    Spied component
-  </div>
-</div>
-`;

package/src/panel/test/__snapshots__/body.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
-<div>
-  <div
-    class="components-panel__body is-opened"
-  />
-</div>
-`;

package/src/panel/test/__snapshots__/header.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`PanelHeader basic rendering should render PanelHeader with empty div inside 1`] = `
-<div>
-  <div
-    class="components-panel__header"
-  />
-</div>
-`;

package/src/panel/test/__snapshots__/index.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Panel basic rendering should render an additional className 1`] = `
-<div>
-  <div
-    class="the-panel components-panel"
-  />
-</div>
-`;
-
-exports[`Panel basic rendering should render an empty div without any provided props 1`] = `
-<div>
-  <div
-    class="components-panel"
-  />
-</div>
-`;

package/src/panel/test/__snapshots__/row.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`PanelRow should render with the custom class name 1`] = `
-<div>
-  <div
-    class="components-panel__row custom"
-  />
-</div>
-`;
-
-exports[`PanelRow should render with the default class name 1`] = `
-<div>
-  <div
-    class="components-panel__row"
-  />
-</div>
-`;

package/src/shortcut/test/__snapshots__/index.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Shortcut renders passed className 1`] = `
-<span
-  class="my-class"
->
-  shortcut text
-</span>
-`;
-
-exports[`Shortcut renders the shortcut display text when a string is passed as the shortcut 1`] = `
-<span>
-  shortcut text
-</span>
-`;

package/src/snackbar/test/list.tsx

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { click } from '@ariakit/test';
-import SnackbarList from '../list';
-
-window.scrollTo = jest.fn();
-
-describe( 'SnackbarList', () => {
-	afterEach( () => {
-		jest.resetAllMocks();
-	} );
-
-	it( 'should get focus after a snackbar is dismissed', async () => {
-		render(
-			<SnackbarList
-				notices={ [
-					{
-						id: 'ID_1',
-						content: 'Post published.',
-						explicitDismiss: true,
-					},
-					{
-						id: 'ID_2',
-						content: 'Post updated.',
-						explicitDismiss: true,
-					},
-				] }
-				onRemove={ () => {} }
-			/>
-		);
-
-		await click(
-			screen.getAllByRole( 'button', {
-				name: 'Dismiss this notice',
-			} )[ 0 ]
-		);
-
-		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
-	} );
-} );