Skip to content

Commit b6953ce

Browse files
AgustinAllamanoCostaAgustinAllamanoCosta
committed
feat: 🎸 add new scroll in list and when a item is created
1 parent 3078b22 commit b6953ce

File tree

10 files changed

+190
-68
lines changed

10 files changed

+190
-68
lines changed

‎cypress.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default defineConfig({
1616
specPattern: '**/*.cy.tsx',
1717
},
1818
env: {
19-
BASE_URL: 'http://localhost:8080/',
2019
isMobile: false,
2120
},
2221
e2e: {
22+
baseUrl: 'http://localhost:8080/',
2323
setupNodeEvents(on, config) {
2424
on('task', {
2525
async cleanDB() {

‎cypress/e2e/addTask.cy.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,18 @@ describe('Get The Things Done Task', () => {
1818

1919
it('Should add a new task', () => {
2020
const taskContent: string = 'some task to do';
21-
cy.visit(Cypress.env('BASE_URL'));
21+
cy.visit('/');
2222
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
2323
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
2424
cy.get('[data-cy="task-some task to do"]').should('have.text', taskContent);
2525
});
2626

2727
it('Should add a new task and active', () => {
2828
const taskContent: string = 'some task to do';
29-
cy.visit(Cypress.env('BASE_URL'));
29+
cy.visit('/');
3030
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
3131
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
32-
cy.get('[data-cy="task-some task to do"]').trigger('mouseover');
32+
cy.get('[data-cy="task-some task to do"]').click();
3333
cy.get('[data-cy="button-active"]').click();
3434

3535
cy.get('[data-cy="stick-note-button-0"]').should('be.visible');
@@ -41,10 +41,10 @@ describe('Get The Things Done Task', () => {
4141

4242
it('Should add a new task, active it and mark as complete', () => {
4343
const taskContent: string = 'some task to do';
44-
cy.visit(Cypress.env('BASE_URL'));
44+
cy.visit('/');
4545
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
4646
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
47-
cy.get('[data-cy="task-some task to do"]').trigger('mouseover');
47+
cy.get('[data-cy="task-some task to do"]').click();
4848
cy.get('[data-cy="button-active"]').click();
4949

5050
cy.get('[data-cy="stick-note-button-0"]').click();
@@ -53,7 +53,7 @@ describe('Get The Things Done Task', () => {
5353
});
5454

5555
it('Should load a task from local storage', () => {
56-
cy.visit(Cypress.env('BASE_URL'));
56+
cy.visit('/');
5757
const taskContent = 'some task to do 1';
5858
cy.get('[data-cy="task-add-button-input"]').type(taskContent, {
5959
delay: 40,
@@ -71,24 +71,24 @@ describe('Get The Things Done Task', () => {
7171
const taskContentTwo: string = 'some task to do 2';
7272
const taskContentThree: string = 'some task to do 3';
7373
const taskContentFour: string = 'some task to do 4';
74-
cy.visit(Cypress.env('BASE_URL'));
74+
cy.visit('/');
7575

7676
cy.get('[data-cy="task-add-button-input"]').type(taskContentOne);
7777
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
7878

79-
cy.get(`[data-cy="task-${taskContentOne}"]`).trigger('mouseover');
79+
cy.get(`[data-cy="task-${taskContentOne}"]`).click();
8080
cy.get(`[data-cy="button-active"]`).click();
8181

8282
cy.get('[data-cy="task-add-button-input"]').type(taskContentTwo);
8383
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
8484

85-
cy.get(`[data-cy="task-${taskContentTwo}"]`).trigger('mouseover');
85+
cy.get(`[data-cy="task-${taskContentTwo}"]`).click();
8686
cy.get(`[data-cy="button-active"]`).click();
8787

8888
cy.get('[data-cy="task-add-button-input"]').type(taskContentThree);
8989
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
9090

91-
cy.get(`[data-cy="task-${taskContentThree}"]`).trigger('mouseover');
91+
cy.get(`[data-cy="task-${taskContentThree}"]`).click();
9292
cy.get(`[data-cy="button-active"]`).click();
9393

9494
cy.get('[data-cy="task-add-button-input"]').type(taskContentFour);
@@ -118,30 +118,30 @@ describe('Get The Things Done Task', () => {
118118
const taskContentTwo: string = 'some task to do 2';
119119
const taskContentThree: string = 'some task to do 3';
120120
const taskContentFour: string = 'some task to do 4';
121-
cy.visit(Cypress.env('BASE_URL'));
121+
cy.visit('/');
122122

123123
cy.get('[data-cy="task-add-button-input"]').type(taskContentOne);
124124
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
125125

126-
cy.get(`[data-cy="task-${taskContentOne}"]`).trigger('mouseover');
126+
cy.get(`[data-cy="task-${taskContentOne}"]`).click();
127127
cy.get(`[data-cy="button-active"]`).click();
128128

129129
cy.get('[data-cy="task-add-button-input"]').type(taskContentTwo);
130130
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
131131

132-
cy.get(`[data-cy="task-${taskContentTwo}"]`).trigger('mouseover');
132+
cy.get(`[data-cy="task-${taskContentTwo}"]`).click();
133133
cy.get(`[data-cy="button-active"]`).click();
134134

135135
cy.get('[data-cy="task-add-button-input"]').type(taskContentThree);
136136
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
137137

138-
cy.get(`[data-cy="task-${taskContentThree}"]`).trigger('mouseover');
138+
cy.get(`[data-cy="task-${taskContentThree}"]`).click();
139139
cy.get(`[data-cy="button-active"]`).click();
140140

141141
cy.get('[data-cy="task-add-button-input"]').type(taskContentFour);
142142
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
143143

144-
cy.get(`[data-cy="task-${taskContentFour}"]`).trigger('mouseover');
144+
cy.get(`[data-cy="task-${taskContentFour}"]`).click();
145145
cy.get(`[data-cy="button-active"]`).click();
146146

147147
cy.get('[data-cy="stick-note-button-0"]').should('be.visible');
@@ -170,12 +170,12 @@ describe('Get The Things Done Task', () => {
170170

171171
it('Should add a new task and them cancel it', () => {
172172
const taskContentOne: string = 'some task to do 1';
173-
cy.visit(Cypress.env('BASE_URL'));
173+
cy.visit('/');
174174

175175
cy.get('[data-cy="task-add-button-input"]').type(taskContentOne);
176176
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
177177

178-
cy.get(`[data-cy="task-${taskContentOne}"]`).trigger('mouseover');
178+
cy.get(`[data-cy="task-${taskContentOne}"]`).click();
179179
cy.get(`[data-cy="button-cancel"]`).click();
180180

181181
cy.get('[data-cy="task-some task to do 1"]').should(

‎cypress/e2e/links.cy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('Get The Things Done Links', () => {
1414
});
1515

1616
it('Should redicrect to the repo', () => {
17-
cy.visit(Cypress.env('BASE_URL'));
17+
cy.visit('/');
1818
cy.get('[data-cy="User-Card-Header"] > [data-cy="Card-title"]').should(
1919
'have.attr',
2020
'href',

‎cypress/e2e/loginAndLogout.cy.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,22 @@ describe('Get The Things Done Login and Logout', () => {
1616
});
1717

1818
it('Should Login into the app with a gmail account', () => {
19-
cy.visit(Cypress.env('BASE_URL'));
19+
cy.visit('/');
2020
cy.get('[data-cy="Card-SubTitle"]').should(
2121
'have.text',
2222
`Hi ${USER_NAME} !`,
2323
);
2424
});
2525

2626
it('Should logout', () => {
27-
cy.visit(Cypress.env('BASE_URL'));
27+
cy.visit('/');
2828
cy.get('[data-cy="button-text"]').click();
2929
cy.get('[data-cy="Card-SubTitle"]').should('not.exist');
3030
cy.get('[data-cy="button-Login With Google"]').should('exist');
3131
});
3232

3333
it('Should show the error view', () => {
34-
cy.visit(Cypress.env('BASE_URL'));
34+
cy.visit('/');
3535
cy.get('[data-cy="button-text"]').click();
3636
cy.visit(`${Cypress.env('BASE_URL')}task123132`);
3737
cy.get('[data-cy="Error-view-message"]').should(

‎cypress/e2e/splitTask.cy.tsx‎

Lines changed: 75 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ describe('Get The Things Done Split Taks', () => {
2121
const subTaskContentOne: string = 'sub task to split one';
2222
const subTaskContentTwo: string = 'sub task to split two';
2323

24-
cy.visit(Cypress.env('BASE_URL'));
24+
cy.visit('/');
2525
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
2626
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
27-
cy.get(`[data-cy="task-${taskContent}"]`).trigger('mouseover');
27+
cy.get(`[data-cy="task-${taskContent}"]`).click();
2828

2929
cy.get(`[data-cy="button-split"]`).click();
3030

@@ -48,10 +48,10 @@ describe('Get The Things Done Split Taks', () => {
4848
const taskContent: string = 'task to split';
4949
const subTaskContentOne: string = 'sub task to split one';
5050

51-
cy.visit(Cypress.env('BASE_URL'));
51+
cy.visit('/');
5252
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
5353
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
54-
cy.get(`[data-cy="task-${taskContent}"]`).trigger('mouseover');
54+
cy.get(`[data-cy="task-${taskContent}"]`).click();
5555

5656
cy.get(`[data-cy="button-split"]`).click();
5757

@@ -67,10 +67,10 @@ describe('Get The Things Done Split Taks', () => {
6767
const taskContent: string = 'task to split';
6868
const subTaskContentOne: string = 'sub task to split one';
6969

70-
cy.visit(Cypress.env('BASE_URL'));
70+
cy.visit('/');
7171
cy.get('[data-cy="task-add-button-input"]').type(taskContent);
7272
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
73-
cy.get(`[data-cy="task-${taskContent}"]`).trigger('mouseover');
73+
cy.get(`[data-cy="task-${taskContent}"]`).click();
7474

7575
cy.get(`[data-cy="button-split"]`).click();
7676

@@ -81,6 +81,75 @@ describe('Get The Things Done Split Taks', () => {
8181
cy.get(`[data-cy="task-${taskContent}"]`).should('have.text', taskContent);
8282
cy.get(`[data-cy="task-${subTaskContentOne}"]`).should('not.exist');
8383
});
84+
85+
it('Should scroll into the item when is clicked', () => {
86+
const taskContentOne: string = 'some task to do 1';
87+
const taskContentTwo: string = 'some task to do 2';
88+
const taskContentThree: string = 'some task to do 3';
89+
const taskContentFour: string = 'some task to do 4';
90+
const taskContentFive: string = 'some task to do 5';
91+
const taskContentSixe: string = 'some task to do 6';
92+
const taskContentSeven: string = 'some task to do 7';
93+
const taskContentEight: string = 'some task to do 8';
94+
const taskContentNine: string = 'some task to do 9';
95+
const taskContentTeen: string = 'some task to do 10';
96+
const taskContentEleven: string = 'some task to do 11';
97+
const taskContentTwelve: string = 'some task to do 12';
98+
const taskContentThirteen: string = 'some task to do 13';
99+
const taskContentFourteen: string = 'some task to do 14';
100+
const taskContentFiftteen: string = 'some task to do 15';
101+
102+
cy.visit('/');
103+
104+
cy.get('[data-cy="task-add-button-input"]').type(taskContentOne);
105+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
106+
107+
cy.get('[data-cy="task-add-button-input"]').type(taskContentTwo);
108+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
109+
110+
cy.get('[data-cy="task-add-button-input"]').type(taskContentThree);
111+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
112+
113+
cy.get('[data-cy="task-add-button-input"]').type(taskContentFour);
114+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
115+
116+
cy.get('[data-cy="task-add-button-input"]').type(taskContentFive);
117+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
118+
119+
cy.get('[data-cy="task-add-button-input"]').type(taskContentSixe);
120+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
121+
122+
cy.get('[data-cy="task-add-button-input"]').type(taskContentSeven);
123+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
124+
125+
cy.get('[data-cy="task-add-button-input"]').type(taskContentEight);
126+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
127+
128+
cy.get('[data-cy="task-add-button-input"]').type(taskContentNine);
129+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
130+
131+
cy.get('[data-cy="task-add-button-input"]').type(taskContentTeen);
132+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
133+
134+
cy.get('[data-cy="task-add-button-input"]').type(taskContentEleven);
135+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
136+
137+
cy.get('[data-cy="task-add-button-input"]').type(taskContentTwelve);
138+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
139+
140+
cy.get('[data-cy="task-add-button-input"]').type(taskContentThirteen);
141+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
142+
143+
cy.get('[data-cy="task-add-button-input"]').type(taskContentFourteen);
144+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
145+
146+
cy.get('[data-cy="task-add-button-input"]').type(taskContentFiftteen);
147+
cy.get('[data-cy="task-add-button-input"]').type('{enter}');
148+
149+
cy.get(`[data-cy="task-${taskContentThree}"]`).click();
150+
151+
cy.get(`[data-cy="button-split"]`).should('be.visible');
152+
});
84153
});
85154

86155
export {};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
"@types/react-dom": "^18.0.10",
6666
"@types/react-test-renderer": "^18.0.7",
6767
"@types/uuid": "^9.0.7",
68-
"cypress": "^12.14.0",
68+
"cypress": "13.7.0",
6969
"jest": "^29.5.0",
7070
"jest-environment-jsdom": "^29.7.0",
7171
"jest-transform-stub": "^2.0.0",

‎src/components/itemList/ItemList.tsx‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { styled } from 'styled-components';
22
import { CardTitle } from '../cardWithTile/CardWithTitle';
3-
import { useContext, useState } from 'react';
3+
import { useContext, useEffect, useRef, useState } from 'react';
44
import { ItemAddButton } from '../itemButton/ItemButton';
55
import { ItemWithActions } from '../itemWithActions/ItemWithActions';
66
import { TaskInformationContext } from '../../contexts/taskContext';
@@ -21,8 +21,10 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
2121
const itemsInformation = useContext(TaskInformationContext);
2222
const userInformation = useContext(UserInformationContext);
2323
const { eventBus } = useContext(EventContext);
24+
const refToList = useRef<HTMLDivElement[]>([]);
2425

2526
const [value, setValue] = useState<string>('');
27+
2628
const activeTask = itemsInformation.getActiveTaskToMap();
2729
const inboxToMap = itemsInformation.getInboxTaskToMap();
2830

@@ -100,17 +102,32 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
100102
}
101103
};
102104

103-
const itemComponentsList: React.JSX.Element[] = inboxToMap.map(
104-
(item: Task) => (
105-
<ItemWithActions
106-
key={`${item.id}-${item.title}`}
107-
title={item.title}
108-
onAcive={() => onActiveTask(item.id)}
109-
onCancel={() => onCancelTask(item.id)}
110-
onSplit={(taskOne: string, taskTwo: string) =>
111-
buttonAddSplitTask(taskOne, taskTwo, item.id)
112-
}
113-
/>
105+
const itemComponentsList: React.ReactNode[] = inboxToMap.map(
106+
(item: Task, index: number) => (
107+
<div
108+
ref={(el) => {
109+
if (el) {
110+
refToList.current[index] = el;
111+
}
112+
return refToList;
113+
}}
114+
onClick={() => {
115+
refToList?.current[index].scrollIntoView({
116+
behavior: 'smooth',
117+
block: 'center',
118+
});
119+
}}
120+
>
121+
<ItemWithActions
122+
key={`${item.id}-${item.title}`}
123+
title={item.title}
124+
onAcive={() => onActiveTask(item.id)}
125+
onCancel={() => onCancelTask(item.id)}
126+
onSplit={(taskOne: string, taskTwo: string) =>
127+
buttonAddSplitTask(taskOne, taskTwo, item.id)
128+
}
129+
/>
130+
</div>
114131
),
115132
);
116133

@@ -126,17 +143,15 @@ const ItemList = ({ id }: ItemListProps): React.JSX.Element => {
126143
{itemsInformation.getIsLoading() ? (
127144
<Spiner />
128145
) : (
129-
<>
130-
<ItemAddButton
131-
onChange={onChangeButton}
132-
value={value}
133-
action={buttonAdd}
134-
disable={itemsInformation.getIsLoading()}
135-
characterLimit={CHARACTER_LIMIT}
136-
/>
137-
<InboxContainer>{itemComponentsList}</InboxContainer>
138-
</>
146+
<ItemAddButton
147+
onChange={onChangeButton}
148+
value={value}
149+
action={buttonAdd}
150+
disable={itemsInformation.getIsLoading()}
151+
characterLimit={CHARACTER_LIMIT}
152+
/>
139153
)}
154+
<InboxContainer>{itemComponentsList}</InboxContainer>
140155
</CardTitle>
141156
</InboxTaskContainer>
142157
);

0 commit comments

Comments
 (0)