Skip to content

Commit eae6573

Browse files
notaphplovernotaphplover
authored
Merge pull request #1802 from notaphplover/feature/update-cards-module-to-add-isSelected-value
Update cards module to add isSelected value
2 parents d2a2ff4 + acbc735 commit eae6573

20 files changed

+369
-37
lines changed

‎packages/frontend/web-ui/src/game/components/BaseCard.spec.tsx

+200-36
Original file line numberDiff line numberDiff line change
@@ -11,58 +11,222 @@ import { MouseEvent } from 'react';
1111
import { BaseCard } from './BaseCard';
1212

1313
describe(BaseCard.name, () => {
14-
let childrenMock: jest.Mock<() => React.JSX.Element | React.JSX.Element[]>;
15-
let colorClassFixture: string;
16-
let onDoubleClickMock: jest.Mock<(event: MouseEvent) => void>;
17-
18-
beforeAll(() => {
19-
childrenMock = jest.fn();
20-
colorClassFixture = 'blue-card';
21-
onDoubleClickMock = jest.fn();
14+
describe('having a BaseCardOptions with isSelected true', () => {
15+
let childrenMock: jest.Mock<() => React.JSX.Element | React.JSX.Element[]>;
16+
let selectedClassName: string;
17+
let colorClassFixture: string;
18+
let isSelectedFixture: boolean;
19+
let onDoubleClickMock: jest.Mock<(event: MouseEvent) => void>;
20+
21+
beforeAll(() => {
22+
childrenMock = jest.fn();
23+
selectedClassName = 'selected';
24+
colorClassFixture = 'blue-card';
25+
isSelectedFixture = true;
26+
onDoubleClickMock = jest.fn();
27+
});
28+
29+
describe('when called', () => {
30+
let isExpectedClassNameInCard: boolean;
31+
let isSelectedCard: boolean;
32+
33+
beforeAll(() => {
34+
const renderResult: RenderResult = render(
35+
<BaseCard
36+
children={childrenMock()}
37+
colorClass={colorClassFixture}
38+
isSelected={isSelectedFixture}
39+
onDoubleClick={onDoubleClickMock}
40+
></BaseCard>,
41+
);
42+
43+
const cardColor: HTMLElement = renderResult.container.querySelector(
44+
'.cornie-card-inner-content',
45+
) as HTMLElement;
46+
47+
isExpectedClassNameInCard =
48+
cardColor.classList.contains(colorClassFixture);
49+
50+
const divSelectedCard: HTMLElement =
51+
renderResult.container.querySelector('.cornie-card') as HTMLElement;
52+
53+
isSelectedCard = divSelectedCard.classList.contains(selectedClassName);
54+
55+
const selectedCard: Element | null =
56+
renderResult.container.querySelector(
57+
'.cornie-card-inner-content',
58+
) as Element;
59+
60+
fireEvent.dblClick(selectedCard);
61+
62+
void waitFor(() => {
63+
// eslint-disable-next-line jest/no-standalone-expect
64+
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
65+
});
66+
});
67+
68+
afterAll(() => {
69+
jest.clearAllMocks();
70+
});
71+
72+
it('should contain a div with a blue-card className', () => {
73+
expect(isExpectedClassNameInCard).toBe(true);
74+
});
75+
76+
it('should contain a div with selected className', () => {
77+
expect(isSelectedCard).toBe(true);
78+
});
79+
80+
it('should call a onDoubleClick()', () => {
81+
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
82+
expect(onDoubleClickMock).toHaveBeenCalledWith(expect.any(Object));
83+
});
84+
});
2285
});
2386

24-
describe('when called', () => {
25-
let isExpectedClassNameInCard: boolean;
87+
describe('having a BaseCardOptions with isSelected false', () => {
88+
let childrenMock: jest.Mock<() => React.JSX.Element | React.JSX.Element[]>;
89+
let selectedClassName: string;
90+
let colorClassFixture: string;
91+
let isSelectedFixture: boolean;
92+
let onDoubleClickMock: jest.Mock<(event: MouseEvent) => void>;
2693

2794
beforeAll(() => {
28-
const renderResult: RenderResult = render(
29-
<BaseCard
30-
children={childrenMock()}
31-
colorClass={colorClassFixture}
32-
onDoubleClick={onDoubleClickMock}
33-
></BaseCard>,
34-
);
95+
childrenMock = jest.fn();
96+
selectedClassName = 'selected';
97+
colorClassFixture = 'blue-card';
98+
isSelectedFixture = false;
99+
onDoubleClickMock = jest.fn();
100+
});
101+
102+
describe('when called', () => {
103+
let isExpectedClassNameInCard: boolean;
104+
let isSelectedCard: boolean;
105+
106+
beforeAll(() => {
107+
const renderResult: RenderResult = render(
108+
<BaseCard
109+
children={childrenMock()}
110+
colorClass={colorClassFixture}
111+
isSelected={isSelectedFixture}
112+
onDoubleClick={onDoubleClickMock}
113+
></BaseCard>,
114+
);
35115

36-
const cardColor: HTMLElement = renderResult.container.querySelector(
37-
'.cornie-card-inner-content',
38-
) as HTMLElement;
116+
const cardColor: HTMLElement = renderResult.container.querySelector(
117+
'.cornie-card-inner-content',
118+
) as HTMLElement;
39119

40-
isExpectedClassNameInCard =
41-
cardColor.classList.contains(colorClassFixture);
120+
isExpectedClassNameInCard =
121+
cardColor.classList.contains(colorClassFixture);
42122

43-
const selectedCard: Element | null = renderResult.container.querySelector(
44-
'.cornie-card-inner-content',
45-
) as Element;
123+
const divSelectedCard: HTMLElement =
124+
renderResult.container.querySelector('.cornie-card') as HTMLElement;
46125

47-
fireEvent.dblClick(selectedCard);
126+
isSelectedCard = divSelectedCard.classList.contains(selectedClassName);
48127

49-
void waitFor(() => {
50-
// eslint-disable-next-line jest/no-standalone-expect
128+
const selectedCard: Element | null =
129+
renderResult.container.querySelector(
130+
'.cornie-card-inner-content',
131+
) as Element;
132+
133+
fireEvent.dblClick(selectedCard);
134+
135+
void waitFor(() => {
136+
// eslint-disable-next-line jest/no-standalone-expect
137+
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
138+
});
139+
});
140+
141+
afterAll(() => {
142+
jest.clearAllMocks();
143+
});
144+
145+
it('should contain a div with a blue-card className', () => {
146+
expect(isExpectedClassNameInCard).toBe(true);
147+
});
148+
149+
it('should not contain a div with selected className', () => {
150+
expect(isSelectedCard).toBe(false);
151+
});
152+
153+
it('should call a onDoubleClick()', () => {
51154
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
155+
expect(onDoubleClickMock).toHaveBeenCalledWith(expect.any(Object));
52156
});
53157
});
158+
});
54159

55-
afterAll(() => {
56-
jest.clearAllMocks();
57-
});
160+
describe('having a BaseCardOptions with isSelected undefined', () => {
161+
let childrenMock: jest.Mock<() => React.JSX.Element | React.JSX.Element[]>;
162+
let selectedClassName: string;
163+
let colorClassFixture: string;
164+
let isSelectedFixture: undefined;
165+
let onDoubleClickMock: jest.Mock<(event: MouseEvent) => void>;
58166

59-
it('should contain a div with a blue-card className', () => {
60-
expect(isExpectedClassNameInCard).toBe(true);
167+
beforeAll(() => {
168+
childrenMock = jest.fn();
169+
selectedClassName = 'selected';
170+
colorClassFixture = 'blue-card';
171+
isSelectedFixture = undefined;
172+
onDoubleClickMock = jest.fn();
61173
});
62174

63-
it('should call a onDoubleClick()', () => {
64-
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
65-
expect(onDoubleClickMock).toHaveBeenCalledWith(expect.any(Object));
175+
describe('when called', () => {
176+
let isExpectedClassNameInCard: boolean;
177+
let isSelectedCard: boolean;
178+
179+
beforeAll(() => {
180+
const renderResult: RenderResult = render(
181+
<BaseCard
182+
children={childrenMock()}
183+
colorClass={colorClassFixture}
184+
isSelected={isSelectedFixture}
185+
onDoubleClick={onDoubleClickMock}
186+
></BaseCard>,
187+
);
188+
189+
const cardColor: HTMLElement = renderResult.container.querySelector(
190+
'.cornie-card-inner-content',
191+
) as HTMLElement;
192+
193+
isExpectedClassNameInCard =
194+
cardColor.classList.contains(colorClassFixture);
195+
196+
const divSelectedCard: HTMLElement =
197+
renderResult.container.querySelector('.cornie-card') as HTMLElement;
198+
199+
isSelectedCard = divSelectedCard.classList.contains(selectedClassName);
200+
201+
const selectedCard: Element | null =
202+
renderResult.container.querySelector(
203+
'.cornie-card-inner-content',
204+
) as Element;
205+
206+
fireEvent.dblClick(selectedCard);
207+
208+
void waitFor(() => {
209+
// eslint-disable-next-line jest/no-standalone-expect
210+
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
211+
});
212+
});
213+
214+
afterAll(() => {
215+
jest.clearAllMocks();
216+
});
217+
218+
it('should contain a div with a blue-card className', () => {
219+
expect(isExpectedClassNameInCard).toBe(true);
220+
});
221+
222+
it('should not contain a div with selected className', () => {
223+
expect(isSelectedCard).toBe(false);
224+
});
225+
226+
it('should call a onDoubleClick()', () => {
227+
expect(onDoubleClickMock).toHaveBeenCalledTimes(1);
228+
expect(onDoubleClickMock).toHaveBeenCalledWith(expect.any(Object));
229+
});
66230
});
67231
});
68232
});

‎packages/frontend/web-ui/src/game/components/BaseCard.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,23 @@ import { MouseEvent } from 'react';
44
interface BaseCardOptions {
55
children: React.JSX.Element | React.JSX.Element[];
66
colorClass: string;
7+
isSelected?: boolean | undefined;
78
onDoubleClick?: ((event: MouseEvent) => void) | undefined;
89
}
910

11+
function addSelectedClassName(isSelected: boolean | undefined): string {
12+
if (isSelected ?? false) {
13+
return 'selected';
14+
} else {
15+
return '';
16+
}
17+
}
18+
1019
export const BaseCard = (params: BaseCardOptions) => {
1120
return (
1221
<Box
1322
component="div"
14-
className="cornie-card"
23+
className={`cornie-card ${addSelectedClassName(params.isSelected)}`}
1524
onDoubleClick={params.onDoubleClick}
1625
>
1726
<Box

‎packages/frontend/web-ui/src/game/components/Card.spec.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ describe(Card.name, () => {
4040
kind: 'normal',
4141
number: 5,
4242
},
43+
isSelected: true,
4344
onDoubleClick: () => undefined,
4445
};
4546
});
@@ -88,6 +89,7 @@ describe(Card.name, () => {
8889
color: 'blue',
8990
kind: 'draw',
9091
},
92+
isSelected: true,
9193
onDoubleClick: () => undefined,
9294
};
9395
});
@@ -136,6 +138,7 @@ describe(Card.name, () => {
136138
color: 'blue',
137139
kind: 'reverse',
138140
},
141+
isSelected: true,
139142
onDoubleClick: () => undefined,
140143
};
141144
});
@@ -184,6 +187,7 @@ describe(Card.name, () => {
184187
color: 'blue',
185188
kind: 'skip',
186189
},
190+
isSelected: true,
187191
onDoubleClick: () => undefined,
188192
};
189193
});
@@ -231,6 +235,7 @@ describe(Card.name, () => {
231235
card: {
232236
kind: 'wild',
233237
},
238+
isSelected: true,
234239
onDoubleClick: () => undefined,
235240
};
236241
});
@@ -265,6 +270,7 @@ describe(Card.name, () => {
265270
{
266271
card: cardOptionsFixture.card,
267272
colorClass: 'white-color',
273+
isSelected: true,
268274
onDoubleClick: cardOptionsFixture.onDoubleClick,
269275
},
270276
{},
@@ -285,6 +291,7 @@ describe(Card.name, () => {
285291
card: {
286292
kind: 'wildDraw4',
287293
},
294+
isSelected: true,
288295
onDoubleClick: () => undefined,
289296
};
290297
});
@@ -319,6 +326,7 @@ describe(Card.name, () => {
319326
{
320327
card: cardOptionsFixture.card,
321328
colorClass: 'white-color',
329+
isSelected: true,
322330
onDoubleClick: cardOptionsFixture.onDoubleClick,
323331
},
324332
{},

0 commit comments

Comments
 (0)