Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breadcrumbs refactor, testing using jest & storybook #413

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
80e6ee7
WIP
mrabbitt Aug 27, 2024
1c98917
WIP
mrabbitt Aug 28, 2024
45af0fe
Refactored logic and state out of BreadcrumbNav.
mrabbitt Aug 30, 2024
6e7915a
WIP: Jest test for Breadcrumb, with mock of useRouter() working!
mrabbitt Aug 24, 2024
299fa6a
Fixed imports
mrabbitt Aug 24, 2024
7cb160a
WIP: Mocking for trpc not working yet
mrabbitt Aug 26, 2024
859e062
Use a class instead of inline styling for non-link breadcrumbs.
mrabbitt Aug 30, 2024
e9c8f6f
Refactored to use router.query, move path splitting out of Breadcrumb…
mrabbitt Aug 30, 2024
4399482
Test `transformBreadCrumbs()` using Jest snapshots.
mrabbitt Aug 30, 2024
99936bf
Fixed missing newline causing prettier check to fail.
mrabbitt Aug 30, 2024
e393e8a
Refactored rendering out of transform function.
mrabbitt Sep 10, 2024
eda5c9e
Renamed file to .ts and fixed type linting error.
mrabbitt Sep 10, 2024
8ff2bf7
Updated transformer tests to test objects instead of snapshots.
mrabbitt Sep 10, 2024
61b58f2
Fixed test and uppercase behavior.
mrabbitt Sep 10, 2024
cf2a1be
Removed now unncessary `jest-dom` import from test
mrabbitt Sep 10, 2024
4bccad1
Merge branch 'unit-test/storybook' into unit-test/tsx-jest
mrabbitt Sep 10, 2024
558317a
Refactored data access into wrapper component, stories now working fo…
mrabbitt Sep 10, 2024
6f5179d
Ignore `storybook-static`.
mrabbitt Sep 11, 2024
4c92567
Ignore `storybook-static` for eslint and prettier.
mrabbitt Sep 11, 2024
5ab0320
Updated jest tests to use snapshots for testing inner presentational …
mrabbitt Sep 11, 2024
85b87fd
Fixed import in NavBar and eslint config formatting.
mrabbitt Sep 11, 2024
41f4b27
Removed intermediary BreadcrumbDesign component.
mrabbitt Sep 11, 2024
98558b0
Cleaning up names, added BreadcrumbContext to hold more than just per…
mrabbitt Sep 12, 2024
5655840
Fixed case-sensitive renaming
mrabbitt Sep 12, 2024
bf9bccc
PR TODOs: Removed unused next-router-mock, revert argTypesRegex in pr…
mrabbitt Sep 24, 2024
555e50b
Renamed components to BreadcrumbTrail, StatefulBreadcrumbTrail
mrabbitt Sep 24, 2024
eb746b9
Merge branch 'main' into breadcrumb-refactor/jest
mrabbitt Sep 24, 2024
1ca1c1c
Update ava.config.js so that `npx ava` only runs backend tests.
mrabbitt Sep 26, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"parser": "@typescript-eslint/parser",
"extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
"ignorePatterns": ["*.json"],
"ignorePatterns": ["*.json", "storybook-static"],
"overrides": [
{
"files": ["*.ts", "*.tsx"],
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,5 @@ next-env.d.ts
.history

.nsm

storybook-static
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
src/backend/db/zapatos
storybook-static
.next
.nsm
.terraform
Expand Down
209 changes: 209 additions & 0 deletions jest.config.ts
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really helpful comments, thanks for including these!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, though I can't take credit for the comments in that file; it was generated automatically. I think I used npm init jest@latest, following the steps here:

https://nextjs.org/docs/pages/building-your-application/testing/jest#manual-setup

Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
/**
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/

import type { Config } from "jest";
import nextJest from "next/jest.js";

// Reference: https://nextjs.org/docs/app/building-your-application/testing/jest
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: "./",
});

const config: Config = {
// All imported modules in your tests should be mocked automatically
// automock: false,

// Stop running tests after `n` failures
// bail: 0,

// The directory where Jest should store its cached dependency information
// cacheDirectory: "/private/var/folders/d3/qyf39nfj10s8pz734n6zby940000gn/T/jest_dx",

// Automatically clear mock calls, instances, contexts and results before every test
clearMocks: true,

// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,

// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,

// The directory where Jest should output its coverage files
// coverageDirectory: undefined,

// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],

// Indicates which provider should be used to instrument code for coverage
coverageProvider: "v8",

// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],

// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,

// A path to a custom dependency extractor
// dependencyExtractor: undefined,

// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,

// The default configuration for fake timers
// fakeTimers: {
// "enableGlobally": false
// },

// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],

// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,

// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,

// A set of global variables that need to be available in all test environments
// globals: {},

// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",

// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],

// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "mjs",
// "cjs",
// "jsx",
// "ts",
// "tsx",
// "json",
// "node"
// ],

// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
// Should be kept in sync with "paths" in tsconfig.json
"^@/(.+)": ["<rootDir>/src/$1"],
},

// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],

// Activates notifications for test results
// notify: false,

// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",

// A preset that is used as a base for Jest's configuration
// preset: undefined,

// Run tests from one or more projects
// projects: undefined,

// Use this configuration option to add custom reporters to Jest
// reporters: undefined,

// Automatically reset mock state before every test
// resetMocks: false,

// Reset the module registry before running each individual test
// resetModules: false,

// A path to a custom resolver
// resolver: undefined,

// Automatically restore mock state and implementation before every test
// restoreMocks: false,

// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,

// A list of paths to directories that Jest should use to search for files in
// roots: [
// "<rootDir>"
// ],

// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",

// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],

// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: [],

// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,

// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],

// The test environment that will be used for testing
testEnvironment: "jsdom",

// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},

// Adds a location field to test results
// testLocationInResults: false,

// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],

// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
testPathIgnorePatterns: ["/node_modules/", "/src/backend/"],

// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],

// This option allows the use of a custom results processor
// testResultsProcessor: undefined,

// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",

// A map from regular expressions to paths to transformers
// transform: undefined,

// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "/node_modules/",
// "\\.pnp\\.[^\\/]+$"
// ],

// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,

// Indicates whether each individual test should be reported during the run
// verbose: undefined,

// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],

// Whether to use watchman for file crawling
// watchman: true,

setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

export default createJestConfig(config);
4 changes: 4 additions & 0 deletions jest.setup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import "@testing-library/jest-dom"; // Adds expect matchers.

// Source to be loaded before running all Jest tests may be added here.
// See: https://jestjs.io/docs/configuration#setupfilesafterenv-array
Loading
Loading