Load in e2e testing strings from en-US.json file

[andrewtavis]

Terms

• I have searched open and closed feature requests
• I agree to follow activist's Code of Conduct

Description

In discussing the new end to end testing setup with @cquinn540 we realized that we do not want to have to change the tests every time that the i18n strings have been changed. In order to mitigate this, we would like all strings used within the end to end tests in the frontend/test-e2e directory to access their strings from the en-US.json file directly.

Contribution

Happy to discuss and work on this with people! Would be a great first issue for someone who has some JavaScript/TypeScript experience 😊

[Abhi-Bohora]

👋 @andrewtavis i have decided to look into this issue. I have thought of working this way:
creating a utility function that look up the key and returns the corresponding value activist\frontend\utils\enUs.ts

import enUs from "../../frontend/i18n/en-US.json";

type I18nKeys = typeof enUs & { [key: string]: string };

export const getI18nString = (key: string) => {
  return (enUs as I18nKeys)[key];
};

And update in the places where necessary for example in this activist\frontend\test-e2e\accessibility\accessible-names.ts

// SPDX-License-Identifier: AGPL-3.0-or-later
import { getI18nString } from "~/utils/enUs";

export const ROADMAP_LINK_NAME = new RegExp(
  getI18nString("components.btn_road_map.aria_label"),
  "i"
);
export const ACTIVIST_LANDING_LINK_NAME = new RegExp(
  getI18nString("components.logo_activist.aria_label"),
  "i"
);

export const SIGN_IN_LINK_NAME = new RegExp(
  getI18nString("_global.sign_in_aria_label"),
  "i"
);
export const SIGN_UP_LINK_NAME = new RegExp(
  getI18nString("_global.sign_up_aria_label"),
  "i"
);

What do you think ? 😊

[andrewtavis]

Looks great to me, @Abhi-Bohora! Feel free to open a PR with the changes for all the e2e files :)

CC @cquinn540 (although seeing you've already seen this 😇)