Skip to content

[PW] - DSM tissue request flow #2211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

GiCharkviani
Copy link
Contributor

@GiCharkviani GiCharkviani commented Sep 13, 2023

PEPPER-1125

Video from .spec file:

video.webm

@GiCharkviani GiCharkviani changed the title [PW] = DSM tissue request flow [PW] - DSM tissue request flow Sep 13, 2023
@@ -0,0 +1,294 @@
import {StudyEnum} from '../../../dsm/component/navigation/enums/selectStudyNav-enum';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't review .spec file.

Copy link
Contributor

@aweng98 aweng98 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great. A lot of new classes and functions. I'd have written only what I needed for a new test and not write all at one time. :)
Took a first pass. Maybe we can talk about this tomorrow morning. Because I think we should pick out only needed files for a new test. Merge everything without accompanied tests is just confusing.

Comment on lines 27 to 34
if (isInputVisible) {
await this.fillField(value, i);
selectCheckbox && await this.selectCheckbox(i);
} else {
await this.addField();
await this.fillField(value, i);
selectCheckbox && await this.selectCheckbox(i);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about this?

        if (isInputVisible) {
          await this.addField();
        } 
        await this.fillField(value, i);
        selectCheckbox && await this.selectCheckbox(i);
        

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will improve that this way:

if (!isInputVisible) {
   await this.addField();
}
await this.fillField(value, i);
selectCheckbox && await this.selectCheckbox(i);

Comment on lines 100 to 102
public get maxLength(): Promise<string | null> {
return this.toLocator().getAttribute('maxlength');
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

async and get modifier are incompatible. It should be public async maxLength(): Promise<string | null>. If you don't use async modifier, eslint won't find error when calling functions not using await.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, IDE can detect if you didn't use await, like so:

Screenshot 2023-09-14 at 13 09 30

return data?.trim() as string;
}

public async fillFaxSentDates(date1: FillDate, date2?: FillDate, date3?: FillDate): Promise<void> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you want use rest parameter syntax: fillFaxSentDates(...date: FillDate)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe I'd like to keep it as it is since it appears more readable to me. With just three parameters to define, there's no need for looping through them. However, I do acknowledge that the rest parameter is a fantastic feature in JavaScript.

import Input from '../../../dss/component/input';

export default class OncHistoryTable extends Table {
private readonly tissueInformationPage = new TissueInformationPage(this.page);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I saw something else similar like this recently and I had to change because we should instatiate a new object like this outside the constructor. tissueInformationPage = new TissueInformationPage(this.page); should be inside the constructor because this.page is created when the constructor is running.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't encounter any issues with it, which is why I left it as is. However, I do acknowledge that your suggestion is a better approach, so I'll make the necessary adjustments. Thank you for pointing that out.

Comment on lines 34 to 40
public async selectDeselectRow(index: number): Promise<void> {
const selectRowCheckbox = this.selectRowCheckbox(index);
await expect(selectRowCheckbox, 'Select row checkbox is not visible').toBeVisible();
await selectRowCheckbox.click();
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function is little confusing to me. Is it deselect or select a checkbox?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact, it has the capability to perform both actions. I hadn't initially implemented the functionality to check whether the checkbox is selected or not, but I now understand your perspective and agree with it. I will modify it into a select method that includes the necessary checks. Thank you for the suggestion.

await this.fillDate(faxSentLocator, date);
}

private async fillDate(root: Locator, {date, today}: FillDate): Promise<void> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using calendar to select date is time consuming and slow. Can we just type in date string in input field? I'd code this if it's for a date-picker test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the time being, let's retain it in its current state to align with the DSM flow, as selecting the date provides more immediate benefits.

const checkbox = new Checkbox(this.page, {root});
const isChecked = await checkbox.isChecked();
const isDisabled = await checkbox.isCheckboxDisabled();
if (check && !isChecked && !isDisabled) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should be checking isDisabled in this function because if user wants to check the checkbox. It is expected to be enabled. If it is disabled, nothing will happen (no error) and user assumes check was sucessful.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary due to the buggy flow on this page. We might come across a disabled checkbox unexpectedly, so having this in place helps us handle such scenarios.

}

private get participantDynamicInformationTableXPath(): string {
return `${this.pageXPath}/div/div[last()]/table[not(contains(@class, 'table'))]`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brittle xpath. I'd expect this is going to be a problem in future.
I noticed you're not using any functions from table.ts when constructing xpath. Is there anying I can do to help?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, please assist in making your table component more versatile by ensuring it's compatible with DSM table components as well!

await this.checkCheckbox(this.problemsWithTissueUnableToObtainCheckbox, unableToObtainSelection);
}

public async selectGender(gender: 'Male' | 'Female'): Promise<void> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have more gender types now than just two.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw there only 2

Copy link
Contributor

@aweng98 aweng98 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻 Thank you for your patience.

Comment on lines +60 to +61
private async addField(): Promise<void> {
await this.addBtn.click();
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is a one liner function, it can be replaced by rename addBtn() to addFieldBtn()

await this.addFieldBtn.click();

@@ -39,6 +41,17 @@ export async function waitForResponse(page: Page, { uri, status = 200, timeout }
}
}

export async function waitForRequest(page: Page, { uri, timeout }: WaitForRequest): Promise<Request> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain requirement. Why wait for a request before click?

@aweng98 aweng98 force-pushed the PW-DSM-Tissue-request-flow branch from fdc3843 to bb4c6b2 Compare September 15, 2023 13:49
Copy link
Contributor

@aweng98 aweng98 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. No issue with any tests on CircleCI.

@GiCharkviani GiCharkviani marked this pull request as ready for review September 20, 2023 13:15
@@ -33,6 +33,8 @@ export class Search {
public async dates(columnName: string, { from: fromValue, to: toValue, additionalFilters }: Partial<DateConfig>): Promise<void> {
await this.setAdditionalFilters(columnName, additionalFilters);

if (!fromValue && !toValue) { return; }
Copy link
Contributor

@aweng98 aweng98 Sep 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good check!
Question: check should be moved up to be the first line of code, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks.
No, because additional filters can still be applied.

Copy link
Contributor

@aweng98 aweng98 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also rename directory name from playwright-e2e/tests/dsm/tissueRequestFlow/ to playwright-e2e/tests/dsm/tissue-request/?
LGTM

const oncHistoryTab = await participantPage.clickTab<OncHistoryTab>(TabEnum.ONC_HISTORY);
const oncHistoryTable = oncHistoryTab.table;

await test.step('Update Onc History data - Facility', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format indentation is wrong in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tab size/whitespaces on new line. File looks okay now but I saw 4 whitespaces before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants