TechIsHiring website release 2.0.7

.devcontainer/devcontainer.json

@@ -0,0 +1,36 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+ "name": "TechisHiring Website",
+ "image": "mcr.microsoft.com/devcontainers/typescript-node:0-20",
+ "hostRequirements": {
+ "cpus": 4
+ },
+ // install dependencies and start storybook
+ "updateContentCommand": "npm install",
+ "postAttachCommand": "npm run storybook",
+ "customizations": {
+ "codespaces": {
+ "openFiles": [
+ "src/stories/pages/home.stories.tsx"
+ ]
+ },
+ // install some vscode extensions
+ "vscode": {
+ "extensions": [
+ "dbaeumer.vscode-eslint",
+ "github.vscode-pull-request-github",
+ "eamodio.gitlens",
+ "christian-kohler.npm-intellisense"
+ ]
+ }
+ },
+ // connect to remote server
+ "forwardPorts": [6006],
+ "portsAttributes": {
+ "6006": {
+ "label": "Storybook",
+ "onAutoForward": "openPreview"
+ }
+ }
+ }

.github/workflows/code-quality.yml

@@ -40,25 +40,74 @@ jobs:
  - run: npm ci
  - run: npm run format
 
+ cypress-install:
+ runs-on: ubuntu-latest
+ container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+
+ - name: Cypress install
+ uses: cypress-io/github-action@v5.8.3
+ with:
+ # Disable running of tests within install job
+ runTests: false
 
- cypress-run:
+ cypress-run-e2e:
 
- name: Run Cypress Tests
+ name: Run End-to-End Tests
+ needs: cypress-install
  runs-on: ubuntu-latest
- container: cypress/browsers:node12.18.3-chrome87-ff82
+ container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+ strategy:
+ # don't fail the entire matrix on failure
+ fail-fast: false
+ matrix:
+ # run copies of the current job in parallel
+ containers: [1, 2, 3]
  steps:
  - name: Checkout
  uses: actions/checkout@v3
 
- - name: Use Node.js
- uses: actions/setup-node@v3
+ - name: Cypress run
+ uses: cypress-io/github-action@v5.0.9
  with:
- node-version: 16
- - run: npm ci
+ # Specify Browser since container image is compile with Firefox
+ browser: chrome
+ start: npm run dev
+ wait-on: 'http://localhost:3000'
+ record: true
+ parallel: true 
+ group: e2e
+ env: 
+ CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+ cypress-run-component:
+
+ name: Run Component Tests
+ needs: cypress-install
+ runs-on: ubuntu-latest
+ container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+ strategy:
+ # don't fail the entire matrix on failure
+ fail-fast: false
+ matrix:
+ # run copies of the current job in parallel
+ containers: [1, 2, 3]
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
 
  - name: Cypress run
  uses: cypress-io/github-action@v5.0.9
  with:
  # Specify Browser since container image is compile with Firefox
  browser: chrome
- start: npm run dev
+ component: true
+ record: true
+ parallel: true
+ group: component
+ env: 
+ CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -42,4 +42,8 @@ next-env.d.ts
 
 # VSCODE
 *.code-workspace
-.vscode
+.vscode
+
+# cypress
+cypress/videos
+cypress/screenshots

CONTRIBUTING.md

@@ -28,7 +28,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 ## Code of Conduct
 
 This project and everyone participating in it is governed by the
-[TechIsHiring Website Code of Conduct](https://github.com/techishiring/techishiring-websiteblob/dev/CODE_OF_CONDUCT.md).
+[TechIsHiring Website Code of Conduct](https://github.com/TechIsHiring/techishiring-website/blob/dev/CODE_OF_CONDUCT.md).
 By participating, you are expected to uphold this code. Please report unacceptable behavior
 to <techishiring@gmail.com>.
 

README.md

@@ -2,6 +2,8 @@
 
 TechIsHiring's website, focusing on showcasing the top tweets from the Twitter account and the TechIsHiring newsletter.
 
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/TechIsHiring/techishiring-website)
+
 ## Technologies Used
 
 - Next.js
@@ -32,6 +34,20 @@ This project uses Atomic Design for it's Components. Here are several resources
 
 Check out what the we're currently work on at [https://dev.techishiring.com](https://dev.techishiring.com)
 
+## GitHub Codespaces Setup
+
+_A codespace is a development environment that's hosted in the cloud. You can build and run this plugin via a GitHub Codespace by following the directions below:_
+
+1. To open this environment, click the "Open in GitHub Codespaces" button at the top of this README or click on the green "Code" button on the repository > select the Codespaces tab > "Create new Codepsace on dev" button.
+
+2. Allow this Codespace a few minutes to complete installing all needed dependencies. The first time you do this, it may take a while, so be patient.
+
+3. Once the installation is complete, you should see a terminal window open in the bottom of the screen. You can click the link to open up the storybook in a new tab or your can go to the forward port tab to see the link to the storybook.
+
+A simple browser window will automatically open up for you so you can view the stories seamlessly. 
+
+4. You are now ready to start developing! 
+
 ## Storybook
 
 The Stoybook for this project can be found at [https://stories.techishiring.com](https://stories.techishiring.com)

cypress.config.ts

@@ -1,9 +1,18 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+ projectId: "1nng13",
  e2e: {
+ baseUrl: 'http://localhost:3000',
  setupNodeEvents(on, config) {
  // implement node event listeners here
- }
- }
+ },
+ },
+
+ component: {
+ devServer: {
+ framework: "next",
+ bundler: "webpack",
+ },
+ },
 });

