Merge pull request #108 from systemseed/testcafe

Clean up TestCafe setup

.circleci/config.yml

@@ -15,7 +15,7 @@ jobs:
           command: make pull
 
       - run:
-          name: Fix CircleCI files permissons
+          name: Fix CircleCI files permissions
           command: |
             sudo chown ubuntu:ubuntu -R *
             sudo chown ubuntu:ubuntu -R .[!.]*
@@ -66,6 +66,9 @@ jobs:
       - store_artifacts:
           path: tests/_output/
 
+      - store_artifacts:
+          path: tests/end-to-end/results
+
       - store_test_results:
           path: tests/end-to-end/results
 

.docker/docker-compose.yml

@@ -111,8 +111,6 @@ services:
       - "1337:1337"
       - "1338:1338"
     environment:
-      # Remove screen height workaround when https://github.com/DevExpress/testcafe/issues/3461 is resolved.
-      SCREEN_HEIGHT: 6000
       BACKEND_URL: ${BACKEND_URL}
       FRONTEND_URL: ${FRONTEND_URL}
       HTTP_AUTH_USER: ${HTTP_AUTH_USER}

falconjs/templates/default/components/Header/DesktopNavigation.js

@@ -24,7 +24,7 @@ const DesktopNavigation = ({ menu, logo, siteName, homeNextLink, router }) => (
         </Link>
       )}
     </Menu.Item>
-    <Container>
+    <Container className="top-navigation">
       {menu.map(link => (
         <Link {...link.nextLink} key={link.nextLink.url}>
           <Menu.Item active={link.nextLink.as === router.asPath} href={link.nextLink.url}>

tests/end-to-end/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended"
+  ],
+  "globals": {
+    "fixture": false,
+    "test": false,
+    "process": false,
+    "window": false,
+    "console": false
+  }
+}

tests/end-to-end/package.json

@@ -1,12 +1,14 @@
 {
-  "name": "systemseed.com-testcafe",
+  "name": "falcon-testcafe",
   "version": "1.0.0",
-  "description": "End-to-End tests for systemseed.com",
+  "description": "End-to-End tests for Falcon",
   "main": "index.js",
   "license": "MIT",
-  "devDependencies": {},
+  "devDependencies": {
+    "babel-eslint": "^10.0.2",
+    "eslint": "^6.2.0"
+  },
   "dependencies": {
-    "faker": "^4.1.0",
-    "testcafe": "^1.0.1"
+    "testcafe": "^1.4.1"
   }
-}
+}

tests/end-to-end/tests/backend/homepage.js

@@ -4,8 +4,7 @@ import * as config from '../utils/config';
 fixture('Backend home page is working')
   .page(config.backendURL).httpAuth(config.httpAuth).beforeEach(config.beforeEach);
 
-test
-  ('Visit homepage', async t => {
-    const button = Selector('input.button[value="Log in"]');
-    await t.expect(button.exists).ok();
-  });
+test('Visit homepage', async t => {
+  const button = Selector('input.button[value="Log in"]');
+  await t.expect(button.exists).ok();
+});

tests/end-to-end/tests/frontend/bodyBlocks/heading.js

@@ -4,9 +4,8 @@ import * as config from '../../utils/config';
 fixture('Body blocks')
   .page(config.frontendURL).httpAuth(config.httpAuth).beforeEach(config.beforeEach);
 
-test
-  ('Heading BB on home page is visible', async t => {
-    const headingBB = Selector('.bb.bb-heading h3').withText('The world’s best Charity CMS.');
-    await t.expect(headingBB.exists).ok('Heading BB is visible.');
-  });
+test('Heading BB on home page is visible', async t => {
+  const headingBB = Selector('.bb.bb-heading h3').withText('The world’s best Charity CMS.');
+  await t.expect(headingBB.exists).ok('Heading BB is visible.');
+});
 

tests/end-to-end/tests/frontend/logo.js

@@ -1,16 +1,23 @@
-import { Selector } from 'testcafe';
+import { Selector, RequestLogger } from 'testcafe';
 import * as config from '../utils/config';
-import { getRequestResult } from '../utils/helpers';
+
+// Enable logging of all get requests during while running this fixture.
+const logger = RequestLogger({ method: 'get' });
 
 fixture('Logo')
-  .page(config.frontendURL).httpAuth(config.httpAuth).beforeEach(config.beforeEach);
+  .page(config.frontendURL)
+  .httpAuth(config.httpAuth)
+  .beforeEach(config.beforeEach)
+  .requestHooks(logger);
 
-test
-  ('Logo is visible', async t => {
-    const logo = Selector('a.falcon-logo > img');
-    await t.expect(logo.exists).ok('Get in Touch! Logo is visible.');
-    const logoUrl = await logo.getAttribute('src');
+test('Logo is visible', async t => {
+  const logo = Selector('a.falcon-logo > img');
+  await t.expect(logo.exists).ok('The site logo is visible.');
+  const logoUrl = await logo.getAttribute('src');
 
-    await t.expect(getRequestResult(logoUrl)).eql(200, 'Logo is loaded.');
-  });
+  // Check that actual image file was successfully loaded during page rendering.
+  await t.expect(logger.contains(
+    record => record.request.url === logoUrl && record.response.statusCode === 200)
+  ).ok();
+});
 

tests/end-to-end/tests/frontend/navigation.js

@@ -7,30 +7,31 @@ fixture('Navigation')
 
 const page = new Page();
 
-test
-  ('Top menu links work without errors', async t => {
-    const menu = Selector('header div.ui.fixed.menu div.ui.container');
-    await t.expect(menu.exists).ok('Get in Touch! Navigation menu visible.');
-
-    const menuItems = Selector('header div.ui.fixed.menu div.ui.container a.item');
-    const count = await menuItems.count;
-
-    await t
-      .expect(count)
-      .eql(3, 'Get in Touch! Navigation menu contains 3 links.');
-
-    const menuUrls = [
-      '/',
-      '/about',
-      '/frontend-only'
-    ];
-
-    for (let i = 0; i < count; i++) {
-      await t.click(menuItems.nth(i));
-      await page.pageLoaded();
-      const getPathname = ClientFunction(() => window.location.pathname);
-      await t.expect(await getPathname()).eql(menuUrls[i], `Current pathname = ${menuUrls[i]}`, { timeout: 5000 });
-      await t.expect(Selector('.page-content .error-page').exists).notOk('No 40x/50x error on the page.');
-    }
-  });
+test('Top menu links work without errors', async t => {
+  const menu = Selector('.top-navigation');
+  await t.expect(menu.exists).ok('Top navigation menu is visible.');
+
+  const menuItems = Selector('.top-navigation a.item');
+  const count = await menuItems.count;
+
+  const expectedMenuUrls = [
+    '/',
+    '/about',
+    '/frontend-only'
+  ];
+
+  await t
+    .expect(count)
+    .eql(expectedMenuUrls.length, 'Top menu contains correct number of links.');
+
+  // Visit every link from the header and ensure it has correct URL and
+  // does not return an error page.
+  for (let i = 0; i < count; i++) {
+    await t.click(menuItems.nth(i));
+    await page.pageLoaded();
+    const getPathname = ClientFunction(() => window.location.pathname); // eslint-disable-line no-undef
+    await t.expect(await getPathname()).eql(expectedMenuUrls[i], `Current pathname = ${expectedMenuUrls[i]}`);
+    await t.expect(Selector('.error-page').exists).notOk('No 40x/50x error on the page.');
+  }
+});