added incomplete test for ButtonList in login

audeets · Mar 15, 2024 · b2b7142 · b2b7142
1 parent 44fd585
commit b2b7142
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 8 deletions.
diff --git a/src/pages/login/ButtonsList.jsx b/src/pages/login/ButtonsList.jsx
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery, Stack } from '@mui/material';
-import strategies from './strategies';
 import ButtonsListItem from './ButtonsListItem';
 
-const ButtonsList = ({ returnUrl }) => {
+const ButtonsList = ({ returnUrl, strategies }) => {
   const theme = useTheme();
   const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
   const queryString = `?returnTo=${returnUrl}`;
@@ -30,7 +29,8 @@ const ButtonsList = ({ returnUrl }) => {
 };
 
 ButtonsList.propTypes = {
-  returnUrl: PropTypes.string.isRequired
+  returnUrl: PropTypes.string.isRequired,
+  strategies: PropTypes.array.isRequired
 };
 
 export default ButtonsList;
diff --git a/src/pages/login/ButtonsList.test.jsx b/src/pages/login/ButtonsList.test.jsx
@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import ButtonList from './ButtonsList';
+import strategies from './strategies';
+
+describe('App component', () => {
+  beforeEach(() => {
+    cleanup();
+  });
+  it('should render a button with the name', async () => {
+    // ARRANGE
+    //ACT
+    // ASSERT
+  });
+
+  it('should render a list of buttons', async () => {
+    // ARRANGE
+    const result = render(<ButtonList returnUrl="url" strategies={strategies} />);
+
+    //ACT
+
+    // ASSERT
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "asFragment": [Function],
+        "baseElement": <body>
+          <div>
+            <div
+              class="MuiStack-root css-3frvaj-MuiStack-root"
+            >
+              <a
+                class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-fullWidth css-jc1r49-MuiButtonBase-root-MuiButton-root"
+                href="http://localhost:6080/api/auth/google?returnTo=url"
+                tabindex="0"
+              >
+                <span
+                  class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
+                >
+                  <img
+                    alt="Google"
+                    src="/src/assets/images/icons/google.svg"
+                  />
+                </span>
+                Google
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </a>
+            </div>
+          </div>
+        </body>,
+        "container": <div>
+          <div
+            class="MuiStack-root css-3frvaj-MuiStack-root"
+          >
+            <a
+              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-fullWidth css-jc1r49-MuiButtonBase-root-MuiButton-root"
+              href="http://localhost:6080/api/auth/google?returnTo=url"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
+              >
+                <img
+                  alt="Google"
+                  src="/src/assets/images/icons/google.svg"
+                />
+              </span>
+              Google
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </div>,
+        "debug": [Function],
+        "findAllByAltText": [Function],
+        "findAllByDisplayValue": [Function],
+        "findAllByLabelText": [Function],
+        "findAllByPlaceholderText": [Function],
+        "findAllByRole": [Function],
+        "findAllByTestId": [Function],
+        "findAllByText": [Function],
+        "findAllByTitle": [Function],
+        "findByAltText": [Function],
+        "findByDisplayValue": [Function],
+        "findByLabelText": [Function],
+        "findByPlaceholderText": [Function],
+        "findByRole": [Function],
+        "findByTestId": [Function],
+        "findByText": [Function],
+        "findByTitle": [Function],
+        "getAllByAltText": [Function],
+        "getAllByDisplayValue": [Function],
+        "getAllByLabelText": [Function],
+        "getAllByPlaceholderText": [Function],
+        "getAllByRole": [Function],
+        "getAllByTestId": [Function],
+        "getAllByText": [Function],
+        "getAllByTitle": [Function],
+        "getByAltText": [Function],
+        "getByDisplayValue": [Function],
+        "getByLabelText": [Function],
+        "getByPlaceholderText": [Function],
+        "getByRole": [Function],
+        "getByTestId": [Function],
+        "getByText": [Function],
+        "getByTitle": [Function],
+        "queryAllByAltText": [Function],
+        "queryAllByDisplayValue": [Function],
+        "queryAllByLabelText": [Function],
+        "queryAllByPlaceholderText": [Function],
+        "queryAllByRole": [Function],
+        "queryAllByTestId": [Function],
+        "queryAllByText": [Function],
+        "queryAllByTitle": [Function],
+        "queryByAltText": [Function],
+        "queryByDisplayValue": [Function],
+        "queryByLabelText": [Function],
+        "queryByPlaceholderText": [Function],
+        "queryByRole": [Function],
+        "queryByTestId": [Function],
+        "queryByText": [Function],
+        "queryByTitle": [Function],
+        "rerender": [Function],
+        "unmount": [Function],
+      }
+    `);
+  });
+});
diff --git a/src/pages/login/ButtonsListItem.test.jsx b/src/pages/login/ButtonsListItem.test.jsx
@@ -61,7 +61,6 @@ describe('App component', () => {
     const result = render(<Button name="name" url="url" fullWidth icon="icon" />);
 
     //ACT
-    await screen.findByRole('link');
 
     // ASSERT
     expect(result).toMatchInlineSnapshot(`

diff --git a/src/pages/login/LoginCard.jsx b/src/pages/login/LoginCard.jsx
@@ -3,7 +3,7 @@ import { Grid, Stack, Typography, Box, Card } from '@mui/material';
 import ButtonsList from './ButtonsList';
 import logo from '~/assets/images/logo.png';
 
-const LoginCard = ({ returnUrl }) => (
+const LoginCard = ({ returnUrl, strategies }) => (
   <Card
     sx={{
       maxWidth: { xs: 400, lg: 475 },
@@ -27,7 +27,7 @@ const LoginCard = ({ returnUrl }) => (
         <Grid item xs={12}>
           <Grid container spacing={3}>
             <Grid item xs={12}>
-              <ButtonsList returnUrl={returnUrl} />
+              <ButtonsList strategies={strategies} returnUrl={returnUrl} />
             </Grid>
           </Grid>
         </Grid>
@@ -37,7 +37,8 @@ const LoginCard = ({ returnUrl }) => (
 );
 
 LoginCard.propTypes = {
-  returnUrl: PropTypes.string
+  returnUrl: PropTypes.string,
+  strategies: PropTypes.array.isRequired
 };
 
 export default LoginCard;
diff --git a/src/pages/login/LoginPage.jsx b/src/pages/login/LoginPage.jsx
@@ -3,6 +3,7 @@ import { Box, Grid } from '@mui/material';
 import Cookies from 'js-cookie';
 import { useEffect } from 'react';
 import LoginCard from './LoginCard';
+import strategies from './strategies';
 import { sessionCookieName } from '~/config';
 
 const LoginPage = () => {
@@ -37,7 +38,7 @@ const LoginPage = () => {
             sx={{ minHeight: { xs: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
           >
             <Grid item>
-              <LoginCard returnUrl={returnUrl} />
+              <LoginCard returnUrl={returnUrl} strategies={strategies} />
             </Grid>
           </Grid>
         </Grid>