Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: increases test coverage for Components folder #22

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

test: increases test coverage for Components folder #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9ed0725
refactor: corrects typo in file name
wsameer Oct 15, 2021
dc2f0ec
test: adds tests for Footer component
wsameer Oct 15, 2021
1d3b76f
test: adds tests for FormInput component
wsameer Oct 15, 2021
94e2a5a
test: adds tests for Header components
wsameer Oct 15, 2021
7b9555f
test: mocks window.matchMedia function for jest
wsameer Oct 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 24 additions & 29 deletions components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,31 @@ import {
Container,
Stack,
Text,
Link,
useColorModeValue,
} from '@chakra-ui/react';
} from "@chakra-ui/react";

export default function Footer() {
return (
<Box
bg={useColorModeValue('gray.50', 'gray.900')}
color={useColorModeValue('gray.700', 'gray.200')}
// css={{
// backdropFilter: 'saturate(180%) blur(5px)',
// backgroundColor: useColorModeValue(
// 'rgba(255, 255, 255, 0.8)',
// 'rgba(26, 32, 44, 0.8)'
// ),
// }}
>
import React from "react";

export const Footer = () => (
<Box
bg={useColorModeValue("gray.50", "gray.900")}
color={useColorModeValue("gray.700", "gray.200")}
>
<Container
as={Stack}
maxW={'6xl'}
py={4}
direction={{ base: 'column', md: 'row' }}
spacing={4}
justify={{ base: 'center', md: 'space-between' }}
align={{ base: 'center', md: 'center' }}>
<Stack direction={'row'} spacing={6}>
<Text>Build with ❤️ from Nigeria. Teencode Africa </Text>
</Stack>
<Text>© {new Date().getFullYear()}. All rights reserved</Text>
as={Stack}
maxW={"6xl"}
py={4}
direction={{ base: "column", md: "row" }}
spacing={4}
justify={{ base: "center", md: "space-between" }}
align={{ base: "center", md: "center" }}
>
<Stack direction={"row"} spacing={6}>
<Text>Build with ❤️ from Nigeria. Teencode Africa </Text>
</Stack>
<Text>© {new Date().getFullYear()}. All rights reserved</Text>
</Container>
</Box>
);
}
</Box>
);

export default Footer;
9 changes: 9 additions & 0 deletions components/Footer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { render } from "@testing-library/react";
import Footer from "./Footer";

describe("Footer", () => {
it("should render properly", () => {
const { container } = render(<Footer />);
expect(container).toMatchSnapshot();
});
});
16 changes: 7 additions & 9 deletions components/FormInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React from 'react'
import { Input } from '@chakra-ui/react';
import React from "react";
import { Input } from "@chakra-ui/react";

export default function FormInput(props) {
return (
<>
<Input {...props} focusBorderColor="#181C27" color="#181C27" />
</>
)
}
const FormInput = (props) => (
<Input {...props} focusBorderColor="#181C27" color="#181C27" />
);

export default FormInput;
29 changes: 29 additions & 0 deletions components/FormInput.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { render, fireEvent, screen } from "@testing-library/react";
import FormInput from "./FormInput";

describe("FormInput", () => {
it("should render an <input /> element", () => {
render(<FormInput placeholder="First name"/>);
expect(screen.getByPlaceholderText(/first name/i)).toBeInTheDocument();
});

it("should call the onChange event if passed", () => {
const mockOnChange = jest.fn();
render(<FormInput placeholder="First name" onChange={mockOnChange} />);
const input = screen.getByPlaceholderText(/first name/i);
fireEvent.change(input, {
target: { value: "Roger" },
});
expect(mockOnChange).toBeCalled();
});

it("should call the update the value onChange", () => {
const mockOnChange = jest.fn();
render(<FormInput placeholder="First name" onChange={mockOnChange} />);
const input = screen.getByPlaceholderText(/first name/i);
fireEvent.change(input, {
target: { value: "Roger" },
});
expect(input.value).toBe("Roger");
});
});
170 changes: 94 additions & 76 deletions components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,84 @@ import {
useColorModeValue,
useBreakpointValue,
useDisclosure,
} from '@chakra-ui/react';
} from "@chakra-ui/react";
import {
HamburgerIcon,
CloseIcon,
ChevronDownIcon,
ChevronRightIcon,
} from '@chakra-ui/icons';
} from "@chakra-ui/icons";

