Merge pull request #67 from IQSS/feature/53-login-logout

53 - Add Login / Logout

.env.example

@@ -0,0 +1 @@
+VITE_DATAVERSE_BACKEND_URL=http://localhost:8080

.github/workflows/deploy.yml

@@ -22,6 +22,7 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.environment }}
 
     steps:
       - uses: actions/checkout@v3
@@ -34,6 +35,14 @@ jobs:
       - name: Install Dependencies
         run: npm install
 
+      - name: Create and populate .env file
+        env:
+          DATAVERSE_BACKEND_URL: ${{ secrets.DATAVERSE_BACKEND_URL }}
+        run: |
+          touch .env
+          echo VITE_DATAVERSE_BACKEND_URL="$DATAVERSE_BACKEND_URL" >> .env
+        shell: bash
+
       - name: Build
         if: ${{ github.event.inputs.infra_type == 'S3' || (github.event.inputs.infra_type == 'Payara' && github.event.inputs.basepath == '') }}
         run: npm run build

.github/workflows/test.yml

@@ -3,26 +3,36 @@ name: test
 on: push
 
 jobs:
-  e2e:
-    runs-on: ubuntu-latest
+  # Temporarily commented out, until we set up a suitable e2e environment for running GitHub actions
+  # e2e:
+  #   runs-on: ubuntu-latest
+  #   environment: e2e
 
-    steps:
-      - uses: actions/checkout@v3
+  #   steps:
+  #     - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
+  #     - uses: actions/setup-node@v3
+  #       with:
+  #         node-version: 18
+  #         cache: 'npm'
 
-      - name: Install Dependencies
-        run: npm install
+  #     - name: Install Dependencies
+  #       run: npm install
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
-        with:
-          build: npm run build
-          start: npm run preview
-          wait-on: 'npx wait-on --timeout 60000 http://localhost:5173'
+  #     - name: Create and populate .env file
+  #       env:
+  #         DATAVERSE_BACKEND_URL: ${{ secrets.DATAVERSE_BACKEND_URL }}
+  #       run: |
+  #         touch .env
+  #         echo VITE_DATAVERSE_BACKEND_URL="$DATAVERSE_BACKEND_URL" >> .env
+  #       shell: bash
+
+  #     - name: Cypress run
+  #       uses: cypress-io/github-action@v4
+  #       with:
+  #         build: npm run build
+  #         start: npm run preview
+  #         wait-on: 'npx wait-on --timeout 60000 http://localhost:5173'
   component:
     runs-on: ubuntu-latest
 

.gitignore

@@ -1,6 +1,9 @@
 # IntelliJ
 /.idea
 
+# Visual Studio
+/.vscode
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
@@ -22,6 +25,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

cypress/component/layout/header/Header.spec.tsx

@@ -1,24 +1,31 @@
-import { Header } from '../../../../src/sections/layout/header/Header'
 import { I18nextProvider } from 'react-i18next'
 import i18next from '../../../../src/i18n'
+import { HeaderMother } from '../../../../tests/sections/layout/header/HeaderMother'
+import { createSandbox, SinonSandbox } from 'sinon'
+import { UserMother } from '../../../../tests/users/domain/models/UserMother'
 
 describe('Header component', () => {
-  it('displays the user name when the user is logged in', () => {
-    const user = { name: 'John Doe' }
+  const sandbox: SinonSandbox = createSandbox()
+  const testUser = UserMother.create()
+
+  afterEach(() => {
+    sandbox.restore()
+  })
 
+  it('displays the user name when the user is logged in', () => {
     cy.mount(
       <I18nextProvider i18n={i18next}>
-        <Header user={user} />
+        {HeaderMother.withLoggedInUser(sandbox, testUser)}
       </I18nextProvider>
     )
     cy.findByRole('button', { name: 'Toggle navigation' }).click()
-    cy.findByText(user.name).should('be.visible')
-    cy.findByText(user.name).click()
+    cy.findByText(testUser.name).should('be.visible')
+    cy.findByText(testUser.name).click()
     cy.findByText('Log Out').should('be.visible')
   })
 
   it('displays the Sign Up and Log In links when the user is not logged in', () => {
-    cy.mount(<Header />)
+    cy.mount(HeaderMother.withGuestUser(sandbox))
     cy.findByRole('button', { name: 'Toggle navigation' }).click()
     cy.findByRole('link', { name: 'Sign Up' }).should('exist')
     cy.contains('Sign Up')

cypress/component/ui/navbar/Navbar.spec.tsx → cypress/component/ui/navbar/navbar.spec.tsx

@@ -20,8 +20,8 @@ describe('Navbar component', () => {
         <Navbar.Link href="/link-1">Link 1</Navbar.Link>
         <Navbar.Link href="/link-2">Link 2</Navbar.Link>
         <Navbar.Dropdown title="Dropdown" id="dropdown">
-          <Navbar.Dropdown.Item href="/sublink-1">Sublink 1</Navbar.Dropdown.Item>
-          <Navbar.Dropdown.Item href="/sublink-2">Sublink 2</Navbar.Dropdown.Item>
+          <Navbar.Dropdown.Item href="/item-1">Item 1</Navbar.Dropdown.Item>
+          <Navbar.Dropdown.Item href="/item-2">Item 2</Navbar.Dropdown.Item>
         </Navbar.Dropdown>
       </Navbar>
     )
@@ -40,16 +40,16 @@ describe('Navbar component', () => {
         <Navbar.Link href="/link-1">Link 1</Navbar.Link>
         <Navbar.Link href="/link-2">Link 2</Navbar.Link>
         <Navbar.Dropdown title="Dropdown" id="dropdown">
-          <Navbar.Dropdown.Item href="/sublink-1">Sublink 1</Navbar.Dropdown.Item>
-          <Navbar.Dropdown.Item href="/sublink-2">Sublink 2</Navbar.Dropdown.Item>
+          <Navbar.Dropdown.Item href="/item-1">Item 1</Navbar.Dropdown.Item>
+          <Navbar.Dropdown.Item href="/item-2">Item 2</Navbar.Dropdown.Item>
         </Navbar.Dropdown>
       </Navbar>
     )
     cy.findByRole('button', { name: 'Toggle navigation' }).click()
     const dropdownElement = cy.findByRole('button', { name: 'Dropdown' })
     dropdownElement.click()
 
-    cy.findByRole('link', { name: 'Sublink 1' }).should('exist')
-    cy.findByRole('link', { name: 'Sublink 2' }).should('exist')
+    cy.findByRole('link', { name: 'Item 1' }).should('exist')
+    cy.findByRole('link', { name: 'Item 2' }).should('exist')
   })
 })