fix: update element selectors for tour

electron · Sep 20, 2023 · dfffad6 · dfffad6
1 parent f3eb3bc
commit dfffad6
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 31 deletions.
diff --git a/src/less/components/version-select.less b/src/less/components/version-select.less
@@ -1,5 +1,5 @@
 .bp3-fill {
-  .version-chooser  {
+  #version-chooser  {
     width: 100%;
   }
 }
diff --git a/src/renderer/components/commands-action-button.tsx b/src/renderer/components/commands-action-button.tsx
@@ -360,6 +360,7 @@ export const GistActionButton = observer(
             <ButtonGroup className="button-gist-action">
               {this.renderPrivacyMenu()}
               <Button
+                id="button-action"
                 onClick={this.handleClick}
                 loading={isPerformingAction}
                 icon={getActionIcon()}

diff --git a/src/renderer/components/commands-runner.tsx b/src/renderer/components/commands-runner.tsx
@@ -30,12 +30,12 @@ export const Runner = observer(
       } = this.props.appState;
 
       const state = currentElectronVersion?.state;
-      const props: ButtonProps = { className: 'button-run', disabled: true };
+      const props: ButtonProps = { disabled: true };
 
       if ([downloading, missing].includes(state) && !isOnline) {
         props.text = 'Offline';
         props.icon = 'satellite';
-        return <Button {...props} type={undefined} />;
+        return <Button id="button-run" {...props} type={undefined} />;
       }
 
       switch (state) {
@@ -78,7 +78,7 @@ export const Runner = observer(
         }
       }
 
-      return <Button {...props} type={undefined} />;
+      return <Button id="button-run" {...props} type={undefined} />;
     }
   },
 );
