languages-learner · kvestus · Feb 22, 2024 · Feb 22, 2024
diff --git a/cypress/e2e/dictionary.cy.ts b/cypress/e2e/dictionary.cy.ts
@@ -8,6 +8,7 @@ import {
 import { EWordStatus } from '@/services/dbstore/dto/Words'
 import { EDataTest, EDataTestClass } from '@/enums/EDataTest'
 import { EPageName } from '@/enums/EPageName'
+import { WordStatusTranslationKey } from '@/modules/workspace/modules/words/composables/useWordStatuses'
 
 describe('workspace dictionary', () => {
     beforeEach(() => {
@@ -139,107 +140,109 @@ describe('workspace dictionary', () => {
                 .el(EDataTest.words_list_item_edit_translations).should('not.exist')
 
                 .log('check if word deleted')
-                .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_source_word)}`).first().should('not.have.text', wordSourceEdited)
+                .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_source_word)}[data-test-value="${wordSourceEdited}"]`)
+                .should('not.exist')
 
             cy
                 .log('delete word using delete button')
                 .el(EDataTest.words_list_item_delete_button).eq(0).click()
 
                 .log('check if word deleted')
-                .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_source_word)}`).first().should('not.contain.text', wordSource)
+                .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_source_word)}[data-test-value="${wordSource}"]`)
+                .should('not.exist')
         })
 
-        // Note: test account has words
         it('select words', () => {
-            cy
-                .log('select all words using header checkbox')
-                .el(EDataTest.words_container_header_checkbox).should('not.have.class', 'n-checkbox--checked')
-                .click().should('have.class', 'n-checkbox--checked')
+            cy.get(`${elSelector(EDataTest.words_list_item)}`).should(() => expect(true).eq(true)).then(($words) => {
+                const wordSource = `word-${new Date().valueOf()}`
+                for (let i = $words.length; i < 2; i++) {
+                    cy.dictionaryAddWordWithTranslations(wordSource + `_${i}`, ['translation1'])
+                }
+            }).then(() => {
+                cy
+                    .log('select all words using header checkbox')
+                    .el(EDataTest.words_container_header_checkbox).should('not.have.class', 'n-checkbox--checked')
+                    .click().should('have.class', 'n-checkbox--checked')
 
-                .log('check if all words selected')
-                .el(EDataTest.words_list_item_checkbox).should('have.class', 'n-checkbox--checked')
+                    .log('check if all words selected')
+                    .el(EDataTest.words_list_item_checkbox).should('have.class', 'n-checkbox--checked')
 
-                .log('unselect first word')
-                .el(EDataTest.words_list_item_checkbox).eq(0).click()
+                    .log('unselect first word')
+                    .el(EDataTest.words_list_item_checkbox).eq(0).click()
 
-                .log('check if not all items selected')
-                .el(EDataTest.words_container_header_checkbox).should('not.have.class', 'n-checkbox--checked')
+                    .log('check if not all items selected')
+                    .el(EDataTest.words_container_header_checkbox).should('not.have.class', 'n-checkbox--checked')
 
-                .log('select all words using header checkbox')
-                .el(EDataTest.words_container_header_checkbox).click()
+                    .log('select all words using header checkbox')
+                    .el(EDataTest.words_container_header_checkbox).click()
 
-                .log('check if all words selected')
-                .el(EDataTest.words_list_item_checkbox).should('have.class', 'n-checkbox--checked')
+                    .log('check if all words selected')
+                    .el(EDataTest.words_list_item_checkbox).should('have.class', 'n-checkbox--checked')
 
-                .log('unselect all words using header checkbox')
-                .el(EDataTest.words_container_header_checkbox).click()
+                    .log('unselect all words using header checkbox')
+                    .el(EDataTest.words_container_header_checkbox).click()
 
-                .log('check if all words unselected')
-                .el(EDataTest.words_list_item_checkbox).should('not.have.class', 'n-checkbox--checked')
+                    .log('check if all words unselected')
+                    .el(EDataTest.words_list_item_checkbox).should('not.have.class', 'n-checkbox--checked')
+            })
         })
 
