-
Notifications
You must be signed in to change notification settings - Fork 14
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
mrabbitt
wants to merge
28
commits into
main
Choose a base branch
from
breadcrumb-refactor/jest
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit
Hold shift + click to select a range
80e6ee7
WIP
mrabbitt 1c98917
WIP
mrabbitt 45af0fe
Refactored logic and state out of BreadcrumbNav.
mrabbitt 6e7915a
WIP: Jest test for Breadcrumb, with mock of useRouter() working!
mrabbitt 299fa6a
Fixed imports
mrabbitt 7cb160a
WIP: Mocking for trpc not working yet
mrabbitt 859e062
Use a class instead of inline styling for non-link breadcrumbs.
mrabbitt e9c8f6f
Refactored to use router.query, move path splitting out of Breadcrumb…
mrabbitt 4399482
Test `transformBreadCrumbs()` using Jest snapshots.
mrabbitt 99936bf
Fixed missing newline causing prettier check to fail.
mrabbitt e393e8a
Refactored rendering out of transform function.
mrabbitt eda5c9e
Renamed file to .ts and fixed type linting error.
mrabbitt 8ff2bf7
Updated transformer tests to test objects instead of snapshots.
mrabbitt 61b58f2
Fixed test and uppercase behavior.
mrabbitt cf2a1be
Removed now unncessary `jest-dom` import from test
mrabbitt 4bccad1
Merge branch 'unit-test/storybook' into unit-test/tsx-jest
mrabbitt 558317a
Refactored data access into wrapper component, stories now working fo…
mrabbitt 6f5179d
Ignore `storybook-static`.
mrabbitt 4c92567
Ignore `storybook-static` for eslint and prettier.
mrabbitt 5ab0320
Updated jest tests to use snapshots for testing inner presentational …
mrabbitt 85b87fd
Fixed import in NavBar and eslint config formatting.
mrabbitt 41f4b27
Removed intermediary BreadcrumbDesign component.
mrabbitt 98558b0
Cleaning up names, added BreadcrumbContext to hold more than just per…
mrabbitt 5655840
Fixed case-sensitive renaming
mrabbitt bf9bccc
PR TODOs: Removed unused next-router-mock, revert argTypesRegex in pr…
mrabbitt 555e50b
Renamed components to BreadcrumbTrail, StatefulBreadcrumbTrail
mrabbitt eb746b9
Merge branch 'main' into breadcrumb-refactor/jest
mrabbitt 1ca1c1c
Update ava.config.js so that `npx ava` only runs backend tests.
mrabbitt File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,3 +34,5 @@ next-env.d.ts | |
.history | ||
|
||
.nsm | ||
|
||
storybook-static |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
src/backend/db/zapatos | ||
storybook-static | ||
.next | ||
.nsm | ||
.terraform | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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!
There was a problem hiding this comment.
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