Skip to content

Commit

Permalink
Add test cases to verify 'Save Changes' button
Browse files Browse the repository at this point in the history
  • Loading branch information
@pmakode-akamai
pmakode-akamai committed Dec 2, 2024
1 parent 2f4479a commit e06e511
Showing 1 changed file with 136 additions and 39 deletions.
175 changes: 136 additions & 39 deletions packages/manager/cypress/e2e/core/firewalls/firewall-rules-drag-and-drop-keyboard.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
firewallRulesFactory,
} from 'src/factories';
import { authenticate } from 'support/api/authentication';
import { ui } from 'support/ui';
import { cleanUp } from 'support/util/cleanup';
import { randomItem, randomLabel, randomString } from 'support/util/random';

Expand Down Expand Up @@ -148,16 +149,22 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});

it('should move Inbound rule rows using keyboard interaction', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule1` down two rows
// Move `inboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "inboundRule2" is in the 1st row,
Expand All @@ -170,16 +177,16 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});
});

// Focus the 2nd row and activate keyboard drag mode using Space/Enter key
// Focus the 2nd row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule3.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule3.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule3` up one row
// Move `inboundRule3` up one row.
moveFocusedElement({ direction: 'UP', times: 1 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "inboundRule3" is in the 1st row,
Expand All @@ -191,29 +198,47 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
expect(rows[2]).to.contain(inboundRule1.label);
});
});

// Verify 'Save Changes' button is enabled after row is moved.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.enabled');
});

it('should cancel the Inbound rules drag operation with Esc key', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule1` down two rows
// Move `inboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Cancel with Esc key
// Cancel with Esc key.
cy.focused().type('{esc}');

// Ensure row remains in its original position
// Ensure row remains in its original position.
cy.get('[aria-label="inbound Rules List"]').within(() => {
cy.get('tbody tr').then((rows) => {
expect(rows[0]).to.contain(inboundRule1.label);
expect(rows[1]).to.contain(inboundRule2.label);
expect(rows[2]).to.contain(inboundRule3.label);
});
});

// Verify 'Save Changes' button remains disabled after discarding with Esc key.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');
});
});

Expand All @@ -226,7 +251,13 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});

it('should move Outbound rule rows using keyboard interaction', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule1.label!)
.closest('tr')
Expand All @@ -248,16 +279,16 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});
});

// Focus the 2nd row and activate keyboard drag mode using Space/Enter key
// Focus the 2nd row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule3.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule3.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `outboundRule3` up one row
// Move `outboundRule3` up one row.
moveFocusedElement({ direction: 'UP', times: 1 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "outboundRule3" is in the 1st row,
Expand All @@ -269,36 +300,54 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
expect(rows[2]).to.contain(outboundRule1.label);
});
});

// Verify 'Save Changes' button is enabled after row is moved.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.enabled');
});

it('should cancel the Outbound rules drag operation with Esc key', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `outboundRule1` down two rows
// Move `outboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Cancel with Esc key
// Cancel with Esc key.
cy.focused().type('{esc}');

// Ensure row remains in its original position
// Ensure row remains in its original position.
cy.get('[aria-label="outbound Rules List"]').within(() => {
cy.get('tbody tr').then((rows) => {
expect(rows[0]).to.contain(outboundRule1.label);
expect(rows[1]).to.contain(outboundRule2.label);
expect(rows[2]).to.contain(outboundRule3.label);
});
});

// Verify 'Save Changes' button remains disabled after discarding with Esc key.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');
});
});
});

describe('Window with vertical scrollbar', () => {
beforeEach(() => {
// Browser window with vertical scroll bar enabled (smaller screens)
// Browser window with vertical scroll bar enabled (smaller screens).
cy.viewport(800, 400);
cy.window().should('have.property', 'innerWidth', 800);
cy.window().should('have.property', 'innerHeight', 400);
Expand All @@ -314,16 +363,22 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});

it('should move Inbound rule rows using keyboard interaction', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule1` down two rows
// Move `inboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "inboundRule2" is in the 1st row,
Expand All @@ -336,16 +391,16 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});
});

// Focus the 2nd row and activate keyboard drag mode using Space/Enter key
// Focus the 2nd row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule3.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule3.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule3` up one row
// Move `inboundRule3` up one row.
moveFocusedElement({ direction: 'UP', times: 1 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "inboundRule3" is in the 1st row,
Expand All @@ -357,29 +412,47 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
expect(rows[2]).to.contain(inboundRule1.label);
});
});

// Verify 'Save Changes' button is enabled after row is moved.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.enabled');
});

it('should cancel the Inbound rules drag operation with Esc key', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(inboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(inboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `inboundRule1` down two rows
// Move `inboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Cancel with Esc key
// Cancel with Esc key.
cy.focused().type('{esc}');

// Ensure row remains in its original position
// Ensure row remains in its original position.
cy.get('[aria-label="inbound Rules List"]').within(() => {
cy.get('tbody tr').then((rows) => {
expect(rows[0]).to.contain(inboundRule1.label);
expect(rows[1]).to.contain(inboundRule2.label);
expect(rows[2]).to.contain(inboundRule3.label);
});
});

// Verify 'Save Changes' button remains disabled after discarding with Esc key.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');
});
});

Expand All @@ -393,16 +466,22 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});

it('should move Outbound rule rows using keyboard interaction', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `outboundRule1` down two rows
// Move `outboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "outboundRule2" is in the 1st row,
Expand All @@ -415,16 +494,16 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
});
});

// Focus the 2nd row and activate keyboard drag mode using Space/Enter key
// Focus the 2nd row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule3.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule3.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `outboundRule3` up one row
// Move `outboundRule3` up one row.
moveFocusedElement({ direction: 'UP', times: 1 });

// Drop row with Space/Enter key
// Drop row with Space/Enter key.
cy.focused().type(' ');

// Verify that "outboundRule3" is in the 1st row,
Expand All @@ -436,29 +515,47 @@ describe('Drag and Drop Firewall Rules Table Rows - Keyboard Interaction', () =>
expect(rows[2]).to.contain(outboundRule1.label);
});
});

// Verify 'Save Changes' button is enabled after row is moved.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.enabled');
});

it('should cancel the Outbound rules drag operation with Esc key', () => {
// Focus the first row and activate keyboard drag mode using Space/Enter key
// Verify 'Save Changes' button is initially disabled.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');

// Focus the first row and activate keyboard drag mode using Space/Enter key.
cy.findByText(outboundRule1.label!).closest('tr').focus().type(' ');
cy.findByText(outboundRule1.label!)
.closest('tr')
.should('have.attr', 'aria-pressed', 'true');

// Move `outboundRule1` down two rows
// Move `outboundRule1` down two rows.
moveFocusedElement({ direction: 'DOWN', times: 2 });

// Cancel with Esc key
// Cancel with Esc key.
cy.focused().type('{esc}');

// Ensure row remains in its original position
// Ensure row remains in its original position.
cy.get('[aria-label="outbound Rules List"]').within(() => {
cy.get('tbody tr').then((rows) => {
expect(rows[0]).to.contain(outboundRule1.label);
expect(rows[1]).to.contain(outboundRule2.label);
expect(rows[2]).to.contain(outboundRule3.label);
});
});

// Verify 'Save Changes' button remains disabled after discarding with Esc key.
ui.button
.findByTitle('Save Changes')
.should('be.visible')
.should('be.disabled');
});
});
});
Expand Down

0 comments on commit e06e511

Please sign in to comment.