Skip to content

Commit

Permalink
Merge pull request #138 from hmrc/PLATUI-1141_expand-visual-regressio…
Browse files Browse the repository at this point in the history
…n-test-coverage

Plat UI 1141 expand visual regression test coverage
  • Loading branch information
oscarduignan authored Apr 27, 2021
2 parents 66c3640 + e5f64f4 commit 92bad21
Show file tree
Hide file tree
Showing 447 changed files with 544 additions and 85 deletions.
8 changes: 7 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]

## [1.30.1] - 2021-04-27

### Fixed

- Increased visual regression testing coverage to include all component examples

## [1.30.0] - 2021-03-25

### Added
Expand All @@ -15,7 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).

## [1.29.0] - 2021-03-24

## Fixed
### Fixed

- Added a class to Report Technical Issue to help with browser testing

Expand Down
94 changes: 92 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,98 @@ result of a known change to the component, the reference images can be updated b
npm run test:backstop-approve
```

If any changes are needed to the backstop configuration, for example to test on different device types or add to the
list of scenarios, these can be made by editing the file `tasks/gulp/backstop-config.js`
All examples of components will be checked by backstop. You can adjust the backstop configuration for a component or a
specific example of a component by adding options under the `visualRegressionTests` key to the yaml configuration for
the component or example.

For example to introduce a delay before a screenshot is taken for all examples of a component:

```yaml
examples:
- name: welsh-language
data:
language: "cy"
timeout: 70
countdown: 68
keepAliveUrl: "?abc=def"
signOutUrl: "?ghi=jkl"

visualRegressionTests:
backstopScenarioOptions:
delay: 2000
```
Or just for a specific example:
```yaml
examples:
- name: welsh-language
data:
language: "cy"
timeout: 70
countdown: 68
keepAliveUrl: "?abc=def"
signOutUrl: "?ghi=jkl"
visualRegressionTests:
backstopScenarioOptions:
delay: 2000
```
You can also capture examples of components in different states.
For example, an input with a focused state:
```yaml
examples:
- name: default
description: A text input
data:
label:
text: test-label
id: input-example
name: test-name
- name: invalid
description: A text input with an error
data:
label:
text: test-label
id: input-example
name: test-name
errorMessage: Please enter the correct value

visualRegressionTests:
alternateStates:
focused:
clickSelector: .govuk-label
```
The configuration above would result in 4 backstop checks being run. One for each example: default, and invalid; and one
for each example in each alternate state - so in this case: default when focused, and invalid when focused.
Alternate states on a specific example will override any supplied at the component level:
```yaml
examples:
- name: default
description: A text input
data:
label:
text: test-label
id: input-example
name: test-name
visualRegressionTests:
alternateStates: [ ]

visualRegressionTests:
alternateStates:
focused:
clickSelector: .govuk-label
```
The configuration above would result in an alternate focused state for all examples except the default which overrides
the alternate states with an empty list.
For more general backstop configuration take a look at [tasks/gulp/backstop-config.js]()
#### Test for compatibility
The code you contribute must be accessible. This means it works on every browser or device your users may use to access it.
Expand Down
4 changes: 2 additions & 2 deletions app/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ module.exports = (options) => {
const globalData = (type === 'layout' && exampleConfig.data) || {};

if (!exampleConfig) {
next();
return next();
}

// Construct and evaluate the component with the data for this example
Expand All @@ -127,7 +127,7 @@ module.exports = (options) => {
bodyClasses = 'app-iframe-in-component-preview';
}

res.render(`${type}-preview`, {
return res.render(`${type}-preview`, {
...globalData, bodyClasses, previewLayout, hmrcFrontendVersion: pkg.version,
});
});
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 92bad21

Please sign in to comment.