feat(testcafé) : Drive Sharing scenario

.eslintrc.json

@@ -2,5 +2,8 @@
   "extends": ["cozy-app/react"],
   "rules": {
     "no-console": 1
+  },
+  "globals": {
+    "fixture": false
   }
 }

.travis.yml

@@ -36,7 +36,11 @@ jobs:
       env:
         - COZY_APP_SLUG=drive
       addons:
-        firefox: latest
+        apt:
+          sources:
+            - google-chrome
+          packages:
+            - google-chrome-stable fluxbox
       before_install:
         - scripts/transifex.sh
         - scripts/decrypt.sh

package.json

@@ -71,6 +71,7 @@
   "devDependencies": {
     "@sentry/cli": "1.35.4",
     "babel-core": "7.0.0-bridge.0",
+    "chrome-remote-interface": "^0.27.1",
     "cordova": "7.1.0",
     "cordova-android": "7.1.4",
     "enzyme": "2.9.1",

src/components/Menu/index.jsx

@@ -73,6 +73,7 @@ export default class Menu extends Component {
           />
         )}
         <div
+          data-test-id="coz-menu-inner"
           className={classNames(styles['coz-menu-inner'], innerClassName, {
             [styles['coz-menu-inner--opened']]: opened
           })}

src/drive/web/modules/drive/Toolbar.jsx