export default function Header() {
const { isOpen, onToggle } = useDisclosure();

return (
<Box>
<Flex
bg={useColorModeValue('white', 'gray.800')}
color={useColorModeValue('gray.600', 'white')}
minH={'60px'}
bg={useColorModeValue("white", "gray.800")}
color={useColorModeValue("gray.600", "white")}
minH={"60px"}
py={{ base: 2 }}
px={{ base: 4 }}
borderBottom={1}
borderStyle={'solid'}
borderColor={useColorModeValue('gray.200', 'gray.900')}

align={'center'}>
borderStyle={"solid"}
borderColor={useColorModeValue("gray.200", "gray.900")}
align={"center"}
>
<Flex
flex={{ base: 1, md: 'auto' }}
flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }}
display={{ base: 'flex', md: 'none' }}>
display={{ base: "flex", md: "none" }}
>
<IconButton
onClick={onToggle}
icon={
isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
isOpen ? (
<CloseIcon w={3} h={3} />
) : (
<HamburgerIcon w={5} h={5} />
)
}
variant={'ghost'}
aria-label={'Toggle Navigation'}
variant={"ghost"}
aria-label={"Toggle Navigation"}
/>
</Flex>
<Flex w={"250px"} flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
<Flex
w={"250px"}
flex={{ base: 1 }}
justify={{ base: "center", md: "start" }}
>
<Text
fontSize="2xl"
textAlign={useBreakpointValue({ base: 'center', md: 'left' })}
fontFamily={'heading'}
textAlign={useBreakpointValue({
base: "center",
md: "left",
})}
fontFamily={"heading"}
className="u-stroke"
color={useColorModeValue('gray.800', 'white')}>
color={useColorModeValue("gray.800", "white")}
>
Grand resume
</Text>


</Flex>

<Stack
flex={{ base: 1, md: 0 }}
justify={'flex-end'}
direction={'row'}
spacing={6}>

justify={"flex-end"}
direction={"row"}
spacing={6}
>
<Button
display={{ base: 'none', md: 'inline-flex' }}
fontSize={'sm'}
display={{ base: "none", md: "inline-flex" }}
fontSize={"sm"}
fontWeight={600}
color={'white'}
bg={'#181C27'}
href={'#'}
color={"white"}
bg={"#181C27"}
href={"#"}
_hover={{
bg: '#181C27',
}}>
bg: "#181C27",
}}
>
Get started
</Button>
</Stack>
Expand All @@ -89,57 +101,92 @@ export default function Header() {
);
}

const MobileNav = () => {
export const MobileNav = () => {
const NAV_ITEMS = [
{
label: "Templates",
children: [
{
label: "Danfo",
subLabel: "Trending Design to inspire you",
href: "#",
},
{
label: "Google ",
subLabel: "Up-and-coming Designers",
href: "#",
},
{
label: "Uber",
// subLabel: 'Up-and-coming Designers',
href: "#",
},
],
},
{
label: "Contribute a Template",
href: "#",
},
];

return (
<Stack
bg={useColorModeValue('white', 'gray.800')}
bg={useColorModeValue("white", "gray.800")}
p={4}
display={{ md: 'none' }}>
display={{ md: "none" }}
>
{NAV_ITEMS.map((navItem) => (
<MobileNavItem key={navItem.label} {...navItem} />
))}
</Stack>
);
};

const MobileNavItem = ({ label, children, href }) => {
export const MobileNavItem = ({ label, children, href }) => {
const { isOpen, onToggle } = useDisclosure();

return (
<Stack spacing={4} onClick={children && onToggle}>
<Flex
py={2}
as={Link}
href={href ?? '#'}
justify={'space-between'}
align={'center'}
href={href ?? "#"}
justify={"space-between"}
align={"center"}
_hover={{
textDecoration: 'none',
}}>
textDecoration: "none",
}}
>
<Text
fontWeight={600}
color={useColorModeValue('gray.600', 'gray.200')}>
color={useColorModeValue("gray.600", "gray.200")}
>
{label}
</Text>
{children && (
<Icon
as={ChevronDownIcon}
transition={'all .25s ease-in-out'}
transform={isOpen ? 'rotate(180deg)' : ''}
transition={"all .25s ease-in-out"}
transform={isOpen ? "rotate(180deg)" : ""}
w={6}
h={6}
/>
)}
</Flex>

<Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}>
<Collapse
in={isOpen}
animateOpacity
style={{ marginTop: "0!important" }}
>
<Stack
mt={2}
pl={4}
borderLeft={1}
borderStyle={'solid'}
borderColor={useColorModeValue('gray.200', 'gray.700')}
align={'start'}>
borderStyle={"solid"}
borderColor={useColorModeValue("gray.200", "gray.700")}
align={"start"}
>
{children &&
children.map((child) => (
<Link key={child.label} py={2} href={child.href}>
Expand All @@ -151,32 +198,3 @@ const MobileNavItem = ({ label, children, href }) => {
</Stack>
);
};


const NAV_ITEMS = [
{
label: 'Templates',
children: [
{
label: 'Danfo',
subLabel: 'Trending Design to inspire you',
href: '#',
},
{
label: 'Google ',
subLabel: 'Up-and-coming Designers',
href: '#',
},
{
label: 'Uber',
// subLabel: 'Up-and-coming Designers',
href: '#',
},
],
},
{
label: 'Contribute a Template',
href: '#',
},

];
Loading