Renames p-navigation-open to p-navigation-show, adds first testcafe tests and configuration, Moves unit tests into unit folder, Adds make test-acceptance command

.dockerignore

@@ -15,3 +15,4 @@ docker-compose*
 .dockerignore
 .idea
 .DS_Store
+/frontend/tests/acceptance/screenshots

.gitignore

@@ -44,3 +44,6 @@ Thumbs.db
 .settings
 .swp
 .tmp
+
+# Acceptance Test Screenshots
+/frontend/tests/acceptance/screenshots

Makefile

@@ -54,6 +54,8 @@ test-codecov:
 test-coverage:
 	go test -tags=slow -timeout 30m -coverprofile=coverage.txt -covermode=atomic -v ./internal/...
 	go tool cover -html=coverage.txt -o coverage.html
+test-acceptance:
+	testcafe chromium:headless -S -s frontend/tests/screenshots frontend/tests/acceptance/
 clean:
 	rm -f $(BINARY_NAME)
 	rm -f *.log

frontend/karma.conf.js

@@ -17,18 +17,18 @@ module.exports = (config) => {
         },
 
         files: [
-            {pattern: "tests/**/*_test.js", watched: false},
+            {pattern: "tests/unit/**/*_test.js", watched: false},
         ],
 
         // Preprocess through webpack
         preprocessors: {
-            "tests/**/*_test.js": ["webpack"],
+            "tests/unit/**/*_test.js": ["webpack"],
         },
 
         reporters: ["progress", "html"],
 
         htmlReporter: {
-            outputFile: "tests/result.html",
+            outputFile: "tests/unit/result.html",
         },
 
         webpack: {
@@ -38,7 +38,7 @@ module.exports = (config) => {
                 modules: [
                     path.join(__dirname, "src"),
                     path.join(__dirname, "node_modules"),
-                    path.join(__dirname, "tests"),
+                    path.join(__dirname, "tests/unit"),
                 ],
                 alias: {
                     vue: "vue/dist/vue.js",

frontend/src/component/p-navigation.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="p-navigation">
         <v-toolbar dark color="grey darken-3" class="hidden-lg-and-up p-navigation-small" @click.stop="showNavigation()">
-            <v-toolbar-side-icon class="p-navigation-open"></v-toolbar-side-icon>
+            <v-toolbar-side-icon class="p-navigation-show"></v-toolbar-side-icon>
 
             <v-toolbar-title class="p-navigation-title">{{ $router.currentRoute.name }}</v-toolbar-title>
 

frontend/tests/acceptance/filter.js

@@ -0,0 +1,37 @@
+import { Selector } from 'testcafe';
+import testcafeconfig from './testcafeconfig';
+import Page from './page-model';
+
+fixture`Filter`.page`${testcafeconfig.url}`;
+const page = new Page();
+
+test('Test camera filter', async t => {
+    await t
+        .click('#advancedMenu');
+        await page.setFilter('camera', 'iPhone 6');
+        await page.setFilter('view', 'Details');
+    await t
+        .expect(Selector('div.v-image__image').visible).ok()
+        .expect(Selector('div.caption').visible).ok()
+        //.expect(Selector('h3').nth(0).innerText).contains('Egyptian Cat');
+}),
+test('Test time filter', async t => {
+    await t
+        .click('#advancedMenu');
+    await page.setFilter('time', 'Oldest');
+    await page.setFilter('view', 'Details');
+    await t
+        .expect(Selector('div.v-image__image').visible).ok()
+        .expect(Selector('div.caption').visible).ok()
+        //.expect(Selector('h3').nth(1).innerText).contains('Daisy');
+}),
+    test('Test countries filter', async t => {
+        await t
+            .click('#advancedMenu');
+        await page.setFilter('countries', 'Cuba');
+        await page.setFilter('view', 'Details');
+        await t
+            .expect(Selector('div.v-image__image').visible).ok()
+            .expect(Selector('div.caption').visible).ok()
+            //.expect(Selector('h3').nth(0).innerText).contains('Carballo');
+    },);

frontend/tests/acceptance/navigate.js

@@ -0,0 +1,32 @@
+import { Selector } from 'testcafe';
+import testcafeconfig from './testcafeconfig';
+import Page from "./page-model";
+
+fixture`Use navigation`.page`${testcafeconfig.url}`;
+const page = new Page();
+
+test('Navigate', async t => {
+
+    await page.openNav();
+
+    await t
+        .click('a[href="/places"]')
+        .expect(Selector('div.leaflet-map-pane').exists).ok();
+
+    await page.openNav();
+
+    await t
+        .click('a[href="/tags"]')
+        .expect(Selector('h1').innerText, {timeout: 5000}).contains('Tags');
+
+    await page.openNav();
+
+    await t
+        .click('a[href="/albums"]')
+        .expect(Selector('h1').innerText).contains('Albums');
+    await page.openNav();
+
+    await t
+        .click('a[href="/import"]')
+        .expect(Selector('h1').innerText).contains('Import');
+});

frontend/tests/acceptance/page-model.js

@@ -0,0 +1,51 @@
+import { Selector, t } from 'testcafe';
+
+export default class Page {
+    constructor() {
+        //photos page
+        this.view = Selector('#viewFlex', {timeout: 15000});
+        this.camera = Selector('#cameraFlex', {timeout: 15000});
+        this.countries = Selector('#countriesFlex', {timeout: 15000});
+        this.time = Selector('#timeFlex', {timeout: 15000});
+        this.search1 = Selector('#search', {timeout: 15000});
+    }
+
+    async setFilter(filter, option) {
+        await t
+        switch (filter) {
+            case 'view':
+                await t
+                    .click(this.view);
+                break;
+            case 'camera':
+                await t
+                    .click(this.camera);
+                break;
+            case 'time':
+                await t
+                    .click(this.time);
+                break;
+            case 'countries':
+                await t
+                    .click(this.countries);
+                break;
+            default:
+        }
+        await t
+            .click(Selector('a').withText(option))
+    }
+
+    async search(term) {
+        await t
+            .typeText(this.search1, term)
+            .pressKey('enter')
+    }
+
+    async openNav() {
+        if (await Selector('button.p-navigation-show').visible) {
+            await t.click(Selector('button.p-navigation-show'));
+        } else if (await Selector('div.p-navigation-expand').exists) {
+            await t.click(Selector('div.p-navigation-expand i'));
+        }
+    }
+}

frontend/tests/acceptance/search.js

@@ -0,0 +1,32 @@
+import { Selector } from 'testcafe';
+import testcafeconfig from './testcafeconfig';
+import Page from "./page-model";
+
+fixture`Photos search`.page`${testcafeconfig.url}`;
+const page = new Page();
+
+test('Test search object', async t => {
+    await page.search('cat');
+
+	await t
+        .click('#advancedMenu');
+
+    await page.setFilter('view', 'Details');
+    await t
+        .expect(Selector('div.v-image__image').visible).ok()
+        .expect(Selector('div.caption').visible).ok()
+        //.expect(Selector('h3').nth(2).innerText).contains('Egyptian Cat')
+        //.expect(Selector('h3').nth(3).innerText).contains('Tabby Cat')
+        //.expect(Selector('h3').nth(4).innerText).contains('Tabby Cat');
+})/*,
+test('Test search color', async t => {
+    await page.search('color:pink');
+
+    await t
+        .click('#advancedMenu');
+
+    await page.setFilter('view', 'Details');
+    await t
+        .expect(Selector('h3').nth(0).innerText).contains('Pineapple')
+        .expect(Selector('h3').nth(1).innerText).contains('Flamingo');
+})*/;

frontend/tests/acceptance/testcafeconfig.json

@@ -0,0 +1,4 @@
+{
+	
+	"url": "localhost:2342/photos"
+}

frontend/tests/unit/common/api_test.js

@@ -1,6 +1,6 @@
 import assert from 'assert';
 import Api from 'common/api';
-import MockAdapter from 'axios-mock-adapter';
+import MockAdapter from 'axios-mock-adapter/types';
 
 const mock = new MockAdapter(Api);