LogalDeveloper/owncast
0
Fork 0
Code Activity

First pass at CSS identifiers + test to verify they are set. For #2193

Browse Source
This commit is contained in:
Gabe Kangas
2022-12-11 21:06:20 -08:00
parent 7fe811c79a
commit c231fd3592
13 changed files with 89 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/automated/browser/cypress/e2e/offline/01_offline_basic.cy.js
View File

@@ -38,7 +38,7 @@ describe(`Basic tests`, () => {
});
it('Has correct global header values', () => {
cy.get('.global-header-text').should('have.text', 'New Owncast Server');
cy.get('#global-header-text').should('have.text', 'New Owncast Server');
});
// Offline banner

44
test/automated/browser/cypress/e2e/offline/05_offline_identifier_check.cy.js Normal file
View File

@@ -0,0 +1,44 @@
/*
This test is to verify that the identifiers for specific components are
correctly set. This is to ensure that CSS customizations can be made to the web
UI using these specific IDs and/or class names.
These should be documented so people know how to customize their pages.
If you change one of these identifiers, you must update the documentation.
*/
const identifiers = [
'header', // The entire header component
'footer', // The entire footer component
'#global-header-text', // Just the text in the header
'#offline-banner', // The entire offline banner component
'#custom-page-content', // The entire custom page content component
'#notify-button', // The notify button
'#follow-button', // The follow button
];
describe(`Has correct identifiers for overrides`, () => {
it('Can visit the page', () => {
cy.visit('http://localhost:8080/');
});
// Loop over each identifier and verify it exists.
identifiers.forEach((identifier) => {
it(`Has identifier: ${identifier}`, () => {
cy.get(identifier).should('be.visible');
});
});
// Followers
const followersCollection = '#followers-collection';
it(`Has identifier: ${followersCollection}`, () => {
cy.get('#rc-tabs-1-tab-3').click();
cy.get(followersCollection).should('be.visible');
});
// Modal
const modalContainer = '#modal-container';
it(`Has identifier ${modalContainer}`, () => {
cy.contains('Notify').click();
cy.get(modalContainer, { timeout: 2000 }).should('be.visible');
});
});

24
test/automated/browser/cypress/e2e/online/05_online_identifier_check.cy.js Normal file
View File

@@ -0,0 +1,24 @@
/*
This test is to verify that the identifiers for specific components are
correctly set. This is to ensure that CSS customizations can be made to the web
UI using these specific IDs and/or class names.
These should be documented so people know how to customize their pages.
If you change one of these identifiers, you must update the documentation.
*/
const identifiers = [
'#chat-container', // The entire chat container component
];
describe(`Has correct identifiers for overrides`, () => {
it('Can visit the page', () => {
cy.visit('http://localhost:8080/');
});
// Loop over each identifier and verify it exists.
identifiers.forEach((identifier) => {
it(`Has identifier: ${identifier}`, () => {
cy.get(identifier).should('be.visible');
});
});
});