Merge pull request #67 from Inist-CNRS/format_e2e

[RFR] Format e2e + display in edit view
Inist-CNRS · Feb 17, 2017 · ccffa9d · ccffa9d
2 parents 94a5d9e + 398c997
commit ccffa9d
Show file tree

Hide file tree

Showing 16 changed files with 301 additions and 173 deletions.
diff --git a/src/app/e2e/home_published.js b/src/app/e2e/home_published.js
@@ -6,9 +6,8 @@ import { clear, loadFixtures } from '../../common/tests/fixtures';
 import fixtures from './home_published.json';
 import { inputElementIsFocusable, elementIsClicked } from '../../common/tests/conditions';
 
-
 describe('Home page with published data', function homePublishedDataTests() {
-    this.timeout(10000);
+    this.timeout(100000);
     const DEFAULT_WAIT_TIMEOUT = 9000; // A bit less than mocha's timeout to get explicit errors from selenium
 
     before(async () => {
@@ -45,7 +44,7 @@ describe('Home page with published data', function homePublishedDataTests() {
         await driver.wait(until.elementLocated(By.css('.dataset')), DEFAULT_WAIT_TIMEOUT);
         const headers = await driver.findElements(By.css('.dataset table th'));
         const headersText = await Promise.all(headers.map(h => h.getText()));
-        expect(headersText).toEqual(['uri', 'fullname', 'email']);
+        expect(headersText).toEqual(['uri', 'fullname', 'email', 'best_friend_of']);
 
         const tds = await driver.findElements(By.css('.dataset table tbody td'));
         const tdsText = await Promise.all(tds.map(td => td.getText()));
@@ -70,11 +69,17 @@ describe('Home page with published data', function homePublishedDataTests() {
         const fullnameValue = await driver.findElement(By.css('.detail .property:nth-child(2) dd'));
         await driver.wait(until.elementTextIs(fullnameValue, 'PEREGRIN.TOOK'), DEFAULT_WAIT_TIMEOUT);
 
-        const mailLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
+        const mailLabel = await driver.findElement(By.css('.detail .property:nth-child(3) dt'));
         await driver.wait(until.elementTextIs(mailLabel, 'email\nhttp://uri4uri.net/vocab'), DEFAULT_WAIT_TIMEOUT);
 
-        const mailValue = await driver.findElement(By.css('.detail .property:last-child dd'));
+        const mailValue = await driver.findElement(By.css('.detail .property:nth-child(3) dd'));
         await driver.wait(until.elementTextIs(mailValue, '[email protected]'), DEFAULT_WAIT_TIMEOUT);
+
+        const bestFriendLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
+        await driver.wait(until.elementTextIs(bestFriendLabel, 'best_friend_of\nhttp://www.w3.org/ns/person'), DEFAULT_WAIT_TIMEOUT);
+
+        const bestFriendValue = await driver.findElement(By.css('.detail .property:last-child dd'));
+        await driver.wait(until.elementTextIs(bestFriendValue, 'MERIADOC.BRANDYBUCK'), DEFAULT_WAIT_TIMEOUT);
     });
 
     it('should allow to add field resource properties', async () => {

diff --git a/src/app/e2e/home_published.json b/src/app/e2e/home_published.json
@@ -32,6 +32,25 @@
         "transformers" : [ { "operation" : "COLUMN", "args" : [ { "name" : "column", "type" : "column", "value" : "author" } ] } ],
         "cover" : "dataset",
         "scheme" : "http://www.w3.org/ns/person"
+    }, {
+        "name" : "best_friend_of",
+        "label" : "Best Friend Of",
+        "transformers" : [ {
+            "operation" : "LINK",
+            "args" : [
+                { "name" : "reference", "type" : "column", "value" : "best_friend_of" },
+                { "name" : "identifier", "type" : "column", "value" : "id" }
+            ]
+        }],
+        "cover" : "collection",
+        "scheme" : "http://www.w3.org/ns/person",
+        "format": {
+            "name": "uri",
+            "args": {
+                "type": "column",
+                "value": "fullname"
+            }
+        }
     }],
     "publishedCharacteristic": [
         { "movie": "LOTR" , "author": "Peter Jackson" }
@@ -41,14 +60,16 @@
             "uri" : "1",
             "versions": [{
                 "fullname" : "PEREGRIN.TOOK",
-                "email" : "[email protected]"
+                "email" : "[email protected]",
+                "best_friend_of": "5"
             }]
         },
         {
             "uri" : "2",
             "versions": [{
                 "fullname" : "SAMSAGET.GAMGIE",
-                "email" : "[email protected]"
+                "email" : "[email protected]",
+                "best_friend_of": "4"
             }]
         },
         {
@@ -62,14 +83,16 @@
             "uri" : "4",
             "versions": [{
                 "fullname" : "FRODO.BAGGINS",
-                "email" : "[email protected]"
+                "email" : "[email protected]",
+                "best_friend_of": "2"
             }]
         },
         {
             "uri" : "5",
             "versions": [{
                 "fullname" : "MERIADOC.BRANDYBUCK",
-                "email" : "[email protected]"
+                "email" : "[email protected]",
+                "best_friend_of": "1"
             }]
         }
     ]

diff --git a/src/app/e2e/home_published_julia.js b/src/app/e2e/home_published_julia.js
@@ -75,11 +75,17 @@ describe('Home page with published data when logged as Julia', function homePubl
         const fullnameValue = await driver.findElement(By.css('.detail .property:nth-child(2) dd'));
         expect(await fullnameValue.getText()).toEqual('PEREGRIN.TOOK');
 
-        const mailLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
-        expect(await mailLabel.getText()).toEqual('email\nhttp://uri4uri.net/vocab');
+        const mailLabel = await driver.findElement(By.css('.detail .property:nth-child(3) dt'));
+        await driver.wait(until.elementTextIs(mailLabel, 'email\nhttp://uri4uri.net/vocab'), DEFAULT_WAIT_TIMEOUT);
 
-        const mailValue = await driver.findElement(By.css('.detail .property:last-child dd'));
-        expect(await mailValue.getText()).toEqual('[email protected]');
+        const mailValue = await driver.findElement(By.css('.detail .property:nth-child(3) dd'));
+        await driver.wait(until.elementTextIs(mailValue, '[email protected]'), DEFAULT_WAIT_TIMEOUT);
+
+        const bestFriendLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
+        await driver.wait(until.elementTextIs(bestFriendLabel, 'best_friend_of\nhttp://www.w3.org/ns/person'), DEFAULT_WAIT_TIMEOUT);
+
+        const bestFriendValue = await driver.findElement(By.css('.detail .property:last-child dd'));
+        await driver.wait(until.elementTextIs(bestFriendValue, 'MERIADOC.BRANDYBUCK'), DEFAULT_WAIT_TIMEOUT);
     });
 
     it('should allow to edit resource properties', async () => {
@@ -104,11 +110,17 @@ describe('Home page with published data when logged as Julia', function homePubl
         const fullnameValue = await driver.findElement(By.css('.detail .property:nth-child(2) dd'));
         expect(await fullnameValue.getText()).toEqual('PEREGRIN.TOOK');
 
-        const mailLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
-        expect(await mailLabel.getText()).toEqual('email\nhttp://uri4uri.net/vocab');
+        const mailLabel = await driver.findElement(By.css('.detail .property:nth-child(3) dt'));
+        await driver.wait(until.elementTextIs(mailLabel, 'email\nhttp://uri4uri.net/vocab'), DEFAULT_WAIT_TIMEOUT);
+
+        const mailValue = await driver.findElement(By.css('.detail .property:nth-child(3) dd'));
+        await driver.wait(until.elementTextIs(mailValue, '[email protected]'), DEFAULT_WAIT_TIMEOUT);
+
+        const bestFriendLabel = await driver.findElement(By.css('.detail .property:last-child dt'));
+        await driver.wait(until.elementTextIs(bestFriendLabel, 'best_friend_of\nhttp://www.w3.org/ns/person'), DEFAULT_WAIT_TIMEOUT);
 
-        const mailValue = await driver.findElement(By.css('.detail .property:last-child dd'));
-        expect(await mailValue.getText()).toEqual('[email protected]');
+        const bestFriendValue = await driver.findElement(By.css('.detail .property:last-child dd'));
+        await driver.wait(until.elementTextIs(bestFriendValue, 'MERIADOC.BRANDYBUCK'), DEFAULT_WAIT_TIMEOUT);
     });
 
     it('should go to hide page', async () => {

diff --git a/src/app/e2e/sample_csv.csv b/src/app/e2e/sample_csv.csv
@@ -1,6 +1,6 @@
-"id";"uid";"name";"mail";"movie";
-"1";"frodo.baggins";"BAGGINS";"[email protected]";"LOTR";
-"3";"bilbon.baggins";"BAGGINS";"[email protected]";"LOTR";
-"7";"samsaget.gamgie";"GAMGIE";"[email protected]";"LOTR";
-"8";"peregrin.took";"TOOK";"[email protected]";"LOTR";
-"9";"meriadoc.brandybuck";"BRANDYBUCK";"[email protected]";"LOTR";
+"id";"uid";"name";"mail";"movie"
+"1";"frodo.baggins";"BAGGINS";"[email protected]";"LOTR"
+"3";"bilbon.baggins";"BAGGINS";"[email protected]";"LOTR"
+"7";"samsaget.gamgie";"GAMGIE";"[email protected]";"LOTR"
+"8";"peregrin.took";"TOOK";"[email protected]";"LOTR"
+"9";"meriadoc.brandybuck";"BRANDYBUCK";"[email protected]";"LOTR"
diff --git a/src/app/js/characteristic/DatasetCharacteristicItem.js b/src/app/js/characteristic/DatasetCharacteristicItem.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Property from '../lib/Property';
+import { getFieldByName } from '../publication';
+import { field as fieldPropTypes, resource as resourcePropTypes } from '../propTypes';
+
+const DatasetCharacteristicItemComponent = ({ resource, field }) => (
+    <Property resource={resource} field={field} />
+);
+
+DatasetCharacteristicItemComponent.propTypes = {
+    resource: resourcePropTypes.isRequired,
+    field: fieldPropTypes.isRequired,
+};
+
+const mapStateToProps = (state, { characteristic: { name, scheme, value } }) => ({
+    field: getFieldByName(state, name),
+    resource: { name, scheme, [name]: value },
+});
+
+export default connect(mapStateToProps)(DatasetCharacteristicItemComponent);
diff --git a/src/app/js/characteristic/DatasetCharacteristicsView.js b/src/app/js/characteristic/DatasetCharacteristicsView.js
@@ -18,7 +18,7 @@ import {
     toggleCharacteristicsEdition as toggleCharacteristicsEditionAction,
 } from './';
 
-import Property from '../lib/Property';
+import DatasetCharacteristicItem from './DatasetCharacteristicItem';
 
 const styles = {
     container: {
@@ -38,8 +38,8 @@ const DatasetCharacteristics = ({
             title={polyglot.t('dataset_characteristics')}
         />
         <CardText style={styles.container}>
-            {characteristics.map(({ name, value, scheme }) => (
-                <Property name={name} value={value} scheme={scheme} />
+            {characteristics.map(characteristic => (
+                <DatasetCharacteristicItem characteristic={characteristic} />
             ))}
         </CardText>
         {canEdit &&

diff --git a/src/app/js/dataset/DefaultColumn.js b/src/app/js/dataset/DefaultColumn.js
@@ -1,62 +1,23 @@
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import compose from 'recompose/compose';
-import withHandlers from 'recompose/withHandlers';
-import withState from 'recompose/withState';
+import React, { PropTypes } from 'react';
 
 import { TableRowColumn } from 'material-ui/Table';
 import Format from '../formats/Format';
-import fetchByUri from '../lib/fetchByUri';
-import { getToken } from '../user';
 import { field as fieldPropTypes } from '../propTypes';
 
-export class DatasetColumnComponent extends Component {
-    componentWillMount() {
-        const { column, resource } = this.props;
-        const linkTransformer = column.transformers && column.transformers.find(t => t.operation === 'LINK');
-        if (linkTransformer) {
-            const uri = resource[linkTransformer.args.find(a => a.name === 'reference').value];
-            this.props.fetchLinkedResource(uri);
-        }
-    }
-
-    render() {
-        const { column, columns, linkedResource, resource } = this.props;
-
-        return (
-            <TableRowColumn className={`dataset-${column.name}`}>
-                <Format
-                    field={column}
-                    fields={columns}
-                    linkedResource={linkedResource}
-                    resource={resource}
-                />
-            </TableRowColumn>
-        );
-    }
-}
-
-DatasetColumnComponent.propTypes = {
+const DatasetColumn = ({ column, columns, resource }) => (
+    <TableRowColumn className={`dataset-${column.name}`}>
+        <Format
+            field={column}
+            fields={columns}
+            resource={resource}
+        />
+    </TableRowColumn>
+);
+
+DatasetColumn.propTypes = {
     column: fieldPropTypes.isRequired,
     columns: PropTypes.arrayOf(fieldPropTypes).isRequired,
-    fetchLinkedResource: PropTypes.func.isRequired,
-    linkedResource: PropTypes.object, // eslint-disable-line
     resource: PropTypes.object.isRequired, // eslint-disable-line
 };
 
-const mapStateToProps = state => ({
-    token: getToken(state),
-});
-
-export default compose(
-    connect(mapStateToProps),
-    withState('linkedResource', 'setLinkedResource', null),
-    withHandlers({
-        fetchLinkedResource: ({ setLinkedResource, token }) => uri =>
-            fetchByUri(uri, token)
-                .then((linkedResource) => {
-                    setLinkedResource(linkedResource);
-                }),
-    }),
-)(DatasetColumnComponent);
-
+export default DatasetColumn;
diff --git a/src/app/js/dataset/DefaultColumn.spec.js b/src/app/js/dataset/DefaultColumn.spec.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import expect, { createSpy } from 'expect';
+import expect from 'expect';
 import { shallow } from 'enzyme';
 import { TableRowColumn } from 'material-ui/Table';
 
-import { DatasetColumnComponent as DefaultColumn } from './DefaultColumn';
+import DefaultColumn from './DefaultColumn';
 import Format from '../formats/Format';
 
 describe('<DefaultColumn />', () => {
@@ -15,42 +15,11 @@ describe('<DefaultColumn />', () => {
 
     const resource = {
         a_name: 'a_value',
-        reference_value: 'referenced_resource',
     };
 
-    const fetchLinkedResource = createSpy();
-
-
-    it('calls fetchLinkedResource on mount if column has a LINK transformer', () => {
-        const linkedColumn = {
-            name: 'linked',
-            label: 'Linked',
-            transformers: [
-                {
-                    operation: 'LINK',
-                    args: [
-                        { name: 'reference', value: 'reference_value' },
-                        { name: 'identifier', value: 'identifier_value' },
-                    ],
-                },
-            ],
-        };
-        shallow(<DefaultColumn
-            column={linkedColumn}
-            columns={columns.concat(linkedColumn)}
-            resource={resource}
-            fetchLinkedResource={fetchLinkedResource}
-        />);
-
-        expect(fetchLinkedResource).toHaveBeenCalledWith('referenced_resource');
-    });
-
-    const linkedResource = { linked: true };
     const wrapper = shallow(<DefaultColumn
         column={column}
         columns={columns}
-        fetchLinkedResource={fetchLinkedResource}
-        linkedResource={linkedResource}
         resource={resource}
     />);
 
@@ -60,14 +29,13 @@ describe('<DefaultColumn />', () => {
         expect(element.prop('className')).toEqual('dataset-a_name');
     });
 
-    it('renders a Format with correct props when no linkedResource is supplied', () => {
+    it('renders a Format with correct props', () => {
         const element = wrapper.find(Format);
 
         expect(element.props()).toEqual({
             field: column,
             fields: columns,
             resource,
-            linkedResource,
         });
     });
 });