diff --git a/src/renderer/components/tour-welcome.tsx b/src/renderer/components/tour-welcome.tsx
@@ -43,7 +43,7 @@ export function getWelcomeTour(): Set<TourScriptStep> {
     },
     {
       name: 'select-versions',
-      selector: 'button.version-chooser',
+      selector: '#version-chooser',
       title: '📇 Choose an Electron Version',
       content: (
         <>
@@ -60,13 +60,13 @@ export function getWelcomeTour(): Set<TourScriptStep> {
     },
     {
       name: 'button-run',
-      selector: '.button-run',
+      selector: '#button-run',
       title: '🚀 Run Your Fiddle',
       content: <p>Hit this button to give your Fiddle a try and start it.</p>,
     },
     {
-      name: 'button-publish',
-      selector: '.button-publish',
+      name: 'button-action',
+      selector: '#button-action',
       title: '🗺 Share Your Fiddle',
       content: (
         <>
@@ -111,7 +111,7 @@ export function getWelcomeTour(): Set<TourScriptStep> {
     },
     {
       name: 'main-editor',
-      selector: 'div.mosaic-window.main',
+      selector: 'div.mosaic-window.main\\.js',
       title: '📝 Main Script',
       content: (
         <>
@@ -137,7 +137,7 @@ export function getWelcomeTour(): Set<TourScriptStep> {
     },
     {
       name: 'html-editor',
-      selector: 'div.mosaic-window.html',
+      selector: 'div.mosaic-window.index\\.html',
       title: '📝 HTML',
       content: (
         <p>
@@ -152,7 +152,7 @@ export function getWelcomeTour(): Set<TourScriptStep> {
     },
     {
       name: 'renderer-editor',
-      selector: 'div.mosaic-window.renderer',
+      selector: 'div.mosaic-window.renderer\\.js',
       title: '📝  Renderer Script',
       content: (
         <>

diff --git a/src/renderer/components/version-select.tsx b/src/renderer/components/version-select.tsx
@@ -266,7 +266,7 @@ export const VersionSelect = observer(
           disabled={!!this.props.disabled}
         >
           <Button
-            className="version-chooser"
+            id="version-chooser"
             text={`Electron v${version}`}
             icon={getItemIcon(currentVersion)}
             onContextMenu={(e: React.MouseEvent<HTMLButtonElement>) => {

diff --git a/src/renderer/utils/position-for-rect.ts b/src/renderer/utils/position-for-rect.ts
@@ -52,6 +52,14 @@ export function positionForRect(
     return { ...result, type: 'bottom' };
   }
 
+  // Okay, let's try bottom left
+  result.left = target.left - margin - size.width;
+  result.top = target.top + target.height + margin;
+
+  if (isResultOkay(result, size)) {
+    return { ...result, type: 'left' };
+  }
+
   // Top middle would require us to measure the
   // text height, which is a bit gross. I'll leave
   // this commented out for now, but if you need it

diff --git a/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap
@@ -58,6 +58,7 @@ exports[`Action button component renders 1`] = `
       </Blueprint3.Popover>
       <Blueprint3.Button
         icon="upload"
+        id="button-action"
         loading={false}
         onClick={[Function]}
         text="Publish"

diff --git a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
@@ -2,83 +2,83 @@
 
 exports[`Runner component renders InstallState.downloading 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={true}
   icon={
     <Blueprint3.Spinner
       size={16}
       value={50}
     />
   }
+  id="button-run"
   text="Downloading"
 />
 `;
 
 exports[`Runner component renders InstallState.installed 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={false}
   icon="play"
+  id="button-run"
   onClick={[MockFunction]}
   text="Run"
 />
 `;
 
-exports[`Runner component renders InstallState.missing 1`] = `
+exports[`Runner component renders InstallState.installing 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={true}
   icon={
     <Blueprint3.Spinner
       size={16}
     />
   }
-  text="Checking status"
+  id="button-run"
+  text="Unzipping"
 />
 `;
 
-exports[`Runner component renders InstallState.installing 1`] = `
+exports[`Runner component renders InstallState.missing 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={true}
   icon={
     <Blueprint3.Spinner
       size={16}
     />
   }
-  text="Unzipping"
+  id="button-run"
+  text="Checking status"
 />
 `;
 
 exports[`Runner component renders idle 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={false}
   icon="play"
+  id="button-run"
   onClick={[MockFunction]}
   text="Run"
 />
 `;
 
 exports[`Runner component renders installing modules 1`] = `
 <Blueprint3.Button
-  className="button-run"
   disabled={false}
   icon={
     <Blueprint3.Spinner
       size={16}
     />
   }
+  id="button-run"
   text="Installing modules"
 />
 `;
 
 exports[`Runner component renders running 1`] = `
 <Blueprint3.Button
   active={true}
-  className="button-run"
   disabled={false}
   icon="stop"
+  id="button-run"
   onClick={[MockFunction]}
   text="Stop"
 />

diff --git a/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap b/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap
@@ -84,15 +84,15 @@ exports[`Header component renders the tour once started 1`] = `
           </p>
         </React.Fragment>,
         "name": "select-versions",
-        "selector": "button.version-chooser",
+        "selector": "#version-chooser",
         "title": "📇 Choose an Electron Version",
       },
       {
         "content": <p>
           Hit this button to give your Fiddle a try and start it.
         </p>,
         "name": "button-run",
-        "selector": ".button-run",
+        "selector": "#button-run",
         "title": "🚀 Run Your Fiddle",
       },
       {
@@ -104,8 +104,8 @@ exports[`Header component renders the tour once started 1`] = `
             You can also package your Fiddle as a standalone binary or as an installer from the "Tasks" menu.
           </p>
         </React.Fragment>,
-        "name": "button-publish",
-        "selector": ".button-publish",
+        "name": "button-action",
+        "selector": "#button-action",
         "title": "🗺 Share Your Fiddle",
       },
       {
@@ -142,7 +142,7 @@ exports[`Header component renders the tour once started 1`] = `
           </p>
         </React.Fragment>,
         "name": "main-editor",
-        "selector": "div.mosaic-window.main",
+        "selector": "div.mosaic-window.main\\.js",
         "title": "📝 Main Script",
       },
       {
@@ -163,7 +163,7 @@ exports[`Header component renders the tour once started 1`] = `
            like we would in Node.js.
         </p>,
         "name": "html-editor",
-        "selector": "div.mosaic-window.html",
+        "selector": "div.mosaic-window.index\\.html",
         "title": "📝 HTML",
       },
       {
@@ -188,7 +188,7 @@ exports[`Header component renders the tour once started 1`] = `
           </p>
         </React.Fragment>,
         "name": "renderer-editor",
-        "selector": "div.mosaic-window.renderer",
+        "selector": "div.mosaic-window.renderer\\.js",
         "title": "📝  Renderer Script",
       },
     }

diff --git a/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap b/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap
@@ -76,9 +76,9 @@ exports[`VersionSelect component renders 1`] = `
   onItemSelect={[Function]}
 >
   <Blueprint3.Button
-    className="version-chooser"
     disabled={false}
     icon="cloud"
+    id="version-chooser"
     onContextMenu={[Function]}
     text="Electron v1.0.0"
   />