Add test infrastructure and exercise files

.storybook/main.js

@@ -0,0 +1,52 @@
+const path = require('path')
+const CopyPlugin = require("copy-webpack-plugin")
+
+module.exports = {
+  "stories": [
+    "../**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    '@storybook/addon-a11y'
+  ],
+  "webpackFinal": (config) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [{
+        loader: 'style-loader',
+       },{
+         loader: 'css-loader',
+         options: {
+          url: false,
+        }
+      },{
+          loader: 'sass-loader',
+          options: {
+            additionalData: "@import '/variables.scss';"
+          }
+      }],
+      include: path.resolve(__dirname, '../'),
+    })
+    // Copy image assets to expose via CSS
+    config.plugins.push(
+      new CopyPlugin({
+        patterns: [
+          {
+            from: path.resolve(__dirname, "../images"),
+            to: "./images", 
+          },
+        ],
+      })
+    );
+
+    config.resolve.alias = {
+      "components": path.resolve(__dirname, "../components"),
+      "data": path.resolve(__dirname, "../data"),
+      "images": path.resolve(__dirname, "../images")
+    }
+
+    // Return the altered config
+    return config;
+  },
+}

.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="portal-root"></div>
+<div id="app-root"></div>

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "../global-styles/styles.scss"
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

cypress.json

@@ -0,0 +1,9 @@
+{
+    "component": {
+        "componentFolder": "exercise2-cypress-components",
+        "testFiles": "**/*spec.{js,jsx,ts,tsx}"
+    },
+    "integrationFolder": "exercise3-cypress-integration",
+    "testFiles": "**/*.spec.{js,jsx,ts,tsx}",
+    "video": false
+}

cypress/plugins/index.js

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  if (config.testingType === 'component') {
+    const { startDevServer } = require('@cypress/webpack-dev-server')
+
+    // Your project's Webpack configuration
+    const webpackConfig = require('../../exercise2-cypress-components/webpack.config.js')
+
+    on('dev-server:start', (options) =>
+      startDevServer({ options, webpackConfig })
+    )
+  }
+}

cypress/support/commands.js

@@ -0,0 +1,29 @@
+// ***********************************************
+// This example commands.js 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) => { ... })
+
+import "cypress-real-events/support";
+
+import "cypress-axe";

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js 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')

exercise0-storybook/DatePicker.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import DatePicker from 'components/date-picker/date-picker'
+
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+}
+
+export const Default = () => <DatePicker />

exercise0-storybook/Header.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import Header from 'components/header';
+
+export default {
+  title: 'Components/Header',
+  component: Header,
+};
+
+export const LoggedOut = () => <Header />;

exercise0-storybook/HomePage.stories.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import HomePage from 'components/page-home';
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Pages/Home',
+  component: HomePage,
+};
+
+const Template = (args) => <HomePage {...args} />;
+
+export const LoggedOut = Template.bind({});

exercise0-storybook/ListingExcerpt.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import ListingExcerpt from 'components/listing-excerpt';
+
+import image from "../.storybook/assets/disneyland.jpg"
+
+export default {
+  title: 'Components/ListingExcerpt',
+  component: ListingExcerpt,
+}
+
+// We create a “template” of how args map to rendering
+const Template = (args) => <ListingExcerpt {...args} />;
+
+// Each story then reuses that template
+export const Default = Template.bind({});
+
+Default.args = {
+  data: {
+    listingName: "Disneyland",
+    location: "Planet Earth",
+    listingType: "Amusement Park",
+    excerpt: "The happiest place on Earth",
+    amenities: ["wifi", "food", "bathrooms"]
+  },
+  image: image
+};

exercise0-storybook/Meganav.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import MegaNav from 'components/meganav';
+
+export default {
+  title: 'Components/MegaNav',
+  component: MegaNav,
+}
+
+export const Default = () => <MegaNav />;

exercise0-storybook/README.md

@@ -0,0 +1,15 @@
+# Accessibility Testing with Storybook
+
+Storybook is a great way to orient oneself in a web application with lots of components. Need to isolate a component to see how accessibility changes will affect it? If Storybook is in place, it might be the best place to start.
+
+To start Storybook, run this command:
+
+```
+yarn storybook
+```
+
+## Exercise: Add a story for the DropdownList component
+
+Using the `ListingExcerpt.stories.jsx` file as a reference, create a
+new story in the same directory for the `DropdownList` component.
+It can be imported from the same directory as the `ListingExcerpt`.

exercise0-storybook/SearchForm.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import SearchForm from 'components/search-form';
+
+export default {
+  title: 'Components/SearchForm',
+  component: SearchForm,
+};
+
+export const Default = () => <SearchForm />;

