Skip to content
This repository has been archived by the owner on Apr 24, 2023. It is now read-only.

Commit

Permalink
crud e2e test
Browse files Browse the repository at this point in the history
  • Loading branch information
@abz53378
abz53378 committed Dec 18, 2018
1 parent ac46f89 commit 30e1b75
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 52 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -41,7 +41,7 @@
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@canner/antd-components": "^0.5.13",
"@canner/antd-components": "^0.5.28",
"@canner/vega-charts": "^0.1.3",
"@canner/victory-area": "^0.2.0",
"@canner/victory-area-stack": "^0.2.0",
Expand Down
33 changes: 19 additions & 14 deletions packages/canner/src/hocs/deploy.js
View file
Expand Up @@ -82,14 +82,17 @@ export function genDeployButton(deploy: Function, currentRefId: RefId) {
// $FlowFixMe
text = 'Confirm',
// $FlowFixMe
component = Button
Component = Button
}: buttonProps = {}) {
return React.createElement(component, {
disabled,
style,
type: "primary",
onClick: () => onClick(refId, callback)
}, text);
return <Component
disabled={disabled}
style={style}
type="primary"
onClick={() => onClick(refId, callback)}
data-testid="confirm-button"
>
{text}
</Component>;
};
}

Expand All @@ -103,17 +106,19 @@ export function genCancelButton(reset: Function, currentRefId: RefId) {
// $FlowFixMe
text = 'Reset',
// $FlowFixMe
component = Button
Component = Button
}: buttonProps = {}) {
return React.createElement(component, {
disabled,
style,
onClick: () => onClick(refId, callback)
}, text);
return <Component
disabled={disabled}
style={style}
onClick={() => onClick(refId, callback)}
data-testid="reset-button"
>
{text}
</Component>;
};
}


function getItemId(rootValue: any, refId: RefId) {
const [key, index] = refId.getPathArr();
let itemId = '';
Expand Down
6 changes: 3 additions & 3 deletions packages/canner/src/hocs/route.js
View file
Expand Up @@ -128,7 +128,7 @@ export default function withRoute(Com: React.ComponentType<*>) {
// quick fix for route array's children
// need to find a stable way to control route
(renderType === RENDER_CHILDREN && pattern === 'array' && (routesLength === pathArrLength || (routesLength + 1 === pathArrLength && operator === 'create'))) &&
<Button onClick={this.discard} style={{marginBottom: 16}}>
<Button onClick={this.discard} style={{marginBottom: 16}} data-testid="back-button">
<Icon type="arrow-left" /> {intl.formatMessage({id: 'hocs.route.backText'})}
</Button>
}
Expand All @@ -145,10 +145,10 @@ export default function withRoute(Com: React.ComponentType<*>) {
// need to find a stable way to control route
(renderType === RENDER_CHILDREN && pattern === 'array' && !hideButtons && (routesLength === pathArrLength || (routesLength + 1 === pathArrLength && operator === 'create'))) &&
<ButtonWrapper>
<Button style={{marginRight: 16}} type="primary" onClick={this.deploy}>
<Button style={{marginRight: 16}} type="primary" onClick={this.deploy} data-testid="confirm-button">
{intl.formatMessage({id: 'hocs.route.confirmText'})}
</Button>
<Button onClick={this.reset}>
<Button onClick={this.reset} data-testid="reset-button">
{intl.formatMessage({id: 'hocs.route.resetText'})}
</Button>
</ButtonWrapper>
Expand Down
4 changes: 2 additions & 2 deletions packages/canner/test/e2e/dashboard.test.js
View file
Expand Up @@ -11,10 +11,10 @@ describe('on page load', () => {
slowMo: 0,
devtools: true,
})
page = await browser.newPage()
page = (await browser.pages())[0];
await page.goto('http://localhost:8080/');
await page.waitForSelector('div[data-testid="dashboard"]');
page.setViewport({ width: 500, height: 2400 })
page.setViewport({ width: 900, height: 800 })
});

