diff --git a/cypress/e2e/dictionary.cy.ts b/cypress/e2e/dictionary.cy.ts index ebf70ad..e91e86b 100644 --- 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 index 256e71d..36ce97f 100644 --- a/cypress/global.d.ts +++ b/cypress/global.d.ts @@ -1,12 +1,22 @@ /// + 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): Chainable> elByClass(dataTestClass: EDataTestClass, options?: Partial): Chainable> clickOutside(): Chainable> + + // WorkspaceBottomMenu getWorkspaceBottomMenuItem(page: EPageName): Chainable> + + // Dictionary + dictionaryAddWordWithTranslations(word: string, translations: string[], options: {clearInput?: boolean} = {}): Chainable> + dictionaryFilterByWordStatus(status: EWordStatus): Chainable> + dictionaryDeleteFirstWord(): Chainable> + dictionaryGetWordsByStatus(status: EWordStatus): Chainable> } } diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index dc57d46..935a205 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,8 +1,10 @@ /// -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) => 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/src/modules/workspace/modules/words/components/WordsList/components/WordsListItem/WordsListItem.vue b/src/modules/workspace/modules/words/components/WordsList/components/WordsListItem/WordsListItem.vue index 42523f3..d42db52 100644 --- a/src/modules/workspace/modules/words/components/WordsList/components/WordsListItem/WordsListItem.vue +++ b/src/modules/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"> + :data-test="EDataTest.words_list_item_source_word" + :data-test-value="source.word" + > {{ source.word }} = { + [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, }, ]