fix: replace fragile CSS selector with data-testid in locale E2E tests (#28329)
The locale E2E tests (de->ar and de->pt-BR) were flaky because they used
a brittle CSS selector (.bg-default > div > div:nth-child(2)) to click
the language dropdown. This selector was susceptible to react-select's
internal Input wrapper element intercepting pointer events.
Changes:
- Add data-testid='locale-select' to the language Select in general settings
- Replace CSS path selectors with getByTestId('locale-select') in tests
- Replace text selector for pt-BR with getByTestId('select-option-pt-BR')
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
1 parent
a4621da2be
commit
cc01d114e6
2 files changed
+12
-17
No files matched your search
@@ -1,13 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
import { TimezoneSelect } from "@calcom/web/modules/timezone/components/TimezoneSelect";
|
||||
import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
|
||||
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
|
||||
import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
|
||||
import { formatLocalizedDateTime } from "@calcom/lib/dayjs";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { localeOptions } from "@calcom/lib/i18n";
|
||||
@@ -16,15 +10,16 @@ import type { RouterOutputs } from "@calcom/trpc/react";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import classNames from "@calcom/ui/classNames";
|
||||
import { Button } from "@calcom/ui/components/button";
|
||||
import { Form } from "@calcom/ui/components/form";
|
||||
import { Label } from "@calcom/ui/components/form";
|
||||
import { Select } from "@calcom/ui/components/form";
|
||||
import { SettingsToggle } from "@calcom/ui/components/form";
|
||||
import { Form, Label, Select, SettingsToggle } from "@calcom/ui/components/form";
|
||||
import { Icon } from "@calcom/ui/components/icon";
|
||||
import { showToast } from "@calcom/ui/components/toast";
|
||||
import { revalidateTravelSchedules } from "@calcom/web/app/cache/travelSchedule";
|
||||
|
||||
import { TimezoneSelect } from "@calcom/web/modules/timezone/components/TimezoneSelect";
|
||||
import TravelScheduleModal from "@components/settings/TravelScheduleModal";
|
||||
import { Icon } from "@calcom/ui/components/icon";
|
||||
import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
export type FormValues = {
|
||||
locale: {
|
||||
@@ -181,6 +176,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
|
||||
options={localeOptions}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
data-testid="locale-select"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { expect } from "@playwright/test";
|
||||
|
||||
import { test } from "./lib/fixtures";
|
||||
import { submitAndWaitForResponse } from "./lib/testUtils";
|
||||
|
||||
@@ -405,7 +404,7 @@ test.describe("authorized user sees changed translations (de->ar)", async () =>
|
||||
|
||||
await page.waitForLoadState("domcontentloaded");
|
||||
|
||||
await page.locator(".bg-default > div > div:nth-child(2)").first().click();
|
||||
await page.getByTestId("locale-select").click();
|
||||
await page.getByTestId("select-option-ar").click();
|
||||
|
||||
await submitAndWaitForResponse(page, "/api/trpc/me/updateProfile?batch=1", {
|
||||
@@ -465,8 +464,8 @@ test.describe("authorized user sees changed translations (de->pt-BR) [locale1]",
|
||||
await page.goto("/settings/my-account/general");
|
||||
await page.waitForLoadState("domcontentloaded");
|
||||
|
||||
await page.locator(".bg-default > div > div:nth-child(2)").first().click();
|
||||
await page.locator("text=Português (Brasil)").click();
|
||||
await page.getByTestId("locale-select").click();
|
||||
await page.getByTestId("select-option-pt-BR").click();
|
||||
|
||||
await submitAndWaitForResponse(page, "/api/trpc/me/updateProfile?batch=1", {
|
||||
action: () => page.click("[data-testid=general-submit-button]"),
|
||||
|
||||
Reference in new issue
Block a user