cleanup and fix tests

Author: laander

packages/browser-sdk/FEEDBACK.md

@@ -291,7 +291,6 @@ new ReflagClient({
           "Dans quelle mesure êtes-vous satisfait de cette fonctionnalité ?",
         QuestionPlaceholder:
           "Comment pouvons-nous améliorer cette fonctionnalité ?",
-        ScoreStatusDescription: "Choisissez une note et laissez un commentaire",
         ScoreStatusLoading: "Chargement...",
         ScoreStatusReceived: "La note a été reçue !",
         ScoreVeryDissatisfiedLabel: "Très insatisfait",

packages/browser-sdk/package.json

@@ -15,6 +15,7 @@
     "build": "tsc --project tsconfig.build.json && vite build",
     "test": "tsc --project tsconfig.json && vitest -c vitest.config.ts",
     "test:e2e": "yarn build && playwright test",
+    "test:e2e-ui": "yarn build && playwright test --ui",
     "test:ci": "tsc --project tsconfig.json && vitest run -c vitest.config.ts --reporter=default --reporter=junit --outputFile=junit.xml && yarn test:e2e",
     "coverage": "vitest run --coverage",
     "lint": "eslint .",

packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx

@@ -5,7 +5,6 @@ import { FeedbackTranslations } from "../types";
 export const DEFAULT_TRANSLATIONS: FeedbackTranslations = {
   DefaultQuestionLabel: "How satisfied are you with this feature?",
   QuestionPlaceholder: "Write a comment",
-  ScoreStatusDescription: "Pick a score and leave a comment",
   ScoreStatusLoading: "Saving score, please wait...",
   ScoreStatusReceived: "Score has been received!",
   ScoreVeryDissatisfiedLabel: "Very dissatisfied (1/5)",

packages/browser-sdk/src/feedback/ui/types.ts

@@ -47,7 +47,6 @@ export type FeedbackTranslations = {
    */
   DefaultQuestionLabel: string;
   QuestionPlaceholder: string;
-  ScoreStatusDescription: string;
   ScoreStatusLoading: string;
   ScoreStatusReceived: string;
   ScoreVeryDissatisfiedLabel: string;

packages/browser-sdk/test/e2e/feedback-widget.browser.spec.ts

@@ -25,6 +25,9 @@ function pick<T>(options: T[]): T {
   return options[Math.floor(Math.random() * options.length)];
 }
 
+const DEFAULT_TITLE = "baz";
+const DEFAULT_FLAG_KEY = "flag1";
+
 async function getOpenedWidgetContainer(
   page: Page,
   initOptions: Omit<InitOptions, "publishableKey"> = {},
@@ -54,8 +57,8 @@ async function getOpenedWidgetContainer(
       const reflag = new ReflagClient({publishableKey: "${KEY}", user: {id: "foo"}, company: {id: "bar"}, ...${JSON.stringify(initOptions ?? {})}});
       await reflag.initialize();
       await reflag.requestFeedback({
-        flagKey: "flag1",
-        title: "baz",
+        flagKey: "${DEFAULT_FLAG_KEY}",
+        title: "${DEFAULT_TITLE}",
         ...${JSON.stringify(feedbackOptions ?? {})},
       });
     })()
@@ -177,7 +180,7 @@ test("Opens a feedback widget in the bottom right by default", async ({
   const bbox = await container.locator("dialog").boundingBox();
   expect(bbox?.x).toEqual(WINDOW_WIDTH - bbox!.width - 16);
   expect(bbox?.y).toBeGreaterThan(WINDOW_HEIGHT - bbox!.height - 30); // Account for browser differences
-  expect(bbox?.y).toBeLessThan(WINDOW_HEIGHT - bbox!.height);
+  expect(bbox?.y).toBeLessThan(WINDOW_HEIGHT - bbox!.height + 10);
 });
 
 test("Opens a feedback widget in the correct position when overridden", async ({
@@ -206,7 +209,6 @@ test("Opens a feedback widget with the correct translations", async ({
   page,
 }) => {
   const translations: Partial<FeedbackTranslations> = {
-    ScoreStatusDescription: "Choisissez une note et laissez un commentaire",
     ScoreVeryDissatisfiedLabel: "Très insatisfait",
     ScoreDissatisfiedLabel: "Insatisfait",
     ScoreNeutralLabel: "Neutre",
@@ -224,7 +226,6 @@ test("Opens a feedback widget with the correct translations", async ({
   });
 
   await expect(container).toBeAttached();
-  await expect(container).toContainText(translations.ScoreStatusDescription!);
   await expect(container).toContainText(
     translations.ScoreVeryDissatisfiedLabel!,
   );
@@ -235,86 +236,6 @@ test("Opens a feedback widget with the correct translations", async ({
   await expect(container).toContainText(translations.SendButton!);
 });
 
-test("Sends a request when choosing a score immediately", async ({ page }) => {
-  const expectedScore = pick([1, 2, 3, 4, 5]);
-  let sentJSON: object | null = null;
-
-  await page.route(`${API_HOST}/feedback`, async (route) => {
-    sentJSON = route.request().postDataJSON();
-    await route.fulfill({
-      status: 200,
-      body: JSON.stringify({ feedbackId: "123" }),
-      contentType: "application/json",
-    });
-  });
-
-  const container = await getOpenedWidgetContainer(page);
-  await setScore(container, expectedScore);
-
-  await expect
-    .poll(() => sentJSON)
-    .toEqual({
-      companyId: "bar",
-      key: "flag1",
-      score: expectedScore,
-      question: "baz",
-      userId: "foo",
-      source: "widget",
-    });
-});
-
-test("Shows a success message after submitting a score", async ({ page }) => {
-  await page.route(`${API_HOST}/feedback`, async (route) => {
-    await route.fulfill({
-      status: 200,
-      body: JSON.stringify({ feedbackId: "123" }),
-      contentType: "application/json",
-    });
-  });
-
-  const container = await getOpenedWidgetContainer(page);
-
-  await expect(
-    container.getByText(DEFAULT_TRANSLATIONS.ScoreStatusDescription),
-  ).toHaveCSS("opacity", "1");
-  await expect(
-    container.getByText(DEFAULT_TRANSLATIONS.ScoreStatusReceived),
-  ).toHaveCSS("opacity", "0");
-
-  await setScore(container, 3);
-
-  await expect(
-    container.getByText(DEFAULT_TRANSLATIONS.ScoreStatusDescription),
-  ).toHaveCSS("opacity", "0");
-  await expect(
-    container.getByText(DEFAULT_TRANSLATIONS.ScoreStatusReceived),
-  ).toHaveCSS("opacity", "1");
-});
-
-test("Shows the comment field after submitting a score", async ({ page }) => {
-  await page.route(`${API_HOST}/feedback`, async (route) => {
-    await route.fulfill({
-      status: 200,
-      body: JSON.stringify({ feedbackId: "123" }),
-      contentType: "application/json",
-    });
-  });
-
-  const container = await getOpenedWidgetContainer(page);
-
-  await expect(container.locator(".form-expanded-content")).toHaveCSS(
-    "opacity",
-    "0",
-  );
-
-  await setScore(container, 1);
-
-  await expect(container.locator(".form-expanded-content")).toHaveCSS(
-    "opacity",
-    "1",
-  );
-});
-
 test("Sends a request with both the score and comment when submitting", async ({
   page,
 }) => {
@@ -557,6 +478,7 @@ test("Submits feedback with score-only inputMode", async ({ page }) => {
   );
 
   await setScore(container, expectedScore);
+  await submitForm(container);
 
   await expect
     .poll(() => sentJSON)