Merge branch 'account-settings/main' into account-settings/override-c…

…leanup
aws-amplify · Dec 2, 2022 · cf95e71 · cf95e71
2 parents 59dae77 + ecb2b3e
commit cf95e71
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 6 deletions.
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx b/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';
@@ -185,7 +186,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"

diff --git a/...ges/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx b/...ges/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 () => {

diff --git a/...nents/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap b/...nents/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"

diff --git a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx b/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">
  <DeleteButton
  isDisabled={state === 'CONFIRMATION'}
  onClick={startConfirmation}

diff --git a/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx b/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx
@@ -4,6 +4,7 @@ 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';
 
@@ -58,6 +59,11 @@ describe('DeleteUser', () => {
  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 () => {

diff --git a/...rc/components/AccountSettings/DeleteUser/__tests__/__snapshots__/DeleteUser.test.tsx.snap b/...rc/components/AccountSettings/DeleteUser/__tests__/__snapshots__/DeleteUser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DeleteUser 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[`DeleteUser renders as expected 1`] = `
 exports[`DeleteUser renders as expected with components overrides 1`] = `
 <div>
  <div
- class="amplify-flex"
+ class="amplify-flex amplify-accountsettings-deleteuser"
  style="flex-direction: column;"
  >
  <button

diff --git a/packages/react/src/components/AccountSettings/constants.ts b/packages/react/src/components/AccountSettings/constants.ts
@@ -0,0 +1,4 @@
+export enum ComponentClassName {
+ ChangePassword = 'amplify-accountsettings-changepassword',
+ DeleteUser = 'amplify-accountsettings-deleteuser',
+}