Add snapshot when should not update

Author: Mario Aguiar

plugin/assets/src/settings/components/integrations/index.js

@@ -81,6 +81,9 @@ const Integrations = () => {
 						displayUpdatedOn={ UPDATERS[ key ].displayUpdatedOn }
 						versionAvailable={ UPDATERS[ key ].versionAvailable }
 						apiStatus={ state.apiStatus }
+						updateAvailable={
+							state.updaters[ UPDATERS[ key ].type ].updateAvailable
+						}
 					/>
 				) ) }
 			</div>

plugin/assets/src/settings/components/integrations/updater.js

@@ -45,17 +45,17 @@ const Updater = ( {
 	displayUpdatedOn,
 	versionAvailable,
 	apiStatus,
+	updateAvailable,
 } ) => {
 	const [ id ] = useState( _uniqueId( 'updater-' ) );
-	const { state, dispatch } = useContext( SettingsContext );
+	const { dispatch } = useContext( SettingsContext );
 	const isDisabled = needsKey && 'ok' !== apiStatus;
 	const updatedDate = lastUpdated
 		? dateI18n( 'M j, Y, h:i A', lastUpdated )
 		: __( 'never', 'material-design' );
 	const [ isUpdating, setIsUpdating ] = useState( false );
-	const shouldUpdate = ! isDisabled && state.updaters[ type ].updateAvailable;
-	const shouldNotUpdate =
-		! isDisabled && ! state.updaters[ type ].updateAvailable;
+	const shouldUpdate = ! isDisabled && updateAvailable;
+	const shouldNotUpdate = ! isDisabled && ! updateAvailable;
 
 	const handleUpdate = response => {
 		setIsUpdating( true );

plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap

@@ -22,7 +22,7 @@ exports[`Settings: Updater matches snapshot 1`] = `
           <p
             class="mdc-typography--body1"
           >
-            Last update on Apr 6, 2021, 11:23 PM
+            Last update on Apr 6, 2021, 11:33 PM
           </p>
         </div>
         <div
@@ -66,18 +66,17 @@ exports[`Settings: Updater matches snapshot 1`] = `
         >
           <button
             class="mdc-button mdc-button--raised"
-            disabled=""
           >
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon leading-icon"
             >
-              done
+              cached
             </i>
             <span
               class="mdc-button__label"
             >
-              Updated
+              Update
             </span>
           </button>
         </div>
@@ -209,6 +208,92 @@ exports[`Settings: Updater matches snapshot when never updated 1`] = `
             </label>
           </div>
         </div>
+        <div
+          class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end"
+        >
+          <button
+            class="mdc-button mdc-button--raised"
+          >
+            <i
+              aria-hidden="true"
+              class="material-icons mdc-button__icon leading-icon"
+            >
+              cached
+            </i>
+            <span
+              class="mdc-button__label"
+            >
+              Update
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Settings: Updater matches snapshot when should not update 1`] = `
+<div>
+  <div
+    class="material-settings__updater"
+  >
+    <div
+      class="mdc-layout-grid"
+    >
+      <div
+        class="mdc-layout-grid__inner"
+      >
+        <div
+          class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
+        >
+          <h3
+            class="mdc-typography--headline6"
+          >
+            Google Fonts
+          </h3>
+          <p
+            class="mdc-typography--body1"
+          >
+            Last update on Apr 6, 2021, 11:33 PM
+          </p>
+        </div>
+        <div
+          class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end"
+        >
+          <div
+            class="material-settings__switch"
+          >
+            <div
+              class="mdc-switch material-wizard-switch mdc-switch--checked"
+            >
+              <div
+                class="mdc-switch__track"
+              />
+              <div
+                class="mdc-switch__thumb-underlay"
+              >
+                <div
+                  class="mdc-switch__thumb"
+                />
+                <input
+                  aria-checked="true"
+                  checked=""
+                  class="mdc-switch__native-control"
+                  id="updater-4"
+                  role="switch"
+                  type="checkbox"
+                />
+              </div>
+            </div>
+            <label
+              for="updater-4"
+              id="label-updater-4"
+            >
+              Auto-updates enabled
+            </label>
+          </div>
+        </div>
         <div
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end"
         >

plugin/tests/js/settings/components/integrations/updater.test.js

@@ -33,6 +33,7 @@ const baseProps = {
 	needsKey: true,
 	checked: true,
 	apiStatus: 'ok',
+	updateAvailable: true,
 };
 
 const setup = props => {
@@ -68,4 +69,14 @@ describe( 'Settings: Updater', () => {
 		const { container } = setup( props );
 		expect( container ).toMatchSnapshot();
 	} );
+
+	it( 'matches snapshot when should not update', () => {
+		const props = {
+			...baseProps,
+			updateAvailable: false,
+		};
+
+		const { container } = setup( props );
+		expect( container ).toMatchSnapshot();
+	} );
 } );