myrentokil-components-library 1.0.65 → 1.0.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +114 -2
  2. package/package.json +19 -5
package/README.md CHANGED
@@ -7,21 +7,133 @@ This library can be installed using npm.
7
7
  ```
8
8
  npm install myrentokil-components-library
9
9
  ```
10
-
10
+
11
11
  ## Available Scripts:
12
12
 
13
- ### Run tests
13
+ ### Run and update snapshot tests
14
+
14
15
  ```
15
16
  npm run test
17
+ npm run test:updateSnapshot
18
+ ```
19
+
20
+ ## Run lint
21
+
22
+ ```
23
+ npm run lint
16
24
  ```
17
25
 
18
26
  ### Run storybook locally
27
+
19
28
  This project uses Storybook. To see the components in the browser, run:
29
+
20
30
  ```
21
31
  npm run storybook
22
32
  ```
23
33
 
24
34
  ### Build storybook
35
+
25
36
  ```
26
37
  npm run build-storybook
27
38
  ```
39
+
40
+ ### Deploy storybook
41
+
42
+ ```
43
+ npm run chromatic
44
+ ```
45
+
46
+ # Deploying Storybook with Chromatic
47
+
48
+ This guide outlines why we've chosen Chromatic for deploying our Storybook and how it enhances our ReactJS frontend development process.
49
+
50
+ ## Why Chromatic?
51
+
52
+ Chromatic is our preferred tool for deploying Storybook for the following reasons:
53
+
54
+ ### Integration with Bitbucket
55
+
56
+ Chromatic seamlessly integrates with Bitbucket, allowing authorized users to access the deployed Storybook without additional credentials.
57
+
58
+ ### User-Friendly Interface
59
+
60
+ Chromatic's user interface is designed specifically for deploying Storybooks, making it simple to manage and install.
61
+
62
+ ### Cost-Free Solution
63
+
64
+ Chromatic is free to use, eliminating financial barriers and enabling easy sharing and collaboration.
65
+
66
+ ### Interactive Collaboration
67
+
68
+ Chromatic enables team members to provide feedback through comments and reviews on the deployed Storybook.
69
+
70
+ ## Getting Started
71
+
72
+ To get started, log into Chromatic using your Bitbucket credentials at [https://64d24cc60d37542331b45a48-fissmohfpj.chromatic.com/](https://64d24cc60d37542331b45a48-fissmohfpj.chromatic.com/). Explore
73
+ the user-friendly interface and experience the benefits of Chromatic's seamless integration.
74
+
75
+ ## Summary
76
+
77
+ Chromatic simplifies the process of sharing and collaborating on ReactJS frontend components. With Bitbucket integration, an intuitive interface, cost-effectiveness, and collaboration features,
78
+ Chromatic enhances our Storybook deployment experience.
79
+
80
+ # Testing React Components: Why Use React Testing Library and Snapshot Testing
81
+
82
+ ## Introduction
83
+
84
+ Testing is a crucial part of any software development process. It helps ensure that our code works as expected, catches bugs early, and provides a safety net for refactoring and future changes. In the
85
+ context of React applications, there are various testing libraries and approaches available. In this README, we'll discuss why we chose to use React Testing Library and Snapshot Testing for testing
86
+ our components. Additionally, we'll explain the need for `jest-styled-components` when working with Styled Components.
87
+
88
+ ## Why Use React Testing Library?
89
+
90
+ React Testing Library (RTL) is a popular testing utility for testing React components. Unlike other testing libraries that focus on testing implementation details, RTL emphasizes testing user
91
+ interactions and behavior. It follows the philosophy of "testing the component as a user would use it," making the tests more reliable and maintainable.
92
+
93
+ Key advantages of using React Testing Library:
94
+
95
+ 1. **User-Centric Testing:** RTL encourages testing components from the user's perspective, simulating real user interactions such as clicking buttons, typing, and navigating. This approach ensures
96
+ that the components are tested in a way that closely resembles how users will interact with the application.
97
+
98
+ 2. **Accessibility Testing:** RTL promotes accessibility testing by providing utilities to query components based on their accessibility roles and attributes. This helps ensure that our components are
99
+ usable by all users, including those who rely on assistive technologies.
100
+
101
+ 3. **Encourages Best Practices:** By focusing on user interactions, RTL encourages writing tests that are less coupled to the implementation details. This promotes better component design and
102
+ encourages developers to follow best practices when building components.
103
+
104
+ 4. **Wide Community Adoption:** React Testing Library is widely adopted in the React ecosystem. It has a large community and active development, which means that you can find plenty of resources,
105
+ tutorials, and community support.
106
+
107
+ ## Why Use Snapshot Testing?
108
+
109
+ Snapshot testing is a type of testing that captures the output (e.g., rendered UI) of a component and stores it as a "snapshot." On subsequent test runs, the output is compared to the stored snapshot
110
+ to check for any unintended changes.
111
+
112
+ Benefits of using Snapshot Testing:
113
+
114
+ 1. **Quick Feedback on UI Changes:** Snapshot testing provides a quick way to verify if any unintended changes were introduced to the UI. It can catch visual regressions or unexpected changes that
115
+ might not be immediately apparent during development.
116
+
117
+ 2. **Maintainable Test Suites:** Snapshots serve as documentation of how the UI should look for different scenarios. When the UI changes intentionally, you can update the snapshots, and when changes
118
+ occur unintentionally, you can investigate and address them appropriately.
119
+
120
+ 3. **Less Boilerplate:** Snapshot testing reduces the need for writing assertions manually, making test creation faster and less error-prone.
121
+
122
+ ## Why Include jest-styled-components?
123
+
124
+ When using Styled Components to style our React components, the class names generated by Styled Components include unique hashes. This ensures that the styles are scoped correctly and avoids
125
+ conflicts.
126
+
127
+ However, this uniqueness can pose a challenge when using Snapshot Testing. The class names in snapshots may differ each time tests are run, causing unnecessary snapshot changes.
128
+
129
+ To solve this issue, we include `jest-styled-components`, a library that provides a serializer for Jest. This serializer normalizes the class names generated by Styled Components during snapshot
130
+ testing. It ensures that the class names in snapshots remain consistent, regardless of the test run environment.
131
+
132
+ ## Useful Links
133
+
134
+ - [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)
135
+ - [Snapshot Testing in Jest](https://jestjs.io/docs/snapshot-testing)
136
+ - [jest-styled-components GitHub Repository](https://github.com/styled-components/jest-styled-components)
137
+
138
+ By using React Testing Library, Snapshot Testing, and `jest-styled-components`, we can create comprehensive and reliable tests for our React components while ensuring consistent styles in our
139
+ snapshots. These practices contribute to maintaining a robust and stable codebase, allowing us to confidently build and iterate on our React applications.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "myrentokil-components-library",
3
- "version": "1.0.65",
3
+ "version": "1.0.87",
4
4
  "description": "myRentokil shared components library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -16,11 +16,16 @@
16
16
  "build": "rm -rf dist/ && prettier --write src/ && rollup -c && storybook build",
17
17
  "build:esm": "tsc --module CommonJS --outDir dist/esm",
18
18
  "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
19
+ "chromatic": "npx chromatic --project-token=chpt_470705cb11b2b55 --auto-accept-changes",
19
20
  "storybook": "storybook dev -p 6006",
20
21
  "build-storybook": "storybook build",
21
- "test": "jest"
22
+ "lint": "eslint src --ext .ts,.tsx",
23
+ "test": "jest",
24
+ "test:updateSnapshot": "jest --updateSnapshot"
25
+ },
26
+ "author": {
27
+ "name": "F Brandao"
22
28
  },
23
- "author": "F Brandao",
24
29
  "license": "UNLICENSED",
25
30
  "devDependencies": {
26
31
  "@babel/preset-env": "^7.22.5",
@@ -42,16 +47,24 @@
42
47
  "@types/react": "^18.0.0",
43
48
  "@types/react-dom": "^18.0.0",
44
49
  "@types/styled-components": "^5.1.26",
50
+ "@typescript-eslint/eslint-plugin": "^6.2.0",
51
+ "@typescript-eslint/parser": "^6.2.0",
52
+ "chromatic": "^6.21.0",
53
+ "eslint": "^8.46.0",
54
+ "eslint-plugin-react": "^7.33.1",
55
+ "install": "^0.13.0",
45
56
  "jest": "^29.5.0",
46
57
  "jest-environment-jsdom": "^29.5.0",
58
+ "jest-styled-components": "^7.1.1",
47
59
  "jest-svg-transformer": "^1.0.0",
60
+ "npm": "^9.8.1",
48
61
  "prop-types": "^15.8.1",
49
62
  "react": "^18.0.0",
50
63
  "react-dom": "^18.0.0",
51
64
  "rollup": "^2.60.0",
52
65
  "rollup-plugin-dts": "^4.0.1",
53
- "styled-components": "^5.3.9",
54
66
  "storybook": "^7.0.24",
67
+ "styled-components": "^5.3.9",
55
68
  "ts-jest": "^29.1.1",
56
69
  "typescript": "^4.4.4"
57
70
  },
@@ -59,5 +72,6 @@
59
72
  "react": "^18.0.0",
60
73
  "react-dom": "^18.0.0",
61
74
  "styled-components": "^5.3.9"
62
- }
75
+ },
76
+ "readme": "ERROR: No README data found!"
63
77
  }