Skip to content

Commit b32be17

Browse files
Lukas742Lukas742
authoredJul 11, 2023
test(AnalyticalTable): add tests for keyboard navigation (#4869)
·
v2.8.1v1.17.3
1 parent 95aa064 commit b32be17

File tree

5 files changed

+166
-1
lines changed

5 files changed

+166
-1
lines changed
 

‎cypress/support/component.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'cypress-real-events';
12
import '@cypress/code-coverage/support';
23
import '@testing-library/cypress/add-commands';
34
import './commands';

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"chromatic": "^6.5.3",
6565
"cssnano": "^6.0.1",
6666
"cypress": "^12.1.0",
67+
"cypress-real-events": "^1.8.1",
6768
"dedent": "^1.0.0",
6869
"eslint": "^8.35.0",
6970
"eslint-config-prettier": "^8.7.0",

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

+153
Original file line numberDiff line numberDiff line change
@@ -2103,6 +2103,159 @@ describe('AnalyticalTable', () => {
21032103
cy.get('[data-visible-row-index="5"][data-visible-column-index="3"]').should('have.text', '90');
21042104
});
21052105

2106+
it('keyboard navigation', () => {
2107+
cy.mount(<AnalyticalTable data={generateMoreData(50)} columns={columns} />);
2108+
cy.findByText('Name-0').should('be.visible');
2109+
cy.get('[tabindex="0"]')
2110+
.should('have.attr', 'data-component-name', 'AnalyticalTableContainer')
2111+
.should('have.length', 1);
2112+
2113+
cy.window().focus();
2114+
cy.realPress('Tab');
2115+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2116+
2117+
cy.realPress('ArrowDown');
2118+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '0');
2119+
cy.realPress('ArrowRight');
2120+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '1');
2121+
cy.realPress('ArrowUp');
2122+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '1');
2123+
cy.realPress('ArrowLeft');
2124+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2125+
2126+
cy.realPress('End');
2127+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '2');
2128+
cy.realPress('Home');
2129+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2130+
2131+
cy.realPress('PageDown');
2132+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '0');
2133+
cy.realPress('PageDown');
2134+
// last currently rendered row
2135+
cy.focused().should('have.attr', 'data-row-index', '22').should('have.attr', 'data-column-index', '0');
2136+
cy.realPress('PageDown');
2137+
cy.focused().should('have.attr', 'data-row-index', '36').should('have.attr', 'data-column-index', '0');
2138+
cy.realPress('PageDown');
2139+
cy.focused().should('have.attr', 'data-row-index', '50').should('have.attr', 'data-column-index', '0');
2140+
cy.realPress('PageUp');
2141+
// first currently rendered row
2142+
cy.focused().should('have.attr', 'data-row-index', '29').should('have.attr', 'data-column-index', '0');
2143+
cy.realPress('PageUp');
2144+
cy.focused().should('have.attr', 'data-row-index', '15').should('have.attr', 'data-column-index', '0');
2145+
cy.realPress('PageUp');
2146+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '0');
2147+
cy.realPress('PageUp');
2148+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2149+
2150+
cy.mount(
2151+
<AnalyticalTable
2152+
data={generateMoreData(50)}
2153+
columns={[...columns.slice(0, 2), { id: 'button', Cell: () => <Button>Button</Button> }]}
2154+
/>
2155+
);
2156+
2157+
cy.findByText('Name-0').should('be.visible');
2158+
cy.window().focus();
2159+
cy.realPress('Tab');
2160+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2161+
cy.realPress('Tab');
2162+
cy.focused().should('have.attr', 'ui5-button');
2163+
cy.realPress('ArrowLeft');
2164+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '1');
2165+
cy.realPress('Tab');
2166+
cy.focused().should('have.attr', 'ui5-button');
2167+
cy.realPress('ArrowDown');
2168+
cy.focused().should('have.attr', 'data-row-index', '2').should('have.attr', 'data-column-index', '2');
2169+
cy.realPress(['Shift', 'Tab']);
2170+
cy.focused().should('have.attr', 'ui5-button');
2171+
2172+
const renderSubComp = (row) => {
2173+
if (row.id === '2') {
2174+
return null;
2175+
}
2176+
return <div style={{ height: '50px', width: '100%', background: 'cadetblue' }}>SubComponent</div>;
2177+
};
2178+
2179+
cy.mount(
2180+
<AnalyticalTable
2181+
data={generateMoreData(50)}
2182+
columns={columns.slice(0, 2)}
2183+
alwaysShowSubComponent
2184+
renderRowSubComponent={renderSubComp}
2185+
/>
2186+
);
2187+
cy.findByText('Name-0').should('be.visible');
2188+
cy.window().focus();
2189+
cy.realPress('Tab');
2190+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2191+
cy.realPress('ArrowDown');
2192+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '0');
2193+
cy.realPress('ArrowDown');
2194+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2195+
cy.realPress('ArrowDown');
2196+
cy.focused().should('have.attr', 'data-row-index', '2').should('have.attr', 'data-column-index', '0');
2197+
cy.realPress('ArrowDown');
2198+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '2');
2199+
cy.realPress('ArrowDown');
2200+
cy.focused().should('have.attr', 'data-row-index', '3').should('have.attr', 'data-column-index', '0');
2201+
cy.realPress('ArrowDown');
2202+
cy.focused().should('have.attr', 'data-row-index', '4').should('have.attr', 'data-column-index', '0');
2203+
cy.realPress('ArrowRight');
2204+
cy.focused().should('have.attr', 'data-row-index', '4').should('have.attr', 'data-column-index', '1');
2205+
cy.realPress('ArrowUp');
2206+
cy.focused().should('have.attr', 'data-row-index', '3').should('have.attr', 'data-column-index', '1');
2207+
cy.realPress('ArrowUp');
2208+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '2');
2209+
cy.realPress('ArrowUp');
2210+
cy.focused().should('have.attr', 'data-row-index', '2').should('have.attr', 'data-column-index', '0');
2211+
2212+
const renderSubComp2 = (row) => {
2213+
if (row.id === '2') {
2214+
return null;
2215+
}
2216+
return (
2217+
<div style={{ height: '50px', width: '100%', background: 'cadetblue' }}>
2218+
<Button data-subcomponent-active-element>Active</Button>
2219+
</div>
2220+
);
2221+
};
2222+
2223+
cy.mount(
2224+
<AnalyticalTable
2225+
data={generateMoreData(50)}
2226+
columns={columns.slice(0, 2)}
2227+
alwaysShowSubComponent
2228+
renderRowSubComponent={renderSubComp2}
2229+
/>
2230+
);
2231+
cy.findByText('Name-0').should('be.visible');
2232+
cy.window().focus();
2233+
cy.realPress('Tab');
2234+
cy.focused().should('have.attr', 'data-row-index', '0').should('have.attr', 'data-column-index', '0');
2235+
cy.realPress('ArrowDown');
2236+
cy.focused().should('have.attr', 'data-row-index', '1').should('have.attr', 'data-column-index', '0');
2237+
cy.realPress('ArrowDown');
2238+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2239+
cy.realPress('Tab');
2240+
cy.focused().should('have.attr', 'ui5-button');
2241+
cy.realPress('ArrowDown');
2242+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2243+
cy.realPress('Tab');
2244+
cy.focused().should('have.attr', 'ui5-button');
2245+
cy.realPress('ArrowUp');
2246+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2247+
cy.realPress('Tab');
2248+
cy.focused().should('have.attr', 'ui5-button');
2249+
cy.realPress('ArrowLeft');
2250+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2251+
cy.realPress('Tab');
2252+
cy.focused().should('have.attr', 'ui5-button');
2253+
cy.realPress('ArrowRight');
2254+
cy.focused().should('have.attr', 'data-subcomponent-row-index', '1');
2255+
cy.realPress('Tab');
2256+
cy.focused().should('have.attr', 'ui5-button');
2257+
});
2258+
21062259
cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
21072260
});
21082261

