Add beginning of react testing section

RoyalIcing · RoyalIcing · commit 3209c98a3640 · 2020-06-02T09:37:51.000+10:00
diff --git a/apps/components_guide_web/lib/components_guide_web/controllers/react_typescript_controller.ex b/apps/components_guide_web/lib/components_guide_web/controllers/react_typescript_controller.ex
@@ -2,6 +2,12 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
   use ComponentsGuideWeb, :controller
 
   def index(conn, _params) do
-    render(conn, "index.html")
+    render(conn, "index.html", article: "tips")
+  end
+
+  @articles ["testing"]
+
+  def show(conn, %{"article" => article}) when article in @articles do
+    render(conn, "index.html", article: article)
   end
 end
diff --git a/apps/components_guide_web/lib/components_guide_web/markdown_engine.ex b/apps/components_guide_web/lib/components_guide_web/markdown_engine.ex
@@ -3,13 +3,13 @@ defmodule ComponentsGuideWeb.MarkdownEngine do
 
   @behaviour Phoenix.Template.Engine
 
-  # require Earmark
+  require Earmark
 
   def compile(path, _name) do
     IO.puts("compile #{path}")
     path
     |> File.read!()
-    |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-"})
+    |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false})
     |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
   end
 end
diff --git a/apps/components_guide_web/lib/components_guide_web/router.ex b/apps/components_guide_web/lib/components_guide_web/router.ex
@@ -34,7 +34,9 @@ defmodule ComponentsGuideWeb.Router do
     live "/color/lab/:definition", ColorLive, :lab
 
     get "/swiftui", SwiftUIController, :index
+
     get "/react+typescript", ReactTypescriptController, :index
+    get "/react+typescript/:article", ReactTypescriptController, :show
 
     resources "/text", TextController
     get "/text/:id/text/:format", TextController, :show_text_format
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index.html.eex
@@ -1,3 +1,23 @@
+<div class="text-white" style="<%= header_styles() %>">
+  <header class="mx-auto max-w-4xl">
+    <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+      <div class="row">
+        <span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
+      </div>
+      <span><%= "Accessibility-First Development" %></span>
+    </h1>
+    <nav class="pt-6 pb-4">
+      <ul class="list-none row font-bold" style="--link-padding: 0.75em">
+        <li><%= link("Landmarks", to: '/accessibility-first/widgets-cheatsheet') %>
+        <li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
+        <li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
+        <li><%= link("Forms", to: '/accessibility-first/properties-cheatsheet') %>
+        <li><%= link("Keyboard Navigation", to: '/accessibility-first/properties-cheatsheet') %>
+      </ul>
+    </nav>
+  </header>
+</div>
+
 <header class="text-white" style="background: <%= header_background() %>;">
   <div class="container px-6 pt-12 pb-12">
     <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex
@@ -45,6 +45,25 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
   </section>
 </div>
 
+<div class="text-white" style="<%= sections_styles(:blue) %>">
+  <header class="mx-auto max-w-4xl">
+    <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+      <div class="row">
+        <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
+        <span class="mr-2 text-3xl">❤️</span>
+        <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
+      </div>
+      <span><%= "React & TypeScript Guide" %></span>
+    </h1>
+    <nav class="pt-6 pb-4">
+      <ul class="list-none row font-bold" style="--link-padding: 0.75em">
+        <li><%= link("Fundamentals", to: '/react+typescript') %>
+        <li><%= link("Testing", to: '/react+typescript/testing') %>
+      </ul>
+    </nav>
+  </header>
+</div>
+
 <div class="text-white">
   <section class="pt-20 pb-20" style="<%= sections_styles(:dark) %>">
     <header class="mb-8 mx-auto max-w-4xl px-2 text-center">
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex
@@ -1,5 +1,5 @@
 <header role=banner class="bg-gray-900 text-white">
-  <div class="container px-0 flex flex-col md:flex-row items-stretch text-center md:text-left">
+  <div class="px-4 flex flex-col md:flex-row items-stretch text-center md:text-left">
     <a href="/" class="block px-3 py-2 md:py-4 md:text-right text-sm md:text-base font-bold italic uppercase leading-tight tracking-wide hover:bg-gray-800">
       <span>Components <br>·Guide</span>
     </a>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex b/apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex
@@ -23,6 +23,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-typescript.min.js" integrity="sha256-JJe+nf0dk2dH1Ie4AimrLS4bAH+gW6N31hpdlVlT+30=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-tsx.min.js" integrity="sha256-Lu/zMuTtme4f+TbQrXMjj8OQwAb0x4RApaysYdeJBN0=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-go.min.js" integrity="sha256-Og32rFEm2ICsLGNCdEf+nUE/QDhI4nxQ2SLHXD4Yv90=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-c.min.js" integrity="sha256-7bhB6muzOsleE++vCiHNmfoJr6rN5xct1k2ONF4LI44=" crossorigin="anonymous"></script>
     <!--<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes@8a0b50bd5cef0c86154c22b8b17d97348323b343/themes/prism-a11y-dark.css" rel="stylesheet">-->
     <link rel="stylesheet" href="https://unpkg.com/prism-theme-night-owl@1.4.0/build/style.css">
     <script>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex
