Added e2e test scripts as per #87

package.json

@@ -19,7 +19,8 @@
     "babel-compile-standalone": "babel src/public/js -d build --config-file ./src/public/babel.config.js --copy-files",
     "webpack-compile-local": "cd src/public && webpack --config webpack.local.js --progress",
     "build": "yarn clean && yarn babel-compile-standalone && yarn webpack-compile-local",
-    "pretty": "prettier  --write \"./src/public/js/**/*.js\""
+    "pretty": "prettier  --write \"./src/public/js/**/*.js\"",
+    "test:e2e" : "export PLAYGROUND_URL=localhost:2018 && testcafe chrome tests/e2e/*"
   },
   "bin": {
     "codecrumbs": "./cli/index.cli.js"
@@ -74,6 +75,7 @@
     "nodemon": "^1.18.7",
     "prettier": "^1.14.0",
     "style-loader": "^0.21.0",
+    "testcafe": "^1.4.0",
     "webpack": "^4.20.2",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.1.2",

src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js

@@ -89,6 +89,7 @@ class ViewSwitch extends React.PureComponent {
             <span className="viewSwitchName">{name}</span>
           )}
           <Switch
+            id={name.toLowerCase()}
             size="small"
             checked={checkedState[itemKey]}
             onChange={v => toggleSwitch(itemKey, v)}

src/public/webpack.dev.js

@@ -13,7 +13,7 @@ module.exports = merge(common, {
     }),
     new webpack.DefinePlugin({
       'process.env.LOCAL': JSON.stringify(true),
-      'process.env.DEV': JSON.stringify(true)
-    })
+      'process.env.DEV': JSON.stringify(true),
+    }),
   ]
 });

tests/e2e/mock_test.js

