Tests improved

front/client/components/AddCategoryDialog.vue

@@ -37,7 +37,7 @@
         <v-btn
           flat
           color="primary"
-          class="add-cat-submit"
+          class="add-category-submit-btn"
           :disabled="!isValid"
           @click.native="submit"
         >
@@ -72,16 +72,16 @@ export default class AddCategoryDialog extends Vue {
   isValid: boolean = false
 
   @Watch('value')
-  onOpen(newVal: boolean) {
+  onOpen (newVal: boolean) {
     this.categoryName = ''
     this.groupNameInternal = this.groupName
   }
 
-  close() {
+  close () {
     this.$emit('input', false)
   }
 
-  async submit() {
+  async submit () {
     if (!this.$refs.form.validate()) {
       return
     }

front/client/components/Categories.vue

@@ -22,7 +22,7 @@
         :key="index"
       > 
         <div class="category-group">
-          <h4 class="mb-2 display-1 font-weight-black">
+          <h4 class="mb-2 display-1 font-weight-black category-group-name">
             {{ groupName }}
           </h4>
           <!-- TODO remove duplicates of same a-links -->
@@ -81,7 +81,7 @@
           </a-link>
 
           <v-btn
-            class="ml-2 pl-0"
+            class="ml-2 pl-0 add-category-btn"
             color="grey"
             flat
             @click="openAddCategoryDialog(groupName)"

front/client/page/Index.test.js

@@ -1,58 +1,53 @@
-import { Selector } from 'testcafe';
-import VueSelector from 'testcafe-vue-selectors';
+import { Selector, ClientFunction } from 'testcafe'
+import VueSelector from 'testcafe-vue-selectors'
 
-fixture `Index`
-  .page `http://localhost:5000`;
+const getLocation = ClientFunction(() => document.location.href)
 
-test('Navigate to category page', async navigateCategory => {
-  await navigateCategory
+// !!! Testcafe-vue-selectors currently dont support vue cumponents loaded by vue-loader
+
+fixture`Index`
+  .page`http://localhost:5000`
+
+test('Navigate to category page', async t => {
+  await t
     .click('.test-btn')
-    .navigateTo('http://localhost:5000/haskell')
-});
+    .expect(getLocation()).contains('http://localhost:5000/haskell')
+})
 
 test('Test search input', async inputSearch => {
-  // !!! Testcafe-vue-selectors currently dont support vue cumponents loaded by vue-loader
-  // const searchInput = VueSelector('v-text-field');
-  // await inputSearch
-  //   .typeText(searchInput, 'Haskell')
-  // .pressKey('enter')
-  //   .expect(searchInput.value).eql('Haskell')
 
-  const searchInput = Selector('input[aria-label="Search"]');
+  const searchInput = Selector('input[aria-label="Search"]')
 
   await inputSearch
     .typeText(searchInput, 'Haskell')
     .expect(searchInput.value).eql('Haskell')
     .pressKey('enter')
-    .navigateTo('http://aelve.com:4801/haskell/?q=Haskell')
+    .expect(getLocation()).contains('http://localhost:5000/haskell/search/results?query=Haskell')
 })
 
-// test('Open add category popup', async t => {
-//   const addCategoryBtn = VueSelector('add-category-dialog v-btn');
-//   const addCategoryDialog = VueSelector('add-category-dialog');
-//   const addCatDialogVue = addCategoryDialog.getVue();
+test('Add category', async t => {
+  const categoryGroups = Selector('.category-group')
+  const groupsCount = await categoryGroups.count
 
-//   await t.click(addCategoryBtn).expect(addCatDialogVue.state.isDialogOpen).eql(true);
-// });
+  if (!categoryGroups || !groupsCount) {
+    return
+  }
 
-test('Add category', async addCategory => {
-  // const catBtn = VueSelector('b');
-  // const rootVue = VueSelector();
-  // console.log(catBtn);
-  // const catInput = Selector('input[aria-label="Category name"]');
-  let num = Math.floor(Math.random() * 10000);
-  let catName = 'mytest-' + num;
-  
-  await addCategory
-    // .click(catBtn)
-    // button[*data-v-4e53f99f]
-    .click('.category-group button')
-    .typeText('input[aria-label="Category name"]', 'mytest-' + catName)
-    // .click('.add-cat-submit')
-    // .expect(Selector('.category group > a > .body-1').innerText).contains(catName)
-    // 'h6[data-v-4e53f99f]'
-  await addCategory
-    .click('.add-cat-submit')
-    .expect(Selector('.group').innerText).contains('Basics');
-  //   .expect(Selector('.category group > a > .body-1').innerText).contains(catName);
+  for (let i = 0; i < groupsCount; i++) {
+    const currentGroup = categoryGroups.nth(i)
+    const categoryGroupName = currentGroup.child('.category-group-name').innerText
+
+    const addButton = currentGroup.child('.add-category-btn')
+
+    const newCategoryName = 'mytest-' + new Date().toISOString()
+    await t.click(addButton)
+    await t.expect(Selector('.aria-label="Group"').innerText === categoryGroupName)
+    await t
+      .typeText('input[aria-label="Category name"]', newCategoryName)
+      .click('.add-category-submit-btn')
+    // Cause after adding category it opens in new tab we need to navigate back, because TestCafe doest support opening new tabs
+    // https://github.com/DevExpress/testcafe/issues/2293
+    await t.navigateTo('http://localhost:5000')
+    await t.expect(currentGroup.find(node => node.innerText === newCategoryName).exists)
+  }
 })