Skip to content

Commit 5f4bbc0

Browse files
can-anguncan-angun
committed
Added consent history verify full data page case
1 parent 1c709a7 commit 5f4bbc0

File tree

4 files changed

+246
-53
lines changed

4 files changed

+246
-53
lines changed

‎plugins/compliance-hub/frontend/public/templates/consentHistory.html‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,82 +18,89 @@
1818
</div>
1919
</div>
2020
<cly-section class="cly-vue-compliance__consent_history cly-vue-complaince__hub_style_widthzero">
21-
<cly-datatable-n :force-loading="consentHistoryLoading" :data-source="consentHistoryTableSource" :default-sort="{prop: 'ts', order: 'descending'}" ref="table" @row-click="tableRowClickHandler" row-class-name="bu-is-clickable">
21+
<cly-datatable-n test-id="datatable-compliance-hub-consent-history" :force-loading="consentHistoryLoading" :data-source="consentHistoryTableSource" :default-sort="{prop: 'ts', order: 'descending'}" ref="table" @row-click="tableRowClickHandler" row-class-name="bu-is-clickable">
2222
<template v-slot="scope">
2323
<el-table-column fixed type="expand">
2424
<template slot-scope="props">
2525
<div class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
26-
<div class="bu-level-left text-medium font-weight-bold">Device ID</div>
26+
<div class="bu-level-left text-medium font-weight-bold" :data-test-id="'expand-device-id-label-' + props.$index">Device ID</div>
2727
<div style="width: 80%;" class="bu-level-right">
28-
<p style="width: 100%;">{{props.row.device_id}}</p>
28+
<p style="width: 100%;" :data-test-id="'expand-device-id-' + props.$index">{{props.row.device_id}}</p>
2929
</div>
3030
</div>
3131
<div v-if="props.row.optin.length > 0"
3232
class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
33-
<div class="bu-level-left text-medium font-weight-bold">{{i18n("consent.opt-i")}}</div>
33+
<div class="bu-level-left text-medium font-weight-bold" :data-test-id="'expand-opt-in-label-' + props.$index">{{i18n("consent.opt-i")}}</div>
3434
<div style="width: 80%;" class="bu-level-right">
35-
<p style="width: 100%;">
35+
<p style="width: 100%;" :data-test-id="'expand-opt-in-' + props.$index">
3636
{{props.row.optin.join(',')}}
3737
</p>
3838
</div>
3939
</div>
4040
<div v-if="props.row.optout.length > 0"
4141
class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
42-
<div class="bu-level-left text-medium font-weight-bold">{{i18n("consent.opt-o")}}</div>
42+
<div class="bu-level-left text-medium font-weight-bold" :data-test-id="'expand-opt-out-label-' + props.$index">{{i18n("consent.opt-o")}}</div>
4343
<div style="width: 80%;" class="bu-level-right">
44-
<p style="width: 100%;">
44+
<p style="width: 100%;" :data-test-id="'expand-opt-out-' + props.$index">
4545
{{props.row.optout.join(',')}}
4646
</p>
4747
</div>
4848
</div>
4949
<div class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
50-
<div class="bu-level-left text-medium font-weight-bold">Device</div>
50+
<div class="bu-level-left text-medium font-weight-bold" :data-test-id="'expand-device-label-' + props.$index">Device</div>
5151
<div style="width: 80%;" class="bu-level-right">
52-
<p style="width: 100%;">
52+
<p style="width: 100%;" :data-test-id="'expand-device-' + props.$index">
5353
{{props.row.d + "(" + props.row.p + " " + props.row.pv + ")"}}
5454
</p>
5555
</div>
5656
</div>
5757
<div class="bu-level cly-vue-compliance__consent_history_expanded_column">
58-
<div class="bu-level-left text-medium font-weight-bold">App version</div>
58+
<div class="bu-level-left text-medium font-weight-bold" :data-test-id="'expand-app-version-label-' + props.$index">App version</div>
5959
<div style="width: 80%;" class="bu-level-right">
60-
<p style="width: 100%;">
60+
<p style="width: 100%;" :data-test-id="'expand-app-version-' + props.$index">
6161
{{props.row.av}}
6262
</p>
6363
</div>
6464
</div>
6565
</template>
6666
</el-table-column>
6767
<el-table-column fixed width="250" sortable="custom" prop="device_id" label="ID">
68+
<template slot-scope="scope">
69+
<div :data-test-id="'datatable-consent-history-id-' + scope.$index">
70+
{{scope.row.device_id}}
71+
</div>
72+
</template>
6873
</el-table-column>
6974
<el-table-column sortable="custom" prop="uid" label="UID">
75+
<template slot-scope="scope">
76+
<div :data-test-id="'datatable-consent-history-uid-' + scope.$index">
77+
{{scope.row.uid}}
78+
</div>
79+
</template>
7080
</el-table-column>
7181
<el-table-column sortable="custom" width="220px" label="CHANGES">
7282
<template v-slot="rowScope">
7383
<div>
74-
<p v-if="rowScope.row.type.includes('i')">{{i18n("consent.opt-i")}}</p>
75-
<p v-if="rowScope.row.type.includes('o')">{{i18n("consent.opt-o")}} </p>
84+
<p v-if="rowScope.row.type.includes('i')" :data-test-id="'datatable-consent-history-changes-opt-in-label-' + rowScope.$index">{{i18n("consent.opt-i")}}</p>
85+
<p v-if="rowScope.row.type.includes('o')" :data-test-id="'datatable-consent-history-changes-opt-out-label-' + rowScope.$index">{{i18n("consent.opt-o")}} </p>
7686
</div>
77-
7887
</template>
79-
8088
</el-table-column>
8189
<el-table-column width="250" sortable="custom" label="CONSENT">
8290
<template v-slot="rowScope">
8391
<div>
84-
<p v-if="rowScope.row.optin.length > 0">{{i18n("consent.opt-i")}} for {{rowScope.row.optin.length}} feature(s)
92+
<p v-if="rowScope.row.optin.length > 0" :data-test-id="'datatable-consent-history-consent-opt-in-' + rowScope.$index">{{i18n("consent.opt-i")}} for {{rowScope.row.optin.length}} feature(s)
8593
</p>
86-
<p v-if="rowScope.row.optout.length > 0">{{i18n("consent.opt-o")}} from {{rowScope.row.optout.length}}
94+
<p v-if="rowScope.row.optout.length > 0" :data-test-id="'datatable-consent-history-consent-opt-out-' + rowScope.$index">{{i18n("consent.opt-o")}} from {{rowScope.row.optout.length}}
8795
feature(s)</p>
8896
</div>
89-
9097
</template>
91-
9298
</el-table-column>
9399
<el-table-column width="230" sortable="custom" prop="ts" label="TIME">
94100
<template v-slot="rowScope">
101+
<div :data-test-id="'datatable-consent-history-time-' + rowScope.$index">
95102
{{rowScope.row.time}}
96-
103+
</div>
97104
</template>
98105
</el-table-column>
99106
</template>

