Skip to content

Commit 5155daa

Browse files
userlocalhostuserlocalhost
authored
Merge pull request #1096 from dmm-com/feature/ui_test/role_list
Added test id for role list page
2 parents 565e8ce + 4d011e5 commit 5155daa

File tree

4 files changed

+81
-47
lines changed

4 files changed

+81
-47
lines changed

‎frontend/src/components/role/RoleForm.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const RoleForm: FC<Props> = ({ control, setValue }) => {
6868
return (
6969
<Box>
7070
<Box>
71-
<Table className="table table-bordered">
71+
<Table className="table table-bordered" data-testid="basic">
7272
<TableHead>
7373
<TableRow sx={{ backgroundColor: "#455A64" }}>
7474
<TableCell sx={{ color: "#FFFFFF" }}>項目</TableCell>
@@ -133,7 +133,7 @@ export const RoleForm: FC<Props> = ({ control, setValue }) => {
133133
<Typography align="left" my="8px">
134134
グループ登録
135135
</Typography>
136-
<Table>
136+
<Table data-testid="group">
137137
<TableHead>
138138
<TableRow sx={{ backgroundColor: "#455A64" }}>
139139
<TableCell sx={{ color: "#FFFFFF" }}>項目</TableCell>
@@ -294,7 +294,7 @@ export const RoleForm: FC<Props> = ({ control, setValue }) => {
294294
<Typography align="left" my="8px">
295295
ユーザ登録
296296
</Typography>
297-
<Table>
297+
<Table data-testid="user">
298298
<TableHead>
299299
<TableRow sx={{ backgroundColor: "#455A64" }}>
300300
<TableCell sx={{ color: "#FFFFFF" }}>項目</TableCell>

‎frontend/src/components/role/RoleList.tsx

+58-40
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
33
import {
44
Box,
55
IconButton,
6+
List,
7+
ListItem,
68
Table,
79
TableBody,
810
TableCell,
@@ -25,6 +27,14 @@ import { Loading } from "../common/Loading";
2527

2628
import { rolePath, rolesPath, topPath } from "Routes";
2729

30+
const StyledList = styled(List)(() => ({
31+
padding: "0",
32+
}));
33+
34+
const StyledListItem = styled(ListItem)(() => ({
35+
padding: "0",
36+
}));
37+
2838
const StyledIconButton = styled(IconButton)(({ theme }) => ({
2939
margin: theme.spacing(1),
3040
})) as OverridableComponent<ExtendButtonBaseTypeMap<IconButtonTypeMap>>;
@@ -59,10 +69,10 @@ export const RoleList: FC = ({}) => {
5969
{roles.loading ? (
6070
<Loading />
6171
) : (
62-
<Table>
72+
<Table data-testid="RoleList">
6373
<TableHead>
6474
<TableRow sx={{ backgroundColor: "#455A64" }}>
65-
<TableCell sx={{ color: "#FFFFFF" }}>項目</TableCell>
75+
<TableCell sx={{ color: "#FFFFFF" }}>ロール</TableCell>
6676
<TableCell sx={{ color: "#FFFFFF" }}>備考</TableCell>
6777
<TableCell sx={{ color: "#FFFFFF" }}>
6878
登録ユーザ・グループ
@@ -77,54 +87,62 @@ export const RoleList: FC = ({}) => {
7787
<TableCell>{role.name}</TableCell>
7888
<TableCell>{role.description}</TableCell>
7989
<TableCell>
80-
<>
90+
<StyledList>
8191
{role.users.map((user) => (
82-
<Typography key={user.id} ml="58px" my="4px">
83-
{user.username}
84-
</Typography>
92+
<StyledListItem key={user.id}>
93+
<Typography ml="58px" my="4px">
94+
{user.username}
95+
</Typography>
96+
</StyledListItem>
8597
))}
8698
{role.groups.map((group) => (
87-
<Typography key={group.id} ml="58px" my="4px">
88-
{group.name}
89-
</Typography>
99+
<StyledListItem key={group.id}>
100+
<Typography ml="58px" my="4px">
101+
{group.name}
102+
</Typography>
103+
</StyledListItem>
90104
))}
91105
{role.adminUsers.map((user) => (
92-
<Box key={user.id} display="flex" my="4px">
93-
<Box
94-
display="flex"
95-
alignItems="center"
96-
p="4px"
97-
mx="4px"
98-
sx={{
99-
color: "white",
100-
backgroundColor: "#0000008A",
101-
borderRadius: "12px",
102-
}}
103-
>
104-
管理者
106+
<StyledListItem key={user.id}>
107+
<Box display="flex" my="4px">
108+
<Box
109+
display="flex"
110+
alignItems="center"
111+
p="4px"
112+
mx="4px"
113+
sx={{
114+
color: "white",
115+
backgroundColor: "#0000008A",
116+
borderRadius: "12px",
117+
}}
118+
>
119+
管理者
120+
</Box>
121+
<Typography>{user.username}</Typography>
105122
</Box>
106-
<Typography>{user.username}</Typography>
107-
</Box>
123+
</StyledListItem>
108124
))}
109125
{role.adminGroups.map((group) => (
110-
<Box key={group.id} display="flex" my="4px">
111-
<Box
112-
display="flex"
113-
alignItems="center"
114-
p="4px"
115-
mx="4px"
116-
sx={{
117-
color: "white",
118-
backgroundColor: "#0000008A",
119-
borderRadius: "12px",
120-
}}
121-
>
122-
管理者
126+
<StyledListItem key={group.id}>
127+
<Box display="flex" my="4px">
128+
<Box
129+
display="flex"
130+
alignItems="center"
131+
p="4px"
132+
mx="4px"
133+
sx={{
134+
color: "white",
135+
backgroundColor: "#0000008A",
136+
borderRadius: "12px",
137+
}}
138+
>
139+
管理者
140+
</Box>
141+
<Typography>{group.name}</Typography>
123142
</Box>
124-
<Typography>{group.name}</Typography>
125-
</Box>
143+
</StyledListItem>
126144
))}
127-
</>
145+
</StyledList>
128146
</TableCell>
129147
<TableCell>
130148
<Confirmable

‎frontend/src/pages/__snapshots__/RoleEditPage.test.tsx.snap

+6
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ exports[`EditRolePage should match snapshot 1`] = `
129129
>
130130
<table
131131
class="MuiTable-root table table-bordered css-rqglhn-MuiTable-root"
132+
data-testid="basic"
132133
>
133134
<thead
134135
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -244,6 +245,7 @@ exports[`EditRolePage should match snapshot 1`] = `
244245
</p>
245246
<table
246247
class="MuiTable-root css-rqglhn-MuiTable-root"
248+
data-testid="group"
247249
>
248250
<thead
249251
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -445,6 +447,7 @@ exports[`EditRolePage should match snapshot 1`] = `
445447
</p>
446448
<table
447449
class="MuiTable-root css-rqglhn-MuiTable-root"
450+
data-testid="user"
448451
>
449452
<thead
450453
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -767,6 +770,7 @@ exports[`EditRolePage should match snapshot 1`] = `
767770
>
768771
<table
769772
class="MuiTable-root table table-bordered css-rqglhn-MuiTable-root"
773+
data-testid="basic"
770774
>
771775
<thead
772776
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -882,6 +886,7 @@ exports[`EditRolePage should match snapshot 1`] = `
882886
</p>
883887
<table
884888
class="MuiTable-root css-rqglhn-MuiTable-root"
889+
data-testid="group"
885890
>
886891
<thead
887892
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -1083,6 +1088,7 @@ exports[`EditRolePage should match snapshot 1`] = `
10831088
</p>
10841089
<table
10851090
class="MuiTable-root css-rqglhn-MuiTable-root"
1091+
data-testid="user"
10861092
>
10871093
<thead
10881094
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"

‎frontend/src/pages/__snapshots__/RoleListPage.test.tsx.snap

+14-4
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ exports[`should match snapshot 1`] = `
132132
>
133133
<table
134134
class="MuiTable-root css-rqglhn-MuiTable-root"
135+
data-testid="RoleList"
135136
>
136137
<thead
137138
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -143,7 +144,7 @@ exports[`should match snapshot 1`] = `
143144
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
144145
scope="col"
145146
>
146-
項目
147+
ロール
147148
</th>
148149
<th
149150
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
@@ -185,7 +186,11 @@ exports[`should match snapshot 1`] = `
185186
/>
186187
<td
187188
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
188-
/>
189+
>
190+
<ul
191+
class="MuiList-root MuiList-padding css-1xu392-MuiList-root"
192+
/>
193+
</td>
189194
<td
190195
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
191196
>
@@ -368,6 +373,7 @@ exports[`should match snapshot 1`] = `
368373
>
369374
<table
370375
class="MuiTable-root css-rqglhn-MuiTable-root"
376+
data-testid="RoleList"
371377
>
372378
<thead
373379
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -379,7 +385,7 @@ exports[`should match snapshot 1`] = `
379385
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
380386
scope="col"
381387
>
382-
項目
388+
ロール
383389
</th>
384390
<th
385391
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
@@ -421,7 +427,11 @@ exports[`should match snapshot 1`] = `
421427
/>
422428
<td
423429
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
424-
/>
430+
>
431+
<ul
432+
class="MuiList-root MuiList-padding css-1xu392-MuiList-root"
433+
/>
434+
</td>
425435
<td
426436
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
427437
>

0 commit comments

Comments
 (0)