afterAll(() => {
Expand Down
125 changes: 118 additions & 7 deletions packages/canner/test/e2e/product.test.js
View file
Expand Up @@ -2,22 +2,23 @@ const puppeteer = require('puppeteer')

let browser;
let page;
jest.setTimeout(30000);
jest.setTimeout(60000);

describe('on page load', () => {
beforeAll(async () => {
browser = await puppeteer.launch({
headless: false,
slowMo: 0,
devtools: true,
slowMo: 0
})
page = await browser.newPage()
page = (await browser.pages())[0]
await page.goto('http://localhost:8080/demo/products');
await page.waitForSelector('div[data-testid="products"]');
// reset localStorage
await page.evaluate(() => { localStorage.clear(); });
page.setViewport({ width: 500, height: 2400 })

await page.setViewport({
width: 900,
height: 800
})
});

afterAll(() => {
Expand All @@ -29,4 +30,114 @@ describe('on page load', () => {
// should be 10 products at least, and antd will render more tr for style reasons
expect(trLength).toBeGreaterThan(10);
});
})

test('should change route when click first edit button', async () => {
await Promise.all([
page.waitForNavigation(),
page.click('button[data-testid="edit-button"]')
]);
await page.waitForSelector('div[data-testid="products/no"]'),
expect(page.url()).toBe('http://localhost:8080/demo/products/products1');
});

test('should navigate and remove changes after reset', async () => {
await page.goto('http://localhost:8080/demo/products/products1');
await page.waitForSelector('div[data-testid="products/no"]');
const previousValue = await getProduct1(page);
await page.type('div[data-testid="products/no"] input', 'number');
await page.type('div[data-testid="products/name"] input', 'name');
await page.type('div[data-testid="products/price"] input', '1000');
await page.type('div[data-testid="products/promo"] input', '800');

// click reset
await Promise.all([
page.waitForNavigation(),
page.click('button[data-testid="reset-button"]')
]);
expect(page.url()).toBe('http://localhost:8080/demo/products');

// re-reneter products1
await page.goto('http://localhost:8080/demo/products/products1');
await page.waitForSelector('div[data-testid="products/no"]');
const productValue = await getProduct1(page);
expect(productValue).toMatchObject(previousValue)
});

test('should navigate and deploy changes after deplot', async () => {
await page.goto('http://localhost:8080/demo/products/products1');
await page.waitForSelector('div[data-testid="products/no"]');
const previousValue = await getProduct1(page);
await page.type('div[data-testid="products/no"] input', 'number');
await page.type('div[data-testid="products/name"] input', 'name');
await page.type('div[data-testid="products/price"] input', '1000');
await page.type('div[data-testid="products/promo"] input', '800');

// click reset
await Promise.all([
page.waitForNavigation(),
page.click('button[data-testid="confirm-button"]')
]);
expect(page.url()).toBe('http://localhost:8080/demo/products');

// re-reneter products1
await page.goto('http://localhost:8080/demo/products/products1');
await page.waitForSelector('div[data-testid="products/no"]');
const productValue = await getProduct1(page);
expect(productValue).toMatchObject({
no: `${previousValue.no}number`,
name: `${previousValue.name}name`,
price: `${previousValue.price}1000`,
promo: `${previousValue.promo}800`
})
});

test('should delete item', async () => {
await page.goto('http://localhost:8080/demo/products');
await page.waitForSelector('button[data-testid="delete-button"]');
page.click('button[data-testid="delete-button"]');
await page.waitForSelector('div.ant-popover-buttons');
const originTrLength = await page.$$eval('div[data-testid="products"] table tr', trs => trs.length);
await page.evaluate(() => document.querySelector('div.ant-popover-buttons button.ant-btn-danger').click())
const hasDeleted = await page.waitFor(trLength => {
return document.querySelectorAll('div[data-testid="products"] table tr').length < trLength;
}, {}, originTrLength);
expect(hasDeleted).toBeTruthy();
});

test('should create item', async () => {
await page.waitForSelector('button[data-testid="delete-button"]');
page.click('button[data-testid="delete-button"]');
await page.waitForSelector('div.ant-popover-buttons');
await page.evaluate(() => document.querySelector('div.ant-popover-buttons button.ant-btn-danger').click())
const originTrLength = await page.$$eval('div[data-testid="products"] table tr', trs => trs.length);
await Promise.all([
page.waitForNavigation(),
page.click('button[data-testid="add-button"]')
])
await page.waitForSelector('div[data-testid="products/no"]');
await page.type('div[data-testid="products/no"] input', 'number');
await page.type('div[data-testid="products/name"] input', 'name');
await page.type('div[data-testid="products/price"] input', '1000');
await page.type('div[data-testid="products/promo"] input', '800');
await Promise.all([
page.waitForNavigation(),
await page.click('button[data-testid="confirm-button"]')
])
await page.waitForSelector('div[data-testid="products"]');
const hasCreated = await page.waitFor(trLength => {
return document.querySelectorAll('div[data-testid="products"] table tr').length > trLength;
}, {}, originTrLength);
expect(hasCreated).toBeTruthy();
});
})

async function getProduct1(page) {
return await page.evaluate(() => {
return {
no: document.querySelector('div[data-testid="products/no"] input').value,
name: document.querySelector('div[data-testid="products/name"] input').value,
price: document.querySelector('div[data-testid="products/price"] input').value,
promo: document.querySelector('div[data-testid="products/promo"] input').value,
}
});
}
58 changes: 33 additions & 25 deletions yarn.lock
View file
Expand Up @@ -828,13 +828,13 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"

"@canner/antd-array-gallery@^0.5.1":
version "0.5.1"
resolved "https://registry.yarnpkg.com/@canner/antd-array-gallery/-/antd-array-gallery-0.5.1.tgz#283ce3d435db4857585832397f677cd882ea1199"
"@canner/antd-array-gallery@^0.5.26":
version "0.5.26"
resolved "https://registry.yarnpkg.com/@canner/antd-array-gallery/-/antd-array-gallery-0.5.26.tgz#43105e7d3fe686e3866c674ed211352dc5309d07"
dependencies:
"@canner/image-service-config" "^0.3.0"
"@canner/image-upload" "^0.13.4"
canner-image-gallery "^0.3.4"
"@canner/image-upload" "^0.14.1"
canner-image-gallery "^0.5.0"

"@canner/antd-array-panel@^0.5.6":
version "0.5.6"
Expand Down Expand Up @@ -870,21 +870,21 @@
dependencies:
"@canner/antd-array-tabs" "^0.5.6"

"@canner/antd-array-table@^0.5.20":
version "0.5.20"
resolved "https://registry.yarnpkg.com/@canner/antd-array-table/-/antd-array-table-0.5.20.tgz#2ae5b77debdbe6d3636408578c125b02e560731a"
"@canner/antd-array-table@^0.5.28":
version "0.5.28"
resolved "https://registry.yarnpkg.com/@canner/antd-array-table/-/antd-array-table-0.5.28.tgz#f295e3b3ce50f17c13d685944abeec8fa5f7d738"
dependencies:
"@canner/antd-locales" "^0.5.20"
"@canner/antd-share-table" "^0.5.20"
"@canner/antd-share-table" "^0.5.28"
prop-types "^15.6.0"
styled-components "^3.4.6"

"@canner/antd-array-table_route@^0.5.20":
version "0.5.20"
resolved "https://registry.yarnpkg.com/@canner/antd-array-table_route/-/antd-array-table_route-0.5.20.tgz#991aad9524db7d3438c1bb535a619b817f8b235f"
"@canner/antd-array-table_route@^0.5.28":
version "0.5.28"
resolved "https://registry.yarnpkg.com/@canner/antd-array-table_route/-/antd-array-table_route-0.5.28.tgz#c68ec819edc77ed748e6af4fc0e040d591f19c4f"
dependencies:
"@canner/antd-locales" "^0.5.20"
"@canner/antd-share-table" "^0.5.20"
"@canner/antd-share-table" "^0.5.28"
styled-components "^3.4.6"

"@canner/antd-array-tabs@^0.5.6":
Expand Down Expand Up @@ -919,19 +919,19 @@
dependencies:
react-intl "^2.4.0"

"@canner/antd-components@^0.5.13":
version "0.5.21"
resolved "https://registry.yarnpkg.com/@canner/antd-components/-/antd-components-0.5.21.tgz#d3c9112a5acf092d558747eb626f9f3c7e069fd0"
"@canner/antd-components@^0.5.28":
version "0.5.28"
resolved "https://registry.yarnpkg.com/@canner/antd-components/-/antd-components-0.5.28.tgz#1933cb83ede4c3443b0332dff1e1eb89d420592a"
dependencies:
"@canner/antd-array-gallery" "^0.5.1"
"@canner/antd-array-gallery" "^0.5.26"
"@canner/antd-array-panel" "^0.5.6"
"@canner/antd-array-slider" "^0.5.1"
"@canner/antd-array-tab_bottom" "^0.5.6"
"@canner/antd-array-tab_left" "^0.5.6"
"@canner/antd-array-tab_right" "^0.5.6"
"@canner/antd-array-tab_top" "^0.5.6"
"@canner/antd-array-table" "^0.5.20"
"@canner/antd-array-table_route" "^0.5.20"
"@canner/antd-array-table" "^0.5.28"
"@canner/antd-array-table_route" "^0.5.28"
"@canner/antd-array-tabs" "^0.5.6"
"@canner/antd-array-tag" "^0.5.20"
"@canner/antd-array-tree" "^0.5.20"
Expand Down Expand Up @@ -1071,9 +1071,9 @@
"@canner/antd-locales" "^0.5.20"
"@canner/antd-share-toolbar" "^0.5.20"

"@canner/antd-share-table@^0.5.20":
version "0.5.20"
resolved "https://registry.yarnpkg.com/@canner/antd-share-table/-/antd-share-table-0.5.20.tgz#6cf314ebd83456e34522840ced9fa4c36bb7359b"
"@canner/antd-share-table@^0.5.28":
version "0.5.28"
resolved "https://registry.yarnpkg.com/@canner/antd-share-table/-/antd-share-table-0.5.28.tgz#72388fd5bdeecf161e885fee21631a3eb06a8a5f"
dependencies:
"@canner/antd-locales" "^0.5.20"
"@canner/antd-share-toolbar" "^0.5.20"
Expand Down Expand Up @@ -1150,6 +1150,14 @@
react-loading-image "^0.5.0"
styled-components "^3.2.0"

"@canner/image-upload@^0.14.1":
version "0.14.1"
resolved "https://registry.yarnpkg.com/@canner/image-upload/-/image-upload-0.14.1.tgz#90ccc5e312f71cb0143ab247c5e48dc5583354bc"
dependencies:
react-intl "^2.4.0"
react-loading-image "^0.5.0"
styled-components "^3.2.0"

"@canner/rc-tabs@^9.2.7":
version "9.2.7"
resolved "https://registry.yarnpkg.com/@canner/rc-tabs/-/rc-tabs-9.2.7.tgz#3f45a424996df3906548deb76adc12cbfb1f37fa"
Expand Down Expand Up @@ -3438,9 +3446,9 @@ canner-helpers@^0.0.1:
immutable "^4.0.0-rc.9"
lodash "^4.17.5"

canner-image-gallery@^0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/canner-image-gallery/-/canner-image-gallery-0.3.4.tgz#c06b00281822cd018e8a0eb5c02ae3498e7c86c6"
canner-image-gallery@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/canner-image-gallery/-/canner-image-gallery-0.5.0.tgz#d0db9baa96221bcd99d11d6b45b26fea66a709b4"
dependencies:
"@canner/image-upload" "^0.13.4"
grid-breakpoint "^1.7.0"
Expand Down

0 comments on commit 30e1b75

Please sign in to comment.