update tests

Author: paula-stacho

packages/compass-schema-validation/src/components/sample-documents.spec.tsx

@@ -1,20 +1,46 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import { SampleDocuments } from './sample-documents';
 import { Provider } from 'react-redux';
 import { configureStore } from '../stores/store';
+import { INITIAL_STATE } from '../modules';
 
 describe('SampleDocuments [Component]', function () {
-  it('renders a valid and invalid document preview', function () {
+  it('initial state : renders the CTA', function () {
     const store = configureStore({}, {} as any);
-    const component = mount(
+    render(
       <Provider store={store}>
         <SampleDocuments />
       </Provider>
     );
 
-    expect(component.find('[data-testid="matching-documents"]')).to.exist;
-    expect(component.find('[data-testid="notmatching-documents"]')).to.exist;
+    expect(screen.getByRole('button', { name: 'Preview documents' })).to.be
+      .visible;
+  });
+
+  it('non initial state : renders a valid and invalid document preview', function () {
+    const store = configureStore(
+      {
+        ...INITIAL_STATE,
+        sampleDocuments: {
+          validDocumentState: 'loading',
+          invalidDocumentState: 'loading',
+          validDocument: undefined,
+          invalidDocument: undefined,
+        },
+      },
+      {} as any
+    );
+    render(
+      <Provider store={store}>
+        <SampleDocuments />
+      </Provider>
+    );
+
+    expect(screen.queryByRole('button', { name: 'Preview documents' })).not.to
+      .exist;
+    expect(screen.getByTestId('matching-documents')).to.be.visible;
+    expect(screen.getByTestId('notmatching-documents')).to.be.visible;
   });
 });

packages/compass-schema-validation/src/components/sample-documents.tsx

@@ -27,7 +27,7 @@ const sampleDocumentsSectionStyles = css({
   flexDirection: 'column',
   gap: spacing[200],
   border: `1px solid ${palette.gray.light2}`,
-  borderRadius: spacing[400],
+  borderRadius: spacing[200],
   padding: spacing[400],
 });
 
@@ -77,8 +77,9 @@ const initialStateContainerStyles = css({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  justifyContent: 'center',
+  height: '228px', // using the same space as the previews
   gap: spacing[300],
-  marginTop: spacing[400],
 });
 
 const previewHeaderStyles = css({

packages/compass-schema-validation/src/modules/sample-documents.spec.ts

@@ -115,15 +115,17 @@ describe('sample-documents module', function () {
       });
 
       context('when the action is FETCHED_INVALID_DOCUMENT', function () {
-        for (const document of [null, undefined, SAMPLE_DOCUMENT] as any[]) {
-          const sampleDocuments = reducer(
-            loadingState,
-            fetchedInvalidDocument(document)
-          );
-          expect(sampleDocuments.invalidDocumentState).to.equal('success');
-          expect(sampleDocuments.invalidDocument).to.deep.equal(document);
-          expect(sampleDocuments.validDocumentState).to.equal('loading');
-        }
+        it('updates the invalid document state', function () {
+          for (const document of [null, undefined, SAMPLE_DOCUMENT] as any[]) {
+            const sampleDocuments = reducer(
+              loadingState,
+              fetchedInvalidDocument(document)
+            );
+            expect(sampleDocuments.invalidDocumentState).to.equal('success');
+            expect(sampleDocuments.invalidDocument).to.deep.equal(document);
+            expect(sampleDocuments.validDocumentState).to.equal('loading');
+          }
+        });
       });
 
       context('when the action is FETCHING_VALID_DOCUMENT_FAILED', function () {