Menguji dengan Penulis Drama: Gunakan Terjemahan iext dalam Ujian, tetapi bukan `t(&#key&#)`

Aplikasi setempat yang menguji E2E boleh menjadi mencabar, kunci terjemahan boleh menjadikan kod ujian lebih sukar dibaca dan diselenggara. Artikel ini menunjukkan cara untuk menguji terjemahan i18next dalam apl React menggunakan Playwright, dengan pendekatan ringkas yang mengelakkan kunci terjemahan. Idea ini boleh digunakan dalam mana-mana projek dengan perpustakaan i18next atau serupa.

Pendekatan ini membina konsep daripada artikel saya sebelum ini tentang menggunakan lekapan Playwright untuk kebenaran dalam aplikasi RBAC (Menguji dengan Playwright: Membuat Keizinan Kurang Menyakitkan dan Lebih Boleh Dibaca).

Berikut ialah contoh praktikal tentang penampilannya dalam ujian:

const LOCALES = ["en", "es", "zh"];

describe("Author page", () => {
  for (let locale of LOCALES) {
    test(`it has a link to articles. {locale: ${locale}}`, async ({ page, tkey }) => {
      await page.goto("/authors/123");
      const link = await page.getByRole("link").nth(0).textContent();
      expect(link).toBe(tkey("Mis articulos", "menu"));
    });
  }
});

Konsep utama di sini ialah menggunakan frasa sebenar dan bukannya kunci i18n untuk terjemahan. Pendekatan tradisional sering menggunakan kunci terjemahan, yang mungkin sukar dibaca. Contohnya: expect(link).toBe(t("menu.current_user_articles_links");). Ini bercanggah dengan prinsip menulis ujian yang mudah dibaca.

Pelaksanaan: Menukar Kunci Terjemahan dengan Frasa

Pelaksanaan berkisar menggunakan frasa yang sepadan dengan kunci terjemahan dalam ujian. Berikut ialah contoh fail terjemahan biasa:

{
  "en": {
    "menu": {
      "current_user_articles_link": "My articles"
    }
  },
  "es": {
    "menu": {
      "current_user_articles_link": "Mis articulos"
    }
  },
  "zh": {
    "menu": {
      "current_user_articles_link": "我的文章"
    }
  }
}

Kami akan mengubahnya menjadi format JSON yang ditukar di mana frasa dipetakan ke kunci sepadannya (menggunakan bahasa Sepanyol sebagai bahasa utama dalam contoh ini):

{
  "Mis articulos": "menu.current_user_articles_link"
}

Untuk mencapai transformasi ini, kami akan mencipta fungsi utiliti yang menukar kunci dan nilai dalam fail JSON. Berikut ialah pelaksanaan menggunakan TypeScript dan Deno:

import { readdir, readFile, writeFile } from 'node:fs/promises';
import { join } from 'node:path';

const CONSTANTS = {
  DIRECTORY_PATH: 'app/public/locale/es', // Path to locale language files
  SWAPPED_FILE_PATH: 'e2e/fixtures/i18n/es_swapped.json', // Output path for swapped JSON
  FILE_ENCODING: 'utf8',
} as const;

interface TranslationObject {
  [key: string]: string | TranslationObject;
}
type SwappedTranslations = Record<string record string>>;

function swapKeysAndValues(obj: TranslationObject): Record<string string> {
  const swappedObject: Record<string string> = {};

  function traverseObj(value: unknown, path = ''): void {
    if (value && typeof value === 'object') {
      for (const [key, val] of Object.entries(value)) {
        traverseObj(val, path ? `${path}.${key}` : key);
      }
    } else if (typeof value === 'string') {
      swappedObject[value] = path;
    }
  }

  traverseObj(obj);
  return swappedObject;
}

const JSON_EXTENSION_REGEX = /\.json$/;

async function buildJsonWithNamespaces(): Promise<void> {
  try {
    const files = await readdir(CONSTANTS.DIRECTORY_PATH);
    const result: SwappedTranslations = {};

    for (const file of files) {
      const filePath = join(CONSTANTS.DIRECTORY_PATH, file);
      const fileContent = await readFile(filePath, CONSTANTS.FILE_ENCODING);
      const parsedFileContent = JSON.parse(fileContent) as TranslationObject;
      const swappedContent = swapKeysAndValues(parsedFileContent);
      const key = file.replace(JSON_EXTENSION_REGEX, '');

      result[key] = swappedContent;
    }

    await writeFile(
      CONSTANTS.SWAPPED_FILE_PATH,
      JSON.stringify(result, null, 2),
      CONSTANTS.FILE_ENCODING,
    );

    console.info('✅ Successfully generated swapped translations');
  } catch (error) {
    console.error(
      '❌ Failed to generate swapped translations:',
      error instanceof Error ? error.message : error,
    );
    process.exit(1);
  }
}

console.info('? Converting locale to swapped JSON...');
buildJsonWithNamespaces();
</void></string></string></string>

Jalankan skrip ini menggunakan: deno run --allow-read --allow-write path_to_swap.ts

Menyediakan i18n untuk Penulis Drama

Sekarang mari kita buat lekapan untuk i18n dalam Dramawan. Pelaksanaan ini diilhamkan oleh pustaka drama-i18next-fixture, tetapi dengan pengubahsuaian tersuai untuk kawalan yang lebih baik:

