feat: sets the viewport before the goto command. Closes #10

checkly · Aug 20, 2018 · 5fff05e · 5fff05e
1 parent 0492d96
commit 5fff05e
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 2 deletions.
diff --git a/src/background/index.js b/src/background/index.js
@@ -31,6 +31,9 @@ class RecordingController {
     }
 
     chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+      chrome.tabs.sendMessage(tabs[0].id, { control: 'get-viewport-size' }, response => {
+        if (response) this.recordCurrentViewportSize(response.value)
+      })
       chrome.tabs.sendMessage(tabs[0].id, { control: 'get-current-url' }, response => {
         if (response) this.recordCurrentUrl(response.href)
       })
@@ -93,6 +96,10 @@ class RecordingController {
     this.handleMessage({ selector: undefined, value: undefined, action: 'goto*', href })
   }
 
+  recordCurrentViewportSize (value) {
+    this.handleMessage({ selector: undefined, value, action: 'viewport*' })
+  }
+
   handleMessage (msg) {
     console.debug('receiving message', msg)
     if (msg.control) return this.handleControlMessage(msg)

diff --git a/src/content-scripts/index.js b/src/content-scripts/index.js
@@ -18,6 +18,10 @@ class EventRecorder {
       if (msg.control && msg.control === 'get-current-url') {
         resp({ href: window.location.href })
       }
+
+      if (msg.control && msg.control === 'get-viewport-size') {
+        resp({ value: { width: window.innerWidth, height: window.innerHeight } })
+      }
     })
     const msg = { control: 'event-recorder-started' }
     sendMessage(msg)

diff --git a/src/popup/code-generator/CodeGenerator.js b/src/popup/code-generator/CodeGenerator.js
@@ -54,6 +54,9 @@ export default class CodeGenerator {
         case 'goto*':
           result += `  await page.goto('${href}')\n`
           break
+        case 'viewport*':
+          result += `  await page.setViewport({ width: ${value.width}, height: ${value.height} })\n`
+          break
         case 'reload':
           result += `  await page.reload()\n`
           break

diff --git a/src/popup/components/RecordingTab.vue b/src/popup/components/RecordingTab.vue
@@ -15,7 +15,7 @@
             </div>
             <div class="event-description">
               <div class="event-action">{{event.action}}</div>
-              <div class="event-props text-muted">{{event.selector || event.href }}</div>
+              <div class="event-props text-muted">{{event.selector || parseEventValue(event)}}</div>
             </div>
           </li>
         </ul>
@@ -29,6 +29,12 @@
     props: {
       isRecording: { type: Boolean, default: false },
       liveEvents: { type: Array, default: () => { return [] } }
+    },
+    methods: {
+      parseEventValue (event) {
+        if (event.action === 'viewport*') return `width: ${event.value.width}, height: ${event.value.height}`
+        if (event.action === 'goto*') return event.href
+      }
     }
   }
 </script>

diff --git a/src/popup/components/__tests__/RecordingTab.spec.js b/src/popup/components/__tests__/RecordingTab.spec.js
@@ -14,7 +14,24 @@ describe('RecordingTab.vue', () => {
     expect(wrapper.find('.event-list').isEmpty()).toBe(true)
   })
 
-  test('it has the correct recording events state', () => {
+  test('it has the correct recording Puppeteer custom events state', () => {
+    const wrapper = mount(RecordingTab)
+    wrapper.setProps({
+      isRecording: true,
+      liveEvents: [{
+        action: 'goto*',
+        href: 'http://example.com'
+      }, {
+        action: 'viewport*',
+        selector: undefined,
+        value: { width: 1280, height: 800 }
+      }]
+    })
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.find('.event-list').isEmpty()).toBe(false)
+  })
+
+  test('it has the correct recording DOM events state', () => {
     const wrapper = mount(RecordingTab)
     wrapper.setProps({ isRecording: true, liveEvents: [{ action: 'click', selector: '.main > a.link', href: 'http://example.com' }] })
     expect(wrapper.element).toMatchSnapshot()

diff --git a/src/popup/components/__tests__/__snapshots__/RecordingTab.spec.js.snap b/src/popup/components/__tests__/__snapshots__/RecordingTab.spec.js.snap
@@ -45,6 +45,183 @@ exports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `
 </div>
 `;
 
+exports[`RecordingTab.vue it has the correct recording DOM events state 1`] = `
+<div
+  class="tab recording-tab"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="empty"
+      style="display: none;"
+    >
+      <img
+        alt="desert"
+        src="/images/Desert.svg"
+        width="78px"
+      />
+       
+      <h3>
+        No recorded events yet
+      </h3>
+       
+      <p
+        class="text-muted"
+      >
+        Click record to begin
+      </p>
+    </div>
+     
+    <div
+      class="events"
+      style=""
+    >
+      <p
+        class="text-muted text-center"
+        style="display: none;"
+      >
+        Waiting for events...
+      </p>
+       
+      <ul
+        class="event-list"
+      >
+        <li
+          class="event-list-item"
+        >
+          <div
+            class="event-label"
+          >
+            
+            1.
+          
+          </div>
+           
+          <div
+            class="event-description"
+          >
+            <div
+              class="event-action"
+            >
+              click
+            </div>
+             
+            <div
+              class="event-props text-muted"
+            >
+              .main &gt; a.link
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`RecordingTab.vue it has the correct recording Puppeter custom events state 1`] = `
+<div
+  class="tab recording-tab"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="empty"
+      style="display: none;"
+    >
+      <img
+        alt="desert"
+        src="/images/Desert.svg"
+        width="78px"
+      />
+       
+      <h3>
+        No recorded events yet
+      </h3>
+       
+      <p
+        class="text-muted"
+      >
+        Click record to begin
+      </p>
+    </div>
+     
+    <div
+      class="events"
+      style=""
+    >
+      <p
+        class="text-muted text-center"
+        style="display: none;"
+      >
+        Waiting for events...
+      </p>
+       
+      <ul
+        class="event-list"
+      >
+        <li
+          class="event-list-item"
+        >
+          <div
+            class="event-label"
+          >
+            
+            1.
+          
+          </div>
+           
+          <div
+            class="event-description"
+          >
+            <div
+              class="event-action"
+            >
+              goto*
+            </div>
+             
+            <div
+              class="event-props text-muted"
+            >
+              http://example.com
+            </div>
+          </div>
+        </li>
+        <li
+          class="event-list-item"
+        >
+          <div
+            class="event-label"
+          >
+            
+            2.
+          
+          </div>
+           
+          <div
+            class="event-description"
+          >
+            <div
+              class="event-action"
+            >
+              viewport*
+            </div>
+             
+            <div
+              class="event-props text-muted"
+            >
+              width: 1280, height: 800
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`RecordingTab.vue it has the correct recording events state 1`] = `
 <div
   class="tab recording-tab"