TDD front

exercises/user_signup/base/next-typescript/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  extends: ["plugin:react/recommended", "plugin:import/typescript", "plugin:@next/next/recommended"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  rules: {
+    "react/react-in-jsx-scope": "off",
+  }
+};

exercises/user_signup/base/next-typescript/.gitignore

@@ -0,0 +1,4 @@
+.next
+node_modules
+tests/pages/screenshots
+test-results.xml

exercises/user_signup/base/next-typescript/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ["next/babel"],
+  plugins: ["babel-plugin-transform-typescript-metadata", ["@babel/plugin-proposal-decorators", { legacy: true }]],
+};

exercises/user_signup/base/next-typescript/cypress.json

@@ -0,0 +1,16 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false,
+  "reporter": "junit",
+  "viewportWidth": 1920,
+  "viewportHeight": 1080,
+  "chromeWebSecurity": false,
+  "fixturesFolder": "tests/pages/fixtures",
+  "integrationFolder": "tests/pages",
+  "pluginsFile": "tests/pages/plugins/index.js",
+  "screenshotsFolder": "tests/pages/screenshots",
+  "videosFolder": "tests/pages/videos",
+  "downloadsFolder": "tests/pages/downloads",
+  "supportFile": "tests/pages/support/index.ts",
+  "testFiles": "**/*.spec.ts"
+}

exercises/user_signup/base/next-typescript/jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  testMatch: ["<rootDir>/tests/unit/**/*.(spec|test).(js|jsx|ts|tsx)"],
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+  testPathIgnorePatterns: ["node_modules", "<rootDir>/.next/"],
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)$": "ts-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
+  },
+  globals: {
+    "ts-jest": {
+      babelConfig: true,
+      tsconfig: {
+        jsx: "react-jsx",
+      },
+    },
+  },
+};

exercises/user_signup/base/next-typescript/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

exercises/user_signup/base/next-typescript/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "user-signup",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "start": "next start",
+    "test": "jest",
+    "test:e2e": "yarn build && start-server-and-test 'yarn start' tcp:3000 'yarn test:e2e:run'",
+    "test:e2e:open": "cypress open",
+    "test:e2e:run": "cypress run"
+  },
+  "dependencies": {
+    "glob": "^7.1.7",
+    "next": "12.1.0",
+    "next-transpile-modules": "^9.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.13.0",
+    "@next/eslint-plugin-next": "^11.1.0",
+    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/dom": "^7.31.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.1",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^14.17.18",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.11",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "babel-jest": "^27.5.1",
+    "babel-plugin-transform-typescript-metadata": "^0.3.2",
+    "cypress": "^9.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "^11.1.0",
+    "eslint-plugin-react": "^7.29.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "jest-transform-stub": "^2.0.0",
+    "start-server-and-test": "^1.14.0",
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.6.3"
+  }
+}

exercises/user_signup/base/next-typescript/setupTests.ts

@@ -0,0 +1,8 @@
+import "@testing-library/jest-dom";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: () => {
+    return "Next image stub";
+  },
+}));

exercises/user_signup/base/next-typescript/src/assets/index.css

@@ -0,0 +1,86 @@
+/* https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+}
+
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+  6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+video {
+  display: block;
+}
+
+/*
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/*
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
+
+body {
+  font-family: sans-serif;
+}

exercises/user_signup/base/next-typescript/src/components/Input.module.css

@@ -0,0 +1,28 @@
+.input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font: 1.125rem/1.55 sans-serif;
+  background: #fff;
+  border: 1px solid #b1b1b1;
+  border-radius: .25rem;
+
+}
+.input--small {
+  padding: .5rem .75rem;
+}
+
+.input--medium {
+  height: 3.75rem;
+  padding: .75rem 1.25rem;
+}
+
+.input[type="number"] {
+  appearance: textfield;
+}
+
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}

exercises/user_signup/base/next-typescript/src/components/Input.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+
+import { Label } from "./Label";
+
+import styles from "./Input.module.css";
+
+interface BaseInputProps {
+  id: string;
+  label: string;
+  hideLabel?: boolean;
+  placeholder?: string;
+  value?: string | number;
+  size?: "small" | "medium";
+  required?: boolean;
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+interface TextInputProps extends BaseInputProps {
+  type?: "text" | "email";
+  min?: never;
+  max?: never;
+}
+
+interface NumberInputProps extends BaseInputProps {
+  type: "number";
+  min?: number;
+  max?: number;
+}
+
+export type InputProps = NumberInputProps | TextInputProps;
+
+export const Input = ({
+  id,
+  size = "medium",
+  type = "text",
+  label,
+  value = "",
+  hideLabel = false,
+  required = false,
+  onChange,
+  ...props
+}: InputProps) => {
+  const [internalvalue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  function handleChange(ev: React.ChangeEvent<HTMLInputElement>) {
+    setInternalValue(ev.target.value);
+    onChange && onChange(ev);
+  }
+
+  return (
+    <div>
+      <Label isHidden={hideLabel} htmlFor={id}>
+        {label}
+      </Label>
+      <input
+        className={[styles.input, styles[`input--${size}`]].join(" ")}
+        onChange={handleChange}
+        id={id}
+        name={id}
+        value={internalvalue}
+        type={type}
+        required={required}
+        {...props}
+      />
+    </div>
+  );
+};

exercises/user_signup/base/next-typescript/src/components/Label.module.css

@@ -0,0 +1,10 @@
+.label {
+  display: block;
+  margin: 1rem 0 .5rem;
+  font: 1rem/1.5 sans-serif;
+}
+
+.label--hidden {
+  position: absolute;
+  visibility: hidden;
+}

exercises/user_signup/base/next-typescript/src/components/Label.tsx

@@ -0,0 +1,15 @@
+import styles from "./Label.module.css";
+
+export interface LabelProps {
+  htmlFor: string;
+  children: string;
+  isHidden?: boolean;
+}
+
+export const Label = ({ children, isHidden = false, ...props }: LabelProps) => {
+  return (
+    <label className={[styles.label, isHidden ? styles["label--hidden"] : ""].join(" ")} {...props}>
+      {children}
+    </label>
+  );
+};

exercises/user_signup/base/next-typescript/src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import type { AppProps } from "next/app";
+import "../assets/index.css"
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+
+  return (
+    <>
+      <Component {...pageProps} />
+    </>
+  );
+}

exercises/user_signup/base/next-typescript/src/pages/index.tsx

@@ -0,0 +1,8 @@
+export default function Home(): JSX.Element {
+
+  return (
+    <>
+      <h1>User Signup</h1>
+    </>
+  );
+}

exercises/user_signup/base/next-typescript/tests/pages/index.spec.ts

@@ -0,0 +1,8 @@
+describe("The Home Page", () => {
+  it("works", () => {
+
+    cy.visit("/")
+      .contains("User Signup")
+      .should("exist");
+  });
+});