-        // Note: test account has words with the necessary source words and statuses
-        it('filter by text and status', () => {
-            const searchText = 'test1'
-            cy
-                .log('enter search text with all words selected')
-                .el(EDataTest.words_container_header_checkbox).click()
-                .get(`${elSelector(EDataTest.words_container_header_search)} input`).type(searchText).should('have.value', searchText)
-
-                .log('check if all words unselected')
-                .el(EDataTest.words_list_item_checkbox).should('not.have.class', 'n-checkbox--checked')
+        it('filter words by text and status', () => {
+            let wordSource: string = ''
+            cy.dictionaryGetWordsByStatus(EWordStatus.NEW_WORD).should(() => expect(true).eq(true)).then($words => {
+                if (!$words.length) {
+                    wordSource = `word-${new Date().valueOf()}`
+                    cy.dictionaryAddWordWithTranslations(wordSource, ['translation1'])
+                }
 
-                .log('check if all source words contain search word')
-                .el(EDataTest.words_list_item_source_word).should('contain', searchText)
-
-            cy
-                .log('change filtered status to "Learned"')
-            if (isMobile())
                 cy
-                    .el(EDataTest.words_container_header_status).click()
-                    .elByClass(EDataTestClass.words_container_header_status).contains('learned').click()
-            else
-                cy.el(EDataTest.words_container_header_status).eq(EWordStatus.LEARNED + 1).click()
+                    .dictionaryGetWordsByStatus(EWordStatus.NEW_WORD).eq(0)
+                    .find(`${elSelector(EDataTest.words_list_item_source_word)}`)
+                    .then($word => {
+                        wordSource = $word.text()
+                    })
+            }).then(() => {
+                cy
+                    .log('enter search text with all words selected')
+                    .el(EDataTest.words_container_header_checkbox).click()
+                    .get(`${elSelector(EDataTest.words_container_header_search)} input`).type(wordSource).should('have.value', wordSource)
 
-            cy
-                .log('check if words not found')
-                .el(EDataTest.words_list_item).should('not.exist')
+                    .log('check if all words unselected')
+                    .el(EDataTest.words_list_item_checkbox).should('not.have.class', 'n-checkbox--checked')
 
-            cy.log('change filtered status to "New work"')
-            if (isMobile())
-                cy
-                    .el(EDataTest.words_container_header_status).click()
-                    .elByClass(EDataTestClass.words_container_header_status).contains('new_word').click()
-            else
-                cy.el(EDataTest.words_container_header_status).eq(EWordStatus.NEW_WORD + 1).click()
+                    .log('check if all source words contain search word')
+                    .el(EDataTest.words_list_item_source_word).should('contain', wordSource)
 
-            cy
-                .log('check if words found')
-                .el(EDataTest.words_list_item).should('exist')
+                    .log('change filtered status to "New work"')
+                    .dictionaryFilterByWordStatus(EWordStatus.NEW_WORD)
 
-                .log('check if each founded word has filtered status')
-                .el(EDataTest.words_list_item_status).should('have.attr', 'data-test-value', EWordStatus.NEW_WORD)
+                    .log('check if words found')
+                    .el(EDataTest.words_list_item).should('exist')
 
-                .log('change status of first word to "Learn"')
-                .el(EDataTest.words_list_item_status).eq(0).trigger('mouseenter')
-                .elByClass(EDataTestClass.word_status).contains('learn').should('be.visible').click()
+                    .log('check if each founded word has filtered status')
+                    .el(EDataTest.words_list_item_status).should('have.attr', 'data-test-value', EWordStatus.NEW_WORD)
 
-                .log('check if word with another status still in list')
-                .el(EDataTest.words_list_item_status).eq(0).should('have.attr', 'data-test-value', EWordStatus.LEARN)
+                    .log('change status of first word to "Learn"')
+                    .el(EDataTest.words_list_item_status).eq(0).trigger('mouseenter')
+                    .elByClass(EDataTestClass.word_status).contains(WordStatusTranslationKey[EWordStatus.LEARN]).should('be.visible').click()
 
-                .log('change status of first word to "New word"')
-                .el(EDataTest.words_list_item_status).eq(0).trigger('mouseenter')
-                .elByClass(EDataTestClass.word_status).contains('new_word').should('be.visible').click()
+                    .log('check if word with another status still in list')
+                    .el(EDataTest.words_list_item_status).eq(0).should('have.attr', 'data-test-value', EWordStatus.LEARN)
 
-                .log('change filtered text')
-                .get(`${elSelector(EDataTest.words_container_header_search)} input`).clear().should('have.value', '')
+                    .log('change status of first word to "New word"')
+                    .el(EDataTest.words_list_item_status).eq(0).trigger('mouseenter')
+                    .elByClass(EDataTestClass.word_status).contains('new_word').should('be.visible').click()
 
-            cy
-                .log('check if filtered status changed to "All"')
-            if (isMobile())
-                cy.el(EDataTest.words_container_header_status).contains('all')
-            else
-                cy.elByClass(EDataTestClass.words_container_header_status_active).contains('all')
+                    .log('change filtered text')
+                    .get(`${elSelector(EDataTest.words_container_header_search)} input`).clear().should('have.value', '')
+
+                cy
+                    .log('check if filtered status changed to "All"')
+                if (isMobile())
+                    cy.el(EDataTest.words_container_header_status).contains('all')
+                else
+                    cy.elByClass(EDataTestClass.words_container_header_status_active).contains('all')
+            })
         })
     })
 })
