From b73b710777185a75f1e6e4dbdae5e912454faacc Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Thu, 29 Apr 2021 11:17:50 +0500
Subject: [PATCH] test: add test for AppCard (#98)

* test: add test for AppCard
---
 .../discussions/app-list/AppCard.test.jsx     | 60 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
index b523441c0..30290551b 100644
--- a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
@@ -1,17 +1,71 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, queryByLabelText } from '@testing-library/react';
+
+import AppCard from './AppCard';
+import messages from './messages';
+
 describe('AppCard', () => {
+  let app;
+  let selected;
+  let wrapper;
+
+  beforeEach(() => {
+    selected = true;
+    app = {
+      id: 'legacy',
+      hasFullSupport: true,
+      featureIds: ['discussion-page', 'embedded-course-sections', 'wcag-2.1'],
+    };
+
+    wrapper = (data) => render(
+      <IntlProvider locale="en">
+        <AppCard
+          app={data}
+          onClick={() => jest.fn()}
+          selected={selected}
+        />
+      </IntlProvider>,
+    );
+  });
+
   test('checkbox input is checked when AppCard is selected', () => {
+    const labelText = `Select ${messages[`appName-${app.id}`].defaultMessage}`;
 
+    const { container } = wrapper(app);
+
+    expect(container.querySelector('[role="radio"]')).toBeChecked();
+    expect(queryByLabelText(container, labelText, { selector: 'input[type="checkbox"]' })).toBeChecked();
   });
 
-  test('title, subtitle, and text from app are displayed', () => {
+  test.each([
+    [true],
+    [false],
+  ])('title and text from the app are displayed with full support %s', (hasFullSupport) => {
+    const appWithCustomSupport = { ...app, hasFullSupport };
+    const title = messages[`appName-${appWithCustomSupport.id}`].defaultMessage;
+    const text = messages[`appDescription-${appWithCustomSupport.id}`].defaultMessage;
 
+    const { container } = wrapper(appWithCustomSupport);
+
+    expect(container.querySelector('.card-title')).toHaveTextContent(title);
+    expect(container.querySelector('.card-text')).toHaveTextContent(text);
   });
 
-  test('full support message shown when hasFullSupport is true', () => {
+  test('full support subtitle shown when hasFullSupport is true', () => {
+    const subtitle = messages.appFullSupport.defaultMessage;
 
+    const { container } = wrapper(app);
+
+    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
   });
 
-  test('partial support message shown when hasFullSupport is false', () => {
+  test('partial support subtitle shown when hasFullSupport is false', () => {
+    const appWithPartialSupport = { ...app, hasFullSupport: false };
+    const subtitle = messages.appPartialSupport.defaultMessage;
 
+    const { container } = wrapper(appWithPartialSupport);
+
+    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
   });
 });