@@ -90,7 +90,11 @@ class Toolbar extends Component {
     )
 
     return (
-      <div className={styles['fil-toolbar-files']} role="toolbar">
+      <div
+        data-test-id="fil-toolbar-files"
+        className={styles['fil-toolbar-files']}
+        role="toolbar"
+      >
         {!isShared &&
           canUpload &&
           hasWriteAccess && <UploadItem disabled={isDisabled} />}

src/drive/web/modules/drive/Toolbar/components/AddFolderItem.jsx

@@ -6,7 +6,11 @@ import { showNewFolderInput } from 'drive/web/modules/filelist/duck'
 
 const AddFolderItem = translate()(({ t, addFolder }) => {
   return (
-    <a className={styles['fil-action-newfolder']} onClick={addFolder}>
+    <a
+      data-test-id="add-folder-link"
+      className={styles['fil-action-newfolder']}
+      onClick={addFolder}
+    >
       {t('toolbar.menu_new_folder')}
     </a>
   )

src/drive/web/modules/drive/Toolbar/delete/DeleteItem.jsx

@@ -7,6 +7,7 @@ const DeleteItem = translate()(
   ({ t, isSharedWithMe, displayedFolder, trashFolder, onLeave }) =>
     isSharedWithMe ? (
       <a
+        data-test-id="fil-action-delete"
         className={classNames(styles['fil-action-delete'])}
         onClick={() =>
           onLeave(displayedFolder).then(() => trashFolder(displayedFolder))
@@ -16,6 +17,7 @@ const DeleteItem = translate()(
       </a>
     ) : (
       <a
+        data-test-id="fil-action-delete"
         className={classNames(styles['fil-action-delete'])}
         onClick={() => trashFolder(displayedFolder)}
       >

src/drive/web/modules/filelist/File.jsx

@@ -157,7 +157,10 @@ const FileName = ({
         <div className={styles['fil-file']}>
           <div className={styles['fil-file-filename']}>
             <div className={styles['fil-file-filename-wrapper']}>
-              <div className={styles['fil-file-filename-and-ext']}>
+              <div
+                data-test-id="fil-file-filename-and-ext"
+                className={styles['fil-file-filename-and-ext']}
+              >
                 {filename}
                 {extension && (
                   <span className={styles['fil-content-ext']}>{extension}</span>

src/drive/web/modules/filelist/FilenameInput.jsx

@@ -68,7 +68,7 @@ export default class FilenameInput extends Component {
 
   render(props, { value, working, error }) {
     return (
-      <div className={styles['fil-file-name-input']}>
+      <div data-test-id="name-input" className={styles['fil-file-name-input']}>
         <input
           type="text"
           value={value}

src/drive/web/modules/public/PublicToolbar.jsx

@@ -121,7 +121,11 @@ const CozybarToolbar = ({ onDownload, discoveryLink, isFile }, { t }) => (
 CozybarToolbar.propTypes = toolbarProptypes
 
 const DesktopToolbar = ({ onDownload, discoveryLink, isFile }, { t }) => (
-  <div className={toolbarstyles['fil-toolbar-files']} role="toolbar">
+  <div
+    data-test-id="fil-toolbar-files-public"
+    className={toolbarstyles['fil-toolbar-files']}
+    role="toolbar"
+  >
     {discoveryLink ? (
       <OpenInCozyButton href={discoveryLink} t={t} />
     ) : (

src/drive/web/modules/upload/UploadButton.jsx

@@ -28,6 +28,7 @@ const UploadButton = ({ label, disabled, onUpload, className }) => (
       <Icon icon="upload" />
       <span>{label}</span>
       <input
+        data-test-id="upload-btn"
         type="file"
         multiple
         style={styles.input}

src/drive/web/modules/upload/UploadQueue.jsx

@@ -83,6 +83,7 @@ class UploadQueue extends Component {
     const { collapsed } = this.state
     return (
       <div
+        data-test-id="upload-queue"
         className={classNames(styles['upload-queue'], {
           [styles['upload-queue--visible']]: queue.length !== 0,
           [styles['upload-queue--collapsed']]: collapsed
@@ -106,7 +107,10 @@ class UploadQueue extends Component {
             </div>
           )}
           {doneCount >= queue.length && (
-            <div className={styles['upload-queue-header-inner']}>
+            <div
+              data-test-id="upload-queue-success"
+              className={styles['upload-queue-header-inner']}
+            >
               <span>
                 {t('UploadQueue.header_done', {
                   done: successCount,

src/photos/ducks/upload/UploadQueue.jsx

@@ -71,7 +71,7 @@ const InProgressHeader = translate()(({ t, total, done }) => (
 
 const FinishedHeader = translate()(({ t, total, successful, onClose }) => (
   <div
-    data-test-id="uploadQueue-success"
+    data-test-id="upload-queue-success"
     className={styles['upload-queue-header-inner']}
   >
     <span>{t('UploadQueue.header_done', { done: successful, total })}</span>
@@ -95,7 +95,7 @@ class UploadQueue extends Component {
     const { collapsed } = this.state
     return (
       <div
-        data-test-id="uploadQueue"
+        data-test-id="upload-queue"
         className={classNames(styles['upload-queue'], {
           [styles['upload-queue--visible']]: queue.length !== 0,
           [styles['upload-queue--collapsed']]: collapsed

src/sharing/components/ShareButton.jsx

@@ -6,6 +6,7 @@ import styles from './button.styl'
 
 export const ShareButton = ({ label, onClick, className, ...props }) => (
   <Button
+    data-test-id="share-button"
     theme="secondary"
     className={className}
     onClick={() => onClick()}
@@ -17,6 +18,7 @@ export const ShareButton = ({ label, onClick, className, ...props }) => (
 
 export const SharedByMeButton = ({ label, onClick, className, ...props }) => (
   <Button
+    data-test-id="share-by-me-button"
     className={classNames(styles['coz-btn-shared'], className)}
     onClick={() => onClick()}
     icon="share"

src/sharing/components/ShareByLink.jsx

@@ -55,7 +55,10 @@ class ShareByLink extends React.Component {
     const { checked, documentType } = this.props
     return (
       <div>
-        <div className={cx(styles['share-bylink-header'], 'u-mt-1', 'u-mb-1')}>
+        <div
+          data-test-id="share-by-link"
+          className={cx(styles['share-bylink-header'], 'u-mt-1', 'u-mb-1')}
+        >
           <SubTitle>{t(`${documentType}.share.shareByLink.subtitle`)}</SubTitle>
           {loading && <Spinner />}
           {loading && (
@@ -66,6 +69,7 @@ class ShareByLink extends React.Component {
           {checked && <span className={styles['share-bylink-header-dot']} />}
           {checked && (
             <button
+              data-test-url={this.props.link}
               className={styles['share-bylink-header-copybtn']}
               onClick={this.copyLinkToClipboard}
             >

testcafe/runner-drive.js

@@ -4,8 +4,8 @@ async function runRunner() {
   const tc = await createTestCafe()
   const runner = await tc.createRunner()
   const response = await runner
-    .src(['testcafe/tests/drive_nav.js'])
-    .browsers(['firefox:headless'])
+    .src(['testcafe/tests/drive_nav.js', 'testcafe/tests/drive_sharing.js'])
+    .browsers(['chrome:headless:emulation:cdpPort=9222 --start-maximized']) //emulation:cdpPort=9222 is used to set the download folder in headless mode
 
     .screenshots(
       'reports/screenshots/',

testcafe/tests/drive_nav.js

@@ -1,4 +1,3 @@
-import { Selector, Role } from 'testcafe'
 import { driveUser } from './helpers/roles'
 import { TESTCAFE_DRIVE_URL, isExistingAndVisibile } from './helpers/utils'
 
@@ -10,9 +9,9 @@ fixture`DRIVE - NAV`.page`${TESTCAFE_DRIVE_URL}/`.beforeEach(async t => {
   await t.useRole(driveUser)
 })
 
-test('Drive Navigation Desktop Resolution: Drive, Recent, Sharing, Trash', async t => {
+test('Drive Navigation Desktop Resolution: Drive, Recent, Sharing, Trash', async () => {
   //Check Menu and links. Go to page. Check main menu on each page
-  isExistingAndVisibile(page.sidebar, 'Sidebar')
+  await isExistingAndVisibile(page.sidebar, 'Sidebar')
 
   //!FIXME change params to use key/keyword
   await page.isSidebarButton(page.btnNavToRecent, '#/recent', 'Recent')

testcafe/tests/drive_sharing.js

@@ -0,0 +1,134 @@
+import { Role } from 'testcafe'
+import { driveUser } from './helpers/roles'
+import {
+  deleteLocalFile,
+  checkLocalFile,
+  setDownloadPath
+} from './helpers/utils'
+import { TESTCAFE_DRIVE_URL, FOLDER_DATE_TIME } from './helpers/utils'
+const homedir = require('os').homedir
+
+import Data from './helpers/data'
+const data = new Data()
+
+import DrivePage from './pages/drive-model'
+const drivePage = new DrivePage()
+
+import PublicDrivePage from './pages/drive-model-public'
+const publicDrivePage = new PublicDrivePage()
+
+const file = '[cozy]QA_table_ APPS.pdf'
+
+//************************
+//Tests when authentified
+//************************
+fixture`Folder link Sharing Scenario`.page`${TESTCAFE_DRIVE_URL}/`.beforeEach(
+  async t => {
+    await t.useRole(driveUser)
+    await drivePage.waitForLoading()
+  }
+)
+
+test('Drive : Create a $test_date_time folder in Drive', async () => {
+  await drivePage.addNewFolder(FOLDER_DATE_TIME)
+  //We need to pass FOLDER_DATE_TIME through multiple fixture, so we cannot use ctx here.
+})
+
+test('Drive : from Drive, go in a folder, upload a file, and share it', async t => {
+  await drivePage.goToFolder(FOLDER_DATE_TIME)
+  await drivePage.openActionMenu()
+  await t.pressKey('esc') //close action Menu
+
+  await drivePage.uploadFiles([`../data/${file}`])
+  await drivePage.shareFolderPublicLink()
+
+  const link = await drivePage.copyBtnShareByLink.getAttribute('data-test-url')
+  if (link) {
+    data.sharingLink = link
+    console.log(`SHARING_LINK : ` + data.sharingLink)
+  }
+})
+
+//************************
+// Public (no authentification)
+//************************
+fixture`Drive : Access a folder public link`.page`${TESTCAFE_DRIVE_URL}/`
+  .beforeEach(async t => {
+    await t.useRole(Role.anonymous())
+    await setDownloadPath(`${homedir()}/Downloads`)
+  })
+  .afterEach(async () => {
+    const filepath = `${homedir()}/Downloads/files.zip`
+    await checkLocalFile(filepath)
+    await deleteLocalFile(filepath)
+  })
+test('Drive : Access a folder public link (desktop)', async t => {
+  await t.navigateTo(data.sharingLink)
+  await publicDrivePage.waitForLoading()
+
+  await publicDrivePage.checkActionMenuPublicDesktop()
+  await t
+    .setNativeDialogHandler(() => true)
+    .click(publicDrivePage.btnPublicDownload)
+    .click(publicDrivePage.btnPublicCreateCozy)
+  await publicDrivePage.checkCreateCozy()
+})
+
+test('Drive : Access a folder public link (mobile)', async t => {
+  await t.resizeWindowToFitDevice('iPhone 6', {
+    portraitOrientation: true
+  })
+  await t.navigateTo(data.sharingLink)
+  await publicDrivePage.waitForLoading()
+  await publicDrivePage.checkActionMenuPublicMobile()
+  await t
+    .setNativeDialogHandler(() => true)
+    .click(publicDrivePage.btnPublicMobileDownload)
+    .click(publicDrivePage.btnPublicMoreMenu) //need to re-open the more menu
+    .click(publicDrivePage.btnPublicMobileCreateCozy)
+  await publicDrivePage.checkCreateCozy()
+
+  await t.maximizeWindow() //Back to desktop
+})
+
+//************************
+//Tests when authentified
+//************************
+fixture`Drive : Unshare public link`.page`${TESTCAFE_DRIVE_URL}/`.beforeEach(
+  async t => {
+    await t.useRole(driveUser)
+    await drivePage.waitForLoading()
+  }
+)
+test('Unshare foler', async () => {
+  await drivePage.goToFolder(FOLDER_DATE_TIME)
+  await drivePage.unshareFolderPublicLink()
+})
+
+//************************
+// Public (no authentification)
+//************************
+fixture`Drive : No Access to an old folder public link`
+  .page`${TESTCAFE_DRIVE_URL}/`.beforeEach(async t => {
+  await t.useRole(Role.anonymous())
+})
+test('`Drive : No Access to an old folder public link', async t => {
+  await t.navigateTo(data.sharingLink)
+
+  await publicDrivePage.waitForLoading()
+  await publicDrivePage.checkNotAvailable()
+})
+
+//************************
+//Tests when authentified
+//************************
+fixture`Test clean up : remove files and folders`
+  .page`${TESTCAFE_DRIVE_URL}/`.beforeEach(async t => {
+  await t.useRole(driveUser)
+  await drivePage.waitForLoading()
+})
+test('Delete File, and foler', async () => {
+  await drivePage.goToFolder(FOLDER_DATE_TIME)
+  await drivePage.deleteElementByName(file)
+  await drivePage.deleteCurrentFolder()
+})

testcafe/tests/helpers/data.js

@@ -0,0 +1,5 @@
+export default class Data {
+  constructor() {
+    this.sharingLink = ''
+  }
+}