feat(account-settings): align classnames

packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx

@@ -13,6 +13,7 @@ import {
 
 import { useAuth } from '../../../internal';
 import { View, Flex } from '../../../primitives';
+import { ComponentClassName } from '../constants';
 import { FormValues, BlurredFields, ValidationError } from '../types';
 import { ChangePasswordProps, ValidateParams } from './types';
 import DEFAULTS from './defaults';
@@ -177,7 +178,11 @@ function ChangePassword({
   }
 
   return (
-    <View as="form" className="amplify-changepassword" onSubmit={handleSubmit}>
+    <View
+      as="form"
+      className={ComponentClassName.ChangePassword}
+      onSubmit={handleSubmit}
+    >
       <Flex direction="column">
         <CurrentPassword
           autoComplete="current-password"

packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx

@@ -6,6 +6,7 @@ import * as UIModule from '@aws-amplify/ui';
 import ChangePassword from '../ChangePassword';
 import { Button } from '../../../../primitives';
 import { ChangePasswordComponents } from '../types';
+import { ComponentClassName } from '../../constants';
 
 const components: ChangePasswordComponents = {
   CurrentPassword: (props) => (
@@ -56,6 +57,11 @@ describe('ChangePassword', () => {
   it('renders as expected', () => {
     const { container } = render(<ChangePassword />);
     expect(container).toMatchSnapshot();
+
+    const changePassword = container.getElementsByClassName(
+      ComponentClassName.ChangePassword
+    );
+    expect(changePassword).toHaveLength(1);
   });
 
   it('calls changePassword with expected arguments', async () => {

packages/react/src/components/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ChangePassword renders as expected 1`] = `
 <div>
   <form
-    class="amplify-changepassword"
+    class="amplify-accountsettings-changepassword"
   >
     <div
       class="amplify-flex"
@@ -220,7 +220,7 @@ exports[`ChangePassword renders as expected 1`] = `
 exports[`ChangePassword renders as expected with component overrides 1`] = `
 <div>
   <form
-    class="amplify-changepassword"
+    class="amplify-accountsettings-changepassword"
   >
     <div
       class="amplify-flex"

packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx

@@ -4,6 +4,7 @@ import { deleteUser, translate, getLogger } from '@aws-amplify/ui';
 
 import { useAuth } from '../../../internal';
 import { Flex } from '../../../primitives';
+import { ComponentClassName } from '../constants';
 import DEFAULTS from './defaults';
 import { DeleteUserProps, DeleteUserState } from './types';
 
@@ -87,7 +88,7 @@ function DeleteUser({
   }
 
   return (
-    <Flex direction="column">
+    <Flex className={ComponentClassName.DeleteUser} direction="column">
       <SubmitButton
         isDisabled={state === 'CONFIRMATION'}
         onClick={startConfirmation}

packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import {
-  render,
-  screen,
-  fireEvent,
-  waitFor,
-  act,
-} from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 import * as UIModule from '@aws-amplify/ui';
 
 import { Button, Flex, Heading, Text } from '../../../../primitives';
+import { ComponentClassName } from '../../constants';
 import { DeleteUserComponents } from '../types';
 import DeleteUser from '../DeleteUser';
 
@@ -54,6 +49,11 @@ describe('ChangePassword', () => {
   it('renders as expected', () => {
     const { container } = render(<DeleteUser />);
     expect(container).toMatchSnapshot();
+
+    const deleteUser = container.getElementsByClassName(
+      ComponentClassName.DeleteUser
+    );
+    expect(deleteUser).toHaveLength(1);
   });
 
   it('calls deleteUser with expected arguments', async () => {

packages/react/src/components/AccountSettings/DeleteUser/__tests__/__snapshots__/DeleteUser.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ChangePassword renders as expected 1`] = `
 <div>
   <div
-    class="amplify-flex"
+    class="amplify-flex amplify-accountsettings-deleteuser"
     style="flex-direction: column;"
   >
     <button
@@ -20,7 +20,7 @@ exports[`ChangePassword renders as expected 1`] = `
 exports[`ChangePassword renders as expected with components overrides 1`] = `
 <div>
   <div
-    class="amplify-flex"
+    class="amplify-flex amplify-accountsettings-deleteuser"
     style="flex-direction: column;"
   >
     <button

packages/react/src/components/AccountSettings/constants.ts

@@ -0,0 +1,4 @@
+export enum ComponentClassName {
+  ChangePassword = 'amplify-accountsettings-changepassword',
+  DeleteUser = 'amplify-accountsettings-deleteuser',
+}