This should serve as a how to guide on refactoring legacy code into its modern counterpart.
Note: This demo uses React.
Change <AutocompleteAddress /> map service from Google Maps to Mapbox while maintaining backwards compatibility.
GIVEN: I am a developer.
WHEN: I want to use the <AutocompleteAddress /> component.
THEN: I am able to use the Mapbox API.
GIVEN: I am a developer.
WHEN: I am using <AutocompleteAddress /> component in a legacy app.
THEN: Nothing breaks once I update the component library.
The refactoring part lives in the refactoring branch. (git checkout refactoring)
The steps to follow are described in the refactoring/CHANGELOG.md. Each step is a separate commit in that branch so you can explore how the code changes over time by checkouting to different commits.
This repository is split into 4 folders: legacy, refactored, refactoring and shared.
Legacy folder represents the starting state of the codebase for reference.
This is a minimal representation of the src folder in a component library.
Refactored folder represents the final state of the codebase for reference.
This is a minimal representation of the src folder in a component library.
Refactoring folder represents the step by step process of refactoring according to task specification.
This is a minimal representation of the src folder in a component library.
Shared folder contains dummy mocks of dependencies, which the rest of the codebase uses.
Run the following script:
git clone https://github.com/varholak-peter/refactor-demo.git
Once you clone the repository run the following command to verify the installation:
cd refactor-demo
yarn && yarn test
Runs all tests.
Runs legacy test suite.
Runs refactored test suite.
Runs refactoring test suite.
Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.