‎ui-tests/cypress/e2e/onboarding/onboarding.cy.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,9 +401,9 @@ describe('Complete Onboarding', () => {
401401
complianceHubMetricsPageHelpers.verifyFullDataPageElements();
402402
complianceHubMetricsPageHelpers.clickUsersTab();
403403
complianceHubUsersPageHelpers.verifyFullDataPageElements();
404+
complianceHubUsersPageHelpers.clickConsentHistoryTab();
405+
complianceHubHistoryPageHelpers.verifyFullDataPageElements();
404406
//TODO: Add the cases of the following pages
405-
//complianceHubUsersPageHelpers.clickConsentHistoryTab();
406-
//complianceHubHistoryPageHelpers.verifyFullDataPageElements();
407407
//complianceHubHistoryPageHelpers.clickExportPurgeHistoryTab();
408408
//complianceHubExportPurgePageHelpers.verifyFullDataPageElements();
409409
//navigationHelpers.goToUserManagementPage();

‎ui-tests/cypress/lib/dashboard/manage/compliance/history.js‎

Lines changed: 157 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,54 @@
1-
import complianceHistoryPageElements from "../../../../support/elements/dashboard/manage/compliance/history";
1+
import {
2+
consentHistoryPageElements,
3+
consentHistoryDataTableElements
4+
} from "../../../../support/elements/dashboard/manage/compliance/history";
5+
26

37
const verifyStaticElementsOfPage = () => {
48
cy.verifyElement({
5-
labelElement: complianceHistoryPageElements.PAGE_TITLE,
9+
labelElement: consentHistoryPageElements.PAGE_TITLE,
610
labelText: "Compliance Hub",
711
});
812

913
cy.verifyElement({
10-
labelElement: complianceHistoryPageElements.CONSENT_HISTORY_FOR_LABEL,
14+
labelElement: consentHistoryPageElements.CONSENT_HISTORY_FOR_LABEL,
1115
labelText: "Consent History for",
12-
element: complianceHistoryPageElements.CONSENT_HISTORY_FILTER_SELECT,
16+
element: consentHistoryPageElements.CONSENT_HISTORY_FILTER_SELECT,
1317
elementText: "All",
1418
});
1519

1620
cy.verifyElement({
17-
labelElement: complianceHistoryPageElements.CONSENT_HISTORY_AND_LABEL,
21+
labelElement: consentHistoryPageElements.CONSENT_HISTORY_AND_LABEL,
1822
labelText: "and",
19-
element: complianceHistoryPageElements.CONSENT_HISTORY_METRICS_FILTER_SELECT,
23+
element: consentHistoryPageElements.CONSENT_HISTORY_METRICS_FILTER_SELECT,
2024
elementText: "All",
2125
});
2226

2327
cy.verifyElement({
24-
element: complianceHistoryPageElements.HISTORY_TABLE_EXPORT_BUTTON,
28+
element: consentHistoryDataTableElements().EXPORT_AS_BUTTON,
2529
});
2630

2731
cy.verifyElement({
28-
element: complianceHistoryPageElements.HISTORY_TABLE_SEARCH_INPUT,
32+
element: consentHistoryDataTableElements().TABLE_SEARCH_INPUT,
2933
});
3034

3135
cy.verifyElement({
32-
element: complianceHistoryPageElements.TAB_METRICS,
36+
element: consentHistoryPageElements.TAB_METRICS,
3337
elementText: "Metrics",
3438
});
3539

3640
cy.verifyElement({
37-
element: complianceHistoryPageElements.TAB_USERS,
41+
element: consentHistoryPageElements.TAB_USERS,
3842
elementText: "Users",
3943
});
4044

4145
cy.verifyElement({
42-
element: complianceHistoryPageElements.TAB_CONSENT_HISTORY,
46+
element: consentHistoryPageElements.TAB_CONSENT_HISTORY,
4347
elementText: "Consent History",
4448
});
4549

4650
cy.verifyElement({
47-
element: complianceHistoryPageElements.TAB_EXPORT_PURGE_HISTORY,
51+
element: consentHistoryPageElements.TAB_EXPORT_PURGE_HISTORY,
4852
elementText: "Export/Purge History",
4953
});
5054
};
@@ -53,43 +57,175 @@ const verifyEmptyPageElements = () => {
5357

5458
verifyStaticElementsOfPage();
5559

60+
verifyConsentHistoryDataTableElements({
61+
isEmpty: true,
62+
});
63+
};
64+
65+
const verifyFullDataPageElements = () => {
66+
67+
verifyStaticElementsOfPage();
68+
69+
verifyConsentHistoryDataTableElements({
70+
isEmpty: false,
71+
});
72+
};
73+
74+
const verifyConsentHistoryDataTableElements = ({
75+
index = 0,
76+
isEmpty = false,
77+
id = null,
78+
uid = null,
79+
consentOptIn = null,
80+
consentOptOut = null,
81+
time = null,
82+
deviceId = null,
83+
optIn = null,
84+
optOut = null,
85+
device = null,
86+
appVersion = null,
87+
}) => {
88+
89+
if (isEmpty) {
90+
cy.verifyElement({
91+
element: consentHistoryDataTableElements().EMPTY_TABLE_ICON,
92+
});
93+
94+
cy.verifyElement({
95+
labelElement: consentHistoryDataTableElements().EMPTY_TABLE_TITLE,
96+
labelText: "...hmm, seems empty here",
97+
});
98+
99+
cy.verifyElement({
100+
labelElement: consentHistoryDataTableElements().EMPTY_TABLE_SUBTITLE,
101+
labelText: "No data found",
102+
});
103+
104+
return;
105+
}
106+
107+
cy.verifyElement({
108+
shouldNot: !isEmpty,
109+
labelElement: consentHistoryDataTableElements(index).ID,
110+
labelText: id,
111+
});
112+
113+
cy.verifyElement({
114+
shouldNot: !isEmpty,
115+
labelElement: consentHistoryDataTableElements(index).UID,
116+
labelText: uid,
117+
});
118+
119+
cy.verifyElement({
120+
labelElement: consentHistoryDataTableElements(index).CHANGES_OPT_IN_LABEL,
121+
labelText: "Opt in",
122+
});
123+
124+
cy.verifyElement({
125+
labelElement: consentHistoryDataTableElements(index).CHANGES_OPT_OUT_LABEL,
126+
labelText: "Opt out",
127+
});
128+
129+
cy.verifyElement({
130+
shouldNot: !isEmpty,
131+
labelElement: consentHistoryDataTableElements(index).CONSENT_OPT_IN_LABEL,
132+
labelText: consentOptIn,
133+
});
134+
135+
cy.verifyElement({
136+
shouldNot: !isEmpty,
137+
labelElement: consentHistoryDataTableElements(index).CONSENT_OPT_OUT_LABEL,
138+
labelText: consentOptOut,
139+
});
140+
141+
cy.verifyElement({
142+
shouldNot: !isEmpty,
143+
labelElement: consentHistoryDataTableElements(index).TIME,
144+
labelText: time,
145+
});
146+
147+
cy.clickElement(consentHistoryDataTableElements(index).ID, true);
148+
149+
cy.verifyElement({
150+
labelElement: consentHistoryDataTableElements(index).DEVICE_ID_LABEL,
151+
labelText: "Device ID",
152+
});
153+
154+
cy.verifyElement({
155+
shouldNot: !isEmpty,
156+
element: consentHistoryDataTableElements(index).DEVICE_ID,
157+
elementText: deviceId,
158+
});
159+
160+
cy.verifyElement({
161+
labelElement: consentHistoryDataTableElements(index).OPT_IN_LABEL,
162+
labelText: "Opt in",
163+
});
164+
165+
cy.verifyElement({
166+
shouldNot: !isEmpty,
167+
element: consentHistoryDataTableElements(index).OPT_IN_LIST,
168+
elementText: optIn,
169+
});
170+
171+
cy.verifyElement({
172+
labelElement: consentHistoryDataTableElements(index).OPT_OUT_LABEL,
173+
labelText: "Opt out",
174+
});
175+
176+
cy.verifyElement({
177+
shouldNot: !isEmpty,
178+
element: consentHistoryDataTableElements(index).OPT_OUT_LIST,
179+
elementText: optOut,
180+
});
181+
182+
cy.verifyElement({
183+
labelElement: consentHistoryDataTableElements(index).DEVICE_LABEL,
184+
labelText: "Device",
185+
});
186+
56187
cy.verifyElement({
57-
element: complianceHistoryPageElements.HISTORY_EMPTY_TABLE_ICON,
188+
shouldNot: !isEmpty,
189+
element: consentHistoryDataTableElements(index).DEVICE,
190+
elementText: device,
58191
});
59192

60193
cy.verifyElement({
61-
labelElement: complianceHistoryPageElements.HISTORY_EMPTY_TABLE_TITLE,
62-
labelText: "...hmm, seems empty here",
194+
labelElement: consentHistoryDataTableElements(index).APP_VERSION_LABEL,
195+
labelText: "App version",
63196
});
64197

65198
cy.verifyElement({
66-
labelElement: complianceHistoryPageElements.HISTORY_EMPTY_TABLE_SUBTITLE,
67-
labelText: "No data found",
199+
shouldNot: !isEmpty,
200+
element: consentHistoryDataTableElements(index).APP_VERSION,
201+
elementText: appVersion,
68202
});
69203
};
70204

71205
const clickMetricsTab = () => {
72206
cy.scrollPageToTop();
73-
cy.clickElement(complianceHistoryPageElements.TAB_METRICS);
207+
cy.clickElement(consentHistoryPageElements.TAB_METRICS);
74208
};
75209

76210
const clickUsersTab = () => {
77211
cy.scrollPageToTop();
78-
cy.clickElement(complianceHistoryPageElements.TAB_USERS);
212+
cy.clickElement(consentHistoryPageElements.TAB_USERS);
79213
};
80214

81215
const clickConsentHistoryTab = () => {
82216
cy.scrollPageToTop();
83-
cy.clickElement(complianceHistoryPageElements.TAB_CONSENT_HISTORY);
217+
cy.clickElement(consentHistoryPageElements.TAB_CONSENT_HISTORY);
84218
};
85219

86220
const clickExportPurgeHistoryTab = () => {
87221
cy.scrollPageToTop();
88-
cy.clickElement(complianceHistoryPageElements.TAB_EXPORT_PURGE_HISTORY);
222+
cy.clickElement(consentHistoryPageElements.TAB_EXPORT_PURGE_HISTORY);
89223
};
90224

91225
module.exports = {
92226
verifyEmptyPageElements,
227+
verifyFullDataPageElements,
228+
verifyConsentHistoryDataTableElements,
93229
clickMetricsTab,
94230
clickUsersTab,
95231
clickConsentHistoryTab,

0 commit comments

Comments
 (0)