fix: display only supported features in mobile view (#213)

* fix: display only supported features in mobile view

* fix: feature list test cases

* refactor: render only supported feature and update test cases

* test: add test cases for supported feature

src/pages-and-resources/discussions/app-list/FeatureList.test.jsx

@@ -14,12 +14,6 @@ describe('FeaturesList', () => {
     hasFullSupport: false,
     id: 'legacy',
   };
-  const features = [
-    { id: 'basic-configuration' },
-    { id: 'wcag-2.1' },
-    { id: 'discussion-page' },
-    { id: 'embedded-course-sections' },
-  ];
   let container;
 
   beforeEach(() => {
@@ -27,7 +21,6 @@ describe('FeaturesList', () => {
       <IntlProvider locale="en">
         <FeaturesList
           app={app}
-          features={features}
         />
       </IntlProvider>,
     );
@@ -47,9 +40,9 @@ describe('FeaturesList', () => {
   test('displays a row for each available feature', () => {
     const button = getByRole(container, 'button');
     userEvent.click(button);
-    features.forEach((feature) => {
+    app.featureIds.forEach((id) => {
       const featureNodes = queryAllByText(
-        container, messages[`featureName-${feature.id}`].defaultMessage,
+        container, messages[`featureName-${id}`].defaultMessage,
       );
       expect(featureNodes.map(node => node.closest('div'))).toHaveLength(1);
     });
@@ -58,22 +51,9 @@ describe('FeaturesList', () => {
   test('A check icon is shown with each supported feature', () => {
     const button = getByRole(container, 'button');
     userEvent.click(button);
-    features.forEach((feature) => {
-      const featureElement = queryByText(container, messages[`featureName-${feature.id}`].defaultMessage);
-      if (app.featureIds.includes(feature.id)) {
-        expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'check-icon');
-      }
-    });
-  });
-
-  test('A dash icon is shown with each unsupported feature', () => {
-    const button = getByRole(container, 'button');
-    userEvent.click(button);
-    features.forEach((feature) => {
-      const featureElement = queryByText(container, messages[`featureName-${feature.id}`].defaultMessage);
-      if (!app.featureIds.includes(feature.id)) {
-        expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'remove-icon');
-      }
+    app.featureIds.forEach((id) => {
+      const featureElement = queryByText(container, messages[`featureName-${id}`].defaultMessage);
+      expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'check-icon');
     });
   });
 });

src/pages-and-resources/discussions/app-list/FeaturesList.jsx

@@ -1,22 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Remove, Check } from '@edx/paragon/icons';
 import { Collapsible } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import SupportedFeature from './SupportedFeature';
 import messages from './messages';
 
-const SupportedFeature = (
-  <span className="mr-3">
-    <Check id="check-icon" className="text-success-500" />
-  </span>
-);
-const NonSupportedFeature = (
-  <span className="mr-3">
-    <Remove id="remove-icon" className="text-light-700" />
-  </span>
-);
-
-function FeaturesList({ app, features, intl }) {
+function FeaturesList({ app, intl }) {
   return (
     <Collapsible
       onClick={(event) => event.stopPropagation()}
@@ -32,12 +22,9 @@ function FeaturesList({ app, features, intl }) {
       )}
       styling="basic"
     >
-      {features && features.map((feature) => (
-        <div key={`collapsible-${app.id}&${feature.id}`} className="d-flex mb-1">
-          {app.featureIds.includes(feature.id)
-            ? SupportedFeature
-            : NonSupportedFeature}
-          {intl.formatMessage(messages[`featureName-${feature.id}`])}
+      {app.featureIds.map((id) => (
+        <div key={`collapsible-${app.id}&${id}`} className="d-flex mb-1">
+          <SupportedFeature name={intl.formatMessage(messages[`featureName-${id}`])} />
         </div>
       ))}
     </Collapsible>
@@ -51,6 +38,5 @@ FeaturesList.propTypes = {
     id: PropTypes.string.isRequired,
     featureIds: PropTypes.array.isRequired,
   }).isRequired,
-  features: PropTypes.arrayOf(PropTypes.object).isRequired,
   intl: intlShape.isRequired,
 };

src/pages-and-resources/discussions/app-list/SupportedFeature.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Check } from '@edx/paragon/icons';
+
+const SupportedFeature = ({ name }) => (
+  <>
+    <span className="mr-3">
+      <Check id="check-icon" className="text-success-500" />
+    </span>
+    {name}
+  </>
+);
+
+SupportedFeature.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default SupportedFeature;

src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, queryByText } from '@testing-library/react';
+
+import SupportedFeature from './SupportedFeature';
+import messages from './messages';
+
+describe('SupportedFeature', () => {
+  const name = messages['featureName-basic-configuration'].defaultMessage;
+  let container;
+
+  beforeEach(() => {
+    const wrapper = render(
+      <SupportedFeature
+        name={name}
+      />,
+    );
+    container = wrapper.container;
+  });
+
+  test('displays a check icon ', () => {
+    expect(container.querySelector('svg')).toHaveAttribute('id', 'check-icon');
+  });
+
+  test('displays feature name', () => {
+    expect(queryByText(container, name)).toBeInTheDocument();
+  });
+});