test: Backporting timer/stopwatch test to 2.7 (#20954)

* backporting timer test

* adding test on ci
This commit is contained in:
Gabriel Luiz Porfirio 2024-08-21 14:56:06 -03:00 committed by GitHub
parent ff0b2f33b6
commit 3dd588d704
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 153 additions and 1 deletions

View File

@ -268,6 +268,7 @@ class ActionsDropdown extends PureComponent {
: intl.formatMessage(intlMessages.activateTimerStopwatchLabel),
key: this.timerId,
onClick: () => this.handleTimerClick(),
dataTest: 'timerStopWatchFeature',
});
}

View File

@ -242,11 +242,13 @@ class Timer extends Component {
color={color}
label={intl.formatMessage(label)}
onClick={() => this.handleControlClick()}
data-test="startStopTimer"
/>
<Styled.TimerControlButton
color="secondary"
label={intl.formatMessage(intlMessages.reset)}
onClick={() => Service.resetTimer()}
data-test="resetTimerStopWatch"
/>
</Styled.TimerControls>
);
@ -342,6 +344,7 @@ class Timer extends Component {
max="59"
min="0"
onChange={(event) => this.handleOnMinutesChange(event)}
data-test="minutesInput"
/>
<Styled.StopwatchTimeInputLabel>
{intl.formatMessage(intlMessages.minutes)}
@ -357,6 +360,7 @@ class Timer extends Component {
max="59"
min="0"
onChange={(event) => this.handleOnSecondsChange(event)}
data-test="secondsInput"
/>
<Styled.StopwatchTimeInputLabel>
{intl.formatMessage(intlMessages.seconds)}
@ -386,6 +390,7 @@ class Timer extends Component {
<Styled.TimerCurrent
aria-hidden
ref={this.timeRef}
data-test="timerCurrent"
>
{this.getTime()}
</Styled.TimerCurrent>
@ -394,11 +399,13 @@ class Timer extends Component {
label={intl.formatMessage(intlMessages.stopwatch)}
onClick={() => this.handleSwitchToStopwatch()}
color={stopwatch ? 'primary' : 'secondary'}
data-test="stopwatchButton"
/>
<Styled.TimerSwitchButton
label={intl.formatMessage(intlMessages.timer)}
onClick={() => this.handleSwitchToTimer()}
color={!stopwatch ? 'primary' : 'secondary'}
data-test="timerButton"
/>
</Styled.TimerType>
{this.renderTimer()}

View File

@ -435,6 +435,7 @@ class Indicator extends Component {
role="button"
tabIndex={0}
onClick={isModerator ? onClick : null}
data-test="timeIndicator"
>
<Styled.TimerContent>
<Styled.TimerIcon>

View File

@ -159,6 +159,20 @@ exports.selectCameraQualityId = 'select[id="setQuality"]';
exports.virtualBackgrounds = 'div[data-test="virtualBackground"]';
exports.learningDashboard = 'li[data-test="learningDashboard"]';
// Timer
exports.timerContainer = 'div[data-test="timerContainer"]';
exports.stopwatchContainer = 'div[data-test="stopwatchContainer"]';
exports.timerStopwatchFeature = 'li[data-test="timerStopWatchFeature"]';
exports.timerCurrent = 'span[data-test="timerCurrent"]';
exports.startStopTimer = 'button[data-test="startStopTimer"]';
exports.resetTimerStopwatch = 'button[data-test="resetTimerStopWatch"]';
exports.timerButton = 'button[data-test="timerButton"]';
exports.timerIndicator = 'div[data-test="timeIndicator"]';
exports.stopwatch = 'button[data-test="stopwatchButton"]';
exports.hoursInput = 'input[data-test="hoursInput"]';
exports.minutesInput = 'input[data-test="minutesInput"]';
exports.secondsInput = 'input[data-test="secondsInput"]';
// Notes
exports.sharedNotes = 'div[data-test="sharedNotes"]';
exports.hideNotesLabel = 'button[data-test="hideNotesLabel"]';

View File

@ -127,7 +127,7 @@ class Page {
}
async closeAudioModal() {
await this.waitForSelector(e.audioModal, ELEMENT_WAIT_LONGER_TIME);
await this.waitForSelector(e.audioModal, 20000);
await this.waitAndClick(e.closeModal);
}

View File

@ -0,0 +1,108 @@
const { MultiUsers } = require('./multiusers');
const { timeInSeconds } = require('./util');
const { expect } = require('@playwright/test');
const { sleep } = require('../core/helpers');
const e = require('../core/elements');
class Timer extends MultiUsers {
constructor(browser, context) {
super(browser, context);
}
async stopwatchTest() {
await this.openTimerAndStopwatch();
const timerCurrentLocator = this.modPage.getLocator(e.timerCurrent);
const timerIndicatorLocator = this.modPage.getLocator(e.timerIndicator);
// compare initial values of the stopwatch elements after 2 seconds running
const initialValueStopWatch = await timeInSeconds(timerCurrentLocator);
const initialValueStopWatchIndicator = await timeInSeconds(timerIndicatorLocator);
await this.modPage.hasText(e.timerCurrent, /00:00/);
await this.clickOnTimerControl();
await sleep(5000);
await expect(await timeInSeconds(timerCurrentLocator)).toBeGreaterThan(initialValueStopWatch);
await expect(await timeInSeconds(timerIndicatorLocator)).toBeGreaterThan(initialValueStopWatchIndicator);
// stop the stopwatch and check if the values are the same after 2 seconds
await this.clickOnTimerControl(false);
const stopWatchValueStopped = await timeInSeconds(timerCurrentLocator);
const stopWatchIndicatorValueStopped = await timeInSeconds(timerIndicatorLocator);
await sleep(2000);
await expect(await timeInSeconds(timerCurrentLocator)).toBe(stopWatchValueStopped);
await expect(await timeInSeconds(timerCurrentLocator)).toBe(stopWatchIndicatorValueStopped);
// reset a stopped stopwatch
await this.modPage.waitAndClick(e.resetTimerStopwatch);
await this.modPage.hasText(e.timerCurrent, /00:00/);
await this.modPage.hasText(e.timerIndicator, /00:00/);
// reset a running stopwatch and check if the values are reset
await this.clickOnTimerControl();
await this.modPage.hasText(e.timerCurrent, /00:02/);
await this.modPage.waitAndClick(e.resetTimerStopwatch);
await expect(this.modPage.getLocator(e.startStopTimer)).toHaveAttribute('color', 'danger');
await this.modPage.hasText(e.timerCurrent, /00:00/);
await this.modPage.hasText(e.timerIndicator, /00:00/);
}
async timerTest() {
await this.openTimerAndStopwatch();
await this.modPage.waitAndClick(e.timerButton);
await this.modPage.hasElement(e.timerCurrent);
const timerCurrentLocator = this.modPage.getLocator(e.timerCurrent);
const timerIndicatorLocator = this.modPage.getLocator(e.timerIndicator);
// check for initial values
await this.modPage.hasText(e.timerCurrent, /05:00/);
await this.modPage.hasValue(e.minutesInput, '05');
// start timer and check the current values
await this.modPage.getLocator(e.secondsInput).press('Backspace');
await this.modPage.type(e.secondsInput, '4');
await this.clickOnTimerControl();
await this.modPage.hasText(e.timerCurrent, /05:01/);
await this.modPage.hasText(e.timerIndicator, /05:01/);
// change input value and check if the timer is updated
await this.clickOnTimerControl(false);
await this.modPage.getLocator(e.secondsInput).press('Backspace');
await this.modPage.type(e.secondsInput, '50');
await this.clickOnTimerControl();
await this.modPage.hasText(e.timerCurrent, /04:56/);
await this.modPage.hasText(e.timerIndicator, /04:56/);
// reset an active timer and check if the values are set to the previous values
await this.clickOnTimerControl();
await sleep(2000);
await this.modPage.waitAndClick(e.resetTimerStopwatch);
await this.modPage.hasText(e.timerCurrent, /05:00/);
await this.modPage.hasText(e.timerIndicator, /05:00/);
// check if the timer stops when clicking on the timer indicator
await this.clickOnTimerControl();
const timerValueAfterStartingTimer = await timeInSeconds(timerCurrentLocator);
const timerIndicatorValueAfterStartingTimer = await timeInSeconds(timerIndicatorLocator);
await this.modPage.waitAndClick(e.timerIndicator);
await expect(timerValueAfterStartingTimer).toBe(await timeInSeconds(timerCurrentLocator));
await expect(timerIndicatorValueAfterStartingTimer).toBe(await timeInSeconds(timerIndicatorLocator));
}
async openTimerAndStopwatch() {
await this.modPage.waitForSelector(e.whiteboard);
await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.timerStopwatchFeature);
await this.modPage.hasElement(e.timerCurrent);
}
async clickOnTimerControl(isStarting = true) {
await this.modPage.waitAndClick(e.startStopTimer);
const expectedColor = isStarting ? 'danger' : 'primary';
await expect(
this.modPage.getLocator(e.startStopTimer),
`should switch the button color after ${isStarting ? 'starting' : 'stopping'} the timer`
).toHaveAttribute('color', expectedColor);
}
}
exports.Timer = Timer;

View File

@ -4,6 +4,7 @@ const { MultiUsers } = require('./multiusers');
const { GuestPolicy } = require('./guestPolicy');
const { LockViewers } = require('./lockViewers');
const { MobileDevices } = require('./mobileDevices');
const { Timer } = require('./timer');
const motoG4 = devices['Moto G4'];
const iPhone11 = devices['iPhone 11'];
@ -27,6 +28,18 @@ test.describe.parallel('User', () => {
await multiusers.initModPage(page);
await multiusers.toggleUserList();
});
test('Stopwatch @ci', async ({ browser, context, page })=> {
const timer = new Timer(browser, context);
await timer.initModPage(page, true);
await timer.stopwatchTest();
});
test('Timer @ci', async ({ browser, context, page })=> {
const timer = new Timer(browser, context);
await timer.initModPage(page, true);
await timer.timerTest();
});
});
test.describe.parallel('List', () => {

View File

@ -44,6 +44,13 @@ async function drawArrow(test) {
await test.page.mouse.up();
}
async function timeInSeconds(locator) {
const text = await locator.innerText();
const [hours, minutes, seconds] = text.split(':').map(Number);
const timeInSeconds = hours * 3600 + minutes * 60 + seconds;
return timeInSeconds;
}
exports.setStatus = setStatus;
exports.openLockViewers = openLockViewers;
exports.setGuestPolicyOption = setGuestPolicyOption;
@ -51,3 +58,4 @@ exports.checkAvatarIcon = checkAvatarIcon;
exports.checkIsPresenter = checkIsPresenter;
exports.checkMutedUsers = checkMutedUsers;
exports.drawArrow = drawArrow;
exports.timeInSeconds = timeInSeconds;