feat: adding unit tests for layout component #1914

reachaadrika · 2023-07-07T17:19:52Z

Description

A brief Introduction , about Layout component , this component , has the basic layouts for all other components , and it renders the pattern in which these components have to be rendered
BlogLayout : This component renders the Blog like structure and renders the blog posts for this .
Column Layout : This component renders any children component in column component
DocsLayout : This component renders the Docs like structure and renders the docs posts for this

-JobsLayout : This component renders the Jobs like structure and renders the docs posts for this

GenericLAYOUT , GenericPostLayout , GenericWideLayout : These components are for Generic components , where by passing props like title , images and others we can modify it too .

-Layout , this component is the main file and renders the component based on various if and else basis , according to the pathnames , here I have added some extra divs that wraps these components for testing .

NOTE :- These components had extensive use of routers , thus I mocked routers since cypress doesn't provide this functionality I have mocked a Router and then wrapped the children components and have passed the pathname to it as value .

Related issue(s)
fixes #1913

netlify · 2023-07-07T17:19:58Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`b9453a0`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b3d4df3b7e24000885590a
😎 Deploy Preview	https://deploy-preview-1914--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-07-07T17:23:34Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	45
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1914--asyncapi-website.netlify.app/

… layout_tests

akshatnema · 2023-07-13T08:47:23Z

components/layout/Container.js

-    <Tag className={fluid ? fluidClassNames : normalClassNames}>
+    <Tag
+      className={fluid ? fluidClassNames : normalClassNames}
+      data-testid="Container-div"


Suggested change

data-testid="Container-div"

data-testid="Container-main"

Applicable everywhere

components/layout/DocsLayout.js

components/layout/GenericLayout.js

akshatnema · 2023-07-13T08:59:30Z

components/layout/JobsLayout.js

+              <ApplyJobButton
+                job={post}
+                className="mt-4 inline-block"
+                data-testid="ApplyJobLayout"


Suggested change

data-testid="ApplyJobLayout"

data-testid="ApplyJobButton"

akshatnema · 2023-07-13T09:03:21Z

components/AlgoliaSearch.js

+  onOpen: () => {},
+  onClose: () => {},
+  onInput: () => {},


Why are the functions, part of React Context?

cypress/test/layout/GenericPostLayout.cy.js

akshatnema · 2023-07-13T09:20:29Z

cypress/test/layout/GenericPostLayout.cy.js

+    },
+    {
+      content: 'Most popular repositories',
+      slug: 'most-popular-repositories',
+      lvl: 3,
+      i: 19,
+      seen: 0,
+    },
+    {
+      content: 'Traffic growth',
+      slug: 'traffic-growth',
+      lvl: 3,
+      i: 20,
+      seen: 0,
+    },
+    {
+      content: "What's next with GitHub",
+      slug: 'whats-next-with-github',
+      lvl: 3,
+      i: 21,
+      seen: 0,
+    },
+    {
+      content: 'npm',
+      slug: 'npm',
+      lvl: 2,
+      i: 22,
+      seen: 0,
+    },
+    {
+      content: 'Top packages',
+      slug: 'top-packages',
+      lvl: 3,
+      i: 23,
+      seen: 0,
+    },
+    {
+      content: "What's next with npm",
+      slug: 'whats-next-with-npm',
+      lvl: 3,
+      i: 24,
+      seen: 0,
+    },
+    {
+      content: 'YouTube',
+      slug: 'youtube',
+      lvl: 2,
+      i: 25,
+      seen: 0,
+    },
+    {
+      content: 'Watch time goes crazy',
+      slug: 'watch-time-goes-crazy',
+      lvl: 3,
+      i: 26,
+      seen: 0,
+    },
+    {
+      content: 'Most popular videos',
+      slug: 'most-popular-videos',
+      lvl: 3,
+      i: 27,
+      seen: 0,
+    },
+    {
+      content: "What's next with YouTube",
+      slug: 'whats-next-with-youtube',
+      lvl: 3,
+      i: 28,
+      seen: 0,
+    },
+    {
+      content: 'Open Collective',
+      slug: 'open-collective',
+      lvl: 2,
+      i: 29,
+      seen: 0,
+    },
+    {
+      content: 'Ultimate questions - how many people use the spec?',
+      slug: 'ultimate-questions---how-many-people-use-the-spec',
+      lvl: 2,
+      i: 30,
+      seen: 0,
+    },
+    {
+      content: 'Final words',
+      slug: 'final-words',
+      lvl: 2,
+      i: 31,
+      seen: 0,
+    },
+  ],
+  readingTime: 18,
+  sectionSlug: '/blog',
+  sectionWeight: 0,
+  id: 'pages/blog/2020-summary.md',
+  isIndex: false,
+  slug: '/blog/2020-summary',
+};