@@ -0,0 +1,154 @@
+import Page from './page-objects/page-model';
+import {
+  Selector
+} from 'testcafe';
+
+
+fixture `My fixture`
+  .page `http://${process.env.PLAYGROUND_URL}`;
+
+const page = new Page();
+
+// Mock Test
+test('Mock Test', async t => {
+  await t
+    .click(page.getSwitch('Source'))
+    .click(page.getSwitch('Dependencies'))
+    .click(page.getSwitch('CodeCrumbs'))
+    .click(page.getSwitch('SideBar'))
+});
+
+
+test('Clicking Source Toggle', async t => {
+  const Switch = await page.getSwitch('Source');
+
+  await t.click(Switch)
+  // Check if Switch is set to false
+  await page.isSwitchUnchecked(Switch)
+  // Check if dropdown is disabled
+  await page.isDropDownDisabled('Source')
+  // Check if the diagram is removed
+  await page.isTreeDiagramEmpty()
+
+  await t.click(Switch)
+  // Check if the Switch is set to true
+  await page.isSwitchChecked(Switch)
+  // Click the dropdown
+  await t.click(page.getParent(Switch))
+  // Check if the dropdown has appeared
+  await page.isDropDownEnabled('Source')
+  // Check if the diagram has appeared
+  await page.isTreeDiagramPopulated()
+});
+
+
+test('Clicking Close All Dropdown Option', async t => {
+  const closeAllOption = await page.getDropDownSelector('close all')
+  const Switch = await page.getSwitch('Source')
+  // Click the dropdown button to enable the dropdown options
+  await t.click(page.getParent(Switch))
+    // Click the close all option
+    .click(closeAllOption)
+  // Expect the count of folder nodes to be 1 and file nodes to be 0
+  await page.isClosedAll()
+});
+
+test('Clicking Open All Dropdown Option', async t => {
+  const openAllOption = await page.getDropDownSelector('open all')
+  const Switch = await page.getSwitch('Source')
+
+  // Click the dropdown button to enable the dropdown options
+  await t.click(page.getParent(Switch))
+    // Click the Open all option
+    .click(openAllOption)
+  // Expect the count of folder nodes to be 24 and file nodes to be 57
+  await page.isOpenedAll()
+});
+
+
+test('Checking Active Only Option ', async t => {
+  const activeOnlyOption = await page.getDropDownSelector('active only')
+  const openAllOption = await page.getDropDownSelector('open all')
+  const Switch = await page.getSwitch('Source')
+  const folders = ['src-client', 'views', 'components', 'require-auth-route']
+  const files = ['require-auth-route.js']
+
+  // Click the dropdown button to enable the dropdown options
+  await t.click(page.getParent(Switch))
+    // Click the Open all option
+    .click(openAllOption)
+  // Expect the count of folder nodes to be 24 and file nodes to be 57
+  await page.isOpenedAll()
+
+  /*
+    This part currently fails due to the DOM element not being found
+  */
+  // // Click the src-client
+  // await t.click(page.getFolderNode(folders[0]))
+  //   // Click views
+  //   .click(page.getFolderNode(folders[1]))
+  //   // Click components
+  //   .click(page.getFolderNode(folders[2]))
+  //   // Click require-auth-route
+  //   .click(page.getFolderNode(folders[3]))
+  //   // Click require-auth-route.js
+  //   .click(page.getFileNode(files[0]))
+  // // Click The dropdown
+  // await t.click(Switch.parent(0))
+  //   // Click active only
+  //   .click(activeOnlyOption)
+  // // expect only the folders in the path to require-auth-route.js to be open
+  // await page.areFoldersPresent(folders)
+  // await page.areFilesPresent(files)
+
+});
+
+
+test('Clicking Dependencies Toggle', async t => {
+  const Switch = await page.getSwitch('Dependencies');
+
+  await t.click(Switch)
+  // Check if Switch is set to true
+  await page.isSwitchChecked(Switch)
+  // Click the dropdown
+  await t.click(page.getParent(Switch))
+  // Check if Dropdown menu appeared
+  await page.isDropDownEnabled('Dependencies')
+
+  await t.click(Switch)
+  // Check if Switch is set to false
+  await page.isSwitchUnchecked(Switch)
+  // Check if Dropdown menu disappeared
+  await page.isDropDownDisabled('Dependencies')
+});
+
+test('Clicking CodeCrumbs Toggle', async t => {
+  const Switch = await page.getSwitch('CodeCrumbs');
+
+  await t.click(Switch)
+  // Check if Switch is set to true
+  await page.isSwitchChecked(Switch)
+  // Click the dropdown
+  await t.click(page.getParent(Switch))
+  // Check if Dropdown menu appeared
+  await page.isDropDownEnabled('CodeCrumbs')
+
+  await t.click(Switch)
+  // Check if Switch is set to false
+  await page.isSwitchUnchecked(Switch)
+  // Check if Dropdown menu disappeared
+  await page.isDropDownDisabled('CodeCrumbs')
+
+});
+
+test('Clicking SideBar Toggle', async t => {
+  const Switch = await page.getSwitch('SideBar');
+
+  await t.click(Switch)
+  // Check if Switch is set to true
+  await page.isSwitchChecked(Switch)
+
+  await t.click(Switch)
+  // Check if Switch is set to false
+  await page.isSwitchUnchecked(Switch)
+});

tests/e2e/page-objects/page-model.js

