chore: Unify imports syntax in admin-e2e, add missing dependencies (#33901)

* Unify test spec helpers `export` syntax to ESM,

to make it possible to impor them locally.

* Unify import syntax to ESM

* Install missing dependencies of admin-e2e-tests

* Do not import `expect` from `@jest/globals` in admin-e2e-tests

Let typescript pick the puppeteer extension from global.
Address https://github.com/woocommerce/woocommerce/pull/33901#issuecomment-1221650234

* Map unknown types in `admin-e2e-tests` to make tsc happy.

* Add changelog entry

* Use the angle-bracket syntax instead of type assertions

Address https://github.com/woocommerce/woocommerce/pull/33901#discussion_r955591953

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
This commit is contained in:
Tomek Wytrębowicz 2022-08-29 04:36:36 +02:00 committed by GitHub
parent ad8f1de6d1
commit ea8b44115b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 128 additions and 162 deletions

View File

@ -15,7 +15,7 @@ pnpm install @woocommerce/admin-e2e-tests --save
Create a E2E test specification file under `/tests/e2e/specs/example.test.js`:
```js
const { testAdminBasicSetup } = require( '@woocommerce/admin-e2e-tests' );
import { testAdminBasicSetup } from '@woocommerce/admin-e2e-tests';
testAdminBasicSetup();
```

View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Unify imports syntax, add missing dependencies.

View File

@ -24,6 +24,7 @@
"dependencies": {
"@jest/globals": "^26.6.2",
"@types/jest": "^27.4.1",
"@woocommerce/e2e-utils": "workspace:*",
"config": "^3.3.7"
},
"peerDependencies": {
@ -33,6 +34,7 @@
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@types/config": "0.0.41",
"@types/expect-puppeteer": "^4.4.7",
"@types/puppeteer": "^5.4.5",
"@typescript-eslint/eslint-plugin": "^5.14.0",

View File

@ -1,12 +1,12 @@
/**
* External dependencies
*/
import { clearAndFillInput } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { BaseElement } from './BaseElement';
/* eslint-disable @typescript-eslint/no-var-requires */
const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
/* eslint-enable @typescript-eslint/no-var-requires */
export class DropdownTypeaheadField extends BaseElement {
async search( text: string ): Promise< void > {
await clearAndFillInput( this.selector + '-0__control-input', text );

View File

@ -2,13 +2,15 @@
* External dependencies
*/
import { HTTPClientFactory } from '@woocommerce/api';
/* eslint-disable @typescript-eslint/no-var-requires */
const config = require( 'config' );
import config from 'config';
// Prepare the HTTP client that will be consumed by the repository.
// This is necessary so that it can make requests to the REST API.
const admin = config.get( 'users.admin' );
const url = config.get( 'url' );
const admin = config.get< {
username: string;
password: string;
} >( 'users.admin' );
const url = config.get< string >( 'url' );
export const httpClient = HTTPClientFactory.build( url )
.withBasicAuth( admin.username, admin.password )

View File

@ -1,11 +1,12 @@
/**
* External dependencies
*/
import { utils } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { httpClient } from './http-client';
/* eslint-disable @typescript-eslint/no-var-requires */
const { utils } = require( '@woocommerce/e2e-utils' );
const wpPluginsEndpoint = '/wp/v2/plugins';
type Plugin = {

View File

@ -1,12 +1,13 @@
/**
* External dependencies
*/
import { utils } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { httpClient } from './http-client';
import { deactivateAndDeleteAllPlugins } from './plugins';
/* eslint-disable @typescript-eslint/no-var-requires */
const { utils } = require( '@woocommerce/e2e-utils' );
const { PLUGIN_NAME } = process.env;
const resetEndpoint = '/woocommerce-reset/v1/state';

View File

@ -3,6 +3,10 @@
*/
import { ElementHandle, Page } from 'puppeteer';
/**
* External dependencies
*/
import config from 'config';
/**
* Internal dependencies
*/
@ -11,10 +15,7 @@ import { DropdownTypeaheadField } from '../elements/DropdownTypeaheadField';
import { FormToggle } from '../elements/FormToggle';
import { getElementByText, waitForTimeout } from '../utils/actions';
/* eslint-disable @typescript-eslint/no-var-requires */
const config = require( 'config' );
/* eslint-enable @typescript-eslint/no-var-requires */
const baseUrl = config.get( 'url' );
const baseUrl = config.get< string >( 'url' );
// Represents a page that can be navigated to
export abstract class BasePage {

View File

@ -1,13 +1,14 @@
/**
* External dependencies
*/
import { clearAndFillInput } from '@woocommerce/e2e-utils';
import config from 'config';
/**
* Internal dependencies
*/
import { getElementByText } from '../utils/actions';
import { BasePage } from './BasePage';
/* eslint-disable @typescript-eslint/no-var-requires */
const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
const config = require( 'config' );
export class Login extends BasePage {
url = 'wp-login.php';

View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import config from 'config';
import { Page } from 'puppeteer';
/**
@ -16,10 +17,6 @@ import {
import { ThemeSection } from '../sections/onboarding/ThemeSection';
import { BasePage } from './BasePage';
/* eslint-disable @typescript-eslint/no-var-requires */
const { expect } = require( '@jest/globals' );
const config = require( 'config' );
export class OnboardingWizard extends BasePage {
url = 'wp-admin/admin.php?page=wc-admin&path=/setup-wizard';

View File

@ -1,13 +1,13 @@
/**
* External dependencies
*/
import { setCheckbox } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { getAttribute, hasClass, waitForElementByText } from '../utils/actions';
import { BasePage } from './BasePage';
/* eslint-disable @typescript-eslint/no-var-requires */
const { setCheckbox } = require( '@woocommerce/e2e-utils' );
/* eslint-enable @typescript-eslint/no-var-requires */
export class WcSettings extends BasePage {
url = 'wp-admin/admin.php?page=wc-settings';

View File

@ -1,18 +1,18 @@
/**
* External dependencies
*/
import {
setCheckbox,
unsetCheckbox,
verifyCheckboxIsSet,
verifyCheckboxIsUnset,
} from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { BasePage } from '../../pages/BasePage';
import { waitForElementByText } from '../../utils/actions';
/* eslint-disable @typescript-eslint/no-var-requires */
const {
setCheckbox,
unsetCheckbox,
verifyCheckboxIsSet,
verifyCheckboxIsUnset,
} = require( '@woocommerce/e2e-utils' );
/* eslint-enable @typescript-eslint/no-var-requires */
export class BusinessSection extends BasePage {
async isDisplayed(): Promise< void > {
await waitForElementByText( 'h2', 'Tell us about your business' );

View File

@ -1,3 +1,12 @@
/**
* External dependencies
*/
import {
clearAndFillInput,
verifyCheckboxIsSet,
verifyCheckboxIsUnset,
} from '@woocommerce/e2e-utils';
import config from 'config';
/**
* Internal dependencies
*/
@ -5,15 +14,6 @@ import { DropdownTypeaheadField } from '../../elements/DropdownTypeaheadField';
import { BasePage } from '../../pages/BasePage';
import { waitForElementByText } from '../../utils/actions';
/* eslint-disable @typescript-eslint/no-var-requires */
const {
clearAndFillInput,
verifyCheckboxIsSet,
verifyCheckboxIsUnset,
} = require( '@woocommerce/e2e-utils' );
const config = require( 'config' );
/* eslint-enable @typescript-eslint/no-var-requires */
export interface StoreDetails {
addressLine1?: string;
addressLine2?: string;

View File

@ -1,12 +1,12 @@
/**
* External dependencies
*/
import { clearAndFillInput } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { BasePage } from '../../pages/BasePage';
/* eslint-disable @typescript-eslint/no-var-requires */
const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
/* eslint-enable @typescript-eslint/no-var-requires */
type AccountDetails = {
accountName: string;
accountNumber: string;

View File

@ -1,3 +1,11 @@
/**
* External dependencies
*/
import {
clearAndFillInput,
verifyValueOfInputField,
} from '@woocommerce/e2e-utils';
import { afterAll, beforeAll, describe, it } from '@jest/globals';
/**
* Internal dependencies
*/
@ -5,21 +13,7 @@ import { WcSettings } from '../../pages/WcSettings';
import { WpSettings } from '../../pages/WpSettings';
import { Login } from '../../pages/Login';
/* eslint-disable @typescript-eslint/no-var-requires */
const {
clearAndFillInput,
verifyValueOfInputField,
} = require( '@woocommerce/e2e-utils' );
const {
afterAll,
beforeAll,
describe,
it,
expect,
} = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminBasicSetup = () => {
export const testAdminBasicSetup = () => {
describe( 'Store owner can finish initial store setup', () => {
const wcSettings = new WcSettings( page );
const wpSettings = new WpSettings( page );
@ -80,5 +74,3 @@ const testAdminBasicSetup = () => {
} );
} );
};
module.exports = { testAdminBasicSetup };

View File

@ -1,3 +1,9 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
import { verifyValueOfInputField } from '@woocommerce/e2e-utils';
import config from 'config';
/**
* Internal dependencies
*/
@ -9,23 +15,10 @@ import { WcSettings } from '../../pages/WcSettings';
import { ProductsSetup } from '../../pages/ProductsSetup';
import { resetWooCommerceState } from '../../fixtures/reset';
/* eslint-disable @typescript-eslint/no-var-requires */
const {
afterAll,
beforeAll,
describe,
it,
expect,
} = require( '@jest/globals' );
const config = require( 'config' );
const { verifyValueOfInputField } = require( '@woocommerce/e2e-utils' );
/* eslint-enable @typescript-eslint/no-var-requires */
/**
* This tests a default, happy path for the onboarding wizard.
*/
const testAdminOnboardingWizard = () => {
export const testAdminOnboardingWizard = () => {
describe( 'Store owner can complete onboarding wizard', () => {
const profileWizard = new OnboardingWizard( page );
const login = new Login( page );
@ -127,7 +120,7 @@ const testAdminOnboardingWizard = () => {
} );
};
const testSelectiveBundleWCPay = () => {
export const testSelectiveBundleWCPay = () => {
describe( 'A japanese store can complete the selective bundle install but does not include WCPay.', () => {
const profileWizard = new OnboardingWizard( page );
const login = new Login( page );
@ -229,7 +222,7 @@ const testSelectiveBundleWCPay = () => {
} );
};
const testDifferentStoreCurrenciesWCPay = () => {
export const testDifferentStoreCurrenciesWCPay = () => {
const testCountryCurrencyPairs = [
{
countryRegionSubstring: 'australia',
@ -359,7 +352,7 @@ const testDifferentStoreCurrenciesWCPay = () => {
} );
};
const testSubscriptionsInclusion = () => {
export const testSubscriptionsInclusion = () => {
describe( 'A non-US store will not see the Subscriptions inclusion', () => {
const profileWizard = new OnboardingWizard( page );
const login = new Login( page );
@ -521,7 +514,7 @@ const testSubscriptionsInclusion = () => {
} );
};
const testBusinessDetailsForm = () => {
export const testBusinessDetailsForm = () => {
describe( 'A store that is selling elsewhere will see the "Number of employees” dropdown menu', () => {
const profileWizard = new OnboardingWizard( page );
const login = new Login( page );
@ -595,7 +588,7 @@ const testBusinessDetailsForm = () => {
} );
};
const testAdminHomescreen = () => {
export const testAdminHomescreen = () => {
describe( 'Homescreen', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -620,12 +613,3 @@ const testAdminHomescreen = () => {
} );
} );
};
module.exports = {
testAdminOnboardingWizard,
testSelectiveBundleWCPay,
testDifferentStoreCurrenciesWCPay,
testSubscriptionsInclusion,
testBusinessDetailsForm,
testAdminHomescreen,
};

View File

@ -1,13 +1,14 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
/**
* Internal dependencies
*/
import { AnalyticsOverview } from '../../pages/AnalyticsOverview';
import { Login } from '../../pages/Login';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
const testAdminAnalyticsOverview = () => {
export const testAdminAnalyticsOverview = () => {
describe( 'Analytics pages', () => {
const analyticsPage = new AnalyticsOverview( page );
const login = new Login( page );
@ -94,5 +95,3 @@ const testAdminAnalyticsOverview = () => {
} );
} );
};
module.exports = { testAdminAnalyticsOverview };

View File

@ -1,3 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
/**
* Internal dependencies
*/
@ -5,10 +9,7 @@ import { Analytics } from '../../pages/Analytics';
import { Customers } from '../../pages/Customers';
import { Login } from '../../pages/Login';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
const testAdminAnalyticsPages = () => {
export const testAdminAnalyticsPages = () => {
describe( 'Analytics pages', () => {
const analyticsPage = new Analytics( page );
const customersPage = new Customers( page );
@ -82,5 +83,3 @@ const testAdminAnalyticsPages = () => {
} );
} );
};
module.exports = { testAdminAnalyticsPages };

View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
import { createSimpleProduct, withRestApi } from '@woocommerce/e2e-utils';
/**
@ -20,12 +21,8 @@ import {
import { OrdersActivityPanel } from '../../elements/OrdersActivityPanel';
import { addReviewToProduct, waitForElementByText } from '../../utils/actions';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const simpleProductName = 'Simple order';
const testAdminHomescreenActivityPanel = () => {
export const testAdminHomescreenActivityPanel = () => {
describe( 'Homescreen activity panel', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -131,5 +128,3 @@ const testAdminHomescreenActivityPanel = () => {
} );
} );
};
module.exports = { testAdminHomescreenActivityPanel };

View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
import { takeScreenshotFor } from '@woocommerce/e2e-environment';
/**
@ -14,11 +15,7 @@ import { HelpMenu } from '../../elements/HelpMenu';
import { WcSettings } from '../../pages/WcSettings';
import { resetWooCommerceState, unhideTaskList } from '../../fixtures';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminHomescreenTasklist = () => {
export const testAdminHomescreenTasklist = () => {
describe( 'Homescreen task list', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -73,5 +70,3 @@ const testAdminHomescreenTasklist = () => {
} );
} );
};
module.exports = { testAdminHomescreenTasklist };

View File

@ -1,14 +1,14 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
/**
* Internal dependencies
*/
import { Coupons } from '../../pages/Coupons';
import { Login } from '../../pages/Login';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminCouponsPage = () => {
export const testAdminCouponsPage = () => {
describe( 'Coupons page', () => {
const couponsPage = new Coupons( page );
const login = new Login( page );
@ -26,5 +26,3 @@ const testAdminCouponsPage = () => {
} );
} );
};
module.exports = { testAdminCouponsPage };

View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
import { takeScreenshotFor } from '@woocommerce/e2e-environment';
/**
@ -14,11 +15,7 @@ import { BankAccountTransferSetup } from '../../sections/payment-setup/BankAccou
import { waitForTimeout } from '../../utils/actions';
import { WcSettings } from '../../pages/WcSettings';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminPaymentSetupTask = () => {
export const testAdminPaymentSetupTask = () => {
describe( 'Payment setup task', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -86,5 +83,3 @@ const testAdminPaymentSetupTask = () => {
} );
} );
};
module.exports = { testAdminPaymentSetupTask };

View File

@ -1,3 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@jest/globals';
/**
* Internal dependencies
*/
@ -7,11 +11,7 @@ import { OnboardingWizard } from '../../pages/OnboardingWizard';
import { WcHomescreen } from '../../pages/WcHomescreen';
import { getElementByText, waitForElementByText } from '../../utils/actions';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminPurchaseSetupTask = () => {
export const testAdminPurchaseSetupTask = () => {
describe( 'Purchase setup task', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -96,5 +96,3 @@ const testAdminPurchaseSetupTask = () => {
} );
} );
};
module.exports = { testAdminPurchaseSetupTask };

View File

@ -1,3 +1,7 @@
/**
* External dependencies
*/
import { afterAll, beforeAll, describe, it } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
@ -7,11 +11,7 @@ import { WcHomescreen } from '../pages/WcHomescreen';
import { Analytics } from '../pages/Analytics';
import { switchLanguage } from '../fixtures';
/* eslint-disable @typescript-eslint/no-var-requires */
const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
/* eslint-enable @typescript-eslint/no-var-requires */
const testAdminTranslations = () => {
export const testAdminTranslations = () => {
describe( 'Test client, package, and PHP class translations,', () => {
const profileWizard = new OnboardingWizard( page );
const homeScreen = new WcHomescreen( page );
@ -81,5 +81,3 @@ const testAdminTranslations = () => {
} );
} );
};
module.exports = { testAdminTranslations };

View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import config from 'config';
import { ElementHandle } from 'puppeteer';
/**
@ -8,11 +9,6 @@ import { ElementHandle } from 'puppeteer';
*/
import { Login } from '../pages/Login';
/* eslint-disable @typescript-eslint/no-var-requires */
const { expect } = require( '@jest/globals' );
const config = require( 'config' );
/* eslint-enable @typescript-eslint/no-var-requires */
/**
* Wait for UI blocking to end.
*/

View File

@ -118,11 +118,13 @@ importers:
specifiers:
'@babel/core': ^7.17.5
'@jest/globals': ^26.6.2
'@types/config': 0.0.41
'@types/expect-puppeteer': ^4.4.7
'@types/jest': ^27.4.1
'@types/puppeteer': ^5.4.5
'@typescript-eslint/eslint-plugin': ^5.14.0
'@woocommerce/api': ^0.2.0
'@woocommerce/e2e-utils': workspace:*
'@woocommerce/eslint-plugin': workspace:*
config: ^3.3.7
eslint: ^8.12.0
@ -135,9 +137,11 @@ importers:
dependencies:
'@jest/globals': 26.6.2
'@types/jest': 27.4.1
'@woocommerce/e2e-utils': link:../e2e-utils
config: 3.3.7
devDependencies:
'@babel/core': 7.17.8
'@types/config': 0.0.41
'@types/expect-puppeteer': 4.4.7
'@types/puppeteer': 5.4.5
'@typescript-eslint/eslint-plugin': 5.15.0_eslint@8.12.0+typescript@4.6.2
@ -13218,6 +13222,10 @@ packages:
resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==}
dev: true
/@types/config/0.0.41:
resolution: {integrity: sha512-HjXUmIld0gwvyG8MU/17QtLzOyuMX4jbGuijmS9sWsob5xxgZ/hY9cbRCaHIHqTQ3HMLhwS3F8uXq3Bt9zgzHA==}
dev: true
/@types/cookie/0.4.1:
resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
dev: true
@ -18340,7 +18348,7 @@ packages:
loader-utils: 1.4.0
make-dir: 3.1.0
schema-utils: 2.7.1
webpack: 4.46.0_webpack-cli@3.3.12
webpack: 4.46.0
dev: true
/babel-loader/8.2.3_d3f6fe5812216e437b67a6bf164a056c:
@ -18370,7 +18378,7 @@ packages:
loader-utils: 1.4.0
make-dir: 3.1.0
schema-utils: 2.7.1
webpack: 5.70.0_webpack-cli@4.9.2
webpack: 5.70.0
dev: true
/babel-messages/6.23.0:
@ -20831,7 +20839,7 @@ packages:
postcss-value-parser: 4.2.0
schema-utils: 2.7.1
semver: 6.3.0
webpack: 4.46.0_webpack-cli@3.3.12
webpack: 4.46.0
dev: true
/css-loader/3.6.0_webpack@5.70.0:
@ -37881,7 +37889,7 @@ packages:
serialize-javascript: 4.0.0
source-map: 0.6.1
terser: 4.8.0
webpack: 4.46.0_webpack-cli@3.3.12
webpack: 4.46.0
webpack-sources: 1.4.3
worker-farm: 1.7.0
dev: true
@ -37992,7 +38000,7 @@ packages:
serialize-javascript: 6.0.0
source-map: 0.6.1
terser: 5.10.0_acorn@8.7.0
webpack: 5.70.0_webpack-cli@3.3.12
webpack: 5.70.0
transitivePeerDependencies:
- acorn
dev: true