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' } ); } ); } );