Merge branch 'main' into change-webiste-title-dynamically

.all-contributorsrc

@@ -346,6 +346,15 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "ShaileshParmar11",
+ "name": "Shailesh Parmar",
+ "avatar_url": "https://avatars.githubusercontent.com/u/71748675?v=4",
+ "profile": "https://shailesh-parmar.netlify.app/",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

.github/workflows/cypress.yml

@@ -0,0 +1,29 @@
+name: Cypress Tests
+
+on:
+ push:
+ branches: [main]
+
+ pull_request_target:
+ types: [labeled, opened, synchronize, reopened]
+
+jobs:
+ cypress-run:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Install Packages
+ run: |
+ npm install --legacy-peer-deps
+
+ # Install NPM dependencies, cache them correctly
+ # and run all Cypress tests
+ - name: Cypress run
+ uses: cypress-io/github-action@v4
+ with:
+ install-command: |
+ npm install --legacy-peer-deps
+ start: npm start
+ wait-on: "http:https://localhost:3000"
+ browser: chrome

.gitignore

@@ -7,6 +7,8 @@
 
 # testing
 /coverage
+/cypress/screenshots
+/cypress/videos
 
 # production
 /build

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-38-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -132,6 +132,24 @@ yarn build
 
 It builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
 
+### 🧪 Test App Locally (E2E with Cypress)
+
+Use the following command to run cypress locally:
+
+```bash
+npm run cypress:open
+```
+
+Or
+
+```bash
+yarn cypress:open
+```
+
+It will open cypress dashboard, through which you need to select `E2E Testing`.
+Once you done with selection you will get options to choose your preferred browser in which you want to run the test.!
+Once you done with selecting the browser you need to click on `Start E2E Testing in <SELECTED_BROWSER_NAME>.` Selected browser will popup and you can able to see list of cypress test, click on the test to start testing.!
+
 ### 🚀 Deploy
 
 You can deploy the app to `Vercel` or `Netlify` with a single click.
@@ -242,6 +260,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/ammaaraslam"><img src="https://avatars.githubusercontent.com/u/96367405?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ammaar Aslam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ammaaraslam" title="Code">💻</a></td>
  <td align="center"><a href="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/mayukh551"><img src="https://avatars.githubusercontent.com/u/82811112?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mayukh Bhowmick</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=mayukh551" title="Code">💻</a></td>
  <td align="center"><a href="http:https://emmanueleboh.vercel.app"><img src="https://avatars.githubusercontent.com/u/63825997?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emmanuel O Eboh</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=EOEboh" title="Code">💻</a></td>
+ <td align="center"><a href="https://shailesh-parmar.netlify.app/"><img src="https://avatars.githubusercontent.com/u/71748675?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shailesh Parmar</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ShaileshParmar11" title="Code">💻</a></td>
  </tr>
 </table>
 

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+ e2e: {
+ setupNodeEvents(on, config) {
+ // implement node event listeners here
+ },
+ baseUrl: "http:https://localhost:3000",
+ watchForFileChanges: false,
+ },
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+// namespace Cypress {
+// interface Chainable {
+// login(email: string, password: string): Chainable<void>
+// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+// }
+// }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -59,7 +59,9 @@
  "build": "npx create-react-play -p && react-scripts build",
  "snap": "react-snap",
  "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "eject": "react-scripts eject",
