feat(resizeTab): Allow resizing of the viewport

vinsonchuong · Sep 1, 2019 · 379ae96 · 379ae96
1 parent 38b3103
commit 379ae96
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -77,6 +77,7 @@ Here are the actions `puppet-strings` provides:
 * [`openTab`](actions/open-tab): Opens a url in a new tab and waits for it to
   fully load
 * [`closeTab`](actions/close-tab): Closes a tab
+* [`resizeTab`](actions/resize-tab): Changes the size of the viewport of a tab
 * [`navigate`](actions/navigate): Navigates a tab to a new URL
 * [`waitForNavigation`](actions/wait-for-navigation): Waits for a page load to complete
 * [`evalInTab`](actions/eval-in-tab): Evaluates code within a tab and returns the result

diff --git a/actions/close-tab/README.md b/actions/close-tab/README.md
@@ -15,7 +15,7 @@ run()
 ```
 
 ## Parameters
-* `tab` ([Promise<Tab>](../../interface#tab-object))
+* `tab` ([Tab](../../interface#tab-object))
 
 ## Returns
 * `promise` (Promise<void>)

diff --git a/actions/resize-tab/README.md b/actions/resize-tab/README.md
@@ -0,0 +1,29 @@
+# `resizeTab(tab, width, height)`
+Changes the size of the viewport of a tab
+
+## Example
+```js
+import { openBrowser, openTab, resizeTab } from 'puppet-strings'
+
+async function run() {
+  const browser = await openBrowser('google-chrome')
+  const tab = await openTab(browser, 'http://example.com')
+  await resizeTab(tab, 1200, 800)
+}
+
+run()
+```
+
+## Parameters
+* `tab` ([Tab](../../interface#tab-object))
+* `width` (number)
+* `height` (number)
+
+## Returns
+* `promise` (Promise<void>)
+
+## Details
+The size of the viewport is changed, meaning `window.innerWidth` and
+`window.innerHeight`. The actual Chrome window will be slightly larger.
+
+Only the given tab will be affected; other tabs will keep their current size.
diff --git a/actions/resize-tab/index.js b/actions/resize-tab/index.js
@@ -0,0 +1,10 @@
+/* @flow */
+import type { Tab } from 'puppet-strings'
+
+export default async function(
+  { puppeteer: { page } }: Tab,
+  width: number,
+  height: number
+): Promise<void> {
+  await page.setViewport({ width, height })
+}
diff --git a/actions/resize-tab/index.test.js b/actions/resize-tab/index.test.js
@@ -0,0 +1,39 @@
+/* @flow */
+import ava from 'ava'
+import {
+  withChrome,
+  withDirectory,
+  writeFile
+} from 'puppet-strings/test/helpers'
+import { openTab, resizeTab, evalInTab } from 'puppet-strings'
+
+withChrome()
+const test = withDirectory(ava)
+
+test('resizing the viewport of a tab', async t => {
+  const { browser } = global
+  const { directory } = t.context
+
+  const filePath = await writeFile(
+    directory,
+    'index.html',
+    `
+    <!doctype html>
+    <meta charset="utf-8">
+    `
+  )
+
+  const tab = await openTab(browser, `file://${filePath}`)
+
+  await resizeTab(tab, 700, 800)
+  t.deepEqual(
+    await evalInTab(tab, [], 'return [window.innerWidth, window.innerHeight]'),
+    [700, 800]
+  )
+
+  await resizeTab(tab, 900, 700)
+  t.deepEqual(
+    await evalInTab(tab, [], 'return [window.innerWidth, window.innerHeight]'),
+    [900, 700]
+  )
+})
diff --git a/index.js b/index.js
@@ -9,6 +9,7 @@ export { default as closeBrowser } from './actions/close-browser'
 export { default as getTabs } from './actions/get-tabs'
 export { default as openTab } from './actions/open-tab'
 export { default as closeTab } from './actions/close-tab'
+export { default as resizeTab } from './actions/resize-tab'
 export { default as navigate } from './actions/navigate'
 export { default as waitForNavigation } from './actions/wait-for-navigation'
 export { default as evalInTab } from './actions/eval-in-tab'