Implemented component test for AuthDialog

cypress/component/AuthDialog.cy.tsx

@@ -0,0 +1,26 @@
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import AuthDialog from '../../src/components/AuthDialog';
+
+const props = {
+  isLoggedIn: false,
+  onAuth: () => {},
+};
+
+describe('ContinuousField', () => {
+  it('Displays a MUI dialog with the title and "sing in with google" button', () => {
+    cy.mount(
+      <GoogleOAuthProvider clientId="mock-client-id">
+        {' '}
+        <AuthDialog isLoggedIn={props.isLoggedIn} onAuth={props.onAuth} />
+      </GoogleOAuthProvider>
+    );
+    cy.get('[data-cy="auth-dialog"]').should('be.visible');
+    cy.get('[data-cy="auth-dialog"]').should(
+      'contain',
+      'Please login using one of the following before proceeding'
+    );
+    cy.get('[data-cy="auth-dialog"]').within(() => {
+      cy.contains('Sign in with Google');
+    });
+  });
+});

src/components/AuthDialog.tsx

@@ -16,7 +16,7 @@ function AuthDialog({
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
-    <Dialog fullScreen={fullScreen} open={!isLoggedIn} data-cy="get-data-dialog">
+    <Dialog fullScreen={fullScreen} open={!isLoggedIn} data-cy="auth-dialog">
       <DialogTitle>Please login using one of the following before proceeding</DialogTitle>
       <DialogContent>
         <div className="flex flex-col items-center justify-center">