Add filter route object model

3 files changed, 91 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/filter-route-object-model.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/filter-route-object-model.ts
new file mode 100644
index 0000000000..8319c53f05
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/filter-route-object-model.ts
@@ -0,0 +1,73 @@
+import { Locator, Page } from 'playwright';
+
+import { RoutePath } from '../../../../src/shared/routes';
+import { TestUtils } from '../../utils';
+import { createSelectors, FilterSelectors } from './selectors';
+
+export class FilterRouteObjectModel {
+  private readonly utils: TestUtils;
+  private readonly selectors: FilterSelectors;
+
+  constructor(page: Page, util: TestUtils) {
+    this.utils = util;
+    this.selectors = createSelectors(page);
+  }
+
+  async applyFilter() {
+    await this.selectors.applyButton().click();
+  }
+
+  async gotoSelectLocation() {
+    await this.selectors.backButton().click();
+    await this.utils.waitForRoute(RoutePath.selectLocation);
+  }
+
+  async expandProviders() {
+    const accordion = this.selectors.accordion('Providers');
+    const expanded = await this.isExpanded(accordion);
+    if (!expanded) {
+      await accordion.click();
+      await this.selectors.providersOption('All providers').waitFor({ state: 'visible' });
+    }
+  }
+
+  async collapseProviders() {
+    const accordion = this.selectors.accordion('Providers');
+    const expanded = await this.isExpanded(accordion);
+    if (expanded) await accordion.click();
+  }
+
+  async checkAllProvidersCheckbox() {
+    const allProvidersCheckbox = this.selectors.providersOption('All providers');
+    await allProvidersCheckbox.click();
+  }
+
+  async checkProviderCheckbox(provider: string) {
+    const providerCheckbox = this.selectors.providersOption(provider);
+    await providerCheckbox.click();
+  }
+
+  async expandOwnership() {
+    const accordion = this.selectors.accordion('Ownership');
+    const expanded = await this.isExpanded(accordion);
+    if (!expanded) {
+      await accordion.click();
+      await this.selectors.ownershipOption('Any').waitFor({ state: 'visible' });
+    }
+  }
+
+  async collapseOwnership() {
+    const accordion = this.selectors.accordion('Ownership');
+    const expanded = await this.isExpanded(accordion);
+    if (expanded) await accordion.click();
+  }
+
+  async selectOwnershipOption(ownership: string) {
+    await this.selectors.ownershipOption(ownership).click();
+  }
+
+  private async isExpanded(locator: Locator): Promise<boolean> {
+    const ariaExpanded = await locator.getAttribute('aria-expanded');
+    return ariaExpanded === 'true';
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/index.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/index.ts
new file mode 100644
index 0000000000..cf68b5f372
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/index.ts
@@ -0,0 +1 @@
+export * from './filter-route-object-model';
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/selectors.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/selectors.ts
new file mode 100644
index 0000000000..984e708f07
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/filter/selectors.ts
@@ -0,0 +1,17 @@
+import { Page } from 'playwright';
+
+export const createSelectors = (page: Page) => ({
+  accordion: (label: string) =>
+    page.locator('button', {
+      has: page.locator('div', { hasText: label }),
+    }),
+  applyButton: () => page.getByRole('button', { name: 'Apply' }),
+  backButton: () => page.getByRole('button', { name: 'Back' }),
+  ownershipOption: (label: string) =>
+    page.locator('button', {
+      has: page.locator('div', { hasText: label }),
+    }),
+  providersOption: (label: string) => page.getByRole('checkbox', { name: label }),
+});
+
+export type FilterSelectors = ReturnType<typeof createSelectors>;