@workday/canvas-kit-docs 6.2.3 → 6.3.1

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.
@@ -6013,7 +6013,7 @@ module.exports = {specifications: [
6013
6013
  },
6014
6014
  {
6015
6015
  "type": "describe",
6016
- "name": "when the \"Delete\" button is hovered",
6016
+ "name": "when the \"Some Text\" text is hovered",
6017
6017
  "children": [
6018
6018
  {
6019
6019
  "type": "it",
@@ -6013,7 +6013,7 @@ module.exports = {specifications: [
6013
6013
  },
6014
6014
  {
6015
6015
  "type": "describe",
6016
- "name": "when the \"Delete\" button is hovered",
6016
+ "name": "when the \"Some Text\" text is hovered",
6017
6017
  "children": [
6018
6018
  {
6019
6019
  "type": "it",
@@ -29,7 +29,7 @@ do. A "test" simply has to pass. A specification requires meaning.
29
29
  test('SomeComponent should render correctly', async () => {
30
30
  const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
31
31
 
32
- const component = await getByTestId('test');
32
+ const component = getByTestId('test');
33
33
 
34
34
  expect(component.textContent).toEqual('foo');
35
35
  expect(component.getAttribute('aria-label')).toEqual('foo');
@@ -53,14 +53,14 @@ describe('SomeComponent', () => {
53
53
  it('should render the "text" prop as the text', async () => {
54
54
  const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
55
55
 
56
- const component = await getByTestId('test');
56
+ const component = getByTestId('test');
57
57
  expect(component).toHaveTextContent('foo');
58
58
  });
59
59
 
60
60
  it('should render the "text" prop as an aria-label for accessibility', async () => {
61
61
  const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
62
62
 
63
- const component = await getByTestId('test');
63
+ const component = getByTestId('test');
64
64
  expect(component).toHaveAttribute('aria-label', 'foo');
65
65
  });
66
66
  });
@@ -124,8 +124,8 @@ const {getByTestId} = render(
124
124
  </SomeComponent>
125
125
  );
126
126
 
127
- const component = await getByTestId('container');
128
- const child = await getByTestId('test');
127
+ const component = getByTestId('container');
128
+ const child = getByTestId('test');
129
129
 
130
130
  expect(component).toContainElement(child);
131
131
  ```
@@ -136,6 +136,30 @@ specification is met). Also this example will have a more useful failure message
136
136
  `.toContainElement` has the context that it is expecting an element in another element vs a match of
137
137
  a string.
138
138
 
139
+ ### Snapshot tests
140
+
141
+ Canvas Kit does not contain DOM-based snapshot tests and uses [Visual Tests](#visual-tests) instead.
142
+ DOM snapshots failures are often difficult to parse. Humans tend to be better at noticing and
143
+ discerning visual changes than changes to a DOM structure.
144
+
145
+ If your project uses snapshot tests and Canvas Kit, chances are you'll run into issues with changing
146
+ ids and other ARIA attributes. Canvas Kit generates unique ids that are different every time the
147
+ page loads. This can be a problem with snapshot tests. To fix this, you'll need to add special code
148
+ to your test bootstrap file. For example:
149
+
150
+ ```ts
151
+ import {setUniqueSeed, resetUniqueIdCount} from '@workday/canvas-kit-react/common';
152
+
153
+ beforeEach(() => {
154
+ setUniqueSeed('a'); // set a static seed
155
+ resetUniqueIdCount(); // reset the id counter before every test
156
+ });
157
+ ```
158
+
159
+ This will ensure snapshot tests have stable ids for each snapshot. It is still possible to get ids
160
+ changing if you add an additional component that uses id generation - subsequent ids will be
161
+ different, but this will prevent snapshot tests that don't have any changes from showing diffs.
162
+
139
163
  ## Functional tests
140
164
 
141
165
  Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "6.2.3",
3
+ "version": "6.3.1",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -50,7 +50,7 @@
50
50
  ],
51
51
  "dependencies": {
52
52
  "@storybook/csf": "0.0.1",
53
- "@workday/canvas-kit-react": "^6.2.3"
53
+ "@workday/canvas-kit-react": "^6.3.1"
54
54
  },
55
55
  "devDependencies": {
56
56
  "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
58
58
  "mkdirp": "^1.0.3",
59
59
  "typescript": "^3.8.3"
60
60
  },
61
- "gitHead": "64f8a882e13dacffa99b98da64243f0bfabb5365"
61
+ "gitHead": "687b8d43c6e258200c4b939d4efb922df96d92ea"
62
62
  }