Skip to content

Commit a351142

Browse files
tschortschtschortsch
authored
Merge pull request #72 from liip/cypress
feat(): Migrate from puppeteer to cypress for e2e testing
2 parents 16d2fbe + 3d42d78 commit a351142

File tree

87 files changed

+3016
-2407
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+3016
-2407
lines changed

‎.browserslistrc‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
extends @wordpress/browserslist-config
1+
> 1%
2+
ie >= 11
3+
last 1 Android versions
4+
last 1 ChromeAndroid versions
5+
last 2 Chrome versions
6+
last 2 Firefox versions
7+
last 2 Safari versions
8+
last 2 iOS versions
9+
last 2 Edge versions
10+
last 2 Opera versions

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ node_modules
22
vendor
33
build
44
!.*.js
5+
snapshots.js
6+
cypress/index.d.ts

‎.eslintrc.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,14 @@ module.exports = {
33
extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
44
overrides: [
55
{
6-
// Use jest/recommended plugin for our e2e-test helpers.
7-
// In @wordpress/eslint-plugin/recommended there are the following patterns which do that '**/specs/**/*.js', '**/?(*.)spec.js' which ignore these files.
8-
files: [ 'e2e-tests/**/*.js' ],
9-
extends: [ 'plugin:jest/recommended' ],
10-
env: {
11-
browser: true,
12-
},
13-
globals: {
14-
browser: 'readonly',
15-
page: 'readonly',
16-
wp: 'readonly',
6+
// Use cypress/recommended plugin for cypress tests.
7+
files: [ 'cypress/**/*.js' ],
8+
extends: [ 'plugin:cypress/recommended' ],
9+
rules: {
10+
'jest/expect-expect': [
11+
'error',
12+
{ assertFunctionNames: [ 'expect', 'cy' ] },
13+
],
1714
},
1815
},
1916
],

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ build/*
99
!build/settings.css
1010
composer.phar
1111
/release
12+
cypress/videos
13+
cypress/screenshots

‎.wp-env.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"env": {
55
"tests": {
66
"mappings": {
7-
"wp-content/plugins/wp-bootstrap-blocks-test-plugins": "./e2e-tests/plugins"
7+
"wp-content/plugins/wp-bootstrap-blocks-test-plugins": "./e2e-test-plugins"
88
}
99
}
1010
}

‎README.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -726,7 +726,7 @@ The following commands can be used to set up a local dev environment. See the of
726726
There are two types of tests for this plugin:
727727

728728
* PHPUnit Tests: Used to validate generated block output. Since this plugin uses dynamic blocks which are rendered on the server side we need to test them with PHPUnit tests.
729-
* Puppeteer E2E Tests: Used to validate block behaviour in the editor.
729+
* Cypress E2E Tests: Used to validate block behaviour in the editor.
730730

731731
#### PHPUnitTests
732732

@@ -752,24 +752,12 @@ or the following command to run a specific test:
752752
npm run test:unit:php -- --filter 'my_test'
753753
```
754754

755-
#### Puppeteer E2E Tests
755+
#### Cypress E2E Tests
756756

757-
The Puppeteer E2E Tests are stored in the `e2e-tests` directory.
757+
The Cypress E2E Tests are stored in the `cypress` directory.
758758

759759
To run the tests use the following command:
760760

761761
```bash
762762
npm run test:e2e
763763
```
764-
765-
or the following command to run a specific test:
766-
767-
```bash
768-
npm run test:e2e -- -t 'my test'
769-
```
770-
771-
To update the snapshots run the following command:
772-
773-
```bash
774-
npm run test:e2e -- -u
775-
```

‎cypress.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"baseUrl": "http://localhost:8889",
3+
"video": false,
4+
"screenshotOnRunFailure": false,
5+
"retries": {
6+
"runMode": 2,
7+
"openMode": 0
8+
}
9+
}

‎cypress/index.d.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/// <reference types="cypress" />
2+
3+
declare namespace Cypress {
4+
interface Chainable<Subject> {
5+
6+
postContentMatchesSnapshot(): Chainable<void>
7+
insertRowBlock(): Chainable<void>
8+
selectRowBlock( index?: number ): Chainable<void>
9+
rowTemplateIsSelected( label: string ): Chainable<void>
10+
selectColumnBlock( rowIndex?: number, columnIndex?: number ): Chainable<void>
11+
insertButtonBlock(): Chainable<void>
12+
selectButtonBlock( index?: number ): Chainable<void>
13+
insertContainerBlock(): Chainable<void>
14+
selectContainerBlock( index?: number ): Chainable<void>
15+
16+
}
17+
}

‎cypress/integration/button/button-block.spec.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/// <reference types="Cypress" />
2+
3+
const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
4+
5+
describe( 'Button Block', () => {
6+
beforeEach( () => {
7+
cy.loginUser();
8+
cy.createNewPost();
9+
} );
10+
11+
it( 'Button block should be initialized with default attributes', () => {
12+
cy.insertButtonBlock();
13+
cy.selectButtonBlock();
14+
15+
// Editor content should match snapshot
16+
cy.postContentMatchesSnapshot();
17+
} );
18+
19+
it( 'Should be possible to set link url and text', () => {
20+
cy.insertButtonBlock();
21+
cy.selectButtonBlock();
22+
23+
// Set button text
24+
cy.get(
25+
'[aria-label="Add text..."].block-editor-rich-text__editable'
26+
).type( 'Liip' );
27+
28+
// Editor content should match snapshot
29+
cy.postContentMatchesSnapshot();
30+
31+
// Set button url
32+
cy.get( 'input[aria-label="URL"]' ).type( 'https://liip.ch' );
33+
34+
// Editor content should match snapshot
35+
cy.postContentMatchesSnapshot();
36+
} );
37+
38+
it( 'Should be possible to select style', () => {
39+
cy.insertButtonBlock();
40+
cy.selectButtonBlock();
41+
cy.ensureSidebarOpened();
42+
43+
// Style option should be applied
44+
cy.getSelectByLabel( 'Style' ).select( 'secondary' );
45+
46+
// Editor content should match snapshot
47+
cy.postContentMatchesSnapshot();
48+
} );
49+
50+
it( 'Should be possible to change alignment', () => {
51+
cy.insertButtonBlock();
52+
cy.selectButtonBlock();
53+
54+
// Change alignment
55+
cy.clickBlockToolbarButton( 'Change button alignment' );
56+
cy.clickButton( 'Align text center' );
57+
cy.get(
58+
'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/button"][data-alignment="center"]'
59+
).should( 'exist' );
60+
61+
// Editor content should match snapshot
62+
cy.postContentMatchesSnapshot();
63+
} );
64+
65+
it( 'Should be possible to enable and disable open in new tab', () => {
66+
cy.insertButtonBlock();
67+
cy.selectButtonBlock();
68+
cy.ensureSidebarOpened();
69+
70+
// Enable open in new tab
71+
cy.clickElementByText( 'label', 'Open in new tab' );
72+
73+
// Check if default rel value is set
74+
cy.getTextControlByLabel( 'Link rel' ).should(
75+
'have.value',
76+
NEW_TAB_REL_DEFAULT_VALUE
77+
);
78+
79+
// Editor content should match snapshot
80+
cy.postContentMatchesSnapshot();
81+
82+
// Disable open in new tab
83+
cy.clickElementByText( 'label', 'Open in new tab' );
84+
85+
// Check if default rel value is removed
86+
cy.getTextControlByLabel( 'Link rel' ).should( 'have.value', '' );
87+
88+
// Editor content should match snapshot
89+
cy.postContentMatchesSnapshot();
90+
} );
91+
92+
it( 'Should keep rel value if set when open in new tab is enabled or disabled', () => {
93+
cy.insertButtonBlock();
94+
cy.selectButtonBlock();
95+
cy.ensureSidebarOpened();
96+
97+
const customRelValue = 'custom rel value';
98+
99+
// Enable no gutters option
100+
cy.setTextControlValueByLabel( 'Link rel', customRelValue );
101+
102+
// Enable open in new tab
103+
cy.clickElementByText( 'label', 'Open in new tab' );
104+
105+
// Check if rel value hasn't changed
106+
cy.getTextControlByLabel( 'Link rel' ).should(
107+
'have.value',
108+
customRelValue
109+
);
110+
111+
// Editor content should match snapshot
112+
cy.postContentMatchesSnapshot();
113+
114+
// Disable open in new tab
115+
cy.clickElementByText( 'label', 'Open in new tab' );
116+
117+
// Check if rel value hasn't changed
118+
cy.getTextControlByLabel( 'Link rel' ).should(
119+
'have.value',
120+
customRelValue
121+
);
122+
123+
// Editor content should match snapshot
124+
cy.postContentMatchesSnapshot();
125+
} );
126+
} );

‎cypress/integration/button/button-filters.spec.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/// <reference types="Cypress" />
2+
3+
describe( 'Button Block Filters', () => {
4+
before( () => {
5+
cy.loginUser();
6+
cy.activatePlugin( 'wp-bootstrap-blocks-test-button-filters' );
7+
} );
8+
9+
after( () => {
10+
cy.loginUser();
11+
cy.deactivatePlugin( 'wp-bootstrap-blocks-test-button-filters' );
12+
} );
13+
14+
beforeEach( () => {
15+
cy.loginUser();
16+
cy.createNewPost();
17+
} );
18+
19+
it( 'wpBootstrapBlocks.button.styleOptions should add style option', () => {
20+
cy.insertButtonBlock();
21+
cy.selectButtonBlock();
22+
cy.ensureSidebarOpened();
23+
24+
// Additional style option should be available
25+
cy.selectOptionIsAvailable( 'Style', 'brand' );
26+
27+
// Style option should be applied
28+
cy.getSelectByLabel( 'Style' ).select( 'brand' );
29+
30+
// Editor content should match snapshot
31+
cy.postContentMatchesSnapshot();
32+
} );
33+
34+
it( 'wp_bootstrap_blocks_button_default_attributes should override default attributes', () => {
35+
cy.insertButtonBlock();
36+
cy.selectButtonBlock();
37+
cy.ensureSidebarOpened();
38+
39+
// Alignment should be selected
40+
cy.toolbarOptionIsActive(
41+
'Change button alignment',
42+
'Align text center'
43+
);
44+
45+
// Style should be selected
46+
cy.getSelectByLabel( 'Style' ).should( 'have.value', 'secondary' );
47+
48+
// Text should be set
49+
cy.get(
50+
'[aria-label="Add text..."].block-editor-rich-text__editable'
51+
).should( 'have.text', 'Liip' );
52+
53+
// URL should be set
54+
cy.getInputByLabel( 'URL' ).should( 'have.value', 'https://liip.ch' );
55+
56+
// Open in new tab is enabled
57+
cy.getToggleByLabel( 'Open in new tab' ).should( 'be.checked' );
58+
59+
// Rel should be set
60+
cy.getTextControlByLabel( 'Link rel' ).should(
61+
'have.value',
62+
'custom rel'
63+
);
64+
65+
// Check if attributes are set correctly
66+
cy.postContentMatchesSnapshot();
67+
} );
68+
} );

0 commit comments

Comments
 (0)