test(xod-client-browser): add test suit for copy/save log

packages/xod-client-browser/test-func/copy-save.spec.js

@@ -0,0 +1,84 @@
+/* global browser:false, assert:false, navigator:false */
+import { tmpdir } from 'os';
+import { promises as fs } from 'fs';
+import { resolve } from 'path';
+
+import { SERVER_URL } from '../tools/staticServer';
+import getPage from './utils/getPage';
+
+import Debugger from './pageObjects/Debugger';
+
+describe('copy & save log', () => {
+  const openIdeAndDeploymentPane = async browser => {
+    const page = await getPage(browser);
+    const debugPanel = await Debugger.findOnPage(page);
+
+    // Open debugger
+    assert.isTrue(
+      await debugPanel.isCollapsed(),
+      'debugger panel is collapsed by default'
+    );
+    await debugPanel.click();
+    assert.isTrue(
+      await debugPanel.isOpened(),
+      'debugger panel is opened by click'
+    );
+
+    return {
+      page,
+      debugPanel,
+    };
+  };
+
+  it('copy to clipboard works', async () => {
+    // Create BrowserContext with the permission to read the clipboard
+    const context = browser.defaultBrowserContext();
+    context.clearPermissionOverrides();
+    context.overridePermissions(SERVER_URL, [
+      'clipboard-write',
+      'clipboard-read',
+    ]);
+
+    const { page, debugPanel } = await openIdeAndDeploymentPane(context);
+
+    // Click copy button
+    const copyBtn = await debugPanel.findCopyLogButton();
+    await copyBtn.click();
+
+    const clipboardContent = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+
+    assert.equal(
+      clipboardContent,
+      'Here you will see output from the compiler, uploader, debugger, and other tools.'
+    );
+  });
+  it('save to file works', async () => {
+    const { page, debugPanel } = await openIdeAndDeploymentPane(browser);
+
+    // Allow the Chromium to download the file
+    const downloadPath = tmpdir();
+    // eslint-disable-next-line no-underscore-dangle
+    await page._client.send('Page.setDownloadBehavior', {
+      behavior: 'allow',
+      downloadPath,
+    });
+
+    // Click save button
+    const saveBtn = await debugPanel.findSaveLogButton();
+    await saveBtn.click();
+    // Wait a little to ensure that the file downloaded
+    await page.waitFor(500);
+
+    // Check the file contents and its existence
+    const fileName = 'compiler-log.txt'; // We're saving the log of `compiler` tab
+    const filePath = resolve(downloadPath, fileName);
+    const fileContent = await fs.readFile(filePath, { encoding: 'utf8' });
+
+    assert.equal(
+      fileContent,
+      'Here you will see output from the compiler, uploader, debugger, and other tools.'
+    );
+  });
+});

packages/xod-client-browser/test-func/pageObjects/Debugger.js

@@ -0,0 +1,33 @@
+import BasePageObject from './BasePageObject';
+import hasClass from '../utils/hasClass';
+import getBoundingClientRect from '../utils/getBoundingClientRect';
+import getCenterPositon from '../utils/getCenterPositon';
+
+class Debugger extends BasePageObject {
+  async isCollapsed() {
+    return await hasClass(this.page, this.elementHandle, 'isCollapsed');
+  }
+  async isOpened() {
+    return !await this.isCollapsed();
+  }
+  async click() {
+    // see https://github.com/GoogleChrome/puppeteer/issues/1247
+    const rect = await getBoundingClientRect(this.page, this.elementHandle);
+    const { x, y } = getCenterPositon(rect);
+    await this.page.mouse.click(x, y);
+  }
+
+  async findCopyLogButton() {
+    return await this.elementHandle.$('.copy-log');
+  }
+  async findSaveLogButton() {
+    return await this.elementHandle.$('.save-log');
+  }
+}
+
+Debugger.findOnPage = async page => {
+  const elementHandle = await page.$('.Debugger');
+  return new Debugger(page, elementHandle);
+};
+
+export default Debugger;

packages/xod-client-browser/test-func/pageObjects/Input.js

@@ -0,0 +1,29 @@
+import BasePageObject from './BasePageObject';
+
+class Input extends BasePageObject {
+  async evaluate(fn) {
+    await this.page.evaluate(fn, this.elementHandle);
+  }
+
+  async focus() {
+    await this.evaluate(input => {
+      // eslint-disable-next-line no-param-reassign
+      input.focus();
+    });
+  }
+  async type(value) {
+    await this.page.evaluate(input => {
+      // eslint-disable-next-line no-param-reassign
+      input.value = '';
+    }, this.elementHandle);
+    return await this.elementHandle.type(value);
+  }
+  async pressEnter() {
+    return await this.elementHandle.press('Enter');
+  }
+  async getValue() {
+    return await this.page.evaluate(input => input.value, this.elementHandle);
+  }
+}
+
+export default Input;

packages/xod-client-browser/test-func/pageObjects/Inspector.js

@@ -1,16 +1,27 @@
 import BasePageObject from './BasePageObject';
+import Input from './Input';
 
 class Inspector extends BasePageObject {
   async setPinValue(pinName, value) {
-    const inputElementHandle = await this.elementHandle.$(
-      `.PinWidget[data-pinlabel="${pinName}"] input`
+    const pinInput = new Input(
+      this.page,
+      await this.elementHandle.$(`.PinWidget[data-pinlabel="${pinName}"] input`)
     );
-    await this.page.evaluate(input => {
-      // eslint-disable-next-line no-param-reassign
-      input.value = '';
-    }, inputElementHandle);
-    await inputElementHandle.type(value);
-    await inputElementHandle.press('Enter');
+    await pinInput.type(value);
+    await pinInput.pressEnter();
+  }
+
+  async getDescriptionElement() {
+    return new Input(
+      this.page,
+      await this.elementHandle.$('.DescriptionWidget textarea')
+    );
+  }
+
+  async setDescription(value) {
+    const input = this.getDescriptionElement();
+    await input.type(value);
+    await input.pressEnter();
   }
 }
 

packages/xod-client/src/debugger/containers/Debugger.jsx

@@ -145,6 +145,7 @@ class Debugger extends React.Component {
             onClick={this.onSaveLogClicked}
             title="Download Log"
             disabled={isDisabled}
+            className="save-log"
           />
         </li>
         <li role="menuitem" key="copy" className="tab-action">
@@ -155,6 +156,7 @@ class Debugger extends React.Component {
             onClick={this.onCopyLogClicked}
             title="Copy Log"
             disabled={isDisabled}
+            className="copy-log"
           />
         </li>
       </React.Fragment>