diff --git a/cypress/global.d.ts b/cypress/global.d.ts
@@ -1,12 +1,22 @@
 /// <reference types="cypress" />
 
+
 declare namespace Cypress {
     import type { EDataTest, EDataTestClass } from '@/enums/EDataTest'
     import { type EPageName } from '@/enums/EPageName'
+    import { type EWordStatus } from '@/services/dbstore/dto/Words'
     interface Chainable {
         el(dataTest: EDataTest, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLBodyElement>>
         elByClass(dataTestClass: EDataTestClass, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLBodyElement>>
         clickOutside(): Chainable<JQuery<HTMLBodyElement>>
+
+        // WorkspaceBottomMenu
         getWorkspaceBottomMenuItem(page: EPageName): Chainable<JQuery<HTMLBodyElement>>
+
+        // Dictionary
+        dictionaryAddWordWithTranslations(word: string, translations: string[], options: {clearInput?: boolean} = {}): Chainable<JQuery<HTMLBodyElement>>
+        dictionaryFilterByWordStatus(status: EWordStatus): Chainable<JQuery<HTMLBodyElement>>
+        dictionaryDeleteFirstWord(): Chainable<JQuery<HTMLBodyElement>>
+        dictionaryGetWordsByStatus(status: EWordStatus): Chainable<JQuery<HTMLBodyElement>>
     }
 }
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -1,8 +1,10 @@
 /// <reference types="cypress" />
 
-import { elSelector } from '@@/cypress/utils'
-import { EDataTest, type EDataTestClass } from '@/enums/EDataTest'
+import { elSelector, isMobile } from '@@/cypress/utils'
+import { EDataTest, EDataTestClass } from '@/enums/EDataTest'
 import { EPageName } from '@/enums/EPageName'
+import { type EWordStatus } from '@/services/dbstore/dto/Words'
+import { WordStatusTranslationKey } from '@/modules/workspace/modules/words/composables/useWordStatuses'
 
 Cypress.Commands.add('el', (dataTest: EDataTest, options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>) =>
     cy.get(elSelector(dataTest), options))
@@ -31,3 +33,52 @@ Cypress.Commands.add('getWorkspaceBottomMenuItem', (page: EPageName) => {
             .parent()
     }
 })
+
+Cypress.Commands.add('dictionaryAddWordWithTranslations', (word, translations, options = {
+    clearInput: true,
+}) => {
+    cy
+        .get(`${elSelector(EDataTest.words_container_header_search)} input`).type(word)
+        .el(EDataTest.words_list_loader).should('not.exist')
+        .el(EDataTest.words_list_item).should('not.exist')
+        .el(EDataTest.words_container_header_add_word_button).click()
+        .el(EDataTest.words_creator).should('contain.text', 'add_new_word')
+
+    translations.forEach((translation, index) => {
+        cy.get(`${elSelector(EDataTest.words_creator_translations)} button`).eq(index).type(translation).clickOutside()
+    })
+
+    cy
+        .el(EDataTest.words_creator_add_button).click()
+        .el(EDataTest.words_creator).should('not.exist')
+        .el(EDataTest.words_container_header_add_word_button).should('not.exist')
+        .el(EDataTest.words_list_loader).should('not.exist')
+        .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_source_word)}`).first().should('contain.text', word)
+        .get(`${elSelector(EDataTest.words_list_item)} ${elSelector(EDataTest.words_list_item_translations)}`).first().then($translations => {
+            translations.forEach((translation) => {
+                cy.wrap($translations).should('contain.text', translation)
+            })
+        })
+
+    if (options.clearInput)
+        cy
+            .get(`${elSelector(EDataTest.words_container_header_search)} input`).clear().should('have.value', '')
+            .el(EDataTest.words_list_loader).should('not.exist')
+})
+
+Cypress.Commands.add('dictionaryFilterByWordStatus', (status: EWordStatus) => {
+    if (isMobile())
+        cy
+            .el(EDataTest.words_container_header_status).click()
+            .elByClass(EDataTestClass.words_container_header_status).contains(WordStatusTranslationKey[status]).click()
+    else
+        cy.el(EDataTest.words_container_header_status).eq(status + 1).click()
+})
+
+Cypress.Commands.add('dictionaryDeleteFirstWord', () => {
+    cy.el(EDataTest.words_list_item_delete_button).eq(0).click()
+})
+
+Cypress.Commands.add('dictionaryGetWordsByStatus', (status: EWordStatus) => {
+    return cy.get(`${elSelector(EDataTest.words_list_item)}:has(${elSelector(EDataTest.words_list_item_status)}[data-test-value="${status}"])`)
+})
diff --git a/...s/workspace/modules/words/components/WordsList/components/WordsListItem/WordsListItem.vue b/...s/workspace/modules/words/components/WordsList/components/WordsListItem/WordsListItem.vue
@@ -64,7 +64,9 @@ const toggleChangeableView = () => isChangeableView.value = !isChangeableView.va
                     class="words-list-item__property--translations">
                     <n-text
                         type="success"
-                        :data-test="EDataTest.words_list_item_source_word">
+                        :data-test="EDataTest.words_list_item_source_word"
+                        :data-test-value="source.word"
+                    >
                         {{ source.word }}
                     </n-text>
                     <n-dynamic-tags

diff --git a/src/modules/workspace/modules/words/composables/useWordStatuses.ts b/src/modules/workspace/modules/words/composables/useWordStatuses.ts
@@ -1,6 +1,12 @@
 import type { WordsFilters } from '@/modules/workspace/modules/words/types/WordsFilters'
 import { EWordStatus, getWordStatusesValues } from '@/services/dbstore/dto/Words'
 
+export const WordStatusTranslationKey: Record<EWordStatus, string> = {
+    [EWordStatus.NEW_WORD]: 'new_word',
+    [EWordStatus.LEARN]: 'learn',
+    [EWordStatus.LEARNED]: 'learned',
+}
+
 export const useWordStatuses = () => {
     const { t } = useI18n()
 
@@ -9,15 +15,15 @@ export const useWordStatuses = () => {
         value: WordsFilters['status']
     }> = [
         {
-            label: t('new_word'),
+            label: t(WordStatusTranslationKey[EWordStatus.NEW_WORD]),
             value: EWordStatus.NEW_WORD,
         },
         {
-            label: t('learn'),
+            label: t(WordStatusTranslationKey[EWordStatus.LEARN]),
             value: EWordStatus.LEARN,
         },
         {
-            label: t('learned'),
+            label: t(WordStatusTranslationKey[EWordStatus.LEARNED]),
             value: EWordStatus.LEARNED,
         },
     ]