test: update cypress, add component testing in CI, add Cypress Cloud #153
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Someone is attempting to deploy a commit to a Personal Account owned by @TechIsHiring on Vercel. @TechIsHiring first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
chadstewart
added a commit
that referenced
this pull request
Sep 14, 2023
* Added Code Quality GitHub Action (#56) * Added GitHub Action that runs tests and linters on PRs going to dev and main. * Updating code quality GitHub Action to remove strategy section. * Forgot to remove strategy from linter GitHub Action. * Added specific GitHub Action for running Cypress tests. * Added proper name to Cypress GitHub Action. Updated Cypress to run tests on chrome. * Changing cy.visit to check if this would solve the failing test. * Trying to add timeout to fix cypress error. * Adding start to Cypress GitHub Action. * Adding GitHub Action to build next project before running Cypress. * Removing npm build to try and run dev server to run Cypress test. * Completed Hero Section component (#52) * finished building the hero section, need to review * made suggested changes * made small changes on index.ts * #57 - Added prettier and prettier-plugin-tailwindcss (#58) * Added prettier and prettier-plugin-tailwindcss, added baseline rules, ran files through prettier * Moved eslint-disable-next-line rule down This is correcting an error caused by prettier formatting. * Feature: Added the contact page (#53) * feature: added the contact page and added the head component to particles * feature: completed the contact page and made it responsive * feature: added the contact page and added the head component to particles * fix: fixed issues generated in pr but left the nextjs config issues unresolved * fix: added stories to the storybook * fix: fixed issue generated in the pr * fix: fixed issue generated in the pr --------- Co-authored-by: Chad Rhonan Stewart <chadrhonanstewart@gmail.com> * #60 Remove Arbitrary blockers to deploying code (#61) * Updated eslintrc file to remove rules that are now being managed by prettier. * Forgot that I had deleted the noEmitOnError in tsconfig. * feat: completed the header component (#63) * feat: completed the header component * addressed merge conflicts * fix: making recommended changes * fix: adding back the accessibilit icon on main nav * Updated the CONTRIBUTING.MD (#66) * Refactor: Cleaned up Icon to remove Link, useNav to have external link alt text and updated PR Template (#71) * Refactored icon to no longer have a link component inside of it and updated Footer component accordingly. * Added external link alt text to useNav and updated mainNav to use external link alt text from hook. Need to work on type definitions to force defining an external link alt text when defining an external link. * Updated Pull Request Template to add a guide to linking issues so that they automatically close when the PR is merged. * Forgot to update story on icon. Removed the Link story. * Feat: added the about-page and refactored contact layout (#72) * feature: added the contact page and added the head component to particles * feature: completed the contact page and made it responsive * feature: added the contact page and added the head component to particles * fix: fixed issues generated in pr but left the nextjs config issues unresolved * fix: added stories to the storybook * feature: added about page * feature: added the about page * fix: fixed issues generated in the PR * feat: added a preloader to the tweet feed * fix: fixed issues generated in the PR * fixed contact-stories issue * feat: added about page * fixed issues generated in PR * fixed issues generated in PR * refactored the about page * fixed issues generated in the PR * fix: fixed issues generated in the PR --------- Co-authored-by: Chad Rhonan Stewart <chadrhonanstewart@gmail.com> * fix: fixed issue on preloader (#78) * Fix the background image in contact page (#79) * increase the height of the image * . * Delete yarn.lock Just deleting the yarn.lock file. --------- Co-authored-by: Chad Rhonan Stewart <chadrhonanstewart@gmail.com> * feat: added "why choose TechIsHiring" section (#77) * feat: completed the header component * addressed merge conflicts * fix: making recommended changes * fix: adding back the accessibilit icon on main nav * feat: adding why-choose section of the home page * fixed the large hero section * fix: added changes to why choose us section * feat: completed the footer section (#81) * feat: completed the header component * addressed merge conflicts * fix: making recommended changes * fix: adding back the accessibilit icon on main nav * updating my dev branch * feat:adding footer section * fix: added requested changes to the component * Fix: Fixed issue where Social Media icons and Contact Us Button didn't link anywhere. (#83) * Fixed issue where social links where not working. * Fixed issue where Contact Us button in desktop navbar did not have a link. * Added external link icon to newsletter link in footer. * Forgot that 'Contact Us' text was hard coded and removed that to dynamically use the text from the use-nav hook. * Fix: Replaced Hero Section background image (#85) * Initial commit to resolve issue #80. * Replaced hero background image and did some clean up to the app. * Fixing some typos because they irk me, lol. * Updated the README to add a link to the dev environment. * Make contact page mobile bg image visible up to 1024px width #90 (#91) * Make contact page mobile bg image visible up to 1024px width #90 * done the suggested change * Making Footer Nav mirror Home Nav and fixing some bugs (#92) * Added useMainNav to footer so that when the nav hook is updated, both the main nav and the footer is updated automatically. * Commented out search bar until a decision is made on the Twitter API. Very likely we won't use it further but until a decision is concrete, let's keep the code. * Updated storybook titles to match previous storybook titles. * Updated structure of app so that why choose section is not embedded in another folder. Also created story for why choose section. * Fixed issue where contact page image was not fitting design properly in smaller windows sizes. * Fixed issue where underline would appear under contact us button. * Made some changes to about page where media query was at 768px instead of 1024px. * Made a 'Hire Chad' Page (#94) * Starting to make the hire-chad page. * Continuing work on hire-chad page. Added image and about to add content. * Added basic set up for hire-chad page. * Doing some updates. * Making my profile mobile friendly. * Just cleaning up some css. * Added some links to about page. * Deleted test image to clean up image folder. * Fixing my profile pic and the head content. * Fixed meta tag stuff. * Added link to hire chad page in about page. * Updated social links for hire chad page. * Updated hire chad page with description and some minor css updates. * Fixed issue with footer nav being too small. * Added stories for the hire chad page. * Fixing an issue with about page. * Fixed another issue I found with the about page. * Update API Layer (#95) * Beginning work to update api layer. * Updated API Layer to use fetch api instead of axios. * Updated api layer documentation and deleted newsletter page and related api files. * Adding blank file to external-apis folder to preserve the folder structure in git. * Removing newsletter issue api return types and putting an example in place for when new types are added. * Removing newsletter components and respective stories. * Forgot to remove axios from the README. * Added async & await to get example request documentation. * Upgrade to Next.js 13 and TypeScript 5 (#96) * Upgraded to Next.js 13 and TypeScript 5 * Starting conversion of link tag to fit Next.js 13 standard. * Updated interfaces, moving url to navlink interface. Continuing update to Next.js 13 standard. * Completed Link conversion to Next.js 13 standard. Removed newsletter entry component as I forgot to remove it in earlier PR. * Updating image in hero section based off of Next.js 13 warning. * Fixed issue with storybook failing to build because of a React Docgen error involving TypeScript 5. Current solution will be easy to remove once the issue is resolved or in upgrading to Storybook 7. * Updated storybook to latest stable version. * Moved active link from link interface to navlink interface and removed reference from atom. Fixed a few other minor issues. * Updating issue templates and a quick fix in project. (#99) * Make Contact Us Page functional (#100) * Did initial work to set up Contact page. Successfully integrated Sendgrid. Just need to set up sending the email through the form now. * Working on creating email endpoint. * Added the endpoint function to the function. Now need to verify data. * Successfully added endpoint to form. Just need to test that it sends the data correctly. * Successfully sent message to backend. Just putting together email now. * Successfully make contact us form functional. Will likely need to work on more validation. * Updating documentation for creating api endpoints. * Adding max length to input boxes so messages aren't too big. * Added error messages to each input field in contact us page. * Added form validation to contact us form. * Added messages on different api states, a success message and an error message. * Fixed issue where div would become small when error message appeared on mobile. * Fixed an issue that I caused when trying to fix the previous issue, lol. Also removed base url cause I just realized I don't need that, double lol. * Added Zod and SendGrid to list of technologies in README. Added guard clause to process-email serverless function to not send an email if the request is invalid. * Making some changes based on code review. * Forgot to clean something up, lol. * Fixing an issue with contact us page. (#104) * Fixing an issue with contact us page. * Change I made messed up the error message window. Had to fix that really quickly. * Added spinner to contact us form. Updated Spinner for Twitter Feed. (#107) * Fixed issue where height in hero page was a static number. * Added spinner to contact us form. Updated Spinner for Twitter Feed. * Updated Spinner to be it's own atom and made storybook story for it. * Added 'TechIsHiring Highlights' Component (#109) * Added highlight content component for TechIsHiring highlights. * Added basic structure of TechIsHiring highlights. * Completed basic styling of highlights component. Just adding loading state and choosing tweets to highlight. * Completed loading state for tweets. * Added specific Tweets to be featured. * Fixed issue with hero section where it was too large in desktop view. * Added stories for highlights details and highlights content. Also made some minor updates to other stories titles. * Adjusting TechIsHiring Highlights header text * Updating stories that were .jsx to .tsx. * Updated headers for sections of front page so they are more similar to each other. * Updating social card location because it is no longer working. * Adding a social card for the hire-chad page. * Updating TechIsHiring newsletter link to use new subdomain. (#112) * Fix: #75 Website no longer stretches past 1920px (#114) * Fixed issue where the site would stretch to fill screen size and look distorted at large screen sizes. * Moved padding in header component so that the header still has proper padding beyond max screen size. * Updated cypress test because header changed and forgot cypress test was checking for it. * Changed max screen width to 1920px from 1440px. * Removing border from card component and updating comments in tailwind config. * Fixed issue with width in footer where the footer wasn't taking up all the available space when the window size is less than 1920px. (#118) * added contact us image (#141) * test: set up cypress component testing and test footer (#140) * add cypress asset folders to .gitignore * update cypress to latest * set up Cypress component testing * remove red squiglies * add custom cy.validateLink command for this project * add data-cy attributes for testing * add validateFooter util and footer component test * test homepage footer from e2e homepage test * minor tweaks * use cy.within() to simplify selector code * add check-ts for easy typescript validation * add declarations.d.ts * add devcontainer to project #120 (#145) * add devcontainer to project * add codespaces instructions to readme * Update README.md (#149) Fixed Markdown formatting * refactor: import Heading instead of Text from chakra-ui for rendering h1 (#151) * refactor: import Heading instead of Text from chakra-ui for rendering h1 * edit cypress e2e testing for heading vs text * test: update cypress, add component testing in CI, add Cypress Cloud (#153) * configure baseUrl in one place for e2e tests * update Cypress version to latest * add component testing to the github action * add cypress project id * add steps to run tests in parallel * skip building * skip building * remove extra branch, update container count * 144 process-email type validation with zod (#157) * adding type validation with Zod for process-email * Feature: Type validation with zod for process-email api * Dg fix issue 159 (#160) * Fix Code of Conduct link * Revert "Fix Code of Conduct link" This reverts commit 7279538. * Fix for issue 159 --------- Co-authored-by: Hassan Shan <hassanshan675@gmail.com> Co-authored-by: Roy Anger <roy@royanger.com> Co-authored-by: Elimihele God's favour <godsfavour1975@gmail.com> Co-authored-by: Demehin Ibukunoluwa George <ibk2k7@gmail.com> Co-authored-by: DevTofunmi <98407328+devtofunmi@users.noreply.github.com> Co-authored-by: himanshukrmr <100120679+himanshukrmr@users.noreply.github.com> Co-authored-by: Cynthia Iradukunda <37863089+ciradu2204@users.noreply.github.com> Co-authored-by: Mark Noonan <mark@cypress.io> Co-authored-by: Kedasha Kerr <47188731+LadyKerr@users.noreply.github.com> Co-authored-by: René Preuß <rene@preuss.io> Co-authored-by: Yire Morlans <93563580+yiremorlans@users.noreply.github.com> Co-authored-by: Sadaf Ahmed <119438857+Sadaf-A@users.noreply.github.com> Co-authored-by: dgodongm <123777263+dgodongm@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Related Issue
Resolves: #152
Motivation and Context
I realized when we set up component testing, we did not set it to run in GitHub Actions for this project. Also in talking with Chad we decided to set up a Cypress Cloud project to help with test times by running things in parallel. This also gives us a place to review results and assets like videos/screenshots from tests.
The Cloud integration will fail until we set a CYPRESS_RECORD_KEY environment variable in this repository. This run was recorded against my fork of this project.
Additionally I've made a couple of other changes around the testing setup, lets go through them file by file:
code-quality.ymlcypress-installstep job, needed for parallelization - it runsnpm ciand provides a common starting point for the parallel runs.wait-on: 'http://localhost:3000'to ensure Next dev server has properly stood up before e2e testing begins.cypress-run-componentjob and renamecypress-runtocypress-run-e2e, and give each one a matchinggroup. This allows results from the two separate sets of test to be merged in a single "run" within Cypress.GITHUB_TOKENandCYPRESS_RECORD_KEY. We must add theCYPRESS_RECORD_KEYfor the project, but theGITHUB_TOKENis provided automatically when the action runs - we do not need anybody to generate a github authentication token.cypress.config.tsvisited URL.cypress/e2e/contactuspage.cy.tsandcypress/e2e/contactuspage.cy.tsRemove
http://localhost:3000from tests, as that is now configured as thebaseUrlfor this project.package.jsonUpdate Cypress to the latest version.
How Has This Been Tested?
Here is an example run showing the e2e and component tests have both run, and been parallelized and recorded to Cypress Cloud.
Screenshots (if appropriate):
Run information in Cypress cloud.