import {formatISO, format} from 'date-fns' import {TaskFactory} from '../../factories/task' import {ListFactory} from '../../factories/list' import {UserListFactory} from '../../factories/users_list' import {UserFactory} from '../../factories/user' import {NamespaceFactory} from '../../factories/namespace' import {BucketFactory} from '../../factories/bucket' import '../../support/authenticateUser' describe('Lists', () => { beforeEach(() => { UserFactory.create(1) NamespaceFactory.create(1) const lists = ListFactory.create(1, { title: 'First List' }) TaskFactory.truncate() }) it('Should create a new list', () => { cy.visit('/') cy.get('.namespace-title .dropdown-trigger') .click() cy.get('.namespace-title .dropdown .dropdown-item') .contains('New list') .click() cy.url() .should('contain', '/namespaces/1/list') cy.get('.card-header-title') .contains('Create a new list') cy.get('input.input') .type('New List') cy.get('.button') .contains('Create') .click() cy.wait(1000) // Waiting until the request to create the new list is done cy.get('.global-notification') .should('contain', 'Success') cy.url() .should('contain', '/lists/') cy.get('.list-title h1') .should('contain', 'New List') }) it('Should redirect to a specific list view after visited', () => { cy.visit('/lists/1/kanban') cy.url() .should('contain', '/lists/1/kanban') cy.visit('/lists/1') cy.url() .should('contain', '/lists/1/kanban') }) describe('List View', () => { it('Should be an empty list', () => { cy.visit('/lists/1') cy.url() .should('contain', '/lists/1/list') cy.get('.list-title h1') .should('contain', 'First List') cy.get('.list-title .dropdown') .should('exist') cy.get('p') .contains('This list is currently empty.') .should('exist') }) it('Should navigate to the task when the title is clicked', () => { const tasks = TaskFactory.create(5, { id: '{increment}', list_id: 1, }) cy.visit('/lists/1/list') cy.get('.tasks .task .tasktext') .contains(tasks[0].title) .first() .click() cy.url() .should('contain', `/tasks/${tasks[0].id}`) }) it('Should not see any elements for a list which is shared read only', () => { UserFactory.create(2) UserListFactory.create(1, { list_id: 2, user_id: 1, right: 0, }) const lists = ListFactory.create(2, { owner_id: '{increment}', namespace_id: '{increment}', }) cy.visit(`/lists/${lists[1].id}/`) cy.get('.list-title a.icon') .should('not.exist') cy.get('input.input[placeholder="Add a new task..."') .should('not.exist') }) it('Should only show the color of a list in the navigation and not in the list view', () => { const lists = ListFactory.create(1, { hex_color: '00db60', }) TaskFactory.create(10, { list_id: lists[0].id, }) cy.visit(`/lists/${lists[0].id}/`) cy.get('.menu-list li .list-menu-link .color-bubble') .should('have.css', 'background-color', 'rgb(0, 219, 96)') cy.get('.tasks-container .tasks .color-bubble') .should('not.exist') }) it('Should paginate for > 50 tasks', () => { const tasks = TaskFactory.create(100, { id: '{increment}', title: i => `task${i}`, list_id: 1, }) cy.visit('/lists/1/list') cy.get('.tasks-container .tasks') .should('contain', tasks[99].title) cy.get('.card-content .pagination .pagination-link') .contains('2') .click() cy.url() .should('contain', '?page=2') cy.get('.tasks-container .tasks') .should('contain', tasks[1].title) cy.get('.tasks-container .tasks') .should('not.contain', tasks[99].title) }) }) describe('Table View', () => { it('Should show a table with tasks', () => { const tasks = TaskFactory.create(1) cy.visit('/lists/1/table') cy.get('.table-view table.table') .should('exist') cy.get('.table-view table.table') .should('contain', tasks[0].title) }) it('Should have working column switches', () => { TaskFactory.create(1) cy.visit('/lists/1/table') cy.get('.table-view .filter-container .items .button') .contains('Columns') .click() cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check') .contains('Priority') .click() cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check') .contains('Done') .click() cy.get('.table-view table.table th') .contains('Priority') .should('exist') cy.get('.table-view table.table th') .contains('Done') .should('not.exist') }) it('Should navigate to the task when the title is clicked', () => { const tasks = TaskFactory.create(5, { id: '{increment}', list_id: 1, }) cy.visit('/lists/1/table') cy.get('.table-view table.table') .contains(tasks[0].title) .click() cy.url() .should('contain', `/tasks/${tasks[0].id}`) }) }) describe('Gantt View', () => { it('Hides tasks with no dates', () => { TaskFactory.create(1) cy.visit('/lists/1/gantt') cy.get('.gantt-chart-container .gantt-chart .tasks') .should('be.empty') }) it('Shows tasks from the current and next month', () => { const now = new Date() cy.visit('/lists/1/gantt') cy.get('.gantt-chart-container .gantt-chart .months') .should('contain', format(now, 'MMMM')) .should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM')) }) it('Shows tasks with dates', () => { const now = new Date() const tasks = TaskFactory.create(1, { start_date: formatISO(now), end_date: formatISO(now.setDate(now.getDate() + 4)) }) cy.visit('/lists/1/gantt') cy.get('.gantt-chart-container .gantt-chart .tasks') .should('not.be.empty') cy.get('.gantt-chart-container .gantt-chart .tasks') .should('contain', tasks[0].title) }) it('Shows tasks with no dates after enabling them', () => { TaskFactory.create(1, { start_date: null, end_date: null, }) cy.visit('/lists/1/gantt') cy.get('.gantt-chart-container .gantt-options .fancycheckbox') .contains('Show tasks which don\'t have dates set') .click() cy.get('.gantt-chart-container .gantt-chart .tasks') .should('not.be.empty') cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate') .should('exist') }) it('Drags a task around', () => { const now = new Date() TaskFactory.create(1, { start_date: formatISO(now), end_date: formatISO(now.setDate(now.getDate() + 4)) }) cy.visit('/lists/1/gantt') cy.get('.gantt-chart-container .gantt-chart .tasks .task') .first() .trigger('mousedown', {which: 1}) .trigger('mousemove', {clientX: 500, clientY: 0}) .trigger('mouseup', {force: true}) }) }) describe('Kanban', () => { let buckets beforeEach(() => { buckets = BucketFactory.create(2) }) it('Shows all buckets with their tasks', () => { const data = TaskFactory.create(10, { list_id: 1, bucket_id: 1, }) cy.visit('/lists/1/kanban') cy.get('.kanban .bucket .title') .contains(buckets[0].title) .should('exist') cy.get('.kanban .bucket .title') .contains(buckets[1].title) .should('exist') cy.get('.kanban .bucket') .first() .should('contain', data[0].title) }) it('Can add a new task to a bucket', () => { const data = TaskFactory.create(2, { list_id: 1, bucket_id: 1, }) cy.visit('/lists/1/kanban') cy.get('.kanban .bucket') .contains(buckets[0].title) .get('.bucket-footer .button') .contains('Add another task') .click() cy.get('.kanban .bucket') .contains(buckets[0].title) .get('.bucket-footer .field .control input.input') .type('New Task{enter}') cy.get('.kanban .bucket') .first() .should('contain', 'New Task') }) it('Can create a new bucket', () => { cy.visit('/lists/1/kanban') cy.get('.kanban .bucket.new-bucket .button') .click() cy.get('.kanban .bucket.new-bucket input.input') .type('New Bucket{enter}') cy.wait(1000) // Wait for the request to finish cy.get('.kanban .bucket .title') .contains('New Bucket') .should('exist') }) it('Can set a bucket limit', () => { cy.visit('/lists/1/kanban') cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger') .first() .click() cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item') .contains('Limit: Not set') .click() cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input') .first() .type(3) cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field a.button.is-primary') .first() .click() cy.get('.kanban .bucket .bucket-header span.limit') .contains('0/3') .should('exist') }) it('Can rename a bucket', () => { cy.visit('/lists/1/kanban') cy.get('.kanban .bucket .bucket-header .title') .first() .type('{selectall}New Bucket Title{enter}') cy.get('.kanban .bucket .bucket-header .title') .first() .should('contain', 'New Bucket Title') }) it('Can delete a bucket', () => { cy.visit('/lists/1/kanban') cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger') .first() .click() cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item') .contains('Delete') .click() cy.get('.modal-mask .modal-container .modal-content .header') .should('contain', 'Delete the bucket') cy.get('.modal-mask .modal-container .modal-content .actions .button') .contains('Do it!') .click() cy.get('.kanban .bucket .title') .contains(buckets[0].title) .should('not.exist') cy.get('.kanban .bucket .title') .contains(buckets[1].title) .should('exist') }) // The following test does not work. It seems like vue-smooth-dnd does not use either mousemove or dragstart // (not sure why this actually works at all?) and as I'm planning to swap that out for vuedraggable/sortable.js // anyway, I figured it wouldn't be worth the hassle right now. // it('Can drag tasks around', () => { // const tasks = TaskFactory.create(2, { // list_id: 1, // bucket_id: 1, // }) // cy.visit('/lists/1/kanban') // // cy.get('.kanban .bucket .tasks .task') // .contains(tasks[0].title) // .first() // .drag('.kanban .bucket:nth-child(2) .tasks .smooth-dnd-container.vertical') // .trigger('mousedown', {which: 1}) // .trigger('mousemove', {clientX: 500, clientY: 0}) // .trigger('mouseup', {force: true}) // }) it('Should navigate to the task when the task card is clicked', () => { const tasks = TaskFactory.create(5, { id: '{increment}', list_id: 1, bucket_id: 1, }) cy.visit('/lists/1/kanban') cy.getAttached('.kanban .bucket .tasks .task') .contains(tasks[0].title) .should('be.visible') .click() cy.url() .should('contain', `/tasks/${tasks[0].id}`) }) it('Should remove a task from the kanban board when moving it to another list', () => { const lists = ListFactory.create(2) BucketFactory.create(2, { list_id: '{increment}', }) const tasks = TaskFactory.create(5, { id: '{increment}', list_id: 1, bucket_id: 1, }) const task = tasks[0] cy.visit('/lists/1/kanban') cy.getAttached('.kanban .bucket .tasks .task') .contains(task.title) .should('be.visible') .click() cy.get('.task-view .action-buttons .button') .contains('Move task') .click() cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input') .type(`${lists[1].title}{enter}`) // The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress // presses enter and we can't simulate pressing on enter to select the item. cy.get('.task-view .content.details .field .multiselect.control .search-results') .children() .first() .click() cy.get('.global-notification') .should('contain', 'Success') cy.go('back') cy.get('.kanban .bucket') .should('not.contain', task.title) }) }) })