diff --git a/cypress.json b/cypress.json index 63071e5d0..bc1ab538a 100644 --- a/cypress.json +++ b/cypress.json @@ -5,9 +5,11 @@ "viewportHeight": 1000, "fixturesFolder": false, "pluginsFile": false, - "supportFile": false, "reporter": "junit", "reporterOptions": { "mochaFile": "test-results/cypress/junit-[hash].xml" + }, + "retries": { + "runMode": 3 } } diff --git a/cypress/integration/smoke.test.ts b/cypress/integration/smoke.test.ts index 14c630505..18ca1496e 100644 --- a/cypress/integration/smoke.test.ts +++ b/cypress/integration/smoke.test.ts @@ -5,41 +5,36 @@ if (!EMAIL || !PASSWORD) { throw new Error('You must provide CYPRESS_USER_EMAIL and CYPRESS_USER_PASSWORD environment variables'); } -const loginToAuth0 = (): void => { - cy.visit('/'); - cy.get('#login').click(); - cy.get('.auth0-lock-input-email input').focus().clear().type(EMAIL); - cy.get('.auth0-lock-input-password input').focus().clear().type(PASSWORD); - cy.get('.auth0-lock-submit').click(); -}; +describe('smoke tests', () => { + before(() => { + cy.visit('/'); + cy.get('[data-testid=login]').click(); + cy.get('input[name=email], input[name=username]').focus().clear().type(EMAIL); + cy.get('input[name=password]').focus().clear().type(PASSWORD); + cy.get('button[name=submit], button[name=action]').click(); + }); -describe('Smoke tests', () => { it('should do basic login and show user', () => { - loginToAuth0(); - cy.url().should('eq', `${Cypress.config().baseUrl}/`); - cy.get('#profile').contains(EMAIL); - cy.get('#logout').click(); - cy.get('#login').should('exist'); + cy.get('[data-testid=profile]').contains(EMAIL); + cy.get('[data-testid=logout]').should('exist'); }); it('should protect a client-side rendered page', () => { - loginToAuth0(); - - cy.url().should('eq', `${Cypress.config().baseUrl}/`); cy.visit('/profile'); cy.url().should('eq', `${Cypress.config().baseUrl}/profile`); - cy.get('#profile').contains(EMAIL); - cy.get('#logout').click(); + cy.get('[data-testid=profile]').contains(EMAIL); }); it('should protect a server-side-rendered page', () => { - loginToAuth0(); - - cy.url().should('eq', `${Cypress.config().baseUrl}/`); cy.visit('/profile-ssr'); cy.url().should('eq', `${Cypress.config().baseUrl}/profile-ssr`); - cy.get('#profile').contains(EMAIL); - cy.get('#logout').click(); + cy.get('[data-testid=profile]').contains(EMAIL); + }); + + it('should logout and return to the index page', () => { + cy.get('[data-testid=logout]').click(); + cy.url().should('eq', `${Cypress.config().baseUrl}/`); + cy.get('[data-testid=login]').should('exist'); }); }); diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 000000000..92ed78408 --- /dev/null +++ b/cypress/support/index.js @@ -0,0 +1,3 @@ +Cypress.Cookies.defaults({ + preserve: () => true +}); diff --git a/examples/basic-example/components/header.jsx b/examples/basic-example/components/header.jsx index 973b36b74..472ad4d27 100644 --- a/examples/basic-example/components/header.jsx +++ b/examples/basic-example/components/header.jsx @@ -3,7 +3,7 @@ import Link from 'next/link'; import { useUser } from '@auth0/nextjs-auth0'; const Header = () => { - const { user, isLoading } = useUser(); + const { user } = useUser(); return (
@@ -19,24 +19,23 @@ const Header = () => { Protected Page - {!isLoading && - (user ? ( - <> -
  • - - Logout - -
    • - - ) : ( - <> -
  • - - Login - -
    • - - ))} + {user ? ( + <> +
  • + + Logout + +
    • + + ) : ( + <> +
  • + + Login + +
    • + + )} diff --git a/examples/basic-example/pages/index.jsx b/examples/basic-example/pages/index.jsx index fc61c5ab0..be33daa8c 100644 --- a/examples/basic-example/pages/index.jsx +++ b/examples/basic-example/pages/index.jsx @@ -22,7 +22,7 @@ export default function Home() { {user && ( <>

    Rendered user info on the client

    - 
    {JSON.stringify(user, null, 2)}
    + 
    {JSON.stringify(user, null, 2)}
    )} diff --git a/examples/kitchen-sink-example/components/header.tsx b/examples/kitchen-sink-example/components/header.tsx index 78e4f2502..5681c0283 100644 --- a/examples/kitchen-sink-example/components/header.tsx +++ b/examples/kitchen-sink-example/components/header.tsx @@ -2,8 +2,8 @@ import React from 'react'; import Link from 'next/link'; import { useUser } from '@auth0/nextjs-auth0'; -const Header: React.FunctionComponent = () => { - const { user, isLoading } = useUser(); +const Header = (): React.ReactElement => { + const { user } = useUser(); return (
    @@ -24,32 +24,31 @@ const Header: React.FunctionComponent = () => { TV Shows - {!isLoading && - (user ? ( - <> -
  • - - Profile - -
    • {' '} -
  • - Profile (SSR) -
    • {' '} -
  • - - Logout - -
    • - - ) : ( - <> -
  • - - Login - -
    • - - ))} + {user ? ( + <> +
  • + + Profile + +
    • {' '} +
  • + Profile (SSR) +
    • {' '} +
  • + + Logout + +
    • + + ) : ( + <> +
  • + + Login + +
    • + + )} diff --git a/examples/kitchen-sink-example/components/layout.tsx b/examples/kitchen-sink-example/components/layout.tsx index 928cc1421..85df63b5e 100644 --- a/examples/kitchen-sink-example/components/layout.tsx +++ b/examples/kitchen-sink-example/components/layout.tsx @@ -3,9 +3,7 @@ import Head from 'next/head'; import Header from './header'; -type LayoutProps = React.PropsWithChildren<{}>; - -const Layout: React.FunctionComponent = ({ children }: LayoutProps) => ( +const Layout = ({ children }: React.PropsWithChildren): React.ReactElement => ( <> Next.js with Auth0 diff --git a/examples/kitchen-sink-example/package.json b/examples/kitchen-sink-example/package.json index 3ce63421b..615464417 100644 --- a/examples/kitchen-sink-example/package.json +++ b/examples/kitchen-sink-example/package.json @@ -35,7 +35,7 @@ }, "dependencies": { "@auth0/nextjs-auth0": "file:../../", - "@serverless-jwt/next": "^0.2.0", + "@serverless-jwt/next": "^0.2.1", "next": "file:../../node_modules/next", "react": "file:../../node_modules/react", "react-dom": "file:../../node_modules/react-dom" diff --git a/examples/kitchen-sink-example/pages/index.tsx b/examples/kitchen-sink-example/pages/index.tsx index 960500188..0c077bc29 100644 --- a/examples/kitchen-sink-example/pages/index.tsx +++ b/examples/kitchen-sink-example/pages/index.tsx @@ -22,7 +22,7 @@ export default function Home(): React.ReactElement { {user && ( <>

    Rendered user info on the client

    - 
    {JSON.stringify(user, null, 2)}
    + 
    {JSON.stringify(user, null, 2)}
    )} diff --git a/examples/kitchen-sink-example/pages/profile-ssr.tsx b/examples/kitchen-sink-example/pages/profile-ssr.tsx index 5b1bae7da..de338ffab 100644 --- a/examples/kitchen-sink-example/pages/profile-ssr.tsx +++ b/examples/kitchen-sink-example/pages/profile-ssr.tsx @@ -12,7 +12,7 @@ export default function Profile({ user }: ProfileProps): React.ReactElement {

    Profile (server rendered)

    - 
    {JSON.stringify(user, null, 2)}
    + 
    {JSON.stringify(user, null, 2)}
    ); diff --git a/examples/kitchen-sink-example/pages/profile.tsx b/examples/kitchen-sink-example/pages/profile.tsx index bb63bfa30..c2edc40ad 100644 --- a/examples/kitchen-sink-example/pages/profile.tsx +++ b/examples/kitchen-sink-example/pages/profile.tsx @@ -22,7 +22,7 @@ export default withPageAuthRequired(function Profile(): React.ReactElement { {user && ( <>

    Profile

    - 
    {JSON.stringify(user, null, 2)}
    + 
    {JSON.stringify(user, null, 2)}
    )} diff --git a/examples/kitchen-sink-example/pages/shows.tsx b/examples/kitchen-sink-example/pages/shows.tsx index 68ce47315..3178849ec 100644 --- a/examples/kitchen-sink-example/pages/shows.tsx +++ b/examples/kitchen-sink-example/pages/shows.tsx @@ -4,6 +4,8 @@ import useApi from '../lib/use-api'; import Layout from '../components/layout'; import { withPageAuthRequired } from '@auth0/nextjs-auth0'; +type TVShow = { show: { name: string } }; + export default withPageAuthRequired(function TvShows(): React.ReactElement { const { response, error, isLoading } = useApi('/api/shows'); @@ -13,12 +15,12 @@ export default withPageAuthRequired(function TvShows(): React.ReactElement { {isLoading &&

    Loading TV shows...

    } - {!isLoading && response && ( + {response && ( <>

    My favourite TV shows:

                 {JSON.stringify(
-              response.shows.map((s) => s.show.name),
+              response.shows.map((s: TVShow) => s.show.name),
               null,
               2
             )}
@@ -26,7 +28,7 @@ export default withPageAuthRequired(function TvShows(): React.ReactElement {
         
       )}
 
-      {!isLoading && error && (
+      {error && (
         <>
           
    Error loading TV shows
    
           
    {JSON.stringify(error, null, 2)}