@@ -19,7 +19,7 @@
 
 <div class="bg-white">
   <div class="content max-w-4xl mx-auto py-8 text-lg">
-    <%= render(@view_module, "tips.html") %>
+    <%= render(@view_module, @article <> ".html") %>
   </div>
 </div>
 
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/list-of-roles.png b/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/list-of-roles.png
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/testing.html.md b/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/testing.html.md
@@ -0,0 +1,50 @@
+## Behavior and markup > implementation details
+
+
+
+## Roles > Tag Names
+
+You can find a list of roles here [in the spec](https://www.w3.org/TR/wai-aria/#widget_roles).
+
+![list-of-roles.png](list-of-roles.png)
+
+## Roles > Test IDs
+
+- Test IDs are fragile. They are not part of behaviour.
+- Easier to write tests first.
+- Reduce coupling to a certain implementation.
+- Can swap out third-party components.
+- Good accessibility from day one.
+
+## Use accessible names
+
+<table style="width: 100%; text-align: left;">
+  <thead>
+    <tr>
+      <th>Role name</th>
+      <th>Responsibility</th>
+      <th>HTML example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Button</td>
+      <td>Perform action here</td>
+      <td>`<button>`</td>
+    </tr>
+  </tbody>
+</table>
+
+## Reduce coupling to specific implementations
+
+- Reach UI or React Modal?
+- React Select or Downshift?
+- Emotion or CSS Modules?
+- React or Vue?
+- HTML and ARIA are stable, consistent specifications
+- Third-party libraries are unstable, discrepant implementations
+
+## Specs
+
+- <https://www.w3.org/TR/wai-aria-practices/>
+- <https://www.w3.org/TR/html-aria/>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/tips.html.md b/apps/components_guide_web/lib/components_guide_web/templates/react_typescript/tips.html.md
@@ -1,82 +1,27 @@
-## Use the `function` keyword for top level functions
-
-Compare these two ways of declaring a function component in JavaScript:
-
-```tsx
-const Button = ({
-  title,
-  onClick
-}) => {
-
-}
-```
-
-```tsx
-function Button({
-  title,
-  onClick
-}) {
-
-}
-```
-
-There’s not much difference, but I prefer the latter as:
-- The `function` keyword clearly says *I am a function* whereas the `=>` whispers.
-- Using function adds a [`name` property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name), which is both useful for debugging and is also used in presenting in [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). Arrow functions need an additional [babel plugin]((https://babeljs.io/docs/en/babel-plugin-transform-function-name) to make this happen.
-- We don’t need to decide between implicit and explicit returns — we always need to write `return` which makes refactoring quicker as we can quickly add new statements.
-- Just because arrow functions are newer doesn’t mean we have to use them all the time.
-
-In TypeScript I think the argument for using the `function` keyword becomes even stronger:
-
-```tsx
-function Button({ title, onClick }: ButtonProps): JSX.Element {
-
-}
-```
-
-```tsx
-import React, { FunctionComponent } from 'react';
-
-const Button: FunctionComponent<ButtonProps> = ({
-  title,
-  onClick
-}) => {
-
-}
-```
-
-The top version using `function` has these benefits:
-- It’s less typing.
-- It’s really clear that it’s a function.
-- We don’t have to import a type from the **react** package.
-- The stuff I care about is front and centre: the component name, the name of the props.
-- Adding the `JSX.Element` return type ensures I remember to `return` a React element, as not returning something will be a compile time error.
-
 ## Structural vs nominal types
 
 Most statically typed languages use the concept of nominal types.
 
-If I create two structs in a language like C or Go:
+If I create two structs in a language like C:
 
-```go
-type Point2D struct {
-  x float32
-  y float32
-}
+```c
+struct Point2D {
+  float x;
+  float y;
+};
 
-type Point3D struct {
-  x float32
-  y float32
-  z float32
-}
+struct Point3D {
+  float x;
+  float y;
+  float z;
+};
 ```
 
 I can’t cast value of one to the other:
 
-```go
-pointA := Point3D{x: 2.0, y: 3.0, z: 1.0}
-pointB := Point2D(point)
-// Compile error: cannot convert point (type Point3D) to type Point2D
+```c
+Point3D a = Point3D{ x: 2.0, y: 3.0, z: 1.0 };
+Point2D b = (Point2D)a;
 ```
 
 In TypeScript, the equivalent is perfectly valid:
@@ -126,6 +71,61 @@ export function Button({ title, onClick }: ButtonProps): JSX.Element {
 }
 ```
 
+## Use the `function` keyword for top level functions
+
+Compare these two ways of declaring a function component in JavaScript:
+
+```tsx
+const Button = ({
+  title,
+  onClick
+}) => {
+
+}
+```
+
+```tsx
+function Button({
+  title,
+  onClick
+}) {
+
+}
+```
+
+There’s not much difference, but I prefer the latter as:
+- The `function` keyword clearly says *I am a function* whereas the `=>` whispers.
+- Using function adds a [`name` property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name), which is both useful for debugging and is also used in presenting in [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). Arrow functions need an additional [babel plugin]((https://babeljs.io/docs/en/babel-plugin-transform-function-name) to make this happen.
+- We don’t need to decide between implicit and explicit returns — we always need to write `return` which makes refactoring quicker as we can quickly add new statements.
+- Just because arrow functions are newer doesn’t mean we have to use them all the time.
+
+In TypeScript I think the argument for using the `function` keyword becomes even stronger:
+
+```tsx
+function Button({ title, onClick }: ButtonProps): JSX.Element {
+
+}
+```
+
+```tsx
+import React, { FunctionComponent } from 'react';
+
+const Button: FunctionComponent<ButtonProps> = ({
+  title,
+  onClick
+}) => {
+
+}
+```
+
+The top version using `function` has these benefits:
+- It’s less typing.
+- It’s really clear that it’s a function.
+- We don’t have to import a type from the **react** package.
+- The stuff I care about is front and centre: the component name, the name of the props.
+- Adding the `JSX.Element` return type ensures I remember to `return` a React element, as not returning something will be a compile time error.
+
+
 ## Prefer functions to classes
 
 Classes need more ceremony. The need to be instantiated, they can have properties changed over time, and they offer a range of approaches for achieving the same thing.
@@ -248,13 +248,33 @@ Composition has the following benefits:
 
 We can compose functions. We can compose function components. We can compose hooks.
 
+## Handy React types
+
+```tsx
+// React <Element />
+JSX.Element
+
+// Component accepting children
+interface ComponentAcceptingChildren {
+  children: React.ReactNode;
+}
+
+// Props of a built-in HTML element
+React.ComponentProps<'button'>
+React.ComponentProps<'a'>
+React.ComponentProps<'textarea'>
+
+// Ref attached via <input ref={inputRef} />
+const inputRef = React.useRef<HTMLInputElement | null>(null);
+```
+
 ## Components must have consistent identity
 
-React uses the identity of a function component to know whether the implementation is the same. If the function identity changes from render to render, then React will entirely destroy then recreate the produced DOM elements.
+React uses the identity of a function component to know whether the implementation is the same. If the function identity changes from render to render, then React will entirely destroy-then-recreate that subtree of the DOM.
 
 Consider these two components.
 
-This one uses a nested component, which it asks React to render (`<Body />`):
+This one uses a nested component, which we ask React to render (`<Body />`):
 
 ```tsx
 interface CardProps {
@@ -273,7 +293,7 @@ function Card({ title, children }: CardProps): JSX.Element {
 }
 ```
 
-This one uses a nested function, which we call:
+This one uses a nested function, which we call (`renderBody()`):
 
 ```tsx
 interface CardProps {
@@ -321,6 +341,6 @@ If you kept a reference to an element you returned and mutated it later, React m
 
 React relies on immutability. It avoids creating defensive copies of elements and props, as that would just be overhead.
 
-## Test behavior and markup over implementation detail
+Use `React.cloneElement()` to create a copy of an existing React element with changed props.
 
-## Test roles
+Use `React.Children.map()` to work with children.
diff --git a/apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex b/apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex
@@ -12,6 +12,21 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
     ])
   end
 
+  def header_styles() do
+    l = 50
+    a = -60
+    b = -90
+    color = {:lab, l, a, b}
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, l * 1.1, a * 1.1, b * 1.4},
+      color,
+      {:lab, l * 1.3, a * 0.5, b * 0.5},
+    ])
+
+    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+  end
+
   def topic_article(assigns, block) do
     ~E"""
     <article class="mb-8">
diff --git a/apps/components_guide_web/lib/components_guide_web/views/landing_view.ex b/apps/components_guide_web/lib/components_guide_web/views/landing_view.ex
diff --git a/apps/components_guide_web/lib/components_guide_web/views/layout_view.ex b/apps/components_guide_web/lib/components_guide_web/views/layout_view.ex
diff --git a/apps/components_guide_web/lib/components_guide_web/views/react_typescript_view.ex b/apps/components_guide_web/lib/components_guide_web/views/react_typescript_view.ex
