@nextsparkjs/core 0.1.0-beta.7 → 0.1.0-beta.71

package/templates/app/dashboard/settings/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useMemo } from 'react'
@@ -36,21 +36,18 @@ function SettingsPage() {
   return (
     <div
       className="max-w-2xl"
-      {...createTestId('settings', 'overview', 'container') && { 'data-testid': createTestId('settings', 'overview', 'container') }}
-      {...createCyId('settings', 'overview') && { 'data-cy': createCyId('settings', 'overview') }}
+      data-cy={sel('settings.overview.container')}
     >
       <div className="space-y-6">
         <header>
           <h2
             className="text-2xl font-bold"
             id="settings-overview-heading"
-            {...createTestId('settings', 'overview', 'title') && { 'data-testid': createTestId('settings', 'overview', 'title') }}
           >
             {t('overview.title')}
           </h2>
           <p
             className="text-muted-foreground mt-2"
-            {...createTestId('settings', 'overview', 'description') && { 'data-testid': createTestId('settings', 'overview', 'description') }}
           >
             {t('overview.description')}
           </p>
@@ -68,8 +65,7 @@ function SettingsPage() {
                 key={page.key}
                 href={`/dashboard/settings/${page.key}`}
                 className="block p-6 rounded-lg border border-border bg-card hover:bg-accent transition-colors group"
-                {...createTestId('settings', 'overview', page.key) && { 'data-testid': createTestId('settings', 'overview', page.key) }}
-                {...createCyId('settings', `overview-${page.key}`) && { 'data-cy': createCyId('settings', `overview-${page.key}`) }}
+                data-cy={sel('settings.overview.card', { key: page.key })}
               >
                 <div className="flex items-start gap-4">
                   <div className="flex-shrink-0">

package/templates/app/dashboard/settings/password/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPasswordPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PasswordLoading() {
+  return <SkeletonPasswordPage />
+}

package/templates/app/dashboard/settings/password/page.tsx

@@ -19,7 +19,7 @@ import { PasswordInput } from "@nextsparkjs/core/components/ui/password-input";
 import { Alert, AlertDescription } from "@nextsparkjs/core/components/ui/alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
 import { Checkbox } from "@nextsparkjs/core/components/ui/checkbox";
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test';
+import { sel } from '@nextsparkjs/core/selectors';
 import { useTranslations } from 'next-intl';
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
 
@@ -106,44 +106,39 @@ function UpdatePasswordPage() {
     return (
       <>
         {/* MANDATORY: Screen reader announcements */}
-        <div 
-          aria-live="polite" 
+        <div
+          aria-live="polite"
           aria-atomic="true"
           className="sr-only"
-          {...createTestId('password', 'status', 'message') && { 'data-testid': createTestId('password', 'status', 'message') }}
         >
           {statusMessage}
         </div>
 
-        <div 
+        <div
           className="max-w-4xl"
-          {...createTestId('password', 'success', 'container') && { 'data-testid': createTestId('password', 'success', 'container') }}
-          {...createCyId('password', 'success') && { 'data-cy': createCyId('password', 'success') }}
+          data-cy={sel('settings.password.successMessage')}
         >
           <div className="space-y-6">
-            <div 
+            <div
               className="text-center space-y-4"
               role="status"
               aria-live="polite"
             >
-              <div 
+              <div
                 className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"
                 role="img"
                 aria-label={t('password.success.aria')}
-                {...createTestId('password', 'success', 'icon') && { 'data-testid': createTestId('password', 'success', 'icon') }}
               >
                 <CheckCircle className="w-8 h-8 text-green-600" aria-hidden="true" />
               </div>
               <div className="space-y-2">
-                <h1 
+                <h1
                   className="text-2xl font-bold"
-                  {...createTestId('password', 'success', 'title') && { 'data-testid': createTestId('password', 'success', 'title') }}
                 >
                   {t('password.success.title')}
                 </h1>
-                <p 
+                <p
                   className="text-muted-foreground"
-                  {...createTestId('password', 'success', 'description') && { 'data-testid': createTestId('password', 'success', 'description') }}
                 >
                   {t('password.success.description')}
                 </p>
@@ -158,79 +153,64 @@ function UpdatePasswordPage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('password', 'status', 'message') && { 'data-testid': createTestId('password', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
+      <div
         className="max-w-4xl"
-        {...createTestId('password', 'container') && { 'data-testid': createTestId('password', 'container') }}
-        {...createCyId('password', 'main') && { 'data-cy': createCyId('password', 'main') }}
+        data-cy={sel('settings.password.container')}
       >
         <div className="space-y-6">
           {/* Header */}
-          <header 
-            {...createTestId('password', 'header') && { 'data-testid': createTestId('password', 'header') }}
-            {...createCyId('password', 'header') && { 'data-cy': createCyId('password', 'header') }}
-          >
-            <h1 
+          <header>
+            <h1
               className="text-2xl font-bold"
               id="password-heading"
-              {...createTestId('password', 'title') && { 'data-testid': createTestId('password', 'title') }}
             >
               {t('password.title')}
             </h1>
-            <p 
+            <p
               className="text-muted-foreground mt-1"
-              {...createTestId('password', 'description') && { 'data-testid': createTestId('password', 'description') }}
             >
               {t('password.description')}
             </p>
           </header>
 
           <Card
-            {...createTestId('password', 'form', 'card') && { 'data-testid': createTestId('password', 'form', 'card') }}
-            {...createCyId('password', 'form') && { 'data-cy': createCyId('password', 'form') }}
+            data-cy={sel('settings.password.form')}
           >
             <CardHeader>
-              <CardTitle 
+              <CardTitle
                 id="password-form-title"
-                {...createTestId('password', 'form', 'title') && { 'data-testid': createTestId('password', 'form', 'title') }}
               >
                 {t('password.form.title')}
               </CardTitle>
-              <CardDescription
-                {...createTestId('password', 'form', 'description') && { 'data-testid': createTestId('password', 'form', 'description') }}
-              >
+              <CardDescription>
                 {t('password.form.description')}
               </CardDescription>
             </CardHeader>
             <CardContent>
               {error && (
-                <Alert 
-                  variant="destructive" 
+                <Alert
+                  variant="destructive"
                   className="mb-4"
                   role="alert"
                   aria-live="assertive"
-                  {...createTestId('password', 'error', 'alert') && { 'data-testid': createTestId('password', 'error', 'alert') }}
-                  {...createCyId('password', 'error') && { 'data-cy': createCyId('password', 'error') }}
                 >
                   <AlertCircle className="h-4 w-4" aria-hidden="true" />
                   <AlertDescription>{error}</AlertDescription>
                 </Alert>
               )}
 
-              <form 
-                onSubmit={handleSubmit(onSubmit)} 
+              <form
+                onSubmit={handleSubmit(onSubmit)}
                 className="space-y-6"
                 aria-labelledby="password-form-title"
-                {...createTestId('password', 'form', 'element') && { 'data-testid': createTestId('password', 'form', 'element') }}
-                {...createCyId('password', 'form-element') && { 'data-cy': createCyId('password', 'form-element') }}
               >
               <div className="space-y-2">
                 <Label htmlFor="currentPassword">{t('password.form.currentPassword')}</Label>
@@ -241,8 +221,7 @@ function UpdatePasswordPage() {
                     placeholder={t('password.form.currentPasswordPlaceholder')}
                     aria-required="true"
                     aria-describedby={errors.currentPassword ? "currentPassword-error" : undefined}
-                    {...createTestId('password', 'current', 'input') && { 'data-testid': createTestId('password', 'current', 'input') }}
-                    {...createCyId('password', 'current-input') && { 'data-cy': createCyId('password', 'current-input') }}
+                    data-cy={sel('settings.password.currentPassword')}
                   />
                 {errors.currentPassword && (
                   <p className="text-sm text-destructive">{errors.currentPassword.message}</p>
@@ -283,8 +262,6 @@ function UpdatePasswordPage() {
                   <Checkbox
                     id="revokeOtherSessions"
                     {...register("revokeOtherSessions")}
-                    {...createTestId('password', 'revoke', 'checkbox') && { 'data-testid': createTestId('password', 'revoke', 'checkbox') }}
-                    {...createCyId('password', 'revoke-sessions') && { 'data-cy': createCyId('password', 'revoke-sessions') }}
                   />
                   <Label
                     htmlFor="revokeOtherSessions"
@@ -299,8 +276,7 @@ function UpdatePasswordPage() {
                   disabled={loading}
                   aria-describedby="submit-help"
                   className="w-full md:w-auto"
-                  {...createTestId('password', 'submit', 'button') && { 'data-testid': createTestId('password', 'submit', 'button') }}
-                  {...createCyId('password', 'submit') && { 'data-cy': createCyId('password', 'submit') }}
+                  data-cy={sel('settings.password.submitButton')}
                 >
                   {loading ? (
                     <>

package/templates/app/dashboard/settings/plans/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPlansPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PlansLoading() {
+  return <SkeletonPlansPage />
+}

package/templates/app/dashboard/settings/profile/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonProfileForm } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function ProfileLoading() {
+  return <SkeletonProfileForm />
+}

package/templates/app/dashboard/settings/profile/page.tsx

@@ -61,7 +61,7 @@ import {
 } from 'lucide-react'
 import { profileSchema, ProfileFormData } from '@nextsparkjs/core/lib/validation'
 import { countries, timezones } from '@nextsparkjs/core/lib/countries-timezones'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { useTranslations } from 'next-intl'
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
 
@@ -221,12 +221,10 @@ function ProfilePage() {
 
   if (isLoading) {
     return (
-      <div 
+      <div
         className="flex items-center justify-center py-12"
         role="status"
         aria-label={t('profile.loading.aria')}
-        {...createTestId('profile', 'loading') && { 'data-testid': createTestId('profile', 'loading') }}
-        {...createCyId('profile', 'loading') && { 'data-cy': createCyId('profile', 'loading') }}
       >
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden="true" />
         <span className="sr-only">{t('profile.loading.text')}</span>
@@ -236,12 +234,10 @@ function ProfilePage() {
 
   if (error) {
     return (
-      <Alert 
+      <Alert
         className="max-w-md"
         variant="destructive"
         role="alert"
-        {...createTestId('profile', 'error') && { 'data-testid': createTestId('profile', 'error') }}
-        {...createCyId('profile', 'error') && { 'data-cy': createCyId('profile', 'error') }}
       >
         <AlertCircle className="h-4 w-4" aria-hidden="true" />
         <AlertDescription>
@@ -254,48 +250,38 @@ function ProfilePage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('profile', 'status', 'message') && { 'data-testid': createTestId('profile', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
+      <div
         className="max-w-4xl space-y-6"
-        {...createTestId('profile', 'container') && { 'data-testid': createTestId('profile', 'container') }}
-        {...createCyId('profile', 'main') && { 'data-cy': createCyId('profile', 'main') }}
+        data-cy={sel('settings.profile.container')}
       >
         {/* Header */}
-        <header 
-          {...createTestId('profile', 'header') && { 'data-testid': createTestId('profile', 'header') }}
-          {...createCyId('profile', 'header') && { 'data-cy': createCyId('profile', 'header') }}
-        >
-          <h1 
+        <header>
+          <h1
             className="text-2xl font-bold"
             id="profile-heading"
-            {...createTestId('profile', 'title') && { 'data-testid': createTestId('profile', 'title') }}
           >
             {t('profile.title')}
           </h1>
-          <p 
-            className="text-muted-foreground mt-1"
-            {...createTestId('profile', 'description') && { 'data-testid': createTestId('profile', 'description') }}
-          >
+          <p className="text-muted-foreground mt-1">
             {t('profile.description')}
           </p>
         </header>
 
         {/* Success Alert */}
         {updateSuccess && (
-          <Alert 
+          <Alert
             className="border-green-200 bg-green-50 text-green-800"
             role="status"
             aria-live="polite"
-            {...createTestId('profile', 'success', 'alert') && { 'data-testid': createTestId('profile', 'success', 'alert') }}
-            {...createCyId('profile', 'success') && { 'data-cy': createCyId('profile', 'success') }}
+            data-cy={sel('settings.profile.successMessage')}
           >
             <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
             <AlertDescription>
@@ -306,12 +292,10 @@ function ProfilePage() {
 
         {/* Error Alert */}
         {updateProfileMutation.error && (
-          <Alert 
+          <Alert
             variant="destructive"
             role="alert"
             aria-live="assertive"
-            {...createTestId('profile', 'error', 'alert') && { 'data-testid': createTestId('profile', 'error', 'alert') }}
-            {...createCyId('profile', 'error-alert') && { 'data-cy': createCyId('profile', 'error-alert') }}
           >
             <AlertCircle className="h-4 w-4" aria-hidden="true" />
             <AlertDescription>
@@ -321,33 +305,27 @@ function ProfilePage() {
         )}
 
         {/* Single Column Layout */}
-        <Card 
+        <Card
           className="max-w-4xl"
-          {...createTestId('profile', 'form', 'card') && { 'data-testid': createTestId('profile', 'form', 'card') }}
-          {...createCyId('profile', 'form') && { 'data-cy': createCyId('profile', 'form') }}
+          data-cy={sel('settings.profile.form')}
         >
             <CardHeader>
-              <CardTitle 
+              <CardTitle
                 className="flex items-center gap-2"
                 id="profile-form-title"
-                {...createTestId('profile', 'form', 'title') && { 'data-testid': createTestId('profile', 'form', 'title') }}
               >
                 <User className="h-5 w-5" aria-hidden="true" />
                 {t('profile.form.title')}
               </CardTitle>
-              <CardDescription
-                {...createTestId('profile', 'form', 'description') && { 'data-testid': createTestId('profile', 'form', 'description') }}
-              >
+              <CardDescription>
                 {t('profile.form.description')}
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <form 
-                onSubmit={handleSubmit(onSubmit)} 
+              <form
+                onSubmit={handleSubmit(onSubmit)}
                 className="space-y-6"
                 aria-labelledby="profile-form-title"
-                {...createTestId('profile', 'form', 'element') && { 'data-testid': createTestId('profile', 'form', 'element') }}
-                {...createCyId('profile', 'form-element') && { 'data-cy': createCyId('profile', 'form-element') }}
               >
               <div className="grid gap-4 sm:grid-cols-2">
                 <div className="space-y-2">
@@ -431,8 +409,6 @@ function ProfilePage() {
                         setValue('language', value)
                       }
                     }}
-                    {...createTestId('profile', 'language', 'select') && { 'data-testid': createTestId('profile', 'language', 'select') }}
-                    {...createCyId('profile', 'language-select') && { 'data-cy': createCyId('profile', 'language-select') }}
                   >
                     <SelectTrigger>
                       <div className="flex items-center gap-2">
@@ -514,8 +490,6 @@ function ProfilePage() {
                         role="combobox"
                         aria-expanded={timezoneOpen}
                         className="w-full justify-between"
-                        {...createTestId('profile', 'timezone', 'select') && { 'data-testid': createTestId('profile', 'timezone', 'select') }}
-                        {...createCyId('profile', 'timezone-select') && { 'data-cy': createCyId('profile', 'timezone-select') }}
                       >
                         <div className="flex items-center gap-2">
                           <Clock className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
@@ -579,8 +553,7 @@ function ProfilePage() {
                   disabled={isSubmitting || updateProfileMutation.isPending}
                   aria-describedby="submit-help"
                   className="w-full md:w-auto"
-                  {...createTestId('profile', 'submit', 'button') && { 'data-testid': createTestId('profile', 'submit', 'button') }}
-                  {...createCyId('profile', 'submit') && { 'data-cy': createCyId('profile', 'submit') }}
+                  data-cy={sel('settings.profile.submitButton')}
                 >
                   {(isSubmitting || updateProfileMutation.isPending) ? (
                     <>
@@ -611,8 +584,6 @@ function ProfilePage() {
                       aria-expanded={advancedOpen}
                       aria-controls="advanced-options"
                       aria-label={advancedOpen ? t('profile.advanced.closeLabel') : t('profile.advanced.openLabel')}
-                      {...createTestId('profile', 'advanced', 'toggle') && { 'data-testid': createTestId('profile', 'advanced', 'toggle') }}
-                      {...createCyId('profile', 'advanced-toggle') && { 'data-cy': createCyId('profile', 'advanced-toggle') }}
                     >
                       {t('profile.advanced.title')}
                       {advancedOpen ? (
@@ -623,36 +594,28 @@ function ProfilePage() {
                     </Button>
                   
                     {advancedOpen && (
-                      <div 
+                      <div
                         id="advanced-options"
                         className="mt-4 space-y-4 border-t pt-4"
-                        {...createTestId('profile', 'advanced', 'section') && { 'data-testid': createTestId('profile', 'advanced', 'section') }}
-                        {...createCyId('profile', 'advanced-section') && { 'data-cy': createCyId('profile', 'advanced-section') }}
                       >
                         <div className="space-y-2">
-                          <h4 
+                          <h4
                             className="text-sm font-medium text-destructive"
                             id="danger-zone-heading"
-                            {...createTestId('profile', 'danger', 'heading') && { 'data-testid': createTestId('profile', 'danger', 'heading') }}
                           >
                             {t('profile.danger.title')}
                           </h4>
-                          <p 
-                            className="text-xs text-muted-foreground"
-                            {...createTestId('profile', 'danger', 'warning') && { 'data-testid': createTestId('profile', 'danger', 'warning') }}
-                          >
+                          <p className="text-xs text-muted-foreground">
                             {t('profile.danger.warning')}
                           </p>
                         
                         <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                             <DialogTrigger asChild>
-                              <Button 
-                                variant="destructive" 
+                              <Button
+                                variant="destructive"
                                 className="w-full gap-2"
                                 disabled={deleteAccountMutation.isPending}
                                 aria-describedby="danger-zone-heading"
-                                {...createTestId('profile', 'delete', 'trigger') && { 'data-testid': createTestId('profile', 'delete', 'trigger') }}
-                                {...createCyId('profile', 'delete-account') && { 'data-cy': createCyId('profile', 'delete-account') }}
                               >
                                 <Trash2 className="h-4 w-4" aria-hidden="true" />
                                 {t('profile.danger.deleteButton')}

package/templates/app/dashboard/settings/security/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonSecurityPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function SecurityLoading() {
+  return <SkeletonSecurityPage />
+}

package/templates/app/dashboard/settings/security/page.tsx

@@ -32,7 +32,6 @@ import {
   Save,
   Loader2
 } from 'lucide-react'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
 import { useTranslations } from 'next-intl'
 import { useUserWithMetaSettings } from '@nextsparkjs/core/hooks/useUserSettings'
 import { SecurityPageSkeleton } from '@nextsparkjs/core/components/settings/SettingsPageSkeleton'
@@ -195,46 +194,28 @@ function SecurityPage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('security', 'status', 'message') && { 'data-testid': createTestId('security', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
-        className="max-w-4xl"
-        {...createTestId('security', 'container') && { 'data-testid': createTestId('security', 'container') }}
-        {...createCyId('security', 'main') && { 'data-cy': createCyId('security', 'main') }}
-      >
+      <div className="max-w-4xl">
         <div className="space-y-6">
           {/* Header */}
-          <header 
-            {...createTestId('security', 'header') && { 'data-testid': createTestId('security', 'header') }}
-            {...createCyId('security', 'header') && { 'data-cy': createCyId('security', 'header') }}
-          >
-            <h1 
-              className="text-2xl font-bold"
-              id="security-heading"
-              {...createTestId('security', 'title') && { 'data-testid': createTestId('security', 'title') }}
-            >
+          <header>
+            <h1 className="text-2xl font-bold" id="security-heading">
               {t('security.title')}
             </h1>
-            <p 
-              className="text-muted-foreground mt-1"
-              {...createTestId('security', 'description') && { 'data-testid': createTestId('security', 'description') }}
-            >
+            <p className="text-muted-foreground mt-1">
               {t('security.description')}
             </p>
           </header>
 
           {/* Main Security Settings Card */}
-          <Card
-            {...createTestId('security', 'main', 'card') && { 'data-testid': createTestId('security', 'main', 'card') }}
-            {...createCyId('security', 'main') && { 'data-cy': createCyId('security', 'main') }}
-          >
+          <Card>
             <CardHeader>
               <CardTitle>{t('security.main.title')}</CardTitle>
               <CardDescription>
@@ -271,8 +252,6 @@ function SecurityPage() {
                         onCheckedChange={handleTwoFactorToggle}
                         aria-label={twoFactorEnabled ? t('security.twoFactor.ariaEnabled') : t('security.twoFactor.ariaDisabled')}
                         aria-describedby="2fa-description"
-                        {...createTestId('security', '2fa', 'switch') && { 'data-testid': createTestId('security', '2fa', 'switch') }}
-                        {...createCyId('security', '2fa-toggle') && { 'data-cy': createCyId('security', '2fa-toggle') }}
                       />
                     </div>
                   </div>
@@ -327,8 +306,6 @@ function SecurityPage() {
                       onCheckedChange={handleLoginAlertsToggle}
                       aria-label={loginAlertsEnabled ? t('security.alerts.ariaEnabled') : t('security.alerts.ariaDisabled')}
                       aria-describedby="alerts-description"
-                      {...createTestId('security', 'alerts', 'switch') && { 'data-testid': createTestId('security', 'alerts', 'switch') }}
-                      {...createCyId('security', 'alerts-toggle') && { 'data-cy': createCyId('security', 'alerts-toggle') }}
                     />
                   </div>
                 </div>
@@ -336,12 +313,10 @@ function SecurityPage() {
 
               {/* Botón de Guardar */}
               <div className="flex justify-end pt-6 border-t border-muted">
-                <Button 
+                <Button
                   onClick={handleSaveSettings}
                   disabled={!hasUnsavedChanges || isUpdating || isLoadingUser}
                   className="min-w-[120px]"
-                  {...createTestId('security', 'save', 'button') && { 'data-testid': createTestId('security', 'save', 'button') }}
-                  {...createCyId('security', 'save-button') && { 'data-cy': createCyId('security', 'save-button') }}
                 >
                   {isUpdating ? (
                     <>
@@ -363,10 +338,7 @@ function SecurityPage() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
 
             {/* Sesiones Activas */}
-            <Card
-              {...createTestId('security', 'sessions', 'card') && { 'data-testid': createTestId('security', 'sessions', 'card') }}
-              {...createCyId('security', 'sessions') && { 'data-cy': createCyId('security', 'sessions') }}
-            >
+            <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <Monitor className="h-5 w-5" />
@@ -379,11 +351,9 @@ function SecurityPage() {
               <CardContent>
                 <div className="space-y-4">
                   {activeSessions.map((session) => (
-                    <div 
-                      key={session.id} 
+                    <div
+                      key={session.id}
                       className="p-4 border border-muted/40 rounded-lg space-y-3"
-                      {...createTestId('security', 'session', session.id) && { 'data-testid': createTestId('security', 'session', session.id) }}
-                      {...createCyId('security', `session-${session.id}`) && { 'data-cy': createCyId('security', `session-${session.id}`) }}
                       role="article"
                       aria-label={t('security.sessions.sessionAriaLabel', { device: session.device, status: session.current ? t('security.sessions.currentSession') : t('security.sessions.activeSession') })}
                     >
@@ -407,12 +377,10 @@ function SecurityPage() {
                           <div className="shrink-0 ml-3">
                             <Dialog>
                               <DialogTrigger asChild>
-                                <Button 
-                                  variant="outline" 
+                                <Button
+                                  variant="outline"
                                   size="sm"
                                   aria-label={t('security.sessions.terminateAriaLabel', { device: session.device })}
-                                  {...createTestId('security', 'terminate', session.id) && { 'data-testid': createTestId('security', 'terminate', session.id) }}
-                                  {...createCyId('security', `terminate-${session.id}`) && { 'data-cy': createCyId('security', `terminate-${session.id}`) }}
                                 >
                                   <X className="h-4 w-4 mr-1" />
                                   {t('security.sessions.terminate')}
@@ -475,11 +443,9 @@ function SecurityPage() {
               <CardContent>
                 <div className="space-y-3">
                   {loginHistory.map((login) => (
-                    <div 
-                      key={login.id} 
+                    <div
+                      key={login.id}
                       className="p-3 border border-muted/40 rounded-lg space-y-2"
-                      {...createTestId('security', 'login', login.id) && { 'data-testid': createTestId('security', 'login', login.id) }}
-                      {...createCyId('security', `login-${login.id}`) && { 'data-cy': createCyId('security', `login-${login.id}`) }}
                       role="article"
                       aria-label={t('security.loginHistory.attemptAriaLabel', { status: login.success ? t('security.loginHistory.successBadge').toLowerCase() : t('security.loginHistory.failBadge').toLowerCase(), location: login.location })}
                     >
@@ -518,12 +484,10 @@ function SecurityPage() {
                   ))}
                 </div>
                 <div className="mt-4 text-center">
-                  <Button 
-                    variant="outline" 
+                  <Button
+                    variant="outline"
                     size="sm"
                     aria-label={t('security.loginHistory.viewHistoryAriaLabel')}
-                    {...createTestId('security', 'view', 'history') && { 'data-testid': createTestId('security', 'view', 'history') }}
-                    {...createCyId('security', 'view-history') && { 'data-cy': createCyId('security', 'view-history') }}
                   >
                     {t('security.loginHistory.viewComplete')}
                   </Button>