cypress/e2e/contactuspage.cy.ts

@@ -0,0 +1,22 @@
+
+describe("Contact Us Image Rendering", () => {
+ beforeEach(() => {
+ cy.visit("/contact", { timeout: 30000 });
+ });
+
+ it("Image rendering on desktop", () =>{
+ cy.viewport('macbook-11')
+ cy.get('[data-testid="desktop"] > img')
+ .should('be.visible')
+ .and('have.prop', 'naturalWidth')
+ .should('be.greaterThan', 0)
+ })
+
+ it("Background Image rendering on mobile", () =>{
+ cy.viewport('iphone-5')
+ cy.get('[data-testid="mobile"] > img')
+ .should("be.visible")
+ .and('have.prop', 'naturalWidth')
+ .should('be.greaterThan', 0)
+ })
+})

cypress/e2e/homepage.cy.ts

@@ -1,12 +1,16 @@
+import validateFooter from "../util/validateFooter";
+
 describe("Homepage", () => {
  beforeEach(() => {
- cy.visit("http://localhost:3000", { timeout: 30000 });
+ cy.visit("/", { timeout: 30000 });
  });
 
  it("should display the homepage", () => {
  cy.title().should("include", "TechIsHiring");
  cy.get("header").should("be.visible");
- cy.get('.sticky > :nth-child(1) > a > .chakra-text').contains('TechIsHiring');
+ cy.get('.sticky > :nth-child(1) > a > .chakra-heading').contains('TechIsHiring');
  cy.get('header > div > nav > ul').should('be.visible');
+
+ validateFooter('desktop')
  });
 });

cypress/support/commands.ts

@@ -35,3 +35,32 @@
 // }
 // }
 // }
+export {};
+
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ validateLink(name: string, destination : string, target?: 'new tab'): Chainable<void>
+ }
+ }
+}
+
+
+ /**
+ * 
+ * @param name - the name of the link
+ * @param destination - the URL the link navigates to 
+ * @param target - target attribute - e.g. "new tab" or not
+ */
+ const validateLink = (name: string, destination : string, target?: 'new tab') => {
+ const shouldOpenInNewTab = target === 'new tab'
+ const targetAssertion = shouldOpenInNewTab ? 'have.attr' : 'not.have.attr'
+
+ // find a link with the expected name
+ cy.contains(`a`, name)
+ .should('be.visible') // make sure it is visible
+ .and('have.attr', 'href', destination) // and has the right href
+ .and(targetAssertion, 'target', '_blank') // and opens in a new tab, or not
+ }
+
+ Cypress.Commands.add('validateLink', validateLink)

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <title>Components App</title>
+ <!-- Used by Next.js to inject CSS. -->
+ <div id="__next_css__DO_NOT_USE__"></div>
+ </head>
+ <body>
+ <div data-cy-root></div>
+ </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,44 @@
+// ***********************************************************
+// This example support/component.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'
+import { ChakraProvider } from "@chakra-ui/react";
+import { createElement } from "react";
+import theme from "../../src/styles/globals.css";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ mount: typeof mount
+ }
+ }
+}
+
+
+Cypress.Commands.add("mount", (component, options) => {
+ const wrappedComponent = createElement(ChakraProvider, {theme}, component);
+
+ return mount(wrappedComponent, options);
+});

cypress/util/validateFooter.ts

@@ -0,0 +1,28 @@
+type Size = 'mobile' | 'desktop'
+
+const validateFooter = (size: Size) => {
+
+ cy.log('-----START FOOTER-----')
+ // since both mobile and desktop versions are in the DOM as the same time, we scope with [data-cy]
+ cy.get(`[data-cy=${size}-footer]`).within(() => {
+ cy.validateLink('Home', '/')
+ cy.validateLink('TechIsHiring', '/')
+ cy.validateLink('Newsletter', 'https://newsletter.techishiring.com/', 'new tab')
+ cy.validateLink('About', '/about')
+ cy.validateLink('Contact Us', '/contact')
+
+ // now test the SVG icon links at the bottom
+ cy.validateLink('Twitter for Tech Is Hiring', 'https://www.twitter.com/techishiring', 'new tab')
+ cy.validateLink('GitHub for Tech Is Hiring', 'https://www.github.com/techishiring', 'new tab')
+ cy.validateLink('LinkedIn for Tech Is Hiring', 'https://www.linkedin.com/company/techishiring', 'new tab')
+ cy.validateLink('Patreon for Tech Is Hiring', 'https://www.patreon.com/techishiring', 'new tab')
+ cy.validateLink('Tech Is Hiring Newsletter on Substack', 'https://newsletter.techishiring.com/', 'new tab')
+
+ cy.contains(`p`, `© Copyright ${new Date().getFullYear()}, All rights reserved.`).should('be.visible')
+ cy.contains(`p`, `Website designed by Inetimi Ade (aidinetimi@gmail.com)`).should('be.visible')
+ })
+ // test the main navigation links for the site
+ cy.log('-----END FOOTER-----')
+}
+
+export default validateFooter

declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.css'; // needed for Cypress component tests to import CSS files