adjusting test to be more resilient

codeforpdx · Nov 25, 2023 · d151b55 · d151b55
1 parent d8054bd
commit d151b55
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -47,14 +47,15 @@ const Home = () => {
 
   const logoSection = isReallySmallScreen ? (
     <Typography component="h1" color="primary">
-      <Stack component="span" justifyContent="center" alignItems="center" spacing={2} mb={2}>
-        <Typography
-          variant="h1"
-          component="span"
-          fontWeight="500"
-          fontSize="72px"
-          data-testid="testHomeH1"
-        >
+      <Stack
+        component="span"
+        justifyContent="center"
+        alignItems="center"
+        spacing={2}
+        mb={2}
+        data-testid="testStack"
+      >
+        <Typography variant="h1" component="span" fontWeight="500" fontSize="72px">
           {heading}
         </Typography>
         <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
@@ -65,7 +66,13 @@ const Home = () => {
     </Typography>
   ) : (
     <Typography component="h1" color="primary">
-      <Stack justifyContent="center" alignItems="center" spacing={4} mb={18}>
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        spacing={4}
+        mb={18}
+        data-testid="testStack"
+      >
         <Stack
           component="span"
           direction="row"
@@ -74,13 +81,7 @@ const Home = () => {
           spacing={4}
         >
           <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
-          <Typography
-            variant="h1"
-            component="span"
-            fontWeight="500"
-            fontSize="144px"
-            data-testid="testHomeH1"
-          >
+          <Typography variant="h1" component="span" fontWeight="500" fontSize="144px">
             {heading}
           </Typography>
         </Stack>

diff --git a/test/pages/Home.test.jsx b/test/pages/Home.test.jsx
@@ -1,30 +1,32 @@
 import React from 'react';
 import { render, cleanup, screen } from '@testing-library/react';
-import { expect, it, afterEach, describe } from 'vitest';
+import { expect, describe, it, afterEach } from 'vitest';
 import { Home } from '@pages';
 import createMatchMedia from '../helpers/createMatchMedia';
 
 describe('Home Page', () => {
   afterEach(cleanup);
-  // if tests are failing check this value vs value in Home.jsx
-  const h1FontSize = '144px';
 
-  it('renders desktop', () => {
+  it('renders with correct order of logoSection on mobile', () => {
+    window.matchMedia = createMatchMedia(599);
     render(<Home />);
-    const h1 = screen.getByTestId('testHomeH1');
-    const h1Styles = getComputedStyle(h1);
+    const h1 = screen.getByTestId('testStack');
+    const children = Array.from(h1.children);
 
-    expect(screen.getByTestId('testHomeSection')).toBeDefined();
-    expect(h1Styles.fontSize).toBe(h1FontSize);
+    expect(children.length).toBe(3);
+    expect(children[0].tagName.toLowerCase()).toBe('span');
+    expect(children[1].tagName.toLowerCase()).toBe('img');
+    expect(children[2].tagName.toLowerCase()).toBe('span');
   });
 
-  it('renders mobile', () => {
-    window.matchMedia = createMatchMedia(599);
+  it('rrenders with correct order of logoSection on desktop', () => {
+    window.matchMedia = createMatchMedia(1200);
     render(<Home />);
-    const h1 = screen.getByTestId('testHomeH1');
-    const h1Styles = getComputedStyle(h1);
+    const h1 = screen.getByTestId('testStack');
+    const children = Array.from(h1.children);
 
-    expect(screen.getByTestId('testHomeSection')).toBeDefined();
-    expect(h1Styles.fontSize).not.toBe(h1FontSize);
+    expect(children.length).toBe(2);
+    expect(children[0].tagName.toLowerCase()).toBe('span');
+    expect(children[1].tagName.toLowerCase()).toBe('span');
   });
 });