@@ -0,0 +1,185 @@
+import {
+  Selector,
+  t
+} from 'testcafe';
+
+
+class Header {
+  constructor(className) {
+    this.container = Selector(`.${className}`)
+
+    // Children of the header
+    this.ViewSwitchesContainer = new ViewSwitchesContainer(this.container, "ViewSwitchList")
+    this.TopBar = new TopBar()
+  }
+
+}
+
+class ViewSwitchesContainer {
+  constructor(parentContainer, className) {
+    this.container = parentContainer.find(`.${className}`)
+
+    // Children of View Switches Container
+    this.switches = {
+      'Source': this.container.find('div.big-item').withText('Source').find('button'),
+      'Dependencies': this.container.find('div.big-item').withText('Dependencies').find('button'),
+      'CodeCrumbs': this.container.find('div.big-item').withText('CodeCrumbs').find('button'),
+      'SideBar': this.container.find('div.big-item').withText('SideBar').find('button'),
+    }
+
+    this.dropDownOptions = {
+      'Source': ['close all', 'open all', 'active only', 'dim source', 'explorer'],
+      'Dependencies': ['direct only'],
+      'CodeCrumbs': ['minimize', 'details', 'code preview', 'line numbers'],
+      'setup': ['Download Store', 'Upload Store']
+    }
+  }
+}
+
+class TopBar {
+  constructor() {
+
+  }
+}
+
+class Body {
+  constructor(className) {
+    this.container = Selector(`.${className}`)
+    this.ExplorerBar = new ExplorerBar()
+    this.Spin = new Spin()
+    this.TreeDiagramsContainer = new TreeDiagramsContainer(this.container, "TreeDiagramsContainer")
+    this.Sidebar = new Sidebar()
+  }
+}
+
+class ExplorerBar {
+  constructor() {
+
+  }
+}
+
+class Spin {
+  constructor() {
+
+  }
+}
+
+
+
+class TreeDiagramsContainer {
+  constructor(parentContainer, className) {
+    this.container = parentContainer.find(`.${className}`)
+  }
+
+  getFolderNode(textContent) {
+    return this.container.find('.NodeText-folder-name').withText(textContent)
+  }
+
+  getFileNode(textContent) {
+    return this.container.find('g.FileNode > text').withText(textContent)
+  }
+
+  getSvgContainer() {
+    return this.container.find('svg').withAttribute(/^shape-rendering$/, /^optimizeSpeed$/)
+  }
+
+  getFolderNodeCount() {
+    return this.container.find('g.FolderNode').count
+  }
+
+  getFileNodeCount() {
+    return this.container.find('g.FileNode').count
+  }
+
+}
+
+class Sidebar {
+  constructor() {
+
+  }
+}
+
+export default class Page {
+
+  constructor() {
+    this.Header = new Header("header")
+    this.Body = new Body("body")
+  }
+
+  getSwitch(switchName) {
+    return this.Header.ViewSwitchesContainer.switches[switchName]
+  }
+
+  getParent(selector) {
+    return selector.parent(0)
+  }
+
+  async isSwitchChecked(Switch) {
+    await t.expect(Switch.withAttribute(/^aria-checked$/, /^true$/).exists).ok()
+  }
+
+  async isSwitchUnchecked(Switch) {
+    await t.expect(Switch.withAttribute(/^aria-checked$/, /^false$/).exists).ok();
+  }
+
+  async isDropDownDisabled(switchName) {
+    for (var element of this.Header.ViewSwitchesContainer.dropDownOptions[switchName])
+      await t.expect(Selector('li').withText(element).exists).notOk()
+  }
+
+  async isDropDownEnabled(switchName) {
+    for (var element of this.Header.ViewSwitchesContainer.dropDownOptions[switchName])
+      await t.expect(Selector('li').withText(element).exists).ok()
+  }
+
+  async isTreeDiagramEmpty() {
+    await t.expect(this.Body.TreeDiagramsContainer.getSvgContainer().child().count).eql(1)
+  }
+
+  async isTreeDiagramPopulated() {
+    await t.expect(this.Body.TreeDiagramsContainer.getSvgContainer().child().count).notEql(1)
+  }
+
+  async getDropDownSelector(text) {
+    return await Selector('li').withText(text)
+  }
+
+  // Function to check if all the Tree Diagram nodes have been closed
+  async isClosedAll() {
+    await t.expect(this.Body.TreeDiagramsContainer.getFolderNodeCount()).eql(1)
+      .expect(this.Body.TreeDiagramsContainer.getFileNodeCount()).eql(0)
+  }
+
+  // Function to check if all the tree Diagram nodes have been opened
+  async isOpenedAll() {
+    // expect 24 folders
+    await t.expect(this.Body.TreeDiagramsContainer.getFolderNodeCount()).eql(24)
+      // expect 57 files
+      .expect(this.Body.TreeDiagramsContainer.getFileNodeCount()).eql(57)
+  }
+
+  // Function to check if the folders in folderList are present in the TreeDiagram
+  async areFoldersPresent(folderList) {
+    await t.expect(this.Body.TreeDiagramsContainer.getFolderNodeCount()).eql(folderList.length)
+    for (var element of folderList) {
+      await t.expect(this.Body.TreeDiagramsContainer.getFolderNode(element).exists).ok()
+    }
+  }
+  // Function to check if the files in filesList are present in the TreeDiagram
+  async areFilesPresent(filesList) {
+    await t.expect(this.Body.TreeDiagramsContainer.getFileNodeCount()).eql(filesList.length)
+    for (var element of filesList) {
+      await t.expect(this.Body.TreeDiagramsContainer.getFileNode(element).exists).ok()
+    }
+  }
+
+  // Function to return the selector to the fileNode
+  getFileNode(name) {
+    return this.Body.TreeDiagramsContainer.getFileNode(name)
+  }
+
+  // Function to return the selector to the folderNode
+  getFolderNode(name) {
+    return this.Body.TreeDiagramsContainer.getFolderNode(name)
+  }
+}