Add E2E tests for analytics overview screen section removal (https://github.com/woocommerce/woocommerce-admin/pull/7238)
* Add E2E tests for analytics overview screen section removal * Fix build errors * Add tests for moving sections up and down
This commit is contained in:
louwie17
GitHub
parent
32f3663cce
commit
8b7b8b2011
|
|
@ -68,10 +68,10 @@ class SectionControls extends Component {
|
|||
<Icon
|
||||
icon={ <ChevronDownIcon /> }
|
||||
size={ 20 }
|
||||
label={ __( 'Move Down' ) }
|
||||
label={ __( 'Move down' ) }
|
||||
className="icon-control"
|
||||
/>
|
||||
{ __( 'Move Down', 'woocommerce-admin' ) }
|
||||
{ __( 'Move down', 'woocommerce-admin' ) }
|
||||
</MenuItem>
|
||||
) }
|
||||
<MenuItem isClickable onInvoke={ onRemove }>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
import { ElementHandle } from 'puppeteer';
|
||||
import { waitForElementByText } from '../utils/actions';
|
||||
import { Analytics } from './Analytics';
|
||||
|
||||
type Section = {
|
||||
title: string;
|
||||
element: ElementHandle< Element >;
|
||||
};
|
||||
const isSection = ( item: Section | undefined ): item is Section => {
|
||||
return !! item;
|
||||
};
|
||||
|
||||
export class AnalyticsOverview extends Analytics {
|
||||
async navigate() {
|
||||
await this.navigateToSection( 'overview' );
|
||||
}
|
||||
|
||||
async getSections() {
|
||||
const list = await this.page.$$(
|
||||
'.woocommerce-dashboard-section .woocommerce-section-header'
|
||||
);
|
||||
const sections = await Promise.all(
|
||||
list.map( async ( item ) => {
|
||||
const title = await item.evaluate( ( element ) => {
|
||||
const header = element.querySelector( 'h2' );
|
||||
return header?.textContent;
|
||||
} );
|
||||
if ( title ) {
|
||||
return {
|
||||
title,
|
||||
element: item,
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
} )
|
||||
);
|
||||
return sections.filter( isSection );
|
||||
}
|
||||
|
||||
async openSectionEllipsis( sectionTitle: string ) {
|
||||
const section = ( await this.getSections() ).find(
|
||||
( section ) => section.title === sectionTitle
|
||||
);
|
||||
if ( section ) {
|
||||
const ellipsisMenu = await section.element.$(
|
||||
'.woocommerce-ellipsis-menu .woocommerce-ellipsis-menu__toggle'
|
||||
);
|
||||
await ellipsisMenu?.click();
|
||||
await this.page.waitForSelector(
|
||||
'.woocommerce-ellipsis-menu div[role=menu]'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async closeSectionEllipsis( sectionTitle: string ) {
|
||||
const section = ( await this.getSections() ).find(
|
||||
( section ) => section.title === sectionTitle
|
||||
);
|
||||
if ( section ) {
|
||||
const ellipsisMenu = await section.element.$(
|
||||
'.woocommerce-ellipsis-menu .woocommerce-ellipsis-menu__toggle'
|
||||
);
|
||||
await ellipsisMenu?.click();
|
||||
await page.waitFor(
|
||||
() =>
|
||||
! document.querySelector(
|
||||
'.woocommerce-ellipsis-menu div[role=menu]'
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async removeSection( sectionTitle: string ) {
|
||||
await this.openSectionEllipsis( sectionTitle );
|
||||
const item = await waitForElementByText( 'div', 'Remove section' );
|
||||
await item?.click();
|
||||
}
|
||||
|
||||
async addSection( sectionTitle: string ) {
|
||||
await this.page.waitForSelector( "button[title='Add more sections']" );
|
||||
await this.page.click( "button[title='Add more sections']" );
|
||||
const item = await waitForElementByText( 'span', sectionTitle );
|
||||
await item?.click();
|
||||
}
|
||||
|
||||
async moveSectionDown( sectionTitle: string ) {
|
||||
await this.openSectionEllipsis( sectionTitle );
|
||||
const item = await waitForElementByText( 'div', 'Move down' );
|
||||
await item?.click();
|
||||
}
|
||||
|
||||
async moveSectionUp( sectionTitle: string ) {
|
||||
await this.openSectionEllipsis( sectionTitle );
|
||||
const item = await waitForElementByText( 'div', 'Move up' );
|
||||
await item?.click();
|
||||
}
|
||||
|
||||
async getEllipsisMenuItems( sectionTitle: string ) {
|
||||
await this.openSectionEllipsis( sectionTitle );
|
||||
const list = await this.page.$$(
|
||||
'.woocommerce-ellipsis-menu div[role=menuitem]'
|
||||
);
|
||||
return Promise.all(
|
||||
list.map( async ( item ) => ( {
|
||||
title: await item.evaluate(
|
||||
( element ) => element?.textContent
|
||||
),
|
||||
element: item,
|
||||
} ) )
|
||||
);
|
||||
}
|
||||
|
||||
async getEllipsisMenuCheckboxItems( sectionTitle: string ) {
|
||||
await this.openSectionEllipsis( sectionTitle );
|
||||
const list = await this.page.$$(
|
||||
'.woocommerce-ellipsis-menu div[role=menuitemcheckbox]'
|
||||
);
|
||||
return Promise.all(
|
||||
list.map( async ( item ) => ( {
|
||||
title: await item.evaluate(
|
||||
( element ) => element?.textContent
|
||||
),
|
||||
element: item,
|
||||
} ) )
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { AnalyticsOverview } from '../../pages/AnalyticsOverview';
|
||||
import { Login } from '../../pages/Login';
|
||||
|
||||
describe( 'Analytics pages', () => {
|
||||
const analyticsPage = new AnalyticsOverview( page );
|
||||
const login = new Login( page );
|
||||
|
||||
beforeAll( async () => {
|
||||
await login.login();
|
||||
await analyticsPage.navigate();
|
||||
await analyticsPage.isDisplayed();
|
||||
} );
|
||||
afterAll( async () => {
|
||||
await login.logout();
|
||||
} );
|
||||
|
||||
it( 'a user should see 3 sections by default - Performance, Charts, and Leaderboards', async () => {
|
||||
const sections = ( await analyticsPage.getSections() ).map(
|
||||
( section ) => section.title
|
||||
);
|
||||
expect( sections ).toContain( 'Performance' );
|
||||
expect( sections ).toContain( 'Charts' );
|
||||
expect( sections ).toContain( 'Leaderboards' );
|
||||
} );
|
||||
|
||||
it( 'should allow a user to remove a section', async () => {
|
||||
await analyticsPage.removeSection( 'Performance' );
|
||||
const sections = ( await analyticsPage.getSections() ).map(
|
||||
( section ) => section.title
|
||||
);
|
||||
expect( sections ).not.toContain( 'Performance' );
|
||||
} );
|
||||
|
||||
it( 'should allow a user to add a section back in', async () => {
|
||||
let sections = ( await analyticsPage.getSections() ).map(
|
||||
( section ) => section.title
|
||||
);
|
||||
expect( sections ).not.toContain( 'Performance' );
|
||||
await analyticsPage.addSection( 'Performance' );
|
||||
|
||||
sections = ( await analyticsPage.getSections() ).map(
|
||||
( section ) => section.title
|
||||
);
|
||||
expect( sections ).toContain( 'Performance' );
|
||||
} );
|
||||
|
||||
describe( 'moving sections', () => {
|
||||
it( 'should not display move up for the top, or move down for the bottom section', async () => {
|
||||
const sections = await analyticsPage.getSections();
|
||||
for ( const section of sections ) {
|
||||
const index = sections.indexOf( section );
|
||||
const menuItems = (
|
||||
await analyticsPage.getEllipsisMenuItems( section.title )
|
||||
).map( ( item ) => item.title );
|
||||
if ( index === 0 ) {
|
||||
expect( menuItems ).toContain( 'Move down' );
|
||||
expect( menuItems ).not.toContain( 'Move up' );
|
||||
} else if ( index === sections.length - 1 ) {
|
||||
expect( menuItems ).not.toContain( 'Move down' );
|
||||
expect( menuItems ).toContain( 'Move up' );
|
||||
} else {
|
||||
expect( menuItems ).toContain( 'Move down' );
|
||||
expect( menuItems ).toContain( 'Move up' );
|
||||
}
|
||||
await analyticsPage.closeSectionEllipsis( section.title );
|
||||
}
|
||||
} );
|
||||
|
||||
it( 'should allow a user to move a section down', async () => {
|
||||
const sections = await analyticsPage.getSections();
|
||||
await analyticsPage.moveSectionDown( sections[ 0 ].title );
|
||||
const newSections = await analyticsPage.getSections();
|
||||
expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
|
||||
expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
|
||||
} );
|
||||
|
||||
it( 'should allow a user to move a section up', async () => {
|
||||
const sections = await analyticsPage.getSections();
|
||||
await analyticsPage.moveSectionUp( sections[ 1 ].title );
|
||||
const newSections = await analyticsPage.getSections();
|
||||
expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
|
||||
expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
Loading…
Reference in New Issue