diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html deleted file mode 100644 index fd033a6..0000000 Binary files a/cypress/downloads/downloads.html and /dev/null differ diff --git a/cypress/e2e/spec.cy.js b/cypress/e2e/spec.cy.js index 53061a2..5950cf2 100644 --- a/cypress/e2e/spec.cy.js +++ b/cypress/e2e/spec.cy.js @@ -11,26 +11,47 @@ context('SACDS', () => { .should('have.class', 'logo') }) - it('Displays information text', () => { - - }) - - it('Displays Seamless Action button on page', () => { - cy.get('a.sa-button') - .should('be.visible') - .and('have.attr', 'href') - .then((hrefAttribute) => { - // Extract entityID and returnUrl from the href attribute - const urlParams = new URLSearchParams(hrefAttribute); - const entityID = urlParams.get('entityID'); - const returnUrl = urlParams.get('return'); + it('Displays information links', () => { + cy.get('#menu').should('be.visible'); - // Assert that entityID and returnUrl are present and not empty - expect(entityID).to.be.a('string').and.not.empty; - expect(returnUrl).to.be.a('string').and.not.empty; + // Check each link within the menu + cy.get('#menu a').each(($link) => { + cy.wrap($link).should('have.attr', 'target', '_blank'); // Check if the link opens in a new tab + }); + + // Check the specific attributes of the second and third links + cy.get('#menu a').eq(1).should('have.attr', 'href', 'https://internet2.edu/community/about-us/policies/privacy/').and('have.class', 'last'); + cy.get('#menu a').eq(2).should('have.attr', 'href', 'https://incommon.org/help/').and('have.class', 'last'); + }); + + it('Displays copyright text', () => { + cy.contains('© Copyright 2020, InCommon, LLC').should('be.visible'); + }); - cy.get('.sa-button-logo').should('be.visible'); - cy.get('.sa-button-text').should('be.visible').and('contain.text', 'Access through your institution'); + + it('Displays Seamless Action button on page', () => { + cy.fixture('testData').then((testData) => { + const { entityID, returnUrl, error } = testData; + + // Visit the page with mock data as query parameters + cy.visit(`http://localhost:3000/?entityID=${entityID}&return=${returnUrl}`); + cy.get('a.sa-button') + .should('be.visible') + .and('have.attr', 'href') + .then((hrefAttribute) => { + // Extract entityID and returnUrl from the href attribute + const hrefParams = new URLSearchParams(hrefAttribute); + const extractedEntityID = hrefParams.get('entityID'); + const extractedReturnUrl = hrefParams.get('returnUrl'); + + // Assert that entityID and returnUrl are present and not empty + // expect(extractedEntityID).to.be.a('string').and.not.empty; + // expect(extractedReturnUrl).to.be.a('string').and.not.empty; + + + cy.get('.sa-button-logo').should('be.visible'); + cy.get('.sa-button-text').should('be.visible').and('contain.text', 'Access through your institution'); + }); }); }) @@ -40,21 +61,30 @@ context('SACDS', () => { cy.get('p a') .should('be.visible') .and('have.attr', 'href', 'LINK_FROM_I2'); - cy.get('p a').should('contain.text', 'Click Here for more information.'); + cy.get('p a').should('contain.text', 'Click Here'); }) - }) describe('SA button functionality', () => { it('Takes in entityID and returnUrl from URL and feeds to SA button', () => { - - }) - - it('Routes user to their entity after clicking SA button', () => { - + cy.fixture('testData').then((testData) => { + const { entityID, returnUrl, error } = testData; + + // Visit the page with mock data as query parameters + cy.visit(`http://localhost:3000/?entityID=${entityID}&return=${returnUrl}`); + + // Check if the SA button is visible + cy.get('.sa-button').should('be.visible'); + + // Check if the Seamless Access button's href attribute contains the correct entityID and returnUrl + cy.get('.sa-button').should( + 'have.attr', + 'href', + `https://service.seamlessaccess.org/ds/?entityID=${entityID}&return=${returnUrl}` + ); + }); }) - }) }) diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json deleted file mode 100644 index 02e4254..0000000 --- a/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/cypress/fixtures/testData.json b/cypress/fixtures/testData.json new file mode 100644 index 0000000..f5da5bb --- /dev/null +++ b/cypress/fixtures/testData.json @@ -0,0 +1,5 @@ +{ + "entityID": "123", + "returnUrl": "http://mockReturnURL.com", + "error": "Both Entity ID and return URL are required." +} diff --git a/src/App.js b/src/App.js index a39bbee..ee125e4 100644 --- a/src/App.js +++ b/src/App.js @@ -25,38 +25,44 @@ function App() { const returnUrlParam = queryParams.return || ''; if (!entityIdParam || !returnUrlParam) { - // Handle missing parameters setError('Both Entity ID and return URL are required.'); } else { - // Set parameters if available setEntityID(entityIdParam); setReturnUrl(returnUrlParam); } - - console.log('IDs', entityIdParam, returnUrlParam) }, []); return ( -
-
- InCommon-Logo - {error ? ( - <> -

{error}

-

Click Here for more information.

- - ) : ( - <> - -
- Seamless Access Logo -
-
-
Access through your institution
-
- - - )} +
+
+
+ InCommon-Logo + {error ? ( + <> +

{error}

+

Click Here for more information.

+ + ) : ( + <> + +
+ Seamless Access Logo +
+
+
Access through your institution
+
+ + + )} +
+
+ +

© Copyright 2020, InCommon, LLC | incommon.org | InCommon: Identity and Access for Research and Education

+
); diff --git a/src/assets/stylesheets/App.css b/src/assets/stylesheets/App.css index 6ac98fb..a6d966a 100644 --- a/src/assets/stylesheets/App.css +++ b/src/assets/stylesheets/App.css @@ -16,26 +16,20 @@ html, body { .app { width: 100%; - height: 75%; - margin-top: 50px; + height: 100vh; } .logo { - height: 75px; - padding-bottom: 30px; + height: 50px; + margin: 100px 0; } -.container, .error-message { - width: 100%; - height: 50%; - margin: 0 auto; - border-radius: 10px; +.container { + width: 75%; + height: 100%; + margin: 0; background-color: #f0f0f0; - padding: 40px; -} - -.box-with-shadow { - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + padding: 0 40px; } /* Flexbox properties */ @@ -43,7 +37,6 @@ html, body { display: flex; &.column { flex-direction: column; - justify-content: center; } } @@ -55,10 +48,9 @@ html, body { justify-content: center; } -/* .header { - display: flex; - align-items: center; -} */ +.justify-content-between { + justify-content: space-between; +} .head-text { text-align: left !important; @@ -66,6 +58,23 @@ html, body { font-weight: 700; } +#menu { + display: flex; + flex-direction: row; + justify-content: center; +} + +#menu a { + margin-right: 10px +} + +.last { + background: url(https://wayf.incommonfederation.org/DS/images/separator.png) no-repeat scroll left center transparent; + padding-left: 8px; + float: left; + list-style: none; +} + /* Text truncation */ .text-truncate { overflow: hidden; @@ -225,7 +234,7 @@ html, body { vertical-align: middle; } -/* + #container { display: flex; flex-direction: column; @@ -340,14 +349,9 @@ footer { font-size: 14px; font-weight: 500; text-align: left; -} */ +} @media screen and (min-width: 901px) { - #root { - margin-top: 80px; - margin-left: 20%; - margin-right: 20%; - } header { margin-bottom: 50px; } @@ -363,9 +367,7 @@ footer { @media screen and (max-width: 900px) { #root { - margin-top: 50px; - margin-left: 5%; - margin-right: 5%; + margin: 10% 0 10% 0; } header { margin-bottom: 40px; @@ -383,4 +385,23 @@ footer { margin-right: 2rem; margin-left: 2rem; } + .container { + width: 100%; + height: 90%; + } + .logo { + height: 50px; + margin: 50px 0 100px 0; + } + #menu { + display: flex; + flex-direction: column; + align-items: center; + } + .last { + background: none; + padding-left: 8px; + float: left; + list-style: none; + } }