Initial commit

Author: nareshbhatia

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# editors
+/.idea
+/.vscode
+
+# misc
+.DS_Store
+.eslintcache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierignore

@@ -0,0 +1,3 @@
+package.json
+package-lock.json
+*.snap

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  proseWrap: 'always',
+};

.storybook/main.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+  ],
+};

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+<script>
+  window._env_ = {
+    API_URL: 'http://localhost:8080',
+  };
+</script>

.storybook/preview.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { EnvProvider } from '../src/contexts';
+import '../src/services/AxiosInterceptors';
+import '../src/styles/main.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      order: ['Home'],
+    },
+  },
+};
+
+// Start mock service worker
+const { worker } = require('../src/mocks/browser');
+worker.start();
+worker.printHandlers();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const StoryDecorator = (Story: any) => (
+  <EnvProvider>
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <Story />
+      </Router>
+    </QueryClientProvider>
+  </EnvProvider>
+);
+
+addDecorator(StoryDecorator);

README.md

@@ -0,0 +1,77 @@
+# React Testing Techniques
+
+This project implements an online shopping application to show techniques used
+to test React applications. We use the following tools for testing:
+
+**Unit Testing**
+
+- [Jest](https://jestjs.io/) - a testing framework designed to ensure
+  correctness of any JavaScript or TypeScript codebase
+
+- [React Testing Library](https://testing-library.com/) - a testing framework
+  for React components that encourages better testing practices
+
+- [Mock Service Worker](https://mswjs.io/) - a framework to mock APIs by
+  intercepting requests at the network level. It allows us to reuse the same
+  mock definition for testing, development, and debugging.
+
+**Integration Testing**
+
+- [Cypress](https://www.cypress.io/) - a testing framework for fully built Web
+  applications running in a browser
+
+This project was bootstrapped with
+[React Accelerate](https://github.com/PublicisSapient/cra-template-accelerate).
+
+## Screenshots
+
+**Home page with item catalog and shopping cart**
+
+![Home Page](assets/screenshot-home.png)
+
+## Getting Started
+
+Make sure your development machine is set up for building React apps. See the
+recommended setup procedure
+[here](https://github.com/nareshbhatia/react-learning-resources/blob/main/docs/mac-setup.md).
+
+Execute the following commands to install dependencies:
+
+```sh
+# if using yarn v7 add --legacy-peer-deps option
+# see details here: https://github.com/storybookjs/storybook/issues/12983
+yarn install
+```
+
+Now execute the following commands to run the app:
+
+```sh
+yarn start
+```
+
+Now point your browser to http://localhost:3000/.
+
+## Running Unit Tests
+
+React Accelerate comes ready with Jest and React Testing Library to run unit
+tests. Execute one of the following command to run unit tests.
+
+```sh
+yarn test # interactive mode
+yarn test:coverage # non-interactive mode with coverage information
+```
+
+Note that unit tests are automatically executed when you commit code to your
+local repo. This ensures that you are not committing broken code.
+
+## Running End-to-End Tests
+
+React Accelerate comes ready with Cypress to run end-to-end tests. Execute
+Cypress using the following commands:
+
+```sh
+yarn start # starts a local server hosting your react app
+
+# run cypress in a different shell
+yarn cypress:open
+```

assets/screenshot-home.png

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000"
+}