Test data shouldn't be part of test files. Make these content available inside fixtures folder

akshatnema · 2023-07-13T09:23:51Z

cypress/test/layout/GenericWideLayout.cy.js

@@ -0,0 +1,32 @@
+import { mount } from 'cypress/react';


Delete this component test file as it is no more in use inside codebase.

akshatnema · 2023-07-13T09:26:00Z

cypress/test/layout/JobsLayout.cy.js

+const post = {
+  title: 'API Architect',
+  date: '06/22/2021',
+  category: 'Architect',
+  closingOn: '08/22/2021',
+  contact: 'https://apiture.com/careers/?gh_jid=5303104002',
+  company: {
+    name: 'Apiture',
+    logoUrl: '/img/logos/companies/apiture.png',
+  },
+  toc: [
+    {
+      content: 'About the team',
+      slug: 'about-the-team',
+      lvl: 2,
+      i: 0,
+      seen: 0,
+    },
+    {
+      content: 'TL;DR',
+      slug: 'tldr',
+      lvl: 2,
+      i: 1,
+      seen: 0,
+    },
+    {
+      content: 'About the job',
+      slug: 'about-the-job',
+      lvl: 2,
+      i: 2,
+      seen: 0,
+    },
+    {
+      content: 'About you',
+      slug: 'about-you',
+      lvl: 2,
+      i: 3,
+      seen: 0,
+    },
+    {
+      content: 'Pay and benefits',
+      slug: 'pay-and-benefits',
+      lvl: 2,
+      i: 4,
+      seen: 0,
+    },
+  ],
+  readingTime: 5,
+  excerpt:
+    'About the team\n\nWe are an open API banking platform, focused on creating cutting-edge technology for financial institutions.\nThe platform allows banks the fast and flexible deployment of features that',
+  sectionSlug: '/jobs',
+  sectionWeight: 0,
+  id: 'pages/jobs/apiture-api-architect.md',
+  isIndex: false,
+  slug: '/jobs/apiture-api-architect',
+};


Add this static data in fixtures/post.json and then use it here.

cypress/test/layout/Layout.cy.js

cypress/utils/router.js

akshatnema · 2023-07-13T09:29:40Z

cypress/utils/router.js

+MockRouter.propTypes = {
+  children: PropTypes.node.isRequired,
+};


Why do we need to define propTypes like this? We are not using Typescript and eslint warnings can be ignored for now.

Co-authored-by: Akshat Nema <[email protected]>

…into layout_tests

akshatnema · 2023-07-15T01:41:58Z

components/Head.js

      {/* Twitter Card data */}
-      <meta name="twitter:card" value="summary_large_image" />
+      <meta name="twitter:card" content="summary_large_image" />


Why value has been changed to content?

Changed this to some error , resolved this to previous one since it is not needed now .

…into layout_tests

akshatnema · 2023-07-16T11:32:53Z

/rtm

reachaadrika added 3 commits June 29, 2023 20:27

tests

5f4fb69

initial tests

36a2e61

tests for layout component

29cab0a

reachaadrika requested review from derberg, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners July 7, 2023 17:19

Merge branch 'master' into layout_tests

dc937fc

reachaadrika changed the title ~~feat : Add tests for layout component~~ feat: adding unit tests for layout component Jul 7, 2023

Merge branch 'master' into layout_tests

e7dcab5

reachaadrika mentioned this pull request Jul 11, 2023

feat: add unit tests for AuthorAvatars , TOC , Hero , Meeting and DemoAnimation and Figure components #1831

Merged

Merge branch 'master' of https://github.com/reachaadrika/website into…

d937303

… layout_tests

akshatnema requested changes Jul 13, 2023

View reviewed changes

akshatnema reviewed Jul 13, 2023

View reviewed changes

cypress/utils/router.js Outdated Show resolved Hide resolved

akshatnema reviewed Jul 13, 2023

View reviewed changes

Merge branch 'master' into layout_tests

dd473c9

reachaadrika requested a review from Mayaleeeee as a code owner July 13, 2023 12:57

reachaadrika and others added 4 commits July 13, 2023 18:28

Update components/layout/DocsLayout.js

aa1b5f4

Co-authored-by: Akshat Nema <[email protected]>

Update components/layout/GenericLayout.js

3ffd1ea

Co-authored-by: Akshat Nema <[email protected]>

Update cypress/utils/router.js

e3e69de

Co-authored-by: Akshat Nema <[email protected]>

Merge branch 'master' into layout_tests

a03c7fe

akshatnema added the gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code label Jul 13, 2023

reachaadrika and others added 6 commits July 14, 2023 00:31

initial changes

0b9fbdf

Update cypress/test/layout/Layout.cy.js

c774e8e

Co-authored-by: Akshat Nema <[email protected]>

Update cypress/test/layout/GenericPostLayout.cy.js

c630acc

Co-authored-by: Akshat Nema <[email protected]>

Update cypress/support/component.js

f145b6f

Co-authored-by: Akshat Nema <[email protected]>

Update cypress/test/layout/GenericLayout.cy.js

4df9259

Co-authored-by: Akshat Nema <[email protected]>

Merge branch 'master' into layout_tests

9217f3a

reachaadrika added 2 commits July 14, 2023 01:44

changes for layout done

925ac99

Merge branch 'layout_tests' of https://github.com/reachaadrika/website …

2722aee

…into layout_tests

imabp approved these changes Jul 14, 2023

View reviewed changes

reachaadrika added 2 commits July 14, 2023 12:02

Merge branch 'master' into layout_tests

3041803

Merge branch 'master' into layout_tests

877c24b

akshatnema reviewed Jul 15, 2023

View reviewed changes

reachaadrika and others added 5 commits July 16, 2023 01:27

revert the changes in Head component

ef1cad9

Merge branch 'layout_tests' of https://github.com/reachaadrika/website …

a420118

…into layout_tests

Merge branch 'master' into layout_tests

dae79c7

revert head changes

341b810

Merge branch 'layout_tests' of https://github.com/reachaadrika/website …

2ce6a2b

…into layout_tests

akshatnema approved these changes Jul 16, 2023

View reviewed changes

asyncapi-bot added the ready-to-merge label Jul 16, 2023

asyncapi-bot merged commit bd4504a into asyncapi:master Jul 16, 2023
11 checks passed

Correct spacings

b9453a0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adding unit tests for layout component #1914

feat: adding unit tests for layout component #1914

reachaadrika commented Jul 7, 2023

netlify bot commented Jul 7, 2023 •

edited

Loading

github-actions bot commented Jul 7, 2023 •

edited

Loading

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 15, 2023

reachaadrika Jul 15, 2023

akshatnema commented Jul 16, 2023

feat: adding unit tests for layout component #1914

feat: adding unit tests for layout component #1914

Conversation

reachaadrika commented Jul 7, 2023

netlify bot commented Jul 7, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshatnema commented Jul 16, 2023

netlify bot commented Jul 7, 2023 •

edited

Loading

github-actions bot commented Jul 7, 2023 •

edited

Loading