resume feedback and resume portfolio tests

src/components/BlockContentLayoutContainer.tsx

@@ -40,9 +40,9 @@ import MMHeroContentSection from "./mackenzies-mind/MMHeroContentSection";
 import ResumeSkillsSection from "./my-digital-resume/resume-skills-section/ResumeSkillsSection";
 import ResumeExperienceSection from "./my-digital-resume/resume-experience-section/ResumeExperienceSection";
 import ResumeEducationSection from "./my-digital-resume/resume-education-section/ResumeEducationSection";
-import ResumeFeedbackSection from "./my-digital-resume/ResumeFeedbackSection";
+import ResumeFeedbackSection from "./my-digital-resume/resume-feedback-section/ResumeFeedbackSection";
 import ResumeContactUsSection from "./my-digital-resume/ResumeContactUsSection";
-import ResumePortfolioSection from "./my-digital-resume/ResumePortfolioSection";
+import ResumePortfolioSection from "./my-digital-resume/resume-portfolio-section/ResumePortfolioSection";
 import WebDevHeroContentSection from "./web-dev-site/WebDevHeroContentSection";
 import WebDevStatsCounterSection from "./web-dev-site/WebDevStatsCounterSection";
 import WebDevAboutUsSection from "./web-dev-site/WebDevAboutUsSection";

src/components/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.test.jsx

@@ -0,0 +1,17 @@
+import {render, screen} from '@testing-library/react';
+import expect from "expect";
+import {ResumePortfolioSectionStory} from "../../../stories/digital-resume/ResumePortfolio.stories";
+import {ResumeFeedbackSectionStory} from "../../../stories/digital-resume/ResumeFeedback.stories";
+
+describe('Resume Feedback Section', () => {
+ test('renders all components of feedback section', async () => {
+ render(<ResumeFeedbackSectionStory.render {...ResumeFeedbackSectionStory.args}/>)
+
+ expect((await screen.findByText('Feedback'))).toBeInTheDocument()
+ expect((await screen.findByText('.'))).toBeInTheDocument()
+ expect(await screen.findByText('Take a look at the reviews of my customers and ensure the quality of my services.')).toBeInTheDocument()
+ expect(await screen.findAllByText('JamWorks')).toHaveLength(2)
+ expect(await screen.findByText('CEO')).toBeInTheDocument()
+ expect(await screen.findByText('@')).toBeInTheDocument()
+ });
+})

src/components/my-digital-resume/ResumeFeedbackSection.tsx → src/components/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx

@@ -1,12 +1,12 @@
 import React, {FunctionComponent} from 'react'
 import {ThemeProvider} from "@mui/material/styles";
 import {Grid, Typography} from '@mui/material'
-import {ResumeFeedback, ResumeFeedbackSectionType} from "../BlockContentTypes";
-import useThwCommonStyles from "../../common/sanityIo/ThwCommonStyles";
-import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
-import {COLORS} from "../../theme/common/ColorPalette";
-import TheWebsiteTheme from "../../theme/Theme";
-import widthUtils from "../../utils/widthUtils";
+import {ResumeFeedback, ResumeFeedbackSectionType} from "../../BlockContentTypes";
+import useThwCommonStyles from "../../../common/sanityIo/ThwCommonStyles";
+import {urlFor} from "../../block-content-ui/static-pages/cmsStaticPagesClient";
+import {COLORS} from "../../../theme/common/ColorPalette";
+import TheWebsiteTheme from "../../../theme/Theme";
+import widthUtils from "../../../utils/widthUtils";
 
 
 interface IProps {

src/components/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.test.jsx

@@ -0,0 +1,16 @@
+import {render, screen} from '@testing-library/react';
+import expect from "expect";
+import {ResumePortfolioSectionStory} from "../../../stories/digital-resume/ResumePortfolio.stories";
+
+describe('Resume Portfolio Section', () => {
+ test('renders all components of portfolio section', async () => {
+ render(<ResumePortfolioSectionStory.render {...ResumePortfolioSectionStory.args}/>)
+
+ expect((await screen.findByText('Portfolio'))).toBeInTheDocument()
+ expect((await screen.findByText('.'))).toBeInTheDocument()
+ expect(await screen.findAllByRole('button')).toHaveLength(8)
+ expect(await screen.findByText('This is my Portfolio. These projects are in various stages of completion.')).toBeInTheDocument()
+ expect(await screen.findByText('Fintech Company Website')).toBeInTheDocument()
+ expect(await screen.findByText('Sep 2019')).toBeInTheDocument()
+ });
+})

src/components/my-digital-resume/ResumePortfolioSection.tsx → src/components/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx

@@ -1,12 +1,12 @@
 import React, {FunctionComponent} from 'react'
 import {StyledEngineProvider, ThemeProvider} from "@mui/material/styles";
 import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useTheme} from '@mui/material'