import * as fs from "node:fs";
import path from "node:path";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import { test as base } from "@playwright/test";
import { createInstance, type i18n, type TFunction } from "i18next";

const CONFIG = {
  TRANSLATIONS_PATH: "translations_path_to_files/or_api_endpoint",
  SWAPPED_TRANSLATIONS_PATH: "e2e/fixtures/i18n/es_swapped.json",
  LOCAL_STORAGE_KEY: "locale",
  SUPPORTED_LANGUAGES: ["es", "en", "zh"] as const,
  DEFAULT_LANGUAGE: "es",
  NAMESPACES: ["shared", "menu"] as const,
  DEFAULT_NS: "shared",
} as const;

const data = fs.existsSync(CONFIG.SWAPPED_TRANSLATIONS_PATH)
  ? JSON.parse(fs.readFileSync(CONFIG.SWAPPED_TRANSLATIONS_PATH, "utf8"))
  : {};

export function findTranslationByKey(
  key: string,
  namespace: string,
): string | undefined {
  const value = data[namespace][key];
  if (value && typeof value === "string") return value;

  throw new Error(
    `? Translation not found for the namespace "${namespace}" and key "${key}"`,
  );
}

type SupportedLanguage = (typeof CONFIG.SUPPORTED_LANGUAGES)[number];
type Namespace = (typeof CONFIG.NAMESPACES)[number];

export const i18nOptions = {
  plugins: [Backend, initReactI18next],
  options: {
    lng: CONFIG.DEFAULT_LANGUAGE,
    load: "languageOnly",
    ns: CONFIG.NAMESPACES,
    defaultNS: CONFIG.DEFAULT_NS,
    supportedLngs: CONFIG.SUPPORTED_LANGUAGES,
    backend: {
      allowMultiLoading: true,
      loadPath: CONFIG.TRANSLATIONS_PATH,
    },
    react: {
      useSuspense: true,
    },
  },
} as const;

let storedI18n: i18n | undefined;

async function initI18n({
  plugins,
  options,
}: typeof i18nOptions): Promise<i18n> {
  if (!storedI18n?.isInitialized) {
    const i18n = plugins.reduce(
      (i18n, plugin) => i18n.use(plugin),
      createInstance(),
    );
    await i18n.init(options);
    storedI18n = i18n;
    return i18n;
  }
  return storedI18n;
}

export type Tkey = (key: string, namespace?: Namespace) => string;

interface I18nFixtures {
  i18n: i18n;
  t: TFunction;
  tkey: Tkey;
}

/*
  Fixture for i18n functionality. It initializes the i18next instance and checks the language setting in the storageState created by Playwright. Similar technique was used in my RBAC example. For more details, see my article about authorization testing (https://dev.to/a-dev/testing-with-playwright-how-to-make-authorization-less-painful-and-more-readable-3344) and the official Playwright documentation (https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state).
*/

export const i18nFixture = base.extend<i18nfixtures>({
  i18n: async ({ storageState }, use) => {
    const i18nInstance = await initI18n(i18nOptions);

    if (storageState) {
      try {
        const data = JSON.parse(
          fs.readFileSync(path.resolve(storageState as string), "utf8"),
        );

        const localStorage = data?.origins?.[0]?.localStorage;
        const language = localStorage?.find(
          (i) => i.name === CONFIG.LOCAL_STORAGE_KEY,
        )?.value as SupportedLanguage | undefined;

        if (!language) {
          throw new Error(
            `No language setting found in localStorage (key: ${CONFIG.LOCAL_STORAGE_KEY})`,
          );
        }

        if (!CONFIG.SUPPORTED_LANGUAGES.includes(language)) {
          throw new Error(
            `Unsupported language: ${language}. Supported languages: ${CONFIG.SUPPORTED_LANGUAGES.join(", ")}`,
          );
        }

        // Change language if different from current
        if (i18nInstance.language !== language) {
          await i18nInstance.changeLanguage(language);
        }
      } catch (error) {
        throw new Error(`Failed to process storage state: ${error.message}`);
      }
    }

    await use(i18nInstance);
  },
  tkey: async ({ t }, use) => {
    await use((str?: string, namespace = "shared"): string => {
      if (!str) return "⭕ Error: no translation";
      const tkey = findTranslationByKey(str, namespace);
      return t(`${namespace}:${tkey}`);
    });
  },
  t: async ({ i18n }, use) => {
    await use(i18n.t);
  },
});
</i18nfixtures></i18n>

Akhir sekali, kami boleh menggunakan i18nFixture dalam ujian Playwright kami untuk mengendalikan terjemahan dan tetapan bahasa. Untuk mengetahui lebih lanjut tentang bekerja dengan lekapan, lihat dokumentasi rasmi Playwright. Saya syorkan anda membuat fail index.ts yang mengeksport semua lekapan, yang kemudiannya boleh diimport ke dalam fail ujian anda.

import { mergeTests } from '@playwright/test';
import { i18nFixture } from './fixtures/i18n';

const test = mergeTests({
  ...i18nFixture,
});

export { test };

---

Selamat mencuba dengan Penulis Drama dan i18next! ?
Jika anda mempunyai sebarang soalan atau cadangan, jangan teragak-agak untuk komen di bawah.

Atas ialah kandungan terperinci Menguji dengan Penulis Drama: Gunakan Terjemahan iext dalam Ujian, tetapi bukan `t(&#key&#)`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!