fix ember-cli-page-object deprecations (#674)

* fix ember-cli-page-object deprecations

* make linter happy
This commit is contained in:
Jeldrik Hanschke 2023-10-15 23:26:18 +02:00 committed by GitHub
parent 871e970ba0
commit 0f94d81ad4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 146 additions and 100 deletions

View file

@ -5,7 +5,7 @@
{{#if @isFindADate}}
{{! Need to disable block indentation rule cause there shouldn't be a space between date and dot }}
{{! template-lint-disable block-indentation }}
<strong class="best-option-value">
<strong data-test-best-option={{@evaluationBestOption.option.title}}>
{{!
TODO: Simplify to dateStyle="full" and timeStyle="short" after upgrading to Ember Intl v6
}}
@ -22,7 +22,7 @@
{{! template-lint-enable block-indentation }}
{{else}}
<strong
class="best-option-value"
data-test-best-option={{@evaluationBestOption.option.title}}
>{{@evaluationBestOption.option.title}}</strong>.
{{/if}}

View file

@ -59,6 +59,7 @@
}}
@model={{object-at index @model.formData.selections}}
@property="value"
data-test-form-element={{concat "option-" option.title}}
/>
{{else}}
<form.element

View file

@ -14,7 +14,7 @@ self.deprecationWorkflow.config = {
{ handler: 'silence', matchId: 'ember-modifier.function-based-options' },
{ handler: 'silence', matchId: 'ember-cli-mirage.miragejs.import' },
{ handler: 'silence', matchId: 'ember.link-to.tag-name' },
{ handler: 'silence', matchId: 'ember-cli-page-object.multiple' },
{ handler: 'throw', matchId: 'ember-cli-page-object.multiple' },
{ handler: 'silence', matchId: 'autotracking.mutation-after-consumption' },
{ handler: 'silence', matchId: 'ember-runtime.deprecate-copy-copyable' },
],

View file

@ -3,6 +3,7 @@ import {
currentURL,
currentRouteName,
fillIn,
find,
findAll,
settled,
visit,
@ -201,14 +202,20 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
dates.map((date) =>
Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(date)
),
'options are correctly labeled'
);
assert.deepEqual(
pagePollParticipation.options().answers,
Array.from(
find('[data-test-form-element^="option"]').querySelectorAll(
'.radio label'
)
).map((el) => el.textContent.trim()),
[
t('answerTypes.yes.label').toString(),
t('answerTypes.no.label').toString(),
@ -352,7 +359,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
['option a', 'option b', 'option c'],
'options are labeled correctly'
);
@ -378,7 +387,7 @@ module('Acceptance | create a poll', function (hooks) {
await pageCreateOptions.next();
assert.equal(currentRouteName(), 'create.options-datetime');
assert.deepEqual(
pageCreateOptionsDatetime.days().labels,
findAll('[data-test-day] label').map((el) => el.textContent.trim()),
days.map((day) =>
Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)
),
@ -406,7 +415,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
@ -441,7 +452,7 @@ module('Acceptance | create a poll', function (hooks) {
await pageCreateOptions.next();
assert.equal(currentRouteName(), 'create.options-datetime');
assert.deepEqual(
pageCreateOptionsDatetime.days().labels,
findAll('[data-test-day] label').map((el) => el.textContent.trim()),
[Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)],
'time inputs having days as label'
);
@ -517,7 +528,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
@ -548,7 +561,7 @@ module('Acceptance | create a poll', function (hooks) {
await pageCreateOptions.next();
assert.equal(currentRouteName(), 'create.options-datetime');
assert.deepEqual(
pageCreateOptionsDatetime.days().labels,
findAll('[data-test-day] label').map((el) => el.textContent.trim()),
[Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)],
'time inputs having days as label'
);
@ -570,7 +583,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)],
'options are correctly labeled'
);
@ -593,7 +608,7 @@ module('Acceptance | create a poll', function (hooks) {
await pageCreateOptions.next();
assert.equal(currentRouteName(), 'create.options-datetime');
assert.deepEqual(
pageCreateOptionsDatetime.days().labels,
findAll('[data-test-day] label').map((el) => el.textContent.trim()),
[Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)],
'time inputs having days as label'
);
@ -616,7 +631,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
@ -743,7 +760,9 @@ module('Acceptance | create a poll', function (hooks) {
await click('button[type="submit"]');
assert.equal(currentRouteName(), 'poll.participation');
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
@ -803,7 +822,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
['option a'],
'options are labeled correctly'
);
@ -828,7 +849,7 @@ module('Acceptance | create a poll', function (hooks) {
await pageCreateOptions.next();
assert.equal(currentRouteName(), 'create.options-datetime');
assert.deepEqual(
pageCreateOptionsDatetime.days().labels,
findAll('[data-test-day] label').map((el) => el.textContent.trim()),
days.map((day) =>
Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(day)
),
@ -879,7 +900,9 @@ module('Acceptance | create a poll', function (hooks) {
'poll description is correct'
);
assert.deepEqual(
pagePollParticipation.options().labels,
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(days[0]),
Intl.DateTimeFormat('en-US', {

View file

@ -1,11 +1,10 @@
import { currentRouteName, visit } from '@ember/test-helpers';
import { currentRouteName, find, findAll, visit } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { setupIntl, t } from 'ember-intl/test-support';
import switchTab from 'croodle/tests/helpers/switch-tab';
import pollParticipate from 'croodle/tests/helpers/poll-participate';
import PollParticipationPage from 'croodle/tests/pages/poll/participation';
import PollEvaluationPage from 'croodle/tests/pages/poll/evaluation';
module('Acceptance | legacy support', function (hooks) {
@ -100,24 +99,32 @@ module('Acceptance | legacy support', function (hooks) {
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
assert.equal(currentRouteName(), 'poll.participation');
assert.deepEqual(PollParticipationPage.options().labels, [
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-24T17:00')),
Intl.DateTimeFormat('en-US', { timeStyle: 'short' }).format(
new Date('2015-12-24T19:00')
),
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-31T22:59')),
]);
assert.deepEqual(PollParticipationPage.options().answers, [
yesLabel,
maybeLabel,
noLabel,
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-24T17:00')),
Intl.DateTimeFormat('en-US', { timeStyle: 'short' }).format(
new Date('2015-12-24T19:00')
),
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-31T22:59')),
]
);
assert.deepEqual(
Array.from(
find('[data-test-form-element^="option"]').querySelectorAll(
'.radio label'
)
).map((el) => el.textContent.trim()),
[yesLabel, maybeLabel, noLabel]
);
await switchTab('evaluation');
assert.equal(currentRouteName(), 'poll.evaluation');
@ -184,11 +191,12 @@ module('Acceptance | legacy support', function (hooks) {
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
assert.equal(currentRouteName(), 'poll.participation');
assert.deepEqual(PollParticipationPage.options().labels, [
'apple pie',
'pecan pie',
'plum pie',
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
['apple pie', 'pecan pie', 'plum pie']
);
await switchTab('evaluation');
assert.equal(currentRouteName(), 'poll.evaluation');

View file

@ -2,6 +2,7 @@ import {
click,
currentURL,
currentRouteName,
findAll,
visit,
} from '@ember/test-helpers';
import { module, test } from 'qunit';
@ -9,7 +10,6 @@ import { setupApplicationTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';
import switchTab from 'croodle/tests/helpers/switch-tab';
import pageParticipation from 'croodle/tests/pages/poll/participation';
import pageEvaluation from 'croodle/tests/pages/poll/evaluation';
import { DateTime } from 'luxon';
import { triggerCopySuccess } from 'ember-cli-clipboard/test-support';
@ -62,10 +62,12 @@ module('Acceptance | view poll', function (hooks) {
});
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
assert.deepEqual(pageParticipation.options().labels, [
'Saturday, December 12, 2015',
'Friday, January 1, 2016',
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
['Saturday, December 12, 2015', 'Friday, January 1, 2016']
);
});
test('view a poll with dates and times', async function (assert) {
@ -87,14 +89,19 @@ module('Acceptance | view poll', function (hooks) {
});
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
assert.deepEqual(pageParticipation.options().labels, [
// full date
'Saturday, December 12, 2015 at 11:11 AM',
// only time cause day is repeated
'1:13 PM',
// full date cause day changed
'Friday, January 1, 2016 at 11:11 AM',
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
// full date
'Saturday, December 12, 2015 at 11:11 AM',
// only time cause day is repeated
'1:13 PM',
// full date cause day changed
'Friday, January 1, 2016 at 11:11 AM',
]
);
assert.notOk(
pageParticipation.showsExpirationWarning,
'does not show an expiration warning if poll will not expire in next weeks'
@ -143,27 +150,35 @@ module('Acceptance | view poll', function (hooks) {
await click(
'[data-test-modal="choose-timezone"] [data-test-button="use-local-timezone"]'
);
assert.deepEqual(pageParticipation.options().labels, [
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2016-01-01T11:11:00.000Z')),
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2016-01-01T11:11:00.000Z')),
]
);
assert
.dom('[data-test-modal="choose-timezone"]')
.doesNotExist('modal is closed');
await switchTab('evaluation');
assert.deepEqual(pageEvaluation.preferedOptions, [
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
]);
assert.deepEqual(
findAll('[data-test-best-option]').map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
]
);
});
test('view a poll while timezone differs from the one poll got created in and choose poll timezone', async function (assert) {
@ -208,30 +223,38 @@ module('Acceptance | view poll', function (hooks) {
await click(
'[data-test-modal="choose-timezone"] [data-test-button="use-poll-timezone"]'
);
assert.deepEqual(pageParticipation.options().labels, [
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2016-01-01T11:11:00.000Z')),
]);
assert.deepEqual(
findAll(
`[data-test-form-element^="option"] label:not(.custom-control-label)`
).map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2016-01-01T11:11:00.000Z')),
]
);
assert
.dom('[data-test-modal="choose-timezone"]')
.doesNotExist('modal is closed');
await switchTab('evaluation');
assert.deepEqual(pageEvaluation.preferedOptions, [
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
]);
assert.deepEqual(
findAll('[data-test-best-option]').map((el) => el.textContent.trim()),
[
Intl.DateTimeFormat('en-US', {
timeZone: timezonePoll,
dateStyle: 'full',
timeStyle: 'short',
}).format(new Date('2015-12-12T11:11:00.000Z')),
]
);
});
test('shows error page if poll does not exist', async function (assert) {

View file

@ -8,10 +8,6 @@ let { clickable, collection, fillable, hasClass, text } = PageObject;
export default PageObject.create(
assign({}, defaultsForCreate, {
days: collection({
itemScope: '.form-group',
labels: text('label:not(.sr-only)', { multiple: true }),
}),
times: collection({
itemScope: '.form-group',
item: {

View file

@ -11,9 +11,6 @@ export default create(
label: text(''),
}
),
preferedOptions: text('.best-options .best-option-value', {
multiple: true,
}),
participants: collection(
'[data-test-table-of="participants"] [data-test-participant]',
{

View file

@ -13,12 +13,10 @@ export default PageObject.create(
name: fillable('.name input'),
nameHasFocus: hasFocus('.name input'),
options: collection({
answers: text('.selections .form-group:eq(0) .radio', { multiple: true }),
itemScope: '.selections .form-group',
item: {
label: text('label'),
},
labels: text('.selections .form-group > label', { multiple: true }),
}),
title: text('h2.title'),
// use as .visit({ encryptionKey: ??? })