+ "cypress:open": "cypress open",
+ "cypress:run": "cypress run"
  },
  "eslintConfig": {
  "extends": [
@@ -87,6 +89,7 @@
  },
  "devDependencies": {
  "autoprefixer": "^10.4.7",
+ "cypress": "^10.6.0",
  "postcss": "^8.4.13",
  "puppeteer": "^13.7.0",
  "react-snap": "^1.23.0",

src/common/header/Header.jsx

@@ -52,9 +52,10 @@ const Header = () => {
  className={`app-header ${
  showHideBits.setHeaderStyle ? "" : " app-header-home"
  }`}
+ data-testid="app-header"
  >
  <span>
- <Link to="/" className="app-logo">
+ <Link to="/" className="app-logo" data-testid="app-logo">
  <span className="sr-only">React Play</span>
  </Link>
  </span>

src/common/header/HeaderNav.jsx

@@ -67,7 +67,7 @@ const HeaderNav = ({ showBrowse }) => {
  <div
  className={showToggleMenu ? "navbar-collapse show" : "navbar-collapse"}
  >
- <ul className="header-links">
+ <ul className="header-links" data-testid="header-links-container">
  <li className="menu-closer">
  <button
  className="navbar-closer"
@@ -83,6 +83,7 @@ const HeaderNav = ({ showBrowse }) => {
  <Link
  to="/plays"
  className="app-header-btn app-header-btn--secondary"
+ data-testid="browse-btn"
  >
  <MdManageSearch className="icon" />
  <span className="btn-label">Browse</span>
@@ -95,6 +96,7 @@ const HeaderNav = ({ showBrowse }) => {
  href="/plays/create"
  rel="noopener noreferrer"
  className="app-header-btn app-header-btn--primary"
+ data-testid="create-btn"
  >
  <IoAddSharp className="icon" />
  <span className="btn-label">Create</span>
@@ -106,6 +108,7 @@ const HeaderNav = ({ showBrowse }) => {
  target="_blank"
  rel="noopener noreferrer"
  className="app-header-btn app-header-btn--primary umami--click--create-play"
+ data-testid="create-btn"
  >
  <IoAddSharp className="icon" />
  <span className="btn-label">Create</span>
@@ -116,6 +119,7 @@ const HeaderNav = ({ showBrowse }) => {
  <Link
  to="/ideas"
  className="app-header-btn app-header-btn--default"
+ data-testid="ideas-btn"
  >
  <FaLightbulb className="icon" />
  <span className="btn-label">Idea</span>
@@ -127,6 +131,7 @@ const HeaderNav = ({ showBrowse }) => {
  target="_blank"
  rel="noopener noreferrer"
  className="app-header-btn app-header-btn--default umami--click--github"
+ data-testid="github-btn"
  >
  <BsGithub className="icon" />
  <span className="btn-label">GitHub</span>
@@ -138,6 +143,7 @@ const HeaderNav = ({ showBrowse }) => {
  target="_blank"
  rel="noopener noreferrer"
  className="app-header-btn app-header-btn--default"
+ data-testid="twitter-btn"
  >
  <BsTwitter className="icon" />
  <span className="btn-label">Twitter</span>
@@ -147,6 +153,7 @@ const HeaderNav = ({ showBrowse }) => {
  <button
  className="app-header-btn app-header-btn--default"
  onClick={handleClick}
+ data-testid="share-btn"
  >
  <IoHeartSharp className="icon" />
  <span className="btn-label">Share</span>

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"

src/common/home/Home.jsx

@@ -169,7 +169,7 @@ const Home = () => {
  {isTweetsLoading && (
  <Spinner />
  )}
- <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"}>
+ <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"} data-testid="tweet-container">
  {tweetIdArray.map((id) => (
  <Tweet
  key={id}
@@ -185,7 +185,7 @@ const Home = () => {
  ))}
  </div>
  </section>
- <section className="home-contributors">
+ <section className="home-contributors" data-testid="contributors-section">
  <Contributors />
  </section>
  <ExtendedFooter />

src/common/search/SearchPlays.jsx

@@ -33,10 +33,15 @@ const SearchPlays = () => {
 
  return (
  <>
- <div className="search-input">
- <BiSearch className="search-input-icon" size="24px" />
+ <div className="search-input" data-testid="plays-search-box-container">
+ <BiSearch
+ className="search-input-icon"
+ data-testid="plays-search-box-icon"
+ size="24px"
+ />
  <input
  className="search-input-text"
+ data-testid="plays-search-box-input-field"
  type="text"
  placeholder="Search for a play..."
  onKeyUp={handleSearch}