Skip to content

feat: Add Test IDs for E2E Test Stability #263

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 6, 2025
Merged

feat: Add Test IDs for E2E Test Stability #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2efeb3c
feat: add stable test IDs for E2E test reliability
Abubakar-01 Aug 5, 2025
52f165c
Merge branch 'main' into feat/stable-e2e-test-ids
Abubakar-01 Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ const Chat = () => {

return (
<div className="flex">
<div className={`relative rounded-xl w-[700px] p-6 shadow-lg backdrop-blur-sm ${
<div
data-testid="task-progress"
className={`relative rounded-xl w-[700px] p-6 shadow-lg backdrop-blur-sm ${
theme === "dark"
? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
: "bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80"
Expand Down Expand Up @@ -132,7 +134,9 @@ const Chat = () => {

{/* Step Content */}
<div className="flex-1 min-w-0">
<div className={`font-semibold transition-all duration-300 text-sm ${
<div
data-testid="task-step-text"
className={`font-semibold transition-all duration-300 text-sm ${
isCompleted
? theme === "dark" ? "text-green-300" : "text-green-700"
: isCurrentPending
Expand Down
12 changes: 9 additions & 3 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ interface Step {

// Shared UI Components
const StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (
<div className="flex">
<div
data-testid="select-steps"
className="flex">
<div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${
theme === "dark"
? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
Expand Down Expand Up @@ -114,7 +116,9 @@ const StepItem = ({
? "bg-slate-800/30 border border-slate-600/30"
: "bg-gray-50/50 border border-gray-200/40"
}`}>
<label className="flex items-center cursor-pointer w-full">
<label
data-testid="step-item"
className="flex items-center cursor-pointer w-full">
<div className="relative">
<input
type="checkbox"
Expand All @@ -137,7 +141,9 @@ const StepItem = ({
)}
</div>
</div>
<span className={`ml-3 font-medium transition-all duration-300 ${
<span
data-testid="step-text"
className={`ml-3 font-medium transition-all duration-300 ${
step.status !== "enabled" && status != "inProgress"
? `line-through ${theme === "dark" ? "text-slate-500" : "text-gray-400"}`
: theme === "dark" ? "text-white" : "text-gray-800"
Expand Down
10 changes: 8 additions & 2 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,12 +303,15 @@ interface ConfirmChangesProps {
function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {
const [accepted, setAccepted] = useState<boolean | null>(null);
return (
<div className="bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5">
<div
data-testid="confirm-changes-modal"
className="bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5">
<h2 className="text-lg font-bold mb-4">Confirm Changes</h2>
<p className="mb-6">Do you want to accept the changes?</p>
{accepted === null && (
<div className="flex justify-end space-x-4">
<button
data-testid="reject-button"
className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${
status === "executing" ? "cursor-pointer" : "cursor-default"
}`}
Expand All @@ -324,6 +327,7 @@ function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmC
Reject
</button>
<button
data-testid="confirm-button"
className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${
status === "executing" ? "cursor-pointer" : "cursor-default"
}`}
Expand All @@ -342,7 +346,9 @@ function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmC
)}
{accepted !== null && (
<div className="flex justify-end">
<div className="mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block">
<div
data-testid="status-display"
className="mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block">
{accepted ? "✓ Accepted" : "✗ Rejected"}
</div>
</div>
Expand Down
25 changes: 20 additions & 5 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,9 @@ function Recipe() {
};

return (
<form className="recipe-card">
<form
data-testid="recipe-card"
className="recipe-card">
{/* Recipe Title */}
<div className="recipe-header">
<input
Expand Down Expand Up @@ -452,13 +454,23 @@ function Recipe() {
{changedKeysRef.current.includes("ingredients") && <Ping />}
<div className="section-header">
<h2 className="section-title">Ingredients</h2>
<button type="button" className="add-button" onClick={addIngredient}>
<button
data-testid="add-ingredient-button"
type="button"
className="add-button"
onClick={addIngredient}
>
+ Add Ingredient
</button>
</div>
<div className="ingredients-container">
<div
data-testid="ingredients-container"
className="ingredients-container"
>
{recipe.ingredients.map((ingredient, index) => (
<div key={index} className="ingredient-card">
<div key={index}
data-testid="ingredient-card"
className="ingredient-card">
<div className="ingredient-icon">{getProperIcon(ingredient.icon)}</div>
<div className="ingredient-content">
<input
Expand Down Expand Up @@ -498,7 +510,9 @@ function Recipe() {
+ Add Step
</button>
</div>
<div className="instructions-container">
<div
data-testid="instructions-container"
className="instructions-container">
{recipe.instructions.map((instruction, index) => (
<div key={index} className="instruction-item">
{/* Number Circle */}
Expand Down Expand Up @@ -555,6 +569,7 @@ function Recipe() {
{/* Improve with AI Button */}
<div className="action-container">
<button
data-testid="improve-button"
className={isLoading ? "improve-button loading" : "improve-button"}
type="button"
onClick={() => {
Expand Down
9 changes: 7 additions & 2 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,10 +177,12 @@ const VALID_IMAGE_NAMES = [

function HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {
return (
<div className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
<div
data-testid="haiku-card"
className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
<div className="mb-4 pb-4">
{generatedHaiku?.japanese?.map((line, index) => (
<div className="flex items-center gap-3 mb-2" key={index}>
<div className="flex items-center gap-3 mb-2" data-testid="haiku-line" key={index}>
<p className="text-lg font-bold">{line}</p>
<p className="text-sm font-light">
{generatedHaiku.english?.[index]}
Expand Down Expand Up @@ -340,6 +342,7 @@ function Haiku() {
{generatedHaikus.map((haiku, index) => (
<div
key={index}
data-testid="thumbnail-haiku"
className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}
style={{
width: '80px',
Expand Down Expand Up @@ -395,6 +398,7 @@ function Haiku() {
}).map((haiku, index) => (
<div
key={index}
data-testid="main-haiku-display"
className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}
style={{
zIndex: index === activeIndex ? haikus.length : index,
Expand All @@ -403,6 +407,7 @@ function Haiku() {
>
{haiku.japanese.map((line, lineIndex) => (
<div
data-testid="main-haiku-line"
className={`flex items-start mb-4 haiku-line ${
isMobile
? 'flex-col gap-1'
Expand Down
Loading