chore: Remove visual refresh toggle from dev page

Author: michaeldowseza

pages/app/components/theme-switcher.tsx

@@ -4,36 +4,15 @@ import React, { useContext } from 'react';
 
 import { Density, Mode } from '@cloudscape-design/global-styles';
 
-import { ALWAYS_VISUAL_REFRESH } from '~components/internal/environment';
 import SpaceBetween from '~components/space-between';
 
 import AppContext from '../app-context';
 
 export default function ThemeSwitcher() {
   const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
 
-  const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    id: 'visual-refresh-toggle',
-    type: 'checkbox',
-  };
-
-  if (ALWAYS_VISUAL_REFRESH) {
-    vrSwitchProps.checked = true;
-    vrSwitchProps.readOnly = true;
-  } else {
-    vrSwitchProps.checked = urlParams.visualRefresh;
-    vrSwitchProps.onChange = event => {
-      setUrlParams({ visualRefresh: event.target.checked });
-      window.location.reload();
-    };
-  }
-
   return (
     <SpaceBetween direction="horizontal" size="xs">
-      <label>
-        <input {...vrSwitchProps} />
-        Visual refresh
-      </label>
       <label>
         <input
           id="mode-toggle"

src/icon/__integ__/icon.test.ts

@@ -8,17 +8,12 @@ import createWrapper from '../../../lib/components/test-utils/selectors';
 import styles from '../../../lib/components/icon/styles.selectors.js';
 
 const dynamicIconSelector = createWrapper().findIcon('#dynamic-test-2').toSelector();
-const staticIconSelector = createWrapper().findIcon('#static-test').toSelector();
 const removedIconSelector = createWrapper().findIcon('#visibility-test-1').toSelector();
 const hiddenIconSelector = createWrapper().findIcon('#visibility-test-2').toSelector();
 
 const dynamicHeightInput = '#height-input';
 
 class IconSizeInherit extends BasePageObject {
-  async toggleMode() {
-    await this.click('label=Visual refresh');
-  }
-
   async toggleVisibility() {
     await this.click('#visibility-toggle');
   }
@@ -34,13 +29,11 @@ class IconSizeInherit extends BasePageObject {
 }
 
 describe('Icon', () => {
-  const setupTest = (testFn: (page: IconSizeInherit) => Promise<void>) => {
+  const setupTest = (testFn: (page: IconSizeInherit) => Promise<void>, classic?: boolean) => {
     return useBrowser(async browser => {
       const page = new IconSizeInherit(browser);
-      await browser.url('#/light/icon/size-inherit');
+      await browser.url(`#/light/icon/size-inherit?visualRefresh=${!classic}`);
       await page.waitForVisible(dynamicIconSelector);
-      // The default theme is VR by default, so we toggle once to go to classic mode
-      await page.toggleMode();
       await testFn(page);
     });
   };
@@ -56,18 +49,6 @@ describe('Icon', () => {
       await expect(page.hasSize('size-medium')).resolves.toBe(true);
     })
   );
-  test(
-    'Should update icon height and size on visual mode change',
-    setupTest(async page => {
-      await expect(page.getHeight(staticIconSelector)).resolves.toEqual(22);
-      await expect(page.hasSize('size-normal', staticIconSelector)).resolves.toBe(true);
-
-      await page.toggleMode();
-
-      await expect(page.getHeight(staticIconSelector)).resolves.toEqual(24);
-      await expect(page.hasSize('size-medium', staticIconSelector)).resolves.toBe(true);
-    })
-  );
   test(
     'Hidden icon should have correct height and size after becoming visible',
     setupTest(async page => {
@@ -76,11 +57,29 @@ describe('Icon', () => {
       await expect(page.isExisting(removedIconSelector)).resolves.toBe(true);
       await expect(page.isExisting(hiddenIconSelector)).resolves.toBe(true);
 
-      await expect(page.getHeight(removedIconSelector)).resolves.toEqual(36);
-      await expect(page.hasSize('size-big', removedIconSelector)).resolves.toBe(true);
+      await expect(page.getHeight(removedIconSelector)).resolves.toEqual(30);
+      await expect(page.hasSize('size-medium', removedIconSelector)).resolves.toBe(true);
 
       await expect(page.getHeight(hiddenIconSelector)).resolves.toEqual(27);
       await expect(page.hasSize('size-medium', hiddenIconSelector)).resolves.toBe(true);
     })
   );
+
+  describe('Classic', () => {
+    test(
+      'Hidden icon should have correct height and size after becoming visible',
+      setupTest(async page => {
+        await expect(page.isExisting(removedIconSelector)).resolves.toBe(false);
+        await page.toggleVisibility();
+        await expect(page.isExisting(removedIconSelector)).resolves.toBe(true);
+        await expect(page.isExisting(hiddenIconSelector)).resolves.toBe(true);
+
+        await expect(page.getHeight(removedIconSelector)).resolves.toEqual(36);
+        await expect(page.hasSize('size-big', removedIconSelector)).resolves.toBe(true);
+
+        await expect(page.getHeight(hiddenIconSelector)).resolves.toEqual(27);
+        await expect(page.hasSize('size-medium', hiddenIconSelector)).resolves.toBe(true);
+      }, true)
+    );
+  });
 });