diff --git a/packages/components/src/text/next/test/__snapshots__/index.js.snap b/packages/components/src/text/next/test/__snapshots__/index.js.snap
index 22277095d734fe..dd2f46c7d9c012 100644
--- a/packages/components/src/text/next/test/__snapshots__/index.js.snap
+++ b/packages/components/src/text/next/test/__snapshots__/index.js.snap
@@ -97,216 +97,3 @@ exports[`Text snapshot tests should render correctly 1`] = `
Some people are worth melting for.
`;
-
-exports[`Text snapshot tests should render custom size 1`] = `
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- box-sizing: border-box;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
- font-family: var(--wp-g2-font-family);
- font-size: 13px;
- font-size: var(--wp-g2-font-size);
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
- margin: 0;
- color: #1e1e1e;
- color: var(--wp-g2-color-text);
- line-height: 1.2;
- line-height: var(--wp-g2-font-line-height-base);
- font-size: calc(1.1538461538461537 * 13px);
- font-size: calc(1.1538461538461537 * var(--wp-g2-font-size));
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
-}
-
-@media (prefers-reduced-motion) {
- .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
- }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
-}
-
-
- Some people are worth melting for.
-
-`;
-
-exports[`Text snapshot tests should render optimizeReadabilityFor 1`] = `
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- box-sizing: border-box;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
- font-family: var(--wp-g2-font-family);
- font-size: 13px;
- font-size: var(--wp-g2-font-size);
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
- margin: 0;
- color: #1e1e1e;
- color: var(--wp-g2-color-text);
- line-height: 1.2;
- line-height: var(--wp-g2-font-line-height-base);
- font-size: calc(1 * 13px);
- font-size: calc(1 * var(--wp-g2-font-size));
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
- color: #ffffff;
- color: var(--wp-g2-white);
-}
-
-@media (prefers-reduced-motion) {
- .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
- }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
-}
-
-
- Some people are worth melting for.
-
-`;
-
-exports[`Text snapshot tests should render size 1`] = `
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- box-sizing: border-box;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
- font-family: var(--wp-g2-font-family);
- font-size: 13px;
- font-size: var(--wp-g2-font-size);
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
- margin: 0;
- color: #1e1e1e;
- color: var(--wp-g2-color-text);
- line-height: 1.2;
- line-height: var(--wp-g2-font-line-height-base);
- font-size: calc(1.5384615384615385 * 13px);
- font-size: calc(1.5384615384615385 * var(--wp-g2-font-size));
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
-}
-
-@media (prefers-reduced-motion) {
- .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
- }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
-}
-
-
- Some people are worth melting for.
-
-`;
-
-exports[`Text snapshot tests should render truncate 1`] = `
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- box-sizing: border-box;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
- font-family: var(--wp-g2-font-family);
- font-size: 13px;
- font-size: var(--wp-g2-font-size);
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
- margin: 0;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #1e1e1e;
- color: var(--wp-g2-color-text);
- line-height: 1.2;
- line-height: var(--wp-g2-font-line-height-base);
- font-size: calc(1 * 13px);
- font-size: calc(1 * var(--wp-g2-font-size));
- font-weight: normal;
- font-weight: var(--wp-g2-font-weight);
-}
-
-@media (prefers-reduced-motion) {
- .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
- }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
- -webkit-transition: none !important;
- transition: none !important;
-}
-
-
- Some people are worth melting for.
-
-`;
-
-exports[`Text snapshot tests should render variant 1`] = `
-CSSStyleDeclaration {
- "0": "box-sizing",
- "1": "font-family",
- "2": "font-weight",
- "3": "margin",
- "4": "line-height",
- "5": "visibility",
- "_importants": Object {
- "box-sizing": "",
- "color": "",
- "font-family": "",
- "font-size": "",
- "font-weight": "",
- "line-height": "",
- "margin": "",
- "visibility": undefined,
- },
- "_length": 6,
- "_onChange": [Function],
- "_values": Object {
- "box-sizing": "border-box",
- "font-family": "var(--wp-g2-font-family)",
- "font-weight": "var(--wp-g2-font-weight)",
- "line-height": "var(--wp-g2-font-line-height-base)",
- "margin": "0px",
- "margin-bottom": "0px",
- "margin-left": "0px",
- "margin-right": "0px",
- "margin-top": "0px",
- "visibility": "visible",
- },
-}
-`;
diff --git a/packages/components/src/text/next/test/index.js b/packages/components/src/text/next/test/index.js
index a1e84ab1d9db28..31cb96ce992839 100644
--- a/packages/components/src/text/next/test/index.js
+++ b/packages/components/src/text/next/test/index.js
@@ -2,73 +2,67 @@
* External dependencies
*/
import { render } from '@testing-library/react';
+import { getFontSize, ui } from '@wp-g2/styles';
/**
* Internal dependencies
*/
-import { Text } from '../text';
+import Text from '../text';
describe( 'Text', () => {
describe( 'snapshot tests', () => {
- /**
- * We cannot make these assertions programatically for one of a few reasons, varying depending on the situation:
- * 1. The result is too complicated and we would create an even more fragile test than a snapshot
- * 2. A programatic test would depend too heavily on the internals of the component, thereby testing the implementation rather than the result
- * 3. The variable being tested does not resolve in `getComputedStyle` because it is a `var( --wp-g2-color-name )` style variable for which the computed style will be empty (because the theme is not applied in the test environment so the variable does not exist)
- *
- * I've noted for each test which reason I think applies for each.
- */
-
- // Reason 1
test( 'should render correctly', () => {
const { container } = render(
Some people are worth melting for.
);
expect( container.firstChild ).toMatchSnapshot();
} );
+ } );
- // Reason 2
- test( 'should render optimizeReadabilityFor', () => {
- const { container } = render(
-
- Some people are worth melting for.
-
- );
- expect( container.firstChild ).toMatchSnapshot();
+ test( 'should render optimizeReadabilityFor', () => {
+ const { container } = render(
+
+ Some people are worth melting for.
+
+ );
+ expect( container.firstChild ).toHaveStyle( {
+ color: ui.get( 'white' ),
} );
+ } );
- // Reason 3
- test( 'should render size', () => {
- const { container } = render(
- Some people are worth melting for.
- );
- expect( container.firstChild ).toMatchSnapshot();
+ test( 'should render truncate', () => {
+ const { container } = render(
+ Some people are worth melting for.
+ );
+ expect( container.firstChild ).toHaveStyle( {
+ textOverflow: 'ellipsis',
} );
+ } );
- // Reason 3
- test( 'should render custom size', () => {
- const { container } = render(
- Some people are worth melting for.
- );
- expect( container.firstChild ).toMatchSnapshot();
+ test( 'should render size', () => {
+ const { container } = render(
+ Some people are worth melting for.
+ );
+ expect( container.firstChild ).toHaveStyle( {
+ fontSize: getFontSize( 'title' ),
} );
+ } );
- // Reason 3
- test( 'should render truncate', () => {
- const { container } = render(
- Some people are worth melting for.
- );
- expect( container.firstChild ).toMatchSnapshot();
+ test( 'should render custom size', () => {
+ const { container } = render(
+ Some people are worth melting for.
+ );
+ expect( container.firstChild ).toHaveStyle( {
+ fontSize: getFontSize( 15 ),
} );
+ } );
- // Reason 3
- test( 'should render variant', () => {
- const { container } = render(
- Some people are worth melting for.
- );
- expect(
- window.getComputedStyle( container.firstChild )
- ).toMatchSnapshot();
+ test( 'should render variant', () => {
+ const { container } = render(
+ Some people are worth melting for.
+ );
+ expect( container.firstChild ).toHaveStyle( {
+ color: ui.get( 'colorTextMuted' ),
} );
} );
@@ -83,18 +77,14 @@ describe( 'Text', () => {
const { container } = render(
Some people are worth melting for.
);
- expect(
- window.getComputedStyle( container.firstChild ).textAlign
- ).toBe( 'center' );
+ expect( container.firstChild ).toHaveStyle( { textAlign: 'center' } );
} );
test( 'should render color', () => {
const { container } = render(
Some people are worth melting for.
);
- expect( window.getComputedStyle( container.firstChild ).color ).toBe(
- 'orange'
- );
+ expect( container.firstChild ).toHaveStyle( { color: 'orange' } );
} );
test( 'should render display', () => {
@@ -103,9 +93,9 @@ describe( 'Text', () => {
Some people are worth melting for.
);
- expect( window.getComputedStyle( container.firstChild ).display ).toBe(
- 'inline-flex'
- );
+ expect( container.firstChild ).toHaveStyle( {
+ display: 'inline-flex',
+ } );
} );
test( 'should render highlighted words', async () => {
@@ -147,35 +137,31 @@ describe( 'Text', () => {
const { container } = render(
Some people are worth melting for.
);
- expect( window.getComputedStyle( container.firstChild ).display ).toBe(
- 'block'
- );
+ expect( container.firstChild ).toHaveStyle( {
+ display: 'block',
+ } );
} );
test( 'should render lineHeight', () => {
const { container } = render(
Some people are worth melting for.
);
- expect(
- window.getComputedStyle( container.firstChild ).lineHeight
- ).toBe( '1.5' );
+ expect( container.firstChild ).toHaveStyle( { lineHeight: '1.5' } );
} );
test( 'should render upperCase', () => {
const { container } = render(
Some people are worth melting for.
);
- expect(
- window.getComputedStyle( container.firstChild ).textTransform
- ).toBe( 'uppercase' );
+ expect( container.firstChild ).toHaveStyle( {
+ textTransform: 'uppercase',
+ } );
} );
test( 'should render weight', () => {
const { container } = render(
Some people are worth melting for.
);
- expect(
- window.getComputedStyle( container.firstChild ).fontWeight
- ).toBe( '700' );
+ expect( container.firstChild ).toHaveStyle( { fontWeight: '700' } );
} );
} );