Add tests for panel

cypress/e2e/test-interface.cy.js

@@ -23,32 +23,6 @@ describe(`Test interface`, () => {
     cy.visit('/')
   })
 
-  // TODO: replace with a test about the side panel
-  it.skip('Should open the help center on click on the "?" button', () => {
-    cy.get('button[aria-label="help"]').click()
-    cy.get('div[aria-label="Help Center"]').within(() => {
-      cy.contains('Help Center')
-      cy.contains(
-        'If you need help with anything, here are a few links that can be useful.'
-      )
-      cy.contains('Explore our repositories on Github')
-      cy.contains('Join our Discord and find the help you need')
-      cy.contains('Learn how to tune your Meilisearch')
-      cy.get('a')
-        .first()
-        .should('have.attr', 'href', 'https://github.com/meilisearch')
-        .next()
-        .should('have.attr', 'href', 'https://discord.meilisearch.com')
-        .next()
-        .should(
-          'have.attr',
-          'href',
-          'https://docs.meilisearch.com/?utm_campaign=oss&utm_source=integration&utm_medium=minidashboard'
-        )
-      cy.get('button[aria-label="close"]').click()
-    })
-  })
-
   it('Should contain a "Show more" button if a document has more than 6 fields', () => {
     cy.get('ul')
       .children()

cypress/e2e/test-side-panel.js

@@ -0,0 +1,22 @@
+const WAITING_TIME = Cypress.env('waitingTime')
+
+describe(`Right side panel`, () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('Should be opened by default', () => {
+    cy.get('[data-testid="right-panel"]').should('be.visible')
+  })
+
+  it('Should be closed when clicking on the close button', () => {
+    cy.get('button[aria-label="Close Panel"]').click()
+    cy.get('[data-testid="right-panel"]').should('not.be.visible')
+  })
+
+  it('Should be opened when clicking on the menu bars button', () => {
+    cy.get('button[aria-label="Close Panel"]').click()
+    cy.get('button[aria-label="Open Panel"]').click()
+    cy.get('[data-testid="right-panel"]').should('be.visible')
+  })
+})

src/App.js

@@ -41,7 +41,7 @@ const App = () => {
   const [requireApiKeyToWork, setRequireApiKeyToWork] = useState(false)
   const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')
   const [isApiKeyBannerVisible, setIsApiKeyBannerVisible] = useState(false)
-  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false)
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true)
   const dialog = useDialogState({ animated: true, visible: false })
 
   const {

src/components/Header/index.js

@@ -182,7 +182,11 @@ const Header = ({
           <RightSideWrapper>
             <ApiKey requireApiKeyToWork={requireApiKeyToWork} />
             {!isRightPanelOpen && onTogglePanel && (
-              <IconButton onClick={onTogglePanel} type="button">
+              <IconButton
+                onClick={onTogglePanel}
+                type="button"
+                aria-label="Open Panel"
+              >
                 <MenuBarsIcon />
               </IconButton>
             )}

src/components/RightPanel.jsx

@@ -129,10 +129,10 @@ const CloudCardLink = styled(Link)`
 `
 
 const RightPanel = ({ isOpen, onClose }) => (
-  <PanelWrapper isOpen={isOpen}>
+  <PanelWrapper isOpen={isOpen} data-testid="right-panel">
     <Header>
       <Title>Getting started</Title>
-      <CloseButton onClick={onClose}>
+      <CloseButton onClick={onClose} aria-label="Close Panel">
         <MenuBarsIcon />
       </CloseButton>
     </Header>