-import {ResumePortfolioItem, ResumePortfolioSectionType} from "../BlockContentTypes";
-import TheWebsiteTheme from "../../theme/Theme";
-import useThwCommonStyles from "../../common/sanityIo/ThwCommonStyles";
-import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
+import {ResumePortfolioItem, ResumePortfolioSectionType} from "../../BlockContentTypes";
+import TheWebsiteTheme from "../../../theme/Theme";
+import useThwCommonStyles from "../../../common/sanityIo/ThwCommonStyles";
+import {urlFor} from "../../block-content-ui/static-pages/cmsStaticPagesClient";
 import {Close} from "@mui/icons-material";
-import dateUtils from "../../utils/dateUtils";
+import dateUtils from "../../../utils/dateUtils";
 
 interface IProps {
  sectionData: ResumePortfolioSectionType
@@ -51,6 +51,7 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
  {
  props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => {
  return <Grid key={index2}
+ role='portfoliobutton'
  style={{backgroundColor: index2 % 2 === 1 ? "whitesmoke" : "white"}}
  container item xs={6} sm={4} lg={4} xl={4} alignContent='flex-start'
  justifyContent='center'>

src/stories/data/ResumeFeedbackSectionData.ts

@@ -18,16 +18,16 @@ const ResumeFeedbackSectionData:ResumeFeedbackSectionType = {
  // "_updatedAt": "2022-12-01T21:24:38Z",
  "quote": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable Engl",
  // "_createdAt": "2022-12-01T20:55:41Z",
- "companyName": "JamWorks 24/7",
- "name": "JamWorks 24/7",
+ "companyName": "JamWorks",
+ "name": "JamWorks",
  "imageSrc": {
  "asset": {
  "_ref": "image-ba4a7c9c01e632950293be433ab1f95560800ce5-728x290-png",
  "_type": "reference"
  },
  "_type": "image"
  },
- "customerName": "JamWorks 24/7",
+ "customerName": "JamWorks",
  "customerTitle": "CEO",
  // "_rev": "QoSfkmWVFCw5OU4CBmXCaz",
  "_type": "ResumeFeedback"

src/stories/digital-resume/ResumeFeedback.stories.tsx

@@ -1,13 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react';
-import ResumeSkillsSection from "../../components/my-digital-resume/resume-skills-section/ResumeSkillsSection";
-import ResumeSkillSectionData from "../data/ResumeSkillSectionData";
-import ResumeExperienceSection from "../../components/my-digital-resume/resume-experience-section/ResumeExperienceSection";
-import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData";
-import ResumeFeedbackSection from "../../components/my-digital-resume/ResumeFeedbackSection";
+import ResumeFeedbackSection from "../../components/my-digital-resume/resume-feedback-section/ResumeFeedbackSection";
 import ResumeFeedbackSectionData from "../data/ResumeFeedbackSectionData";
 
 const meta: Meta<typeof ResumeFeedbackSection> = {
- title:"Resume/Section/Resume Feedback Section",
+ title: "Resume/Section/Resume Feedback Section",
  component: ResumeFeedbackSection,
 };
 
@@ -21,8 +17,8 @@ type Story = StoryObj<typeof ResumeFeedbackSection>;
  * to learn how to use render functions.
  */
 
-export const Primary: Story = {
- args:{
+export const ResumeFeedbackSectionStory: Story = {
+ args: {
  sectionData: ResumeFeedbackSectionData
  },
  render: ({sectionData}) => <ResumeFeedbackSection sectionData={sectionData}></ResumeFeedbackSection>,

src/stories/digital-resume/ResumePortfolio.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import ResumePortfolioSectionData from "../data/ResumePortfolioSectionData";
-import ResumePortfolioSection from '../../components/my-digital-resume/ResumePortfolioSection';
+import ResumePortfolioSection from '../../components/my-digital-resume/resume-portfolio-section/ResumePortfolioSection';
 
 const meta: Meta<typeof ResumePortfolioSection> = {
  title:"Resume/Section/Resume Portfolio Section",
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof ResumePortfolioSection>;
  * to learn how to use render functions.
  */
 
-export const Primary: Story = {
+export const ResumePortfolioSectionStory: Story = {
  args:{
  sectionData: ResumePortfolioSectionData
  },