exercise0-storybook/Slideshow.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Slideshow from 'components/slideshow/slideshow'
+
+import image1 from "../.storybook/assets/disneyland.jpg"
+import image2 from "../.storybook/assets/barcelona.jpg"
+import image3 from "../.storybook/assets/prague.jpg"
+
+export default {
+  title: 'Components/Slideshow',
+  component: Slideshow,
+}
+
+// We create a “template” of how args map to rendering
+const Template = (args) => <Slideshow {...args} />;
+
+// Each story then reuses that template
+export const Default = Template.bind({});
+
+Default.args = {
+  images: [{
+    src: image1,
+    alt: "Disneyland castle",
+    caption: "Disneyland"
+  },{
+    src: image2,
+    alt: "A colorful city street",
+    caption: "Barcelona"
+  },{
+    src: image3,
+    alt: "Historical buildings with spires",
+    caption: "Prague"
+  }],
+  imageURLs: null
+};

exercise1-jest/README.md

@@ -0,0 +1,33 @@
+# Accessibility Unit Testing with Jest
+
+Jest is a testing workhorse in modern web applications. You can test isolated components for accessibility in Jest, particularly for keyboard behavior and programmatic state. By adding Testing Library into the mix, you can get some solid testing work done and provide a contract for accessibility functionality in components.
+
+To start unit testing with Jest, run this command:
+
+```
+yarn test
+```
+
+To keep Jest running while you’re making changes to components, keep it alive with the watch command:
+
+```
+yarn test --watch
+```
+
+_Note: To exit the process on MacOS, type `Control + C` in your Terminal._
+
+## Exercise: Write unit tests for the ButtonSubmit component
+
+There’s an inaccessible button on the loose! Fix it with a bit of TDD (Test Driven
+Development). For the `ButtonSubmit` component, write Jest unit tests to assert
+it has an accessible name and it can be reached and operated with the keyboard.
+You will need to make changes to the component to make it pass, as well.
+
+API commands you can use:
+
+- [Testing Library/React: `render`](https://testing-library.com/docs/react-testing-library/api/#render) and [`screen`](https://testing-library.com/docs/queries/about#screen)
+- [Testing Library: `FireEvent`](https://testing-library.com/docs/dom-testing-library/api-events)
+- [Testing Library: `getByRole`](https://testing-library.com/docs/queries/byrole)
+- [Testing Library: `getByLabelText`](https://testing-library.com/docs/queries/bylabeltext)
+- [Ecosystem/UserEvent](https://testing-library.com/docs/ecosystem-user-event)
+- [Jest-DOM matchers](https://github.com/testing-library/jest-dom)

exercise1-jest/answer/button-submit.spec.js

@@ -0,0 +1,37 @@
+/**
+ * @jest-environment jsdom
+ */
+ import React from 'react'
+ import {render, screen, fireEvent, getByText, getByLabelText} from '@testing-library/react'
+ import '@testing-library/jest-dom'
+ import userEvent from '@testing-library/user-event'
+
+ import ButtonSubmit  from '../../components/button-submit'
+
+ xdescribe('ButtonSubmit', () => {
+    it('labels the dropdown button', () => {
+        const textFixture = "Send it!"
+        const { getByLabelText } = render(<ButtonSubmit buttonName={textFixture} />)
+
+        const buttonText = getByLabelText(textFixture)
+
+        expect(buttonText).toBeInTheDocument()
+    })
+    it('can be reached with the keyboard', () => {
+        render(<ButtonSubmit buttonName="Chuck it" />)
+        const button = screen.getByTestId('btn-submit')
+
+        userEvent.tab()
+        expect(button).toHaveFocus()
+    })
+    it('can be operated with the keyboard and assistive tech', () => {
+        let clicked = false
+        render(<ButtonSubmit buttonName="Fling it" onClick={()=> { clicked = true }} />)
+
+        const button = screen.getByRole('button')
+
+        userEvent.click(button)
+
+        expect(clicked).toBe(true)
+    })
+ })

exercise2-cypress-components/README.md

@@ -0,0 +1,20 @@
+# Accessibility Component Testing with Cypress
+
+Cypress added a new flavor of their platform for [Component Testing](https://docs.cypress.io/guides/component-testing/introduction). It’s a nice solution for integrating components using their APIs and infrastructure. Say you’ve got a full test suite for end-to-end tests but you need some accessibility tests with faster performance. Cypress Component Testing might be a worthwhile tool to try.
+
+One caveat is that Cypress Component Testing requires a Webpack config to operate. This monorepo uses Parcel instead so Cypress Component Testing added some duplication of tooling code. If you’re already using Webpack,  you’re all good.
+
+To start Component Testing with Cypress, run this command:
+
+```
+yarn test:components
+```
+
+## Exercise 2: Write component tests for the MegaNav with Cypress
+
+Using a mounted component in Cypress, write tests that assert the following behavior:
+
+- Focusing on a top-level menu button
+- Activating the menu via click
+- Asserting focus doesn’t go to items in the closed menu
+- Asserting focus does go to items in the open menu