From 865aecb658558a5bd43454d677ba621f422d304e Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 4 Sep 2023 10:12:20 +1000 Subject: [PATCH 1/4] Clear the useViewportMatch mock after each test --- .../edit-post/src/components/preferences-modal/test/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index cc88386ff0d520..d23406720a86c3 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -20,6 +20,9 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() ); describe( 'EditPostPreferencesModal', () => { describe( 'should match snapshot when the modal is active', () => { + afterEach( () => { + useViewportMatch.mockClear(); + } ); it( 'large viewports', async () => { useSelect.mockImplementation( () => [ true, true, false ] ); useViewportMatch.mockImplementation( () => true ); From 6743d28b7bde24d8cc571fb96b1322649376382c Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 4 Sep 2023 11:21:07 +1000 Subject: [PATCH 2/4] Remove snapshots, which seems to be ostensibly testing if the view changes when the viewport width changes (show toggle inputs vs don't) --- .../test/__snapshots__/index.js.snap | 942 ------------------ .../__snapshots__/meta-boxes-section.js.snap | 452 --------- .../preferences-modal/test/index.js | 30 +- 3 files changed, 22 insertions(+), 1402 deletions(-) delete mode 100644 packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap delete mode 100644 packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap deleted file mode 100644 index bcaed355d48adf..00000000000000 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,942 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EditPostPreferencesModal should match snapshot when the modal is active large viewports 1`] = ` -.emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; - font-size: 13px; - box-sizing: border-box; -} - -.emotion-0 *, -.emotion-0 *::before, -.emotion-0 *::after { - box-sizing: inherit; -} - -.components-panel__row .emotion-2 { - margin-bottom: inherit; -} - -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: calc(4px * 3); - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - width: 100%; -} - -.emotion-4>* { - min-width: 0; -} - -.emotion-6 { - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-8 { - margin-top: calc(4px * 2); - margin-bottom: 0; - font-size: 12px; - font-style: normal; - color: #757575; -} - - -`; - -exports[`EditPostPreferencesModal should match snapshot when the modal is active small viewports 1`] = ` -.emotion-0 { - overflow-x: hidden; -} - -.emotion-2 { - overflow-x: auto; - max-height: 100%; -} - -.emotion-3 { - background-color: #fff; - color: #1e1e1e; - position: relative; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); - outline: none; - box-shadow: none; - border-radius: calc(2px - 1px); -} - -.emotion-5 { - height: 100%; -} - -.emotion-7 { - box-sizing: border-box; - height: auto; - max-height: 100%; - padding: calc(4px * 4); -} - -.emotion-7:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); -} - -.emotion-7:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); -} - -.emotion-9 { - border-radius: 2px; -} - -.emotion-9>*:first-of-type>* { - border-top-left-radius: 2px; - border-top-right-radius: 2px; -} - -.emotion-9>*:last-of-type>* { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; -} - -.emotion-11 { - width: 100%; - display: block; -} - -.emotion-13 { - font-size: 13px; - font-family: inherit; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid transparent; - cursor: pointer; - background: none; - text-align: start; - padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px; - box-sizing: border-box; - width: 100%; - display: block; - margin: 0; - color: inherit; - border-radius: 2px; -} - -.emotion-13 svg, -.emotion-13 path { - fill: currentColor; -} - -.emotion-13:hover { - color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); -} - -.emotion-13:focus { - box-shadow: none; - outline: none; -} - -.emotion-13:focus-visible { - box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( - --wp-components-color-accent, - var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) - ); - outline: 2px solid transparent; - outline-offset: 0; -} - -.emotion-15 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: calc(4px * 2); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - width: 100%; -} - -.emotion-15>* { - min-width: 0; -} - -.emotion-17 { - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; -} - -.emotion-19 { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.emotion-47 { - background: transparent; - display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: 0; - box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); - opacity: 1; - left: 0; - right: 0; - top: 0; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - border-radius: 2px; -} - -@media ( prefers-reduced-motion: reduce ) { - .emotion-47 { - transition-duration: 0ms; - } -} - -