‎tsconfig.spec.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "ES2021",
44
"lib": ["es2022", "dom"],
5-
"types": ["cypress", "node", "@testing-library/cypress"],
5+
"types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"],
66
"moduleResolution": "Node",
77
"jsx": "react-jsx",
88
"paths": {

‎yarn.lock

+10
Original file line numberDiff line numberDiff line change
@@ -8089,6 +8089,15 @@ __metadata:
80898089
languageName: node
80908090
linkType: hard
80918091

8092+
"cypress-real-events@npm:^1.8.1":
8093+
version: 1.8.1
8094+
resolution: "cypress-real-events@npm:1.8.1"
8095+
peerDependencies:
8096+
cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x
8097+
checksum: 48f229335f26f8c225428563e94ca091ab7a00e943a4c953e062135b1d37672edec9cb7667452d894b43528b52924cd1b6061df044ccb0665b9c0965a0fe214f
8098+
languageName: node
8099+
linkType: hard
8100+
80928101
"cypress@npm:^12.1.0":
80938102
version: 12.16.0
80948103
resolution: "cypress@npm:12.16.0"
@@ -19876,6 +19885,7 @@ __metadata:
1987619885
chromatic: ^6.5.3
1987719886
cssnano: ^6.0.1
1987819887
cypress: ^12.1.0
19888+
cypress-real-events: ^1.8.1
1987919889
dedent: ^1.0.0
1988019890
eslint: ^8.35.0
1988119891
eslint-config-prettier: ^8.7.0

0 commit comments

Comments
 (0)
Please sign in to comment.