added cy test for contributors section

shorif251 · Aug 19, 2022 · 24e00d5 · 24e00d5
1 parent 9a919b9
commit 24e00d5
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -6,5 +6,6 @@ export default defineConfig({
  // implement node event listeners here
  },
  baseUrl: "http:https://localhost:3000",
+ watchForFileChanges: false,
  },
 });
diff --git a/cypress/e2e/homePage.cy.ts b/cypress/e2e/homePage.cy.ts
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { TWEET_COUNT } from "../support/constant";
+import { CONTRIBUTORS_COUNT, TWEET_COUNT } from "../support/constant";
 
 describe("Test home page", () => {
  beforeEach(() => {
@@ -22,10 +22,10 @@ describe("Test home page", () => {
 
  it("Tweet section should render with all tweets", () => {
  cy.intercept("GET", "https://cdn.syndication.twimg.com/*").as("tweets");
+ cy.get('[data-testid="watch-svg"]').should("be.visible");
  cy.get('[data-testid="tweet-container"]')
  .scrollIntoView()
  .should("be.visible");
- cy.get('[data-testid="watch-svg"]').should("be.visible");
  cy.wait("@tweets");
  cy.get('[data-testid="tweet-container"] [id*="twitter-widget"]').should(
  "have.length",
@@ -34,5 +34,12 @@ describe("Test home page", () => {
  cy.get('[data-testid="watch-svg"]').should("not.exist");
  });
 
- it("Contributors section should render with all contributors", () => {});
+ it("Contributors section should render with all contributors", () => {
+ cy.get('[data-testid="contributors-section"]')
+ .scrollIntoView()
+ .should("be.visible");
+ cy.get(
+ '[data-testid="contributors-section"] [data-testid*="contributor-"]'
+ ).should("have.length", CONTRIBUTORS_COUNT);
+ });
 });
diff --git a/cypress/support/constant.ts b/cypress/support/constant.ts
@@ -1 +1,2 @@
 export const TWEET_COUNT = 10;
+export const CONTRIBUTORS_COUNT = 29;
diff --git a/src/common/home/Contributors.jsx b/src/common/home/Contributors.jsx
@@ -15,8 +15,8 @@ const Contributors = () => {
  {isLoading && <li>Loading...</li>}
  {error && <li>Error: {error.message}</li>}
  {data &&
- data.map((contributor, index) => (
- <li key={contributor.id} className="contributor">
+ data.map((contributor) => (
+ <li key={contributor.id} className="contributor" data-testid={`contributor-${contributor.id}`}>
  <a
  href={contributor.html_url}
  target="_blank"

diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
@@ -185,7 +185,7 @@ const Home = () => {
  ))}
  </div>
  </section>
- <section className="home-contributors">
+ <section className="home-contributors" data-testid="contributors-section">
  <Contributors />
  </